How to optimize image for faster Webpages

Have written a blog post with multiple images attached. It’s nice but this may not be good if you are serious about webpage load time. If you are wondering on how to optimize image for a faster webpage load time then there are few things which you need to keep in mind before posting content on your website or blog.

It’s better not to have multiple images in a blog post and the reason for this is each of these images will sent as separate HTTP request. To fetch each of these components by sending HTTP request will take more time when compared to a single image. End users spend more time on front-end and most of their time is wasted in fetching or downloading each of the component in a webpage.

Say you have 5 images in a webpage each of 50 KB and there is another webpage which is 250 KB. Even though the image size put together for a webpage is the same, the time consumed in loading the first webpage with five separate images will be more than the webpage with one single image. This is because, in the first case there are 5 separate HTTP requests made when compared to one single HTTP request

You can use CSS Sprites. An image sprite is a collection of all the images put together into a single image. This can be used to avoid multiple server requests, hence save bandwidth and load time. As you know page load time is one of the important considerations for a better page rank, this is one of the ways to optimize image for faster page load.

Post a Comment