Image Optimization for the Web
Most professional images are shot using a raw file that is very large, typically several MB. The raw files are usually uploaded into a photo program like Photoshop, Illustrator or iPhoto. Within the programs these files can be manipulated to make them look as if you are there. With all of the added filters on a file the photos can become quite large.
Adding large images to a website creates slow load times and a poor user experience. Creating web friendly images that are properly optimized can drastically increase page load time, leading to happy customers and more conversions.
When it comes to site speed, the fastest way to optimize your site is optimizing your images for the web. It is the fastest and one of the most effective methods increasing site speed.
Why is it important?
Most of the sites on the internet are image heavy resulting in slower page load times. Typically there is at least one main image per page, some have more than others and they vary from size to size. When it comes to online acquisition of customers, extra seconds can lead to missed opportunities.
Let’s say you own a company that sells baseball cards, there are several images on your homepage and your site loads at 8 seconds. Your competitors’ site loads at 3 seconds, when you look into your analytics profile you find that users are bouncing off your site because of the load time. With image optimization you can reduce image size and reduce total page load up to 80%, giving you a competitive edge over your competition. The faster a page loads, the higher the chance a customer will browse your site.
How does image optimization work?
The practice of optimizing images is choosing the appropriate file type necessary for the image, while reducing the file size. Images hold a large amount of data. There are sections of this unnecessary data that can be stripped out to render the same image at a fraction of the size. There are sites that make it easy to create web friendly image, if you are not a Photoshop wiz. Most image resizers show the image source size, optimized image size, image size saved and image savings %. We recommend using Yahoo! Smush.it, TinyPNG, and JPEGmini.
Image optimization isn’t only for large images; thumbnail and icon images can be optimized as well. A sprite image is used to reduce the time it takes to download multiple images, instead of downloading several separate icons, all of the icons on the page are location on one large image and formatted on your webpage using CSS. There are programs that can assist you in the process, we recommend using SpriteMe.
How do you optimize images?
Achieving full optimization for images will take some time to perfect; there are programs you can use that will give you suggestions about further areas of optimization. Here are some common ways to update your images for your website.
- Reduce the file size of the final version of your images. Reducing the file size is the easiest way to achieve a quick win with site speed.
- Reduce any image boarders, the extra space around images takes up space and can be added around the image using CSS.
- Save and upload your images in the proper dimensions. If the uploaded image is significantly larger than the web version it adds extra size to your webpage, taking extra time to resize.
- If there are multiple versions of the same image for example a full and thumbnail version. Use markup to resize the thumbnail version instead of uploading two images.
- Combine multiple small images into a sprite image to reduce the amount of images downloaded.
- Choose the proper file type PNGs for regular images, GIFs for very small images, JPGs for larger professional images and avoid using BMP or TIFF files.
The quickest way to increase site speed and gain a competitive edge over your competition is optimizing your site images. If your site takes more than 3 seconds to load there is a good chance your users will bounce and try to find a faster site. Users attribute quick websites to reliability and service. Can you afford to take that chance?