In this article, learn how to make HTML images better for users with responsive sizes and modern formats without making your life as a developer much harder.
TL;DR
<img>with justsrc: Easy to implement; good developer experience; no responsive images; no modern formats with fallback; likely uses more bandwidth; worst user experience<img>withsrcsetattribute: Moderate work; ok developer experience; supports responsive images for less bandwidth; no modern formats with fallbacks; leaves potential savings on the table; ok user experience<picture>with multiple<source>andsrcset: Supports responsive images and modern formats with fallbacks; would rather squirt jalapeno juice in my eyes<img>with justsrcwith Image Manager: Easy to implement and automatically sends images in the best size and format; win-win for developers and users!!!
Let’s say we have just a basic website that is loading an image from my domain. The code might look like this: