Hello everyone,
We have assets like the immagini buongiorno frizzante that need to be displayed both timely and accessibly across both desktop and mobile views, so this night while working on a multicultural greeting cards online application, I ran into an interesting challenge.
I’ve been experimenting with the element and srcset to serve different resolutions depending on the viewport, and so far it seems to work well:
A couple of questions that I’m hoping the society will answer:
- Performance: Do you use any tools or build-pipelines to automatically create optimized versions of images ( WebP/AVIF + fallback JPG/PNG)?
- Accessibility: Do you prefer a descriptive alt text, like the one above, or something more minimal for creative imagery that is basically a” good morning” greeting?
- CSS management: If you use frameworks like TAILWORD, BTS, etc. to handle similar assets. Has anyone discovered effective designs for flexible spacing and scaling without having to manually code the size?
Here’s a quick hosted example to illustrate how I currently serve and scale these. I’d appreciate any suggestions on how to improve the method: https ://example .com/immagini-buongiorno-frizzante-demo.
Thanks!
Your use of the image and srcset is effective and widespread. That is the current trend for flexible images.
Many clubs use create devices like ImageMagick or Sharp to quickly generate WebP and AVIF versions during the build process for efficiency purposes. The majority of current bundlers offer plugin support, ensuring that images remain tailored without manual intervention.
When the photo has a meaning, like a handshake, descriptive alt text is typically preferable for convenience. If the words in the picture is important to the person, clearly explain it. An clear alt attribute is acceptable if it’s just for ornamental purposes.
On the CSS front, it works best to leave the picture substance. Use a maximum elevation of one hundred percent and a maximum length of one. This is well handled by power systems without fixed sizes. Generally speaking, box based sizing scales better than screen based rules.
To avoid the CLS ( cumulative layout shift ), I believe it is preferable to put the dimension of the images in the” source” and “img” tags.
2 Likes
Conditional downloading of images is becoming less and less significant as the band width of mobile networks grows ever wider. I’ll just enhance an image for the internet and left it alone until I create a site with a lot of unique visitors or a sizable image. I typically use one-size-fits-all pictures, so that’s why. Simply run a benchmark of the rendering speed and see for yourself how little the differences between using conditional downloads and other methods are second to virtually nonexistent.
I’ve had great outcomes using Sharp in a Node text to automatically generate the AVIF and WebP varieties for the develop network. Many quicker than using a GUI to do it. I typically avoid hard-coding by using aspect-ratio in the CSS to determine the placement. This is very important for Core Web Vitals because it prevents design shift when the image loads. The .img-fluid group is acceptable if you’re using Css, but combining it with a box with a clamped diameter based on rem units tends to level more naturally across strange viewport sizes.