Published

My default browser (Vivaldi, by the way) is configured to search my bookmarks when I type into the address bar. Today I mis-typed youtube.com and it suggested a blog post from 2008 about image optimization originally published on the now defunct YUI Blog. Curious to see just how much of the advice would still apply today, I loaded the bookmark⁠⁠⁠⁠…

⁠⁠⁠⁠…and was redirected to the YUI Library which was discontinued in 2014. I suppose that’s that; end of post.

But I was still curious so I loaded the URL into The Wayback Machine and navigated a bit until I found the 4-post series on Image Optimization. Let’s go through it, shall we?

The File Formats (or “how do you pronounce GIF anyway?”)

At the time the series was written GIF and JPEG were the most common (and best supported) image file formats. JPEGs were —  and still are — used for photographs while GIFs were used for pretty much everything else (especially if you needed 1-bit transparency or animations). PNG was around but its variable image transparency required the use of the use of Microsoft’s proprietary AlphaImageLoader Filter in Internet Explorer 6; it worked fine in other browsers. The many niggling differences in Microsoft’s browser forced developers to build fixes like IE PNG Fix and CSS3 PIE.

The article doesn’t mention SVGs. I can’t remember when websites started using them in force but if the Wikipedia article is accurate I’d guess that browser support was still spotty at the time. I rarely use PNG images anymore because there’s usually an SVG equivalent which is often smaller in size and can be enlarged without loss in quality.

Similarly, GIFs have pretty much gone the way of the dinosaur; the advent of high-speed internet connections has replaced animated GIFs with video.

Will JPEGs be heading in the same direction? WEBP is now supported across all major web browsers and usually (but not always) results in a smaller file size compared to its JPEG counter-parts. We also have newer formats like AVIF.

Strip it, crush it, shake it, smush it (🎶who do you think you are🎶)

The third post in the series provides free tools to reduce image file size. This is still good advice and is usually part of a website build process.

We’ve also proceeded further with the advent of Responsive Images; srcset and <picture> allow us to display different image files depending on the viewport width and device capabilities.

Fun fact: the author of this series also co-created smush.it.

Based or Progressive

This is something I vaguely remember in my early days of learning web development. There are 2 types of JPEG files: Baseline and Progressive. The difference is how the file is displayed as it is loaded: Baseline JPEGs are displayed line-by-line from top to bottom whereas Progressive start blurry and become clearer.

I don’t know what the current state is. I remember preferring Progressive JPEGs back in the day of dial-up and I don’t know when it fell off my radar. There are probably better ways to optimize your images today.

Wrap up

I’ve deleted the bookmark from my browser. It’s fun to see how far the field has come but there isn’t much there worth keeping.