Optimizing Images for the Web

By -

Using images in website design is common practice. Not only will the photos or illustrations add an extra layer of visual interest to your company’s website, but they can also help boost your website’s rankings in popular search engines. “Properly optimizing images can help improve the load time of your website, increase your visibility to search engines and provide visitors with additional information on your company,” notes Sandra Dugas, Partner and Creative Director at ZOO Media Group. The following are a few tips that will help you improve the quality and functionality of images on your website.

Understanding File Types

The first step in image optimization is to educate yourself on the two main image formats used in web design. These are GIF and JPEG. Both of these image formats are used in website design because they are compressed file formats. This means that the image information is stored inside the file in a way that minimizes the file size, and thus helps improve the load time of your webpage. GIF and JPEG files compress image information differently, and thus should be used for specific types of images. If you’re planning to include photographs in your website design, it’s best to save them as JPEG files to preserve the colour quality. Illustrations and graphic elements should be saved as GIF files.

The Most Common Mistake: Resizing Images

Resizing images for use on a website is often a required task for website designers. Frequently, images are not perfectly proportioned for website applications. Unfortunately, many website designers make the mistake of resizing the image in a website design program or at the code level, and not in an image editing program like Photoshop. When an image is resized at the website design level, the image itself remains unchanged. The website browser is simply instructed to resize the photograph manually. The more work your browser has to do, the longer it will take for your webpage to load. The proper image optimization technique requires that the image is resized prior to being inserted into a website’s design. By editing the image directly, you create a smaller file and less work for your browser.

Don’t Forget These Image Optimization Best Practices

1) Pay Attention to Your Image Title

When you insert an image into your website design scheme it is crucial that you include a title tag. Since search engines can’t technically “see” an image, they need to have an alternative method for reading the file. Title tags let you provide search engines with some relevant content about your photograph or graphic.

2) Don’t Forget the ALT Attribute

The ALT attribute, or alternative text attribute, is similar to the title tag in that it provides context to an image. An ALT attribute should include a longer, more descriptive synopsis of the image. If for any reason your images are blocked by a website browser (some users choose to turn image rendering off when browsing the Internet), the ALT attribute will be displayed in order to provide additional information to visitors.

For help with image optimization and improving your company’s website design, contact the talented web development professionals at ZOO Media Group.