Images make for over 60% of the total bandwidth of a particular website. With media-rich websites, the figure crosses more than 85% of the bandwidth. As we all know, one of the most costly aspects that website owners have to deal with is bandwidth. Those who are currently running high-traffic websites will actually know bandwidth costs can easily surpass your storage and hosting costs. Image optimization should ideally be your top priority in your search for a fast-loading and well-optimized website (have a look at DX news for example). Developers, however, continue to commit a slew of serious mistakes as far as images are concerned. Today, we will walk you through those mistakes and try to find solutions as well.
You are not selecting the right format for your images
This remains a common mistake. Developers continue to choose the wrong format for images. It should not be forgotten that .png, .jpg and .gif are the three most common formats usually used on internet. You should be careful enough not to pick formats randomly. You should not ideally use any format which you just want to use. You should invest the time to learn about the pros, cons and suitability of each of these image formats. The key is to use the right format as per your need. Photographs should ideally be in.jpg and if you are designing a logo or a chart then make sure you are using .png.
Using browser-side image resizing technique instead of server-side resizing
Are you using browser-side image resizing instead of server-side resizing? If yes, then you’re probably committing a major mistake. You will understand why. Now, browser-side image resizing is generally done when there is need for changes in graphic design. The new graphic design requires a few thumbnails to be altered. Designers in these cases just end up using different CSS height and width from the browser leaving the original images just as they are. Now, the outcome is not the same for old and new browsers. While for new browsers the images end up looking exactly the same, for old browsers, there’s a lot of bandwidth wasted.
Using non optimized images remains a strict no-no for your website. You can use the “Save for Web” attribute (Adobe). WP Smush is a must for those working with WordPress. This feature automatically optimizes all the images that you upload through WordPress uploader. The most amazing functionality of this plug-in is that it reduces the size of all the images thus uploaded without really compromising on quality. Other than that, you can utilize any one of the OptiPNG and PNGCrush open-source optimization libraries. While most of these tools will automatically reduce the size of your images, Yahoo’s smush.it is one of the services designed for manual compression of images.
Are you committing these mistakes with your images? If yes, then make sure you’re fixing those mistakes with the help of the aforementioned tips. Address these issues right now if you really want to see your web page climb up the search engine ladder.