Image compression is a process that reduces the size of image files, optimizing them for the web and ensuring that images load quickly as a user browses a website.
This process aims to boost the speed and performance of the store, which significantly affects user experience, SEO, and conversion rates.
There are two types of image compression, as described in the table below:
| Compression type | Description |
|---|---|
| Lossy | Reduces the image size and quality to retain the most significant information without keeping all the pixels. |
| Lossless | Rewrites an image file without removing any information. While it maintains the original quality, this type is less effective than lossy compression in reducing file size. |
On VTEX, files are stored in their original format but are compressed in real time during store browsing.
We automatically convert images to the WebP format when there is a size advantage — resulting in smaller images — regardless of whether the original file is in PNG or JPG/JPEG format.
Using WebP can lead to a reduction in page load time by 1 to 2 seconds, depending on the layout. Below is an explanation of how image optimization functions with each format.
Browsers not yet compatible with the WebP format and services, such as integrations and marketplaces, always receive unconverted images in any format. GIF files are not converted to WebP.
PNG
For images in PNG format, which is ideal for solid colors, detailed graphics, and high contrast, conversion to WebP uses lossless compression to minimize quality loss. Lossless WebP images can be up to 26% smaller than PNG images.
Additionally, PNG images are optimized with pngquant, which maintains the format while reducing the image size by up to 70%.
Finally, VTEX delivers the smallest file between the lossless WebP and the optimized PNG, as illustrated in the diagram below.
JPG / JPEG
For images in the JPG/JPEG formats, which are ideal for photos, the conversion to WebP uses lossy compression. This approach might lead to some quality loss but ensures an optimized file size. Lossy WebP images are 25% to 34% smaller than similar images with an equivalent SSIM quality index.
VTEX delivers the image with the smallest file size to the customer, choosing between the original and the one converted to lossless WebP, as illustrated in the diagram below.
