Varias veces he repetido lo importante que son en un ecommerce (salvo contadas excepciones) las imágenes de producto, ya que son la primera, y a veces la única, referencia que un cliente tiene de lo que va a comprar: no sólo debe haber un número suficiente de imágenes del producto, sino que deben tener la suficiente calidad para que se vea correctamente.
Claro que algo así no es fácil hoy día. Desde un teléfono móvil a una televisión full-hd, un usuario puede ver nuestra web en un rango de tamaños de pantallas que puede ir desde las cuatro pulgadas hasta más de cincuenta. ¿Cómo podemos entonces establecer tamaños de imagen en WooCommerce que permitan a todo el mundo ver correctamente los productos, sin tener que descargar archivos enormes?
Tabla de contenidos
WordPress y las miniaturas de las imágenes
WordPress ya establece una serie de tamaños de imagen para uso general en la web, que genera a partir de cada una de las imágenes que subes a la biblioteca de medios:
- Thumbnail, de 150 x 150 píxeles
- Medium, de 300 x 300 píxeles
- Large, de 640 x 640 píxeles
- Full, que es la imagen a tamaño original, sin cambios
Estas son las medidas que tienen estos tamaños por defectos, aunque se pueden cambiar en Ajustes > Medios, o incluso impedir que WordPress genere alguna de esas miniaturas simplemente poniendo las medidas en cero.
Aunque lo mejor es dejarlas como están (al menos los tamaños thumbnail y medium porque la gran mayoría de plantillas (y de plugins que muestran imágenes) cuentan con esas medidas a la hora de mostrarlas en algún lugar de la web. Si las haces más pequeñas (por ejemplo estableciendo el thumbnail a 100×100 píxeles) se verán pixeladas, y si las estableces más grandes estarás aumentando innecesariamente los tiempos de carga.
Aparte de eso, las plantillas establecen sus propios tamaños de imagen para adaptarlas al diseño que el propio theme ofrece (por ejemplo, para las imágenes destacadas de las entradas). También lo hacen muchos plugins.
Esto hace que, entre las tres miniaturas que establece WordPress y las que van añadiendo la plantilla y diversos plugins, a veces subimos una imagen a la biblioteca de medios y a partir de ella de generan un buen montón de miniaturas, encontrándonos con algo así si accedemos mediante FTP o el gestor de archivos:
Calcula, si por cada imagen que subes a la biblioteca de medios se generan 16 archivos (como en la imagen de ejemplo) el efecto que puede tener en el espacio en servidor para una tienda online con cientos de productos.
Por eso (y esto va por los desarrolladores de plantillas y de plugins) hay que ser cuidadoso cuando se utiliza la función add_image_size. Nuestro plugin/theme no es el ombligo del mundo.
WooCommerce y los tamaños de las imágenes
WooCommerce también genera (registra es la palabra correcta que se usa en WordPress) sus propios tamaños de imagen, lo cual está, por supuesto, plenamente justificado, ya que tiene necesidades especiales al mostrar:
- La imagen destacada de producto en la página de producto
- Las miniaturas de la galería de producto
- La imagen del producto en las páginas de archivo
Si no generara sus propios tamaños estaría siendo terriblemente ineficiente al mostrar imágenes, aumentando los tiempos de carga en toda la tienda. Y, recordemos, el tiempo de carga en un ecommerce influye de forma muy directa y muy importante sobre la tasa de conversión.
Concretamente, WooCommerce genera tres tamaños de imagen adicionales:
- Imágenes de producto, por defecto a 300 x 300
- Imágenes de catálogo, por defecto a 600 x 600
- Miniaturas del producto, por defecto a 180 x 180
Y esto sí que deberías cambiarlo.
Adaptar los tamaños de imagen de WooCommerce a tus necesidades
Concretamente deberías adaptarlos teniendo en cuenta dos cosas:
- El ancho de las imágenes mostradas por tu plantilla en los contenidos de WooCommerce
- Las necesidades de tu producto
Para el primer punto te ayudará bastante el inspector de elementos del navegador (click derecho sobre una de las imágenes > Inspeccionar). Así podrás ver a qué tamaño está mostrando la imagen tu plantilla y cuál es el tamaño real de esta imagen. En esta captura de pantalla puedes ver un ejemplo real:
Con el inspector de elementos vemos que la imagen (en este caso se trata de la imagen de catálogo) se muestra en la plantilla a 300 x 300 píxeles (flecha superior), y que el tamaño real de la miniatura es también de 300 x 300 píxeles. Así que la concordancia es perfecta, que es como debe ser. Lógico, porque el tema de la captura es Storefront, y ya está hecho para mostrar las imágenes al tamaño en que WooCommerce genera por defecto las miniaturas.
Sin embargo, si tu plantilla estuviera mostrando la imagen a un tamaño diferente harías bien en cambiar el tamaño de la miniatura correspondiente a ese tamaño. Una miniatura de un tamaño menor al mostrado por la plantilla se verá pixelada, como decía más arriba, y si es mayor estarás siendo ineficiente con los tiempos de carga.
Sí, por otro lado, tu plantilla ya está generando la miniatura al tamaño que necesita, estableciendo el mismo tamaño en WooCommerce te ahorras de que se cree una adicional que no va a utilizarse.
Aunque he sido inexacto al decir que deberías adaptar el tamaño al mostrado por tu plantilla; lo que en realidad deberías adaptar es el ancho. Porque recordemos el segundo punto: los tamaños de imagen deben estar adaptados, también, a las necesidades de tu producto.
Si, por ejemplo, tienes una librería (venta de libros, quiero decir, ya que en WordPress la palabra librería tiene un significado muy diferente) y utilizas como imagen de producto la portada de los libros, no resultaría muy inteligente establecer imágenes cuadradas como tamaños para las miniaturas. El resultado podría ser algo así:
Y casualmente en este caso no han quedado mal del todo porque han coincidido el título y el motivo principal de la portada dentro de la miniatura, pero dependiendo del libro que sea podría simplemente mostrarse un cuadro en blanco o con partes de textos o imágenes sin sentido.
Lo que deberías hacer en este caso es establecer la anchura de las miniaturas a la que muestra la plantilla, y una altura proporcional. Por ejemplo (es sólo una estimación):
- Imágenes de catálogo: 300 x 440 píxeles
- Imágenes de producto: 300 x 440 píxeles
- Miniaturas de producto: 150 x 220 píxeles
Y, claro, el resultado cambia bastante:
Necesidades especiales
Como ya he dicho más arriba, no todos los dispositivos son iguales y no todos harán uso de los mismos tamaños de imagen. Una miniatura para la ficha de producto puede ser correcta a 300 x 300 píxeles en un ordenador y a la vez excesiva para un smartphone; aunque, como el layout mostrado es diferente, la diferencia no llega a ser importante puesto que suele adaptarse para aprovechar ese tamaño.
Pero claro, hay veces en que las necesidades cambian. Sí, por ejemplo, vendemos un producto enfocado a fotógrafos o a diseñadores gráficos es muy probable que una buena parte de nuestros clientes visiten nuestra web con dispositivos de muy alta resolución.
En ese caso para que la imagen ampliada (tras hacer click en la galería de producto) se muestre correctamente, habría que subir imágenes grandísimas… lo que obligaría a pesadas e innecesarias cargas a los usuarios con dispositivos más normales.
Para ello puedes registrar tus propias miniaturas, bien por código o utilizando un plugin al efecto. Así podrías, por ejemplo, establecer una miniatura adicional de 1300 píxeles de ancho, de forma que puedas subir una imagen de 2000 o más píxeles para los usuarios que utilizan dispositivos que requieren esos tamaños, pero los usuarios de ordenador con pantallas más habituales puedan hacer uso de esta miniatura.
Con código bastaría con hacer un:
add_image_size ('nombre-nuevo-tamanio', ancho, alto, recorte);
El ancho y el alto son valores numéricos, en píxeles, y el último valor, recorte, puede ser tanto un booleano (true/false) indicando si queremos que la imagen sea recortada o proporcional o un array indicando desde donde debe iniciarse el recorte, por ejemplo, array(‘top’, ‘left’). Tienes toda la información, detallada, en esta entrada del Códex.
Para el ejemplo anterior podríamos utilizar algo así como:
add_image_size ('miniatura-personalizada', 1300, 900, false);
Lo que establecería imágenes de 1300 píxeles de ancho que, al especificar un false para el recorte, no serían recortadas sino escaladas proporcionalmente.
También puedes utilizar un plugin como Simple Image Sizes.
Conclusión
Como ves, siempre hay que adaptarlo todo (todo) a las necesidades de nuestro negocio, esta vez en función de la plantilla utilizada y de nuestro tipo de producto: no dejes los tamaños de miniaturas de WooCommerce por defecto (a no ser, claro, que sea conscientemente porque cumplen con tus necesidades).
Recuerda que no establecer correctamente los tamaños de estas miniaturas puede tener tres consecuencias:
- Imágenes de productos pixeladas
- Imágenes no adecuadas para nuestros productos
- Tiempos de carga más alto de los necesarios
Y recuerda siempre que, si cambias los tamaños de las miniaturas, puedes adaptar las imágenes que ya tenías subidas a estos nuevos tamaños usando el plugin Regenerate Thumbnails.