What's the Best Way To Optimize Your Images?

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:

• Repurpose your content making the images smaller provides faster download times; Resize them by providing thumbnails or smaller versions of your images.

Disadvantage:

• More Storage; not only do you have to save the full images, but you have to convert and save all of your smaller images like thumbnails or summary images (like on my home page).

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:

• No additional HTTP requests are required; Image is already available in the URI.

Disadvantage:

• HTML file can get larger than normal depending on the size of each image URI.

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:

• Provides faster rendering by using fewer requests while using one resource.

Disadvantage:

• It can become tedious if you have more images you want to add later; The example of social icons I subscribe to does not change often so I made them sprites of the same size.

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.