What's the Best Way To Optimize Your Images?

December 9th, 2016

Today, I answer a reader's comment about how to optimize or display images and the advantages and disadvantage of each technique.

Recently, a reader asked me a question regarding the best ways to display or optimize images based on a couple of articles I wrote:

I've seen another post of yours where you recommend to "Dynamically Resize Your ASP.NET MVC Images". I've also seen people recommending to use Data URIs. Here of course you explained about CSS Sprites.
Out of the three what do you think would be the better way to go?
Thanks!

Since all are based on using images on your site, we'll go through the benefits of when to use and when NOT to use each technique.

Resize Your Images

When I mentioned how to dynamically resize images, I had an issue where each post had a huge image, usually around 640-ish x 480-ish.

On my home page, I had smaller images representing the posts.

After checking my site with GTMetrix, one of my big issues was downloading large images to the client and having the browser resize the images down to smaller thumbnail images.

Bottom-line: They were downloading to the browser and then resized to 250-ish x 250-ish. If they're bigger images, it takes more time to download them.

Essentially, to optimize the images, they should be resized to their proper dimensions on the page AND THEN sent to the client instead of having the browser resize them.

Advantage:

Disadvantage:

Data URIs

Data URIs are used when you don't want to make any additional requests to retrieve images from your (or any another) server.

An example of a Data URI is:

<img width="16" height="16" alt="star" 
     src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />

This technique works great for the App_offline.htm in IIS.

If you want to take your site down for maintenance, a great way to do this is to create an App_Offline.htm page. When IIS sees this page, ANY request made to IIS will be diverted to App_Offline.htm.

Of course, with any resource request made to IIS within this page (like images, CSS, or JavaScript), it will not load the resource. This is where these Data URIs come in handy.

(NOTE: As a sidenote, your CSS and JavaScript would be embedded into the page using the style and script tag and not as external resources).

To make a Data URI, you could use an online tool like Duri.Me or find one online by searching for "Data URI Generator."

Advantage:

Disadvantage:

CSS Sprites

CSS Sprites is another optimization technique to minimize requests to the server.

The idea is to combine a number of similar-sized images into one large image and then using CSS to "extract" those images to the page.

So instead of making 15 requests to the server for 15 images, you create a large sprite image and download that one image and use CSS to place them on the page.

It's strictly an optimization technique to make your site load faster.

There are also sprite builders out there such as SpriteCow, Stitches, and SpritePad.

Advantage:

Disadvantage:

Conclusion

To answer my reader's question, it would depend on what's your end-goal.

If you are looking to optimize your site, CSS Sprites technique for a small group of images would be ideal.

If you need to repurpose your images for another format, I would recommend the "dynamically resizing your images" technique.

While it can be done, it's a rare case to use Data URIs nowadays unless you need to populate an app_offline.htm file for later.

As you can see on DanylkoWeb, I dynamically resize my images on my home page and use CSS Sprites through the social icon images. I, personally, don't have a need for Data URIs.

I hope this explained the different types and how each one can be used on web pages.

Did this make sense? Did I miss an advantage or disadvantage? Post your comments below.