"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:"
"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"
Multilingual greeting-card assets require responsive, accessible delivery across desktop and mobile. The <picture> element with srcset can serve multiple formats and resolutions to match viewport and device capabilities. Build pipelines should produce optimized variants (AVIF, WebP) plus JPG/PNG fallbacks and perform compression, resizing, and metadata stripping. Choose descriptive alt attributes for images that convey greeting content and use empty alt attributes for images that are purely decorative. Use CSS utilities such as aspect-ratio, object-fit, responsive spacing classes, container queries, and relative units to avoid hard-coded sizes. Recommended tools include sharp, libvips, imagemin, and Squoosh with CI integration for automation.
Read at SitePoint Forums | Web Development & Design Community
Unable to calculate read time
Collection
[
|
...
]