Images are important components in any website or blog. In fact, they are a great way to keep the reader interested. Images are not just used to make a post attractive, but are also used to convey information through infographics (such as workflow or statistical information, etc).
Accept what needs to be done: Why is it important to optimize images?
Adding many images affects the size of your webpage or blog post, which means, the more the number of images, or the larger the size of the images, the more the page loading time.
Not always can we reduce the number of images, sometimes they just have to be there. What we can do, is reduce the image size and delete unimportant image metadata, to reduce page load time. This process is known as image optimization. Faster page loading will give way to
better user experience
reduced bounce rate
improved search engine rankings (search engines penalize pages with higher load times)
Do note however, there may not be instant measurable results. But, over time you will have noticed a difference.
Just go ahead and do the needful: How to optimize the images?
Image optimization is reducing the image size, by stripping the image of unwanted data and metadata and reducing details through compression.
Points to consider while creating an image:
Delete/crop unwanted content, like white spaces. Instead use CSS to create a padding around the image
Use the appropriate file format when saving your images. Generally, the norm is to use JPG for photographic images or images with many colors, and PNG for logos or for partially transparent images. SVG is used for vector graphics.
Using Image Sprites. An image sprite is a collection of images, put in a single image. Using CSS only a part of the image can be shown. Using image sprites will reduce the number of server requests to load images, thus reducing page load time.
If possible, keep the colors you use to a minimum
Let a plugin handle compression:
There are several plugins available that readily compress images. My pick of the lot is the EWWW Image Optimizer. The EWWW Image Optimizer ensures automatic and lossless optimization of your images, resulting in smaller file size, while maintaining quality. The main features of the plugin are:
Automatically compress the image at the time of upload
Bulk compress all images in Media Library
Lists the current image size for the image along with % compressed
Option to individually compress images
File conversion options (from JPG to PNG and vice versa)
Maintains copy of original image (optional), which you can restore back if you are not happy with the compression
Still not happy? There’s always Lazy Loading
Lazy loading is the concept of postponing the loading of objects (which are not in the viewport of the user), till the user scrolls and views them. Thus, in case of images, the loading of the images will be delayed till the user views them, resulting in faster page loads. I recommend exploring the BJ Lazy Load Plugin, which provides this feature.
Was this article helpful? Or did you know these points already and wanted to add more? In any case, I would love to hear your views about Optimizing web Images. Be sure to leave your comments, in the comment section below.
Please note, some of the links in this blog post might be affiliate links. This means if you go on to purchase a product using such a link, we receive a small commission (at no additional cost to you). This helps us support the blog and produce free content. We only recommend products we work with or love. Thank you for your support!
Pol :
There’s is a tool to compare PNG and JPEG variants of your image to choose the right format
http://pngvsjpeg.com