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. developer.mozilla.org/en-US/docs/L...
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.
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).
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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.
developer.mozilla.org/en-US/docs/L...
Thank you very much.
I've used
pictureelement 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,pictureelement 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?
background-image:url(img/myimage.jpg);Can images added via this method be optimized using
pictureorsrcset, or do you just have to optimize them by resizing and compressing? thxFor this method, my primary concern is accessibility. Without the
alttag and any HTML, a simpledivwithbackground-imagedoesn'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).