{"section":"tutorials","requestedLocale":"es","requestedSlug":"mejorando-la-performance-de-imagenes-de-productos","locale":"es","slug":"mejorando-la-performance-de-imagenes-de-productos","path":"docs/es/tutorials/catalogo/productos-y-skus/mejorando-la-performance-de-imagenes-de-productos.md","branch":"main","content":"Las imágenes de productos muchas veces son el principal enemigo de la performance de su tienda..\n\nEl objetivo de este artículo es mostrar cómo usar VTEX Img para cargar las imágenes  de manera más eficiente para así  mejorar el performance del sitio.\n\n**VTEX Img**, es un servicio que entrega estas imágenes al FRONT de la tienda, existe una API que, si es bien utilizada, puede traer grandes beneficios a sus clientes.\n\nLa URL de una imagen de un SKU tiene el siguiente formato:\n`http://[ACCOUNT_NAME].vteximg.com.br/arquivos/ids/[ID](-[LARGO]-[ALTO])/([NOMBRE_DE_LA_IMAGEM])`\n\nLos campos escritos en negrito son valores que cambian de acuerdo a su tienda, SKU e imagen (o sea, el nombre de la tienda (Account name de la tienda, el ID, el largo, la altura y el nombre de la imagen)\n\nLos campos en paréntesis son parámetros opciones (o sea, largo, altura y nombre de la imagen)\n\n## Ejemplo\n\nNuestro catálogo envía las imágenes de los SKUs en el siguiente formato:\n`http://instoreqa.vteximg.com.br/arquivos/ids/155602/robo.jpg`\n\nEn este URL, tenemos:\n\n- **[ACCOUNT\\_NAME]**: instoreqa\n- **[ID]**: 155602\n- **[LARGO]**: não especificada\n- **[ALTO]**: não especificada\n- **[NOMBRE\\_DE\\_LA\\_IMAGEN]**: robo.jpg\n\nEl nombre de la imagen es un parámetro opcional. Por esto, una misma imagen puede ser abierta en la siguiente URL :\n`http://instoreqa.vteximg.com.br/arquivos/ids/155602/`\n\n## Mejorando la performance\n\nLa manera más eficaz de mejorar la performance de las imágenes es hacer que ellas tengan el tamaño que será realmente utilizado en el sitio. Por ejemplo:\n\nUna tienda que quiera exhibir en una página una imagen de un producto con tamaño de 50×50. Imagine que la tienda escriba en su código de html la siguiente URL:\n`http://instoreqa.vteximg.com.br/arquivos/ids/155602/robo.jpg`\n\nEn este caso, el navegador descargara la imagen con tamaño completo, o sea una misma imagine en alta definición, que fue enviada a cargar en el catálogo.\n\nEsto significa que los datos que están siendo traficados están siendo más que necesarios, lo que va en perjuicio de la performance de su tienda.\n\n### ¿Qué hacer?\n\nPodemos solicitar a VTEX Img que envíe una imagen que un tamaño especifico.\n\nEn nuestro ejemplo anterior, basta escribir de la siguiente manera la URL de la imagen en código HTML:\n`http://instoreqa.vteximg.com.br/arquivos/ids/155602**-50-50**/`\n\nDe esta forma, el VTEX Img entregara la imagen con un tamaño de 50×50. Esto realizara la carga de su site mucho más rápido.\n\n![tamanhosImg](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/catalogo/productos-y-skus/mejorando-la-performance-de-imagenes-de-productos_1.png)\n_Entregar imágenes un tamaño mayor que el de exhibición perjudica la performance de su tienda._\n\n## Imagenes rectangulares\n\nAl redimensionar imágenes rectangulares, **VTEX Img** mantiene su proporción, o sea, estas son redimensionadas sin distorsión.\n\nEn tiendas de ropa, por ejemplo, es muy común que las imágenes tengan un formato retrato, en que la altura es mayor de que el largo, como 300x400. Si la tienda necesitara de esta imagen cuadrada (en formato de 50x50, por ejemplo) esta acabara distorcionada.\n\n**VTEX Img** impide distorsiones completando el espacio vacío con un fondo blanco."}