Images are worth of thousand words. Yes images give a better meaning to post, increases readers interest, engages them to spend sometime. For a good post to complete there should be some images, atleast one to add some color. But those images come at cost of bandwidth and increase page load time. They hog a lot of webspace and consumes high bandwidth. But the most worse is that they noticeably slows down site loadtime and increases server response time. While using images in blogs and websites have advantages but if not used wisely they’ll make all things no better than worse.
In order to get most out of every byte wasted on images, we need to make some smart move.
Use as minimum number of images
This is very basic and true also. Try to use as minimum number of images as possible. This would effectively reduce total server request during loading and will inturn decrease loadtime. Since images tend to use lot of size, this would effectively reduce bandwidth usage
Use CSS in place Images
With introduction of CSS3, dependence on flash and images have been reduced drastically. CSS makes use of plane text and hence a lot lighter than true images and flash. But only problem in this case is, you’ll need to code CSS to get the right look. Today almost all themes are CSS driven and not much to worry about this.
Combining multiple images into single
This is very complex and only meant for hardcore CSS coders. By combining multiple small images into single file will reduce multiple server request to single one.This is most beneficial if the theme uses many small images, but to get it work you’ll need to make hands dirty with CSS.
Choose smart format
Web accepts almost all of popular images format, but this dosent mean we could use any. While there are three main format widely popular over web “PNG,GIF and JPEG”. JPEG is mostly recommended because it offers better compression than any other yet providing same quality. PNG which is another popular format and should be used where transparency is required. Compression of PNG is not any better than JPG and hence it is mostly suitable in logos. GIF is only choice to use in place of flash and mostly in advertisements. It offers good compression, but not as good as JPEG.
Replacing old featured images with small resolution images
Slider have been pretty standard with blogs. But indeed they need high resolution images and so heavy on resources. Generally slider displays newest post with there featured images. This goes on and the older post which will never get up again on slider, but those old post also holds high resolution images. That high resolution featured image is not required any more perhaps it would be great idea if it could be replaced with smaller size featured image.
And finally Most important optimizing them
Most of the webmaster forget this. Generally images arriving form oven are of high quality. Most of the applications automatically tries to give them better quality at cost of big size. Perhaps they could be used directly but smartly optimized images will reduce its space requirement to fraction of 30 percent also. And on web who wants to see an high quality logo which takes a minute to load.
Most of application provide quality selection during export and this should be place to tweak the quality to get most out of least size. Remember quality of any image also depends on software which is used to compress it. Spending few minute to select the right quality is worth it. After all it will reduce page loadtime and might affect bounce rate in return.
If you didn’t find anything from this all, not a second of performance increase than be prepare to move on with CDN.
While above tricks holds good for blogs featuring reviews or portfolio and our blog also come under same category. And we all know how important it is to have fast loading websites, perhaps it would be worth wasting few minutes on optimizing images.
Similar articles that may interest you: