How are you handling responsive images in modern HTML/CSS workflows?

[furtip098]

Hi all,
I ran into an interesting challenge this morning while working on a multilingual greeting card web app: we have assets like immagini buongiorno frizzante that need to be displayed both responsively and accessibly across desktop and mobile views.

I’ve been experimenting with the <picture> element and srcset to serve different resolutions depending on the viewport, and so far it seems to work well:

<picture>
  <source media="(min-width: 800px)" srcset="images/buongiorno-frizzante-large.webp 1x, images/buongiorno-frizzante-large@2x.webp 2x">
  <source media="(max-width: 799px)" srcset="images/buongiorno-frizzante-small.webp 1x, images/buongiorno-frizzante-small@2x.webp 2x">
  <img src="images/buongiorno-frizzante-small.webp" alt="Buongiorno Frizzante graphic — cheerful morning greeting">
</picture>

A couple of questions I’m hoping the community can help with:

• Performance: Are there recommended tools or build pipeline steps you use to automatically generate optimized variants of images like these (WebP/AVIF + fallback JPG/PNG)?

• Accessibility: For creative imagery that’s basically a “good morning” greeting, do you prefer a descriptive alt text like above or something more minimal?

• CSS handling: If you’re handling similar assets with frameworks (Tailwind, Bootstrap, etc.), has anyone found good patterns for responsive spacing/scaling without hard-coding sizes?

For reference, here’s a simple hosted example showing how I currently serve and scale these — I’d appreciate any suggestions on improving the approach: https://example.com/immagini-buongiorno-frizzante-demo

Thanks!

[andersonwilloz88]

Your approach with picture and srcset is solid and widely used. That is the right direction for responsive images today.

For performance, many teams use build tools like ImageMagick or Sharp in the build process to generate WebP and AVIF versions automatically. Most modern bundlers support this through plugins, so images stay optimized without manual work.

For accessibility, descriptive alt text is usually better when the image carries meaning, like a greeting. If the text in the image matters to the user, describe it clearly. If it is purely decorative, an empty alt attribute is fine.

On the CSS side, letting the image be fluid works best. Use max width one hundred percent and height auto. Utility frameworks handle this well without fixed sizes. Container based sizing usually scales better than viewport based rules.

[liciof]

I think that it’s better to insert the dimension of the images in the “source” and the “img” tag, to prevent the CLS (cumulative layout shift)

[fconijn]

With the ever increasing band width of cellular networks, conditional downloading of images is getting less and less important. Unless I’m making a site with huge numbers of unique visitors or it concerns a very large image, I’ll just optimize an image for the web and leave it at that. So, I’m generally using one-size-fits-all images. Just do a rendering speed benchmark and see for yourself that the differences when using conditional downloads are minute to almost non-existent.

[maishamoni89000]

For the build pipeline, I’ve had good results using Sharp in a Node script to auto-generate the AVIF and WebP variants. It’s much faster than doing it through a GUI. Regarding the CSS spacing, I usually avoid hard-coding by using aspect-ratio in the CSS. It prevents layout shift while the image loads, which is huge for Core Web Vitals. If you’re using Bootstrap, the .img-fluid class is okay, but combining it with a container that has a clamped width based on rem units tends to scale more naturally across weird viewport sizes.