re: Optimizing images for the web - an in-depth guide VIEW POST


Interesting list!

Do you know of an image compressor that also converts .jpg into webp? You can also install ImageOptim on your computer and compress images before uploading them.

I'm also curious why you only include the picture element and not img srcset? From my reading of the MDN spec, picture is for the art direction problem, and img srcset is for image resolutions.


Thank you very much.

I've used picture element because it offers me more control over which image is being loaded. I guess I prefer explicitly telling the browser what to load. I've found it to work great with both art direction and performance. Also, picture element allowed me to support WebP with a really nice fallback.

I think it's just a matter of use-cases and personal preference.


What is your thought about adding images via background in CSS?


Can images added via this method be optimized using picture or srcset, or do you just have to optimize them by resizing and compressing? thx

For this method, my primary concern is accessibility. Without the alt tag and any HTML, a simple div with background-image doesn't have good accessibility.

Another issue is that you'd have to use an image aspect ratio to calculate the padding (spacing) needed for the background image which may lead to code bloat if you have lots of images with various aspect ratios.

As for optimization, we need to optimize them by compression and resizing (if needed).

code of conduct - report abuse