Tips to Optimize Image Downloads to Improve Site Speed

Matt Cutts recently stated that improving site speed can boost search rankings. Not to mention the fact that faster download time means a lower bounce rate and higher visitor engagement with your site.
There are many factors that go into site speed. Not the least of which are images and graphics. Having a graphic or image packed site can put a strain on even the fastest internet connections, slowing download times. So, optimizing your images can have a positive effect on your visitors and search rankings.

#1 Host your own images

Every time a browser requests your webpage, header information is sent containing instructions for download. If you host your images on other sites such as Flickr or photobucket, the user has to make a separate DNS request to accompany its HTTP request for each additional image.
This is commonly referred to as hotlinking. Always upload images on your website to the same server and use the same domain name. If the image is hosted on a separate subdomain of your site, the browser will have to make another DNS request resulting in the same issue.

#2 Using Google’s image optimizer

Google has built a Page Speed plugin designed to assist in improving site speed. One of the coolest features of the plugin is that it will automatically optimize images for the web by reducing their size and maintaining their quality.
This is a screenshot of Google’s analysis of Wikipedia’s page on web design. As you can see, there are six images that can be optimized. To optimize, simple “save as” or view and “save as”.

This is the non optimized version of the Zen garden image on the wikipedia page:

This is the optimized version where it has been reduced by 7%:

Can you tell a difference? I can’t. By optimizing all graphics and images on your site you can really reduce the size of your page.

#3 Reducing HTTP requests with CSS sprites

Another issue that many websites have is the use of many different graphics and images in the layout of the design. This can result in dozens and dozens of different files that have to be downloaded for one webpage to be displayed.
Every time a web page is loaded, the browser sends an HTTP request to the domain server requesting it send all parts of the website back. A series of communication begins between the server and the browser where data packets are passed along the networking system, which usually consists of seven different layers. If we can reduce the number of times the server and browser have to communicate during the download, the download time will significantly decrease.
One way of accomplishing this is by using CSS sprites. CSS sprites basically allow you to use one big image for all of your graphics and specify which part to use where thus reducing all of the image requests into one. For example, the Wikipedia page on Web Design could create one big image containing all of the images and graphics. Wikipedia would then only use specific parts of the image for different areas of the site based on points on the image.
Sound complicated? It is, but don’t worry because many online solutions for creating CSS sprites exist. Here is Google’s sprite:

And youtube’s:

Happy optimizing…
Jason Capshaw is founder of MyWebTronics, an Atlanta web design agency. He has been building websites and providing SEO services for five years. You can also write guest posts and share your web site tips.