{"section":"tutorials","requestedLocale":"es","requestedSlug":"compresion-de-imagenes","locale":"es","slug":"compresion-de-imagenes","path":"docs/es/tutorials/storefront/layout/compresion-de-imagenes.md","branch":"main","content":"La compresión de imágenes es un proceso que reduce el tamaño de los archivos de imagen para optimizarlos para la web y garantizar que las imágenes se carguen rápidamente cuando los usuarios navegan por el sitio web.\n\nEl objetivo de este proceso es aumentar la velocidad y el desempeño de la tienda, lo que a su vez impacta la experiencia del usuario en[ SEO](https://developers.google.com/search/blog/2010/04/using-site-speed-in-web-search-ranking?hl=es) y tasas de conversión.\n\nHay dos tipos de compresión de imágenes, que se describen en la siguiente tabla:\n\n| Tipo de compresión | Descripción |\n| - | - |\n| Compresión con pérdida (lossy) | Reduce el tamaño y la calidad de la imagen reteniendo la información más importante. No mantiene todos los píxeles. |\n| Compresión sin pérdida (lossless) | Reescribe el archivo de imagen sin eliminar ninguna información. Aunque mantiene la calidad original, es menos eficaz que la compresión con pérdida a la hora de reducir el archivo. |\n\nEn VTEX, los archivos se almacenan en su formato original, pero se comprimen en tiempo real durante la navegación por la tienda.\n\nRealizamos una conversión al formato[ WebP](https://developers.google.com/speed/webp?hl=es-419) siempre que sea más ventajoso, es decir, siempre que el tamaño de la imagen resultante sea menor, independientemente de si el formato es **PNG o **JPG/JPEG.\n\nEl uso de WebP puede disminuir el tiempo de carga de páginas entre 1 a 2 segundos, dependiendo del layout. A continuación se describe cómo funciona la optimización de imágenes en cada formato.\n\n> ℹ️ Los navegadores que todavía no son[ compatibles con el formato WebP](https://developers.google.com/speed/webp/faq?hl=es-419#which_web_browsers_natively_support_webp) y los servicios como integraciones y marketplaces siempre reciben imágenes no convertidas, sin importar el formato. Los archivos en formato GIF no se convierten a WebP.\n\n## PNG\n\nPara las imágenes en formato PNG, indicado para colores sólidos, gráficos detallados y para alto contraste, la conversión a WebP se realiza con compresión sin pérdida para evitar una degradación de la calidad notable. Las imágenes WebP sin pérdida pueden ser hasta un 26 % más compactas que las imágenes PNG.\n\nAl mismo tiempo, las imágenes PNG se optimizan utilizando[ pngquant](https://pngquant.org/), manteniendo el formato pero reduciendo el tamaño de la imagen hasta un 70 %.\n\nPor último, VTEX entrega el archivo más compacto de entre el WebP sin pérdida y el PNG optimizado, como se ilustra en el siguiente diagrama.\n\n![png-image-compression-es](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/storefront/layout/compresion-de-imagenes_1.PNG)\n\n## JPG/JPEG\n\nPara imágenes en formato **JPG/JPEG**, indicado para fotos, la conversión a WebP se realiza con compresión con pérdida, lo que puede suponer una pérdida en calidad pero garantiza un tamaño optimizado. Las imágenes WebP con pérdida son de un 25 % a un 34 % más compactas que imágenes similares con índice de calidad[ SSIM](https://ece.uwaterloo.ca/~z70wang/research/ssim/) equivalente.\n\nVTEX entrega al cliente la imagen que tenga el tamaño de archivo más pequeño de entre la original y la convertida a WebP sin pérdida, como se ilustra en el siguiente diagrama.\n\n![webp-image-compression-es](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/storefront/layout/compresion-de-imagenes_2.PNG)\n\n## Artículos relacionados\n\n* [Buenas prácticas para el uso de imágenes en el Catálogo](/es/docs/tutorials/buenas-practicas-para-el-uso-de-imagenes-en-el-catalogo)\n* [Añadir imagen a la descripción del producto](/es/docs/tutorials/agregar-o-editar-productos)\n* [Importar imágenes por plantilla](/es/docs/tutorials/importando-imagenes-por-plantilla)\n* [¿Cómo actualizar la imagen de un SKU?](/es/docs/tutorials/como-actualizar-la-imagen-de-un-sku)\n* [Reutilización de imágenes con Image Widget](/es/docs/tutorials/image-widget)"}