Responsive layout work made one image problem obvious very quickly. Making an image scale with CSS was useful, but it did not mean the right image had been sent to the device in the first place.
A large desktop image could be made to fit a small mobile screen with max-width: 100%. Visually, that helped. Technically, the mobile device might still be downloading an image far larger than it needed. That felt wrong, especially when mobile connections were slower and less reliable.
At the time, the browser did not have the kind of responsive image tools developers would have wanted. That left us making practical compromises with the tools available.
Fluid Images Solved Only Part Of The Problem
The basic fluid image rule was one of the first things I reached for in responsive layouts. It stopped images from overflowing their containers and made pages behave more naturally across different widths.
img {
max-width: 100%;
height: auto;
}That rule was useful, but it was mostly a layout fix. It did not choose a smaller file for a smaller screen. It did not change the crop. It did not know whether the image was decorative, editorial or essential to understanding the page.
File Size Still Mattered
This is where performance became part of the design conversation. If a page used large images everywhere, responsive CSS could make the layout look acceptable while still asking too much from the visitor’s connection. The page might technically adapt, but it could still feel slow.
I started thinking more carefully about image preparation. Could the image be compressed better? Did it need to be that large? Was the same image being reused in a small thumbnail and a large feature area? Those questions were not glamorous, but they affected the real experience.
Art Direction Was Another Problem
Some images also needed different crops at different sizes. A wide banner might work well on desktop but lose its subject on mobile when scaled down. Cropping the image differently could make the smaller layout much clearer, but the available tools made that awkward.
The lesson was that making something fit is not the same as making it appropriate. A responsive website needs images that work visually, technically and practically for the device receiving them.