How to Optimize Image Delivery Efficiently and Cost Effectively

Part one of this series examined mistakes you may be making when handling images, and the steps you can take to remedy them. In this article, you’ll learn about common problems associated with delivering images, and what you can do to optimize network usage.

Once your website’s content is in place, your goal is to make sure that all your website’s images are delivered as fast as possible to your visitors. But the approaches outlined below often prevent you from achieving the best performance. Take a look at some of these bad practices and what you can do to fix them:

Delivering Images Straight From Your Servers

Many developers host images on their own servers, which are the same ones that host the website. As a result the server strains to deliver images instead of unique web content. You should consider leveraging content delivery networks (CDNs) to address this issue.

How to fix: CDNs are simple to use services that serve your website images much faster than how your website hosting service can deliver them. CDNs are based on a large number of worldwide servers, or “edges.” When visitors visit your website, they are automatically routed to the nearest edge location, so images are delivered with the best possible performance with a much reduced latency.

CDNs are priced by the required bandwidth and are slightly costlier than your hosting provider’s bandwidth, but the CDN prices today are quite affordable and well worth it. There are many CDN providers available today. Amazon’s CloudFront or MaxCDN may be a good starting point.

In-House Servers	Content Delivery Networks (CDNs)

Delivering Static Icons One by One

Other than photos and thumbnails, your website most likely includes many icons and auxiliary images, such as the logos, arrows, stars, signs and marks, which are used to give your site a unique look and feel.

You’d be surprised at just how many tiny images your website can accumulate. Embedding icons and auxiliary images as-is on your website can cause processing delays while the server manages so many download requests.

How to fix: A simple solution for this problem is to utilize a CSS Sprite, a single image that contains all your smaller icons. Your web page is modified to download this single image from your server and the page’s HTML uses alternative CSS class names to point to the smaller images within the larger one.

Sprite used on Google’s search results page

Using Images When CSS3 Can be Used

When cutting a website’s design into HTML components, you may keep buttons as images. Since older browsers did not support adding shadows, rounded corners and web fonts using CSS, you may be accustomed to using small image snippets to implement these elements using an image-based solution.

Unfortunately, this solution requires a huge number of images that ultimately hurts the visitor’s browsing experience and is very difficult to manage, increasing development time and costs. And even though modern browsers natively support shadows, rounded corners and unique fonts using simple CSS directives, many websites continue using images to implement these.

How to fix: Make sure you use CSS3 whenever possible. If your graphics designer is responsible for the markup, make sure you ask for CSS3-based elements where it makes sense. If you want to support older versions of Internet Explorer, you should either make sure your markup gracefully degrades to a functioning design (though probably looking less than perfect), or alternatively employ a CSS3 emulation solution, such as CSS3 PIE.

Incorrect Image Cache Settings

Your website’s image files rarely change. HTTP caching directives allows such images to be cached by your visitors’ browsers and any other server along the way (CDN, proxies, etc.). Once an image is cached, the locally cached copy will be used instead of having to download it again and again on subsequent visits to your website. Correct cache settings improve the user experience by reducing page load time, while saving you costs by significantly reducing your website’s bandwidth.

Unfortunately, there are many times when caching isn’t used correctly. The most common case results from an unnecessary concern that a lengthy cache settings will mean that if images are updated, your website visitors will keep seeing old images instead of your new ones.

How to fix: This seemingly problematic scenario can be easily avoided by adding a fingerprint (md5, timestamp, etc.) to your images URLs. By adding a fingerprint to your image URLs you make sure that when an image changes, so does its URL. When the URL changes, the browser is forced to re-fetch the image. Most modern web development platforms automatically add such a fingerprint to all your images, solving this problem at its source.

Also, you should use aggressive caching for all your website images by setting your images HTTP ‘Expires’ header to as far in the future as possible. In addition to image URL fingerprints, this should offer an immediate increase in your website’s performance.

Using a Single Image Size Across All Delivery Mediums

Your website is being viewed by many different devices, particularly with the rise in recent years of mobile and tablet users. Whether you have occasional mobile visitors or you’ve tuned your website to offer a mobile version of your website’s content, you are still left with a decision to make – how to send the same image content to mobile devices that will usually have a much lower resolution than a desktop machine.

Many developers take a shortcut, offering the same exact images across all device resolutions, using client-side resizing for the images. The images may look great, but visitors waste time loading unnecessarily large images to their devices and you pay for redundant bandwidth usage. This is particularly unfair to 3G users and roaming users who pay a large extra to download the uselessly extra high resolution images.

How to fix: Identify visitors’ mobile devices and resolution using their user agent and optionally additional client-side Javascript code. With the correct resolution in hand, retrieve the best fitting image from your servers. This requires that you make available a set of thumbnails per each of your original images. There are excellent Javascript packages available that will automate this process.

Devices support different resolutions

By evaluating your practices to identify problems and employing the fixes outlined in this two-part series to optimize the images on your website and network usage, you can significantly improve the time it takes for pages to load. The faster load time and reduced bandwidth demands improve the user experience has been proven to improve click through rates, which ultimately means more business for your company.