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).
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.