How to optimize images for web and performance
How to optimize images for web and performance
You probably heard the saying that a picture is worth a thousand words. It’s especially true for eCommerce. That is why online stores have lots of images. It helps customers to understand and feel the products.
So, it goes without saying that high quality and professional images are very important for eCommerce businesses.
But that comes with a cost.
Having lots of high-resolution images increases the file size of the web page and page loading time. It affects the performance of the web page and which causes the poor experience to the customers.
This is a catch 22 situation!
You need lots of high-quality images to impress the customers but it increases the page size and affects the performance adversely. So, how do you find the balance between them?
Well, in this blog, we show you how to optimize the images for the web by reducing the file size but without compromising the performance much.
What is image optimization
Image optimization is about reducing the file size of images without compromising the visual quality. The goal is to reduce the overall size of a web page. It is also about ensuring search engines can understand what the image is about the images that appear in the search results for relevant queries in the search engines.
The rationale of image optimization
- In image-rich websites like online stores, images constitute a huge chunk of the total file size of the web page.
- As you add more images, it increases the total size of a web page.
- As the size of the web page increases, the page takes a longer time to load. It also affects the user experience.
- By reducing the size of the web page, you can increase page loading speed and improve user experience.
- One of the easiest and important ways to reduce the total file size of the web page is by reducing the file size of each image on the web page.
How to optimize images
Image optimization is an art and it is all about finding the perfect balance between the lowest file size and acceptable visual quality. The entire process can be divided into three stages:
- Choosing appropriate image formats
- Choosing appropriate image resolution and dimension to prevent scaling
- Advanced image compression
Choose appropriate image format
Choosing an appropriate image format is the first thing you need to do when you are optimizing an image. There are 5 most commonly used image formats on the web: JPEG, PNG, GIF, WebP, and SVG.
WebP image format
WebP is a very efficient image format but it is not supported by all browsers. So, unless you can automatically serve JPEG or PNG versions of the image on browsers that do not support WebP, you shouldn’t use it. If you want to use the WebP format on your website, you will need to consult with a web developer with strong experience in performance optimization to setup this.
JPEG image format
JPEG format helps you to reduce the file size significantly without compromising the visual quality. This is ideal for photographic images.
On eCommerce websites, you would mostly be using photographic images for the products and JPEG is the best file format for them.
PNG image format
PNG is ‘generally’ less efficient than JPEG when it comes to reducing the file size of an image, especially for photographic images. However, it helps you to have transparent parts in images. So, this is ideal for shapes, logos, and similar images for which you want to preserve the transparency.
If the image has a limited number of colors like in a logo, the PNG format is more efficient than JPEG for reducing the file size.
GIF image format
GIF is the least efficient when it comes to reducing the file size. So, this format is not generally used for normal uses.
However, it supports animation. So, if you want animated images, GIF is your choice.
SVG image format
SVG is a scalable vector image format. So, you can increase the width or height to infinity if you want without losing any quality.
This format is ideal for simple shapes and patterns.
Choosing appropriate image dimension and resolution
The image dimension and resolution are two related factors that affect the file size.
For the web, 72 pixels per inch (PPI, also called DPI) is the ideal resolution. You don’t get any benefit by increasing the resolution beyond 72 PPI but it will increase the file size. So, keep the PPI to 72 all the time.
Similarly, the image dimension doesn’t have to be larger than the dimension as used on the web page.
For example, the ideal dimension for product images in WooCommerce stores is 800×800 pixels. In this case, you should not upload an image larger than 800×800 pixels because it increases the file size. You should also not upload an image with a smaller dimension because the image will be blurred as it will be scaled up.
So, always consider the minimum required dimension for the image on the web page and ensure that the image is not much above that. A small difference is not a big deal.
Compress the images
The next thing you need to do after saving the image in the proper image format and with the right dimension is to compress the image. Image compression helps you to reduce the data in the image using particular algorithms. This way, you can reduce the size of the image to a large extent.
You can use image editing tools like Photoshop to do it but we would recommend free online tools. Here is a list of tools that we recommend:
- Tiny PNG for PNG images
- JPEG Mini for JPEG images
These tools let you upload images in bulk and compress them. It has the flexibility to adjust the compression quality for each image individually.
There are many ways to automate this process. For example, if you are using a content management system like WordPress, there will be lots of plugins (extensions) to help you automatically compress each image you upload automatically. Below is a list of WordPress plugins that we recommend:
- WP Smush
- ShortPixel Image Optimizer
- EWWW Image Optimizer
Image optimization is a fundamental part of website performance improvement. It helps to reduce the page size and page loading time. The key processes of optimizing an image are choosing the appropriate image format, saving the images in the proper dimension, and compressing it finally.