Menu
Feedback
Comece aqui
Tutoriales
Portal del desarrollador

Problemas Conocidos
Directrices de Soporte
Troubleshooting

Preguntas Frecuentes
Anuncios
Tutoriales
Tutoriales
Explore tutoriales detallados para operar su tienda VTEX.
Tutoriales
Storefront
Layout
Compresión de imágenes
Compresión de imágenes

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.

El 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 y tasas de conversión.

Hay dos tipos de compresión de imágenes, que se describen en la siguiente tabla:

Tipo de compresiónDescripció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.
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.

En VTEX, los archivos se almacenan en su formato original, pero se comprimen en tiempo real durante la navegación por la tienda.

Realizamos una conversión al formato WebP 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.

El 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.

Los navegadores que todavía no son compatibles con el formato 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.

PNG

Para 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.

Al mismo tiempo, las imágenes PNG se optimizan utilizando pngquant, manteniendo el formato pero reduciendo el tamaño de la imagen hasta un 70 %.

Por ú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.

{"base64":"  ","img":{"width":1562,"height":461,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":50338,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Storefront/Layout/compresion-de-imagenes_1.PNG"}}

JPG/JPEG

Para 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 equivalente.

VTEX 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.

{"base64":"  ","img":{"width":1560,"height":454,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":36893,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Storefront/Layout/compresion-de-imagenes_2.PNG"}}

Artículos relacionados

Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
¿Te ha parecido útil?
No
Sugerir cambios (GitHub)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page
¿Todavía tienes dudas?
Pregunte a la comunidad
Encuentra solucciones y comparte ideas en la comunidad de VTEX.
Únete a nuestra comunidad
Solicite soporte a VTEX
Para asistencia personalizada, contacte a nuestros expertos.
Abra un ticket de soporte
GithubDeveloper portalCommunityFeedback