Web Design & Development Article

6 Steps To Improve HTML Images for Users and Developers


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:

Read This Article

A quote within 24 hours

Contact Us