Image optimization is an important step to take when planning and deploying content to your website, yet often people miss this step when they publish their pages.
Why is this a problem? For most people, the most readily available source of images is their own personal digital camera which store the images in a high resolution format that isn’t suitable to the web.
These hi-resolution images can easily take up to 5MB in storage space and they must be resized in order to fit on the page. This results in a poorer experience for your website’s visitors because of:
- Long wait times when viewing, particularly when you have several large images on a page. Even with a high-speed connection it can take up to a minute to download a web page, and most people will lose interest before that happens.
- Browsers aren’t great at scaling down images on the fly, so images often look blocky or fuzzy and are difficult to read.
- Storing and downloading large files can add to the cost of website hosting. If a large image is placed in a common area such as a banner or footer, you could be committing your visitors to a large download on every page of your website.
 Original image, scaled down in the browser - note the artifacts and jagged lines. Image size: 1.8MB --- Time to download: 15 secs |
 Resized, web optimized image - lines are smooth. Image size: approximately 100kb --- Time to download: <1 sec |
It’s a good idea to do some planning before adding any images (or content for that matter) to a page. Are you going to be using the image on a number of different pages or just one? Does your hosting provider charge for bandwidth use? – A lot of really large, high-resolution images can eat up your bandwidth limit in a hurry! Does the image require a transparent background so that you can place it on top of another image or background colour?
Once you’ve determined your needs, there are a few steps involved in optimizing the image:
- Choose a file type. Popular file types are .GIF, .JPG and .PNG. JPG files tend to compress the best, but don’t support transparencies. GIF is widely supported but often won’t compress very well. Both GIF and PNG will allow transparent backgrounds to varying degrees, while PNG tends to blend a bit better when placed over a background colour or image. Also, PNG is the only image type that supports graduated blending, but it is not well supported in older web browsers.
- Determine the dimensions. You’ll want to resize the image so that it fits easily into the area of the page. If you’re going to be using the same image in several different places, try to determine the maximum size that it will be so as to reduce the amount of resizing the browser will need to do. You may find that even your resized version of the image just doesn’t scale down well in your browser, so in this case it’s best to have multiple versions of the same image that are sized appropriately.
- Save the image as a web version. Many graphic editing programs such as Adobe Photoshop include a “Save to Web” feature which will strip out a lot of the colours and extra information that the human eye can’t pick up, or at least won’t really be noticed when removed from the original version. There is a bit of compromise on image quality, but saving the image optimized for the web will result in a much smaller file size that will display much faster, which can really improve the experience for the end user.
- Upload the image to your website and add it to your web page(s). It may help to organize the images into several folders. For example, have one folder for profile pictures and another for thumbnails.
If you don’t have Adobe Photoshop on your computer, there are many free tools available that you can download which will resize images for you. There are even online services that will do this for you. Simply upload your image, specify the dimensions and options that you want, and a web-optimized version will be generated that you can download. A simple search for “free image resize” should yield many such programs and services.
Optimizing your images is one step toward making your website easier to use for your visitors. Keep checking back at the Port 80 Solutions blog for more tips on how to make your website work better and add more value to your organization’s online presence.
Looking for web hosting? Contact Port 80 Solutions for information about hosting for your organization. Leverage our powerful Content Management system, or host simple sites, WordPress blogs, and other open-source solutions.