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 just src: Easy to implement; good developer experience; no responsive images; no modern formats with fallback; likely uses more bandwidth; worst user experience
<img> with srcset attribute: 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> and srcset: Supports responsive images and modern formats with fallbacks; would rather squirt jalapeno juice in my eyes
<img> with just src with 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: