Wednesday, January 5, 2011

5 Ways to Optimize Website Images

In our highly visual world, modern website visitors expect graphics, fancy slideshows, and other aesthetically appealing representations of the information on your site. The days of text-only sites or websites with a few clipart images are long gone, and that is a good thing.
Part of the reason websites have become more graphically enhanced is that Internet connections are much faster than they used to be. Once upon a time, the average computer owner had a 56k modem and a dial-up connection to the Internet. Broadband and mobile broadband have taken the Internet from the sidewalk to the fast lane.
As one friendly neighborhood super-hero once learned, however, with great power comes great responsibility. Just because you have a lot of bandwidth at your disposal does not mean you should annihilate it with excessively bloated image files. You owe it to your visitors/customers to not make them wait for your website to download, and you owe it to your server to not to bog it down with repetitive loading of large image files.
Internet speed is only part of the equation. Someone can have a fast Internet connection and still have a relatively low-powered device such as a netbook, mobile phone, or tablet (i.e. iPad). If you have ever spent the day surfing the web on your netbook and then come home to your fast computer, you have probably felt the sigh of relief as the latency of the slower machine melted away on your big screen. According to the server specialists at, it is not easy to tell which users have netbooks based on your web server analytics, but based on netbook, tablet, and mobile phone sales, you can be sure that many of your users may access your content from these slower devices, rather than 3 Ghz, fully-loaded desktops.
Optimizing images is not difficult to do, but it may take more time than simply throwing them up on the web. What follows are five tips for optimizing images on your websites.
1. Photo resizing
compress images for better speed
Image credit: Alex
It might sound to you like it goes without saying, but I still run into websites that have unnecessarily large images scaled to fit into small paragraphs and boxes. Sometimes the aspect ratios for the images are not even right, resulting in stretched or squished bodies and faces. The simple solution is to resize and crop images in an image editing program before you upload them. Blogging software such as WordPress even has resizing capabilities built into it to automatically reduce the image to the size you specify. When a user accesses a page that loads scaled images, it still has to load the full size of the image file, whereas a resized image will have a smaller file size.
2. Compression
Two of the most common image compression formats are JPG and PNG. JPG is a lossy compression format, meaning that the image quality will be reduce the more the image is compressed. Because of this, it is easy to get a small file size even with a large image, but you will start to notice degradation. You can compensate for some of the loss in quality by using smoothing or other techniques, but if you need to give users access to higher quality images, use highly compressed thumbnails and link them to lightly compressed full-sized images.
PNG compression is lossless and is generally better at compressing than GIF images. In lossless true color, however, you will end up with a larger file size than an comparable JPEG file with lower quality. For images other than high-quality photos, you can use 256 colors and achieve greater compression. You can use compression tools like PNG crush or Pngnqto assist you.
3. Include Image Sizes and Alt Tags
This is straight from HTML 101, but some content managements systems do not add image sizes to the <img> tags, which results in the displacement of text before loading, particularly when an image is floated. Including the image size will make the images on your site load more seamlessly, without making the user’s eyes jump. Alt tags provide descriptions for the images for screen readers (for the visually impaired) and search engines.
4. Use a Content Delivery Network or Third-Party Image Hosting
boost your site loading time
For a site with hundreds or even thousands of images, frequent HTTP requests may be a big concern for you. If that is the case, you can offload some of that bandwidth by using a content delivery network (CDN) or a simple third-party image hosting website. The caution here is to be careful not to use a service with servers too far away from yours or that are under heavy loads themselves. This will only sacrifice your users’ experience in order to save you bandwidth.
5. Use CSS Sprites
If you used images in much of your design, your site will definitely benefit from using sprites. Essentially, a sprite is a consolidated file containing many or even all of the images on a page. Rather than calling up each image file in your code, you would load the same file as a background image and shift the background to load the appropriate image. The result looks identical, but instead of loading 12 image files, for example, you have only loaded one. Research strongly supports that multiple HTTP requests for small images is more taxing on a server than a single request for a larger image. Furthermore, you will ultimately see that the single sprite file will be smaller than the combined sum of the multiple image files.
Sprite creation can involve a lot of extra CSS coding that you may not want to do, but there are online solutions to make it easy, such as SpriteMe from Google. This little bookmark button opens a dialog on your website and lets you collect all of your images you want to sprite and automatically generates the sprite image and the code you need to insert in your documents.
As you can see, image optimization is not difficult, and the benefits far outweigh the time that it takes for preparation. The important thing is to be consistent throughout your website, plan before you create the site, develop a system for implementation, and stick to your plan.

No comments:

Post a Comment