WebP y Thumbnails

Como vimos en el artículo el peso y formato de las imágenes es muy importante para la velocidad de carga de nuestras tiendas. En este caso vamos a entender un poco más sobre el formato WebP, los tamaños de imágenes y cómo aplicarlo.

En Tiendanube aplicamos la generación automática de distintos tamaños de imágenes para banners. Cada vez que subís una imagen en la sección de Personalizar tu diseño, generamos copias optimizadas de la imagen en distintos tamaños. Adicionalmente, si usas formatos jpg o png, también las convertimos en formato WebP.

WebP

Es un formato moderno de compresión de imágenes desarrollado por Google y su implementación es una de las sugerencias para mejorar la velocidad de carga de un sitio.

¿Cómo uso WebP en mi tienda?

Para poder usar los distintos tamaños de imágenes y WebP, necesitas tener tu código actualizado. Si no abriste FTP, no tenes que hacer nada, solo tene en cuenta subir imagenes en formato jpg o png. De lo contrario necesitamos que uses en los banners la mayor cantidad de tamaños posibles. Para hacer esto hay que aplicar la extensión `settings_image_url()` indicando el valor de la imagen deseada.

Por ejemplo, si nuestra imagen se compone así:

<img data-src="{{ slide.image | static_url }}" class="slider-image blur-up swiper-lazy" data-sizes="auto"/>

La podemos cambiar así:

<img data-srcset='{{ slide.image | static_url | settings_image_url('large') }} 480w, {{ slide.image | static_url | settings_image_url('huge') }} 640w, {{ slide.image | static_url | settings_image_url('original') }} 1024w, {{ slide.image | static_url | settings_image_url('1080p') }} 1920w' data-sizes="auto" />

Tamaños disponibles

Tené en cuenta que siempre respetamos la relación de aspecto de las imágenes, entonces el alto va a ser variable. 

Para evitar pérdidas de calidad sólo achicamos las imágenes y nunca las agrandamos.