Year 2022: the year of Container Queries
Also 2022: most people still don't understand srcset-w/sizes
How will they mix? They currently can't, as @SaraSoueidan explained: https://www.sarasoueidan.com/blog/component-level-art-direction-with-container-queries-and-picture/
Any other resource on the topic?
Responsive images on Shopify with Liquid
We launched the and filters to help with generating responsive images. Before we dive in, what do these filters do? What are the differences between…
we hope that our observations and support will help bring JPEG XL support to the web for all chrome users
— @colinbendell from Shopify
https://bugs.chromium.org/p/chromium/issues/detail?id=1178058#c79
YES, please! 🙏
How do you deal with images that need to have a fluid width but fixed height?
I tend to start from the lowest width/height ratio and increase, knowing larger images will have hidden parts above and below… 😔
Anything better?
I accidentally moved my hero image onto Cloudinary (who I also adore!). But, a less-optimised image served from the same origin is always faster than a more-optimised image from a third party. Self-host your static assets! csswizardry.com/2019/05/self-host-your-static-assets/
True!
But most images are currently not or badly optimized. 😔
They would benefit a lot from an image CDN: resize, compression, modern formats, etc.
Media chapter of the 2022 Web Almanac by HTTP Archive
I had the honor to review the Media chapter of the 2022 edition of The Web Almanac by HTTP Archive, "a comprehensive report on the state of the web,…
HTTP Archive