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!

The compressing of your image can be done in two different ways. The first one is Lossy compression and second one is Lossless compression. In Lossy compress method, the original image will get compressed but some information like fine details and minute color degradation will be lost in this approach but they are almost non identical. On the contrary, in Lossless compression method your image file size will get reduced without compromising with any details of the image. You can go for any one these methods to compress your image file size based on your requirements. Normally, most of the browsers support JIF,JPEG, PNG image file formats and each of these formats supports either Lossy or Lossless compression method.

The details about the different image file format and different approach to compress these image file are mentioned below. Go through them and you will get a clear idea about compressing images to save file size.

GIF

GIF stands for Graphics Interchange Format and it is the oldest type of file format and is accepted by almost all browsers. It supports 8 bit images and allows maximum of 256 colors. If you don’t want to compromise with the quality of your image and want to get the original image even after compressing it then you need to save your file with extension Gif. This is because Gif supports Lossless method of compression which keeps the original image even after compressing the image file size. But when you save your image in Photoshop using interlaced option then after uploading it in the websites, at first it will show a bit faded image but slowly the original image will get displayed. The other option that you can go for is non-interlaced in Photoshop. Here you will only see a red X initially after uploading the image and you can see the full image only after the entire image gets downloaded. The only problem with interlaced is that it slightly raises the image file size. GIF is highly advisable for images like flat-color, text or sharp edged images. Most of the people are very particular about sharpness of the image. So for them GIF is the ideal choice.

Golden Eagle is an online retailer of precious metals.  This is a great place to buy silver coins & bars.  We worked with them recently to optimize some of their images.  Since silver is largely black and whites & greys, there is a lot you can do as far as optimizing the file sizes to save bandwidth.  Here is an example of one of their silver bars in which we optimized the image to save file size.

PNG

PNG stands for Portable Network Graphic and it follows Lossless algorithm. This means no compromise with the quality of the image. You can be sure to get the original image even after compression. PNG is technically a replacement for GIF and it has all the characteristics just like GIF except animation. PNG has addition features which are not seen in GIF. For instance, it has error detection facility and it also supports true color along with alpha channel. PNG comes with two facilities. One is color masking and the other is alpha channel. PNG alpha channel helps to increase the glow of the image by hiding the unnecessary shadows created by the back ground. Well, all browsers do not support PNG but you can use PNG in your older version of browser with the help of plug-in. At last, keep in mind that PNG file are not zip able because they are already compressed.

JPEG

JPEG is not another image file format but it is a compression algorithm and it supports Lossy algorithm. This means minute details about the image will be missing in the compressed image file. JPEG is specially designed to satisfy the needs of different types of users according to their need. You will not be asked to compress your image under fixed size whereas you will be given flexibility to choose your desired compressed image file size. This method lowers the size of the image you want. But after compression the result will be degradation of quality, which means you can choose either quality or quantity. JPEG supports 24-bit color. JPEG can reduce the file size drastically. For example, if the file size is 900k, it can be reduced to 24 k. JPEG is not suitable for compressing flat colored or sharp images. In JPEG compression technique, the more you reduce the original size of the image there will be more degradation in quality in terms of color and sharpness of the image.

Article Resources 

The resources for the article are obtained from the following links given below:
http://en.wikipedia.org/wiki/Image_compression
http://www.wikihow.com/Compress-Photo-Files-With-Microsoft-Office-Picture-Manager
http://onlinesupport.conted.ox.ac.uk/TechnicalSupport/CompressingImagesToReduceFileSize.php

Summary

Well, you can go for any of the above mentioned approaches for compressing images to save file size. But, it is very important for you to keep in mind that each file format has their own limitations regarding image file compression. Hence, based on your requirements you can adopt any one of the approaches and can reduce your image file size according to your criteria.

With the given techniques of compressing images to save file size, you will no more face any problem to upload your desired image to your favorite web sites or blog or for sending images. The above file formats are supportive in all web browsers and you can see the images in the same form in lossless compression technique and with minor compromises in Lossy algorithm technique. So, before you go for compressing you image, be very clear about your requirement and purpose for compressing image and then accordingly take up any image file format. Hopefully, the given information has surely educated you in detail about the different image file formats and their specific characteristics.