{"section":"tutorials","requestedLocale":"en","requestedSlug":"image-compression","locale":"en","slug":"image-compression","path":"docs/en/tutorials/storefront/layout/image-compression.md","branch":"main","content":"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.\n\nThis process aims to boost the speed and performance of the store, which significantly affects user experience, [SEO](https://developers.google.com/search/blog/2010/04/using-site-speed-in-web-search-ranking), and conversion rates.\n\nThere are two types of image compression, as described in the table below:\n\n| Compression type | Description |\n| - | - |\n| Lossy | Reduces the image size and quality to retain the most significant information without keeping all the pixels. |\n| 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. |\n\nOn VTEX, files are stored in their original format but are compressed in real time during store browsing.\n\nWe automatically convert images to the [WebP](https://developers.google.com/speed/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**.\n\nUsing 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.\n\n> ℹ️ Browsers not yet [compatible with the WebP format](https://developers.google.com/speed/webp/faq#which_web_browsers_natively_support_webp) and services, such as integrations and marketplaces, always receive unconverted images in any format. GIF files are not converted to WebP.\n\n## PNG\n\nFor 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.\n\nAdditionally, PNG images are optimized with [pngquant](https://pngquant.org/), which maintains the format while reducing the image size by up to 70%.\n\nFinally, VTEX delivers the smallest file between the lossless WebP and the optimized PNG, as illustrated in the diagram below.\n\n![png-image-compression](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/storefront/layout/image-compression_1.PNG)\n\n## JPG / JPEG\n\nFor 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](https://ece.uwaterloo.ca/~z70wang/research/ssim/) quality index.\n\nVTEX 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.\n\n![webp-image-compression](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/storefront/layout/image-compression_2.PNG)\n\n## Related articles\n\n* [Best practices for using images in the Catalog](/en/docs/tutorials/best-practices-for-using-images-in-the-catalog)\n* [Add image to product description](/en/docs/tutorials/adding-or-editing-products)\n* [Importing images from a spreadsheet](/en/docs/tutorials/importing-images-from-a-spreadsheet)\n* [Updating the image of an SKU](/en/docs/tutorials/how-to-update-the-image-of-an-sku)\n* [Reusing images with Image Widget](/en/docs/tutorials/image-widget)"}