# How we improved image download sizes on Medium with just four characters

DevFeed: [How we improved image download sizes on Medium with just four characters](<https://devfeed.tech/articles/how-we-improved-image-download-sizes-on-medium-with-just-four-characters-20321.md>)

Original publisher: [Read original article](<https://medium.engineering/how-we-improved-image-download-sizes-on-medium-with-just-four-characters-9621b0ebb291?source=rss----2817475205d3---4>)

Author: Scott Batson

Published: 2026-05-18T15:29:29Z

Content type: article

Language: en

Sources: [Medium](<https://devfeed.tech/sources/medium.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Image](<https://devfeed.tech/topics/image.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Server-side rendering](<https://devfeed.tech/topics/server-side-rendering.md>), [Angular](<https://devfeed.tech/topics/angular.md>), [Ember](<https://devfeed.tech/topics/ember.md>), [Single-page application (SPA)](<https://devfeed.tech/topics/spa.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [html](<https://devfeed.tech/tags/html.md>), [image](<https://devfeed.tech/tags/image.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [programming](<https://devfeed.tech/tags/programming.md>), [render](<https://devfeed.tech/tags/render.md>), [server-side-rendering](<https://devfeed.tech/tags/server-side-rendering.md>), [technology](<https://devfeed.tech/tags/technology.md>), [time](<https://devfeed.tech/tags/time.md>), [web-development](<https://devfeed.tech/tags/web-development.md>)

## AI overview

The article explains how modern HTML image features, including <picture> and srcset, can select images based on browser capabilities, screen dimensions, file types, layout, and color-scheme preferences. It contrasts these features with older JavaScript-based approaches to serving optimized images.

## Source excerpt

HTML images just got better, with the subtlest change to your codebasePhoto by Adi Suyatno I know what you're thinking. Scott, I landed on Medium on a small but not mobile-small display and the download chunk related to images in my home feed was like 7% smaller. First of all, thank you for noticing. Second, what if I told you that you too can improve your total asset download size by adding just four characters to your code base? Sounds too good to be true, right? Well, I'm here to tell you, it's true... after I explain how we got here. The history of images on the web As a web developer, you've probably spent a lot of time thinking about and fighting with images. According to the HTTP Archive, even in today's modern landscape of "JavaScript everywhere" the majority of most website's transfer size is images. We've moved away from the "hero image on every page" ethos, but still we're an image-heavy internet. When I was getting my start in web development in 2010ish, we were still adapting to a "mobile-friendly" world. The majority of the web was built on WordPress. We didn't have a way back then to dynamically load an optimized image. 3G connections were the primary speed in the US for viewing the internet, so the practice was images "need to work on mobile" regardless of the user's device. For those of us writing Angular and Ember (because React wasn't a thing yet), you had to legitimately render the correct src based on context you could get from JavaScript. {{#if browserSmal}} <img src="image-high-res.jpg" /> {{else}} <img src="image-med-res.jpg" /> {{/if}} This is back when we wrote handlebars for our markup and the web was filling up with SPAs with no server-side-rendering. We did it this way because HTML lacked a way for specifying how we wanted to optimize images. Then in 2012, RICG introduced 2 new specs for image optimization, with 2 different use cases: <picture> elements and srcset. Picture Elements I love the <picture> element. It gives us a lot of control