Optimizing Images Without Sacrificing Quality

Broadband Internet is now available in many parts of the world, and its usage is taken for granted. Therefore, image optimization doesn’t seem have the same importance as before. But why waste time and resources when it’s possible to reduce the image size without losing quality.

Why image optimization is so important?

Most customers wait about 2-3 seconds for a site to load on their desktop or laptop.

…and about 5 seconds on their mobile device.

Amazon and Walmart found that if their pages slow down by even 2 second, they lose $1.7-2.6 billion a year!

Google now uses page load time as an important factor in their ranking algorithm.

If you have images that slowly “drool” down the screen and take over 20 seconds to load – well, you can be sure that most of your prospective customer will move on to the next website for business!

Photographs constitute an important part of most websites and on average take about half or one-third of its “weight”. Aside from their quality, it’s also important that they are properly optimized. Image optimization can be viewed from two aspects; the first aspect is the file size and loading speed of each image, while the second aspect includes proper naming and optimization of image files for search engines.

If it take too long for a site to load, it’s likely that photos used on the site are not properly optimized. This may result in a slow website that may rank low on search engines. These days, millions also access Internet on their mobile devices which means slower downloading speeds and limitations on data, which is another valid reason for proper image optimization if you want greater online visibility and more customers.

Photos clicked by a camera are of high resolution (i.e 3456 x 2304 px). They are large files that might be suitable for printing but would take minutes to load. Therefore, first step in image optimization is to resize the image to a smaller resolution. It’s not necessary to be an expert programmer to do that as there are many programmers such as Gimp and Photoshop that can do this for you. You need to buy few of them while others are free.

So what are your options?

If you have more images on your website, you can consider reducing the size of your image files. This will immediately increase pageload speed leading to more visitors and more business. Less visitors who visit your site will click away.

You can reduce your image file size in Photoshop by using the “Save for Web” command. When you’re using this command, you can adjust the image to its lowest acceptable file size while keeping any eye on its quality.

What if you don’t have Photoshop?

If you don’t have access to Photoshop, there are many online tools that you can use for image editing. Even Adobe offers an online image editing software at photoshop.com. Although this tool doesn’t have all the capabilities of Adobe software but it’s free and still covers basics of image editing.

Other impressive image editing tools available online are PicMonkey, Pixlr, FotoFlexer, and FastStone. FastStone looks promising as it can resize multiple images in one go, and they can also be edited, i.e. you can add contrast, saturation and sharpness. There are few predefined resolutions and recommended resolution for photo galleries is 1024×768 px or 800×600 px.

Even after resizing, some images may still stay too large. Yahoo offers an excellent tool Smushit that uses optimization techniques specific to your image format for removing unnecessary bytes without affecting its quality. After optimization, Smushit will report bytes that would be saved and also provides you an downloadable zip file with redcued image files.

Another useful tool for image optimization is Tiny PNG. This tool uses a smart lossy compression technique for reducing file size while preserving complete transparency. If you use PNG images on your website, you can use this tool. Using this tool, you can be sure that images on your site are in optimal size and will also download fast.

Finally, there is GIMP. it is an open-source, free image editing tool that can be run on Windows, Linux or Mac. It can do everything that Photoshop can do, but its bit clunkier. But if you’re looking for a free image editing application – you can’t beat it!

Using the right image files

The three common image file formats are GIF, JPG, and PNG. JPG images have become a de factor image standard online. These files can be compressed considerably and retain quality with small file sizes. GIF images have lower quality than JPEG and are mostly used for simple images such as decorative images or icons. Regarding optimization, GIF can be used for simple images (with few colors) on your webpage. GIF is not best for complex and large images. PNG images support more colors than GIF images and they also don’t degrade with re-saves like GIF or JPEG.

For ecommerce sites, JPEG images are best. Avoid using GIF images for large product images. They are best for decorative or thumbnail images. PNG is the best alternative to both JPEG and GIF’s. If you’re using PNG for product images, then use PNG-8 over PNG-24.

How large your image files should be?

If you have an ecommerce website, you should keep your image size below 75 KB. This can be difficult at times, but your website will load faster.

Proper file naming and optimization for search engines

Once you’ve reduced the size of images, they’re ready to be published online on your blog or website. As search engines cannot “see” what’s there in a image, so further optimization is also necessary to make sure images will also display in the search results. Two important things in optimization for search engines are “Alt” text and file naming. Good way to go is to use descriptive image titles. If you’re displaying a car in a image, then this image should be named car.jpg. If you name your image as IMG-46577.jpg, search engines won’t understand what this image is all about and the won’t be able to index it properly.

Suppose that you are trying to sell an apartment in the center of Texas and you name your image photo5.jpg, and fail to use “Alt” text it is very likely that your ad will not reach target customers who might be interested in renting the apartment. On the other hand if you name your image four-bedroom-apartment-in-Texas-center.jpg and write “One bedroom apartment in the center of Texas” for the “Alt” text, your image will be indexed within a certain period of time for those keywords and will be shown in search results for those keywords.

Sources

https://developers.google.com/speed/articles/optimizing-images

http://zemalf.com/1366/how-to-optimize-images-for-web/

http://webmarketingtoday.com/articles/4-Image-Optimization-Tips/

http://www.razorsocial.com/optimize-images-for-web/

Conclusion

All in all, It’s easy to optimize images without losing their quality. It definitely takes a bit of extra time but results can be surprising!