Ecommerce brands could potentially reduce returns by up to a third—saving billions of dollars—by providing more accurate product images according to an independent survey funded by Cloudinary. This survey reminded me of a conversation with Colin Bendell that I keep thinking about. Between the survey and that conversation, I’ve changed my mind about some of the image approaches I’ve advocated in the past and have new recommendations for ecommerce sites.

I spent a lot of time trying to understand how this works and how we can do it better with modern CSS like :has, size container queries, and style queries. In this article, I will walk you through my thought process and share my findings along the way.

Explore modern project architecture, theming, responsive layouts, and component design. Learn to improve code organization, dig into layout techniques, and review real-world, context-aware components that use cutting-edge CSS techniques.

There's only one best practice that I would recommend when using container queries — that's to place the container in a parent element. The container should not be the element that creates a grid; it has to be the child item.

It seems like "Your AI pair programmer" doesn't care about accessibility. Let's see what could happen if you accept the suggestions.