> When I keep them in their native P3 color space, each image is between 50kb and 150kb. With 22 individual images, I’d be sending almost two megabytes of assets, which feels like way too much for decorative images like this!
Love to hear the consideration for folks. I feel like I download twice that in javascript blobs from like 12 analytics companies and ad videos every time I visit e.g. CNN or TechCrunch
It's life or death for some people. I know very poor people on plans that only have a few GBs of transfer and they're burnt out within 3 days of the start of the month. Then they can't use Google Maps or email to find jobs, healthcare, food pantries etc.
I regularly see sites with multi-hundred MB homepages with autoplay videos etc on mobile, where it is harder to uBlock your way out of all the garbage.
I'm confused by this. Colorspace is metadata, not bit depth. It's a mapping. 8 bit P3 will be exactly the same size was an 8 bit sRGB, except for the additional some hundred bytes of metadata describing the mapping (since missing metadata is assumed sRGB).
For example, you can "convert" an sRGB png to P3 (different colors result, but same bits) by doing nothing but tacking on the icc profile metadata from a P3 image.
I added a note about this a bit later in the post, but the issue was that all of the optimization services I use strip out the color profile, and I don’t know enough about webp or avif to re-add it. Other than re-saving it, which increases the size since it decompresses everything.
If only more people were considerate about the amount of bandwidth their websites serve. I just had a conversation where our system generates a CSV and I feel that we should be zipping the file, but I was overridden with a "people today can download large files easily today" and the "not having to unzip is worth it" reasons.
Working on mobile it gets even crazier because everything* is shipped to everyone.
"Oh we just need to include this lib for that one tiny thing, who cares."
Turns into
"we're using 7TB of mobile storage around the world for this one tiny feature"
or
"Our app is responsible for ~472TB of mobile storage being used."
(actual numbers I just calculated btw)
*: Some stuff is optimized out, not everything but essentially anything needed to run any part of the app on a users device is included, even if they just need to do one specific thing and nothing else.
It appears that you’ve ticked the “Reduce motion” option in your system settings. As a result, certain whimsical features on this page have been disabled.”
> It appears that you’ve ticked the “Reduce motion” option in your system settings. As a result, certain whimsical features on this page have been disabled.
I think this is a Windows setting I enabled to get rid of annoying window animations, didn't know it could affect web pages, and I'm not sure I want it to :D
Well it's nice actually, but in this specific case I think I'd like to override it.
Depends on how the dev wants to implement it, usually when I'm throwing a small animation on a site I'll silently respect the preference and skip the animation without an override option, but for a site like this I'd expect an override switch.
Josh’s first course, CSS for JS Devs was how I finally “learned” CSS after 15 years of working with it.
It’s not just for JS devs of course, I started with C and PHP nearly 20 years ago now, and I highly recommend it to anyone looking to understand things like “why isn’t the z-index doing anything?!?!” and the like.
Yeah, +1. I started as a backend dev and for a long time, I knew just enough CSS to be dangerous. After taking that course, I feel pretty confident. Josh is quite good at balancing aesthetics, standards, and pragmatism. He explains the mechanics of CSS in a way that facilitates developing understanding and intuition, giving you an ability to reason about solving design challenges instead of just trying things and crossing your fingers.
Idk if there's just something wrong with me, but I feel like every time someone says "look how much better P3 looks" I just think it looks over-saturated and the more muted look of the srgb just looks so much better to me.
I did Josh's React class and it was incredibly well done, I'm really looking forward to doing his animations class when it's available, I will definitely be registering as soon as it's in open beta.
Readit News
Love to hear the consideration for folks. I feel like I download twice that in javascript blobs from like 12 analytics companies and ad videos every time I visit e.g. CNN or TechCrunch
I regularly see sites with multi-hundred MB homepages with autoplay videos etc on mobile, where it is harder to uBlock your way out of all the garbage.
For example, you can "convert" an sRGB png to P3 (different colors result, but same bits) by doing nothing but tacking on the icc profile metadata from a P3 image.
"Oh we just need to include this lib for that one tiny thing, who cares."
Turns into
"we're using 7TB of mobile storage around the world for this one tiny feature"
or
"Our app is responsible for ~472TB of mobile storage being used."
(actual numbers I just calculated btw)
*: Some stuff is optimized out, not everything but essentially anything needed to run any part of the app on a users device is included, even if they just need to do one specific thing and nothing else.
It appears that you’ve ticked the “Reduce motion” option in your system settings. As a result, certain whimsical features on this page have been disabled.”
Thank you.
I think this is a Windows setting I enabled to get rid of annoying window animations, didn't know it could affect web pages, and I'm not sure I want it to :D
Well it's nice actually, but in this specific case I think I'd like to override it.
Depends on how the dev wants to implement it, usually when I'm throwing a small animation on a site I'll silently respect the preference and skip the animation without an override option, but for a site like this I'd expect an override switch.
It’s not just for JS devs of course, I started with C and PHP nearly 20 years ago now, and I highly recommend it to anyone looking to understand things like “why isn’t the z-index doing anything?!?!” and the like.
Deleted Comment