Cómo optimizar imágenes en WordPress

En un mundo, donde cada vez se navega más con dispositivos móviles y tablets, resulta imprescindible disponer de una página web con imágenes optimizadas, con un tamaño ajustado al contenido y lo más comprimidas posibles, manteniendo la calidad de las mismas.

La principal ventaja de optimizar imágenes para web es en la experiencia de usuario que aportamos a nuestros visitantes. La página web, al ser liviana con imágenes comprimidas, se carga mucho más rápido y es más cómodo navegar entre ella, incitando a los visitantes a seguir consumiendo los contenidos dentro de ella.

También los últimos estudios de mercado online apuntan a que una tienda online que cargue rápido, aumenta el número de ventas y reduce la cantidad de carritos abandonados. Esto es debido a que la mayor parte de las ventas actualmente se hace mediante móviles. Por lo que cuidar el diseño para dispositivos móviles y una web que tarde poco en cargar, aumenta las ventas. Los últimos estudios al respecto dicen que aproximadamente el 64% de los clientes abandonan el carrito si las páginas tardan más de 3 segundos en cargar.

Además, la optimización de la carga de la web y de la mejora de las imágenes afecta positivamente al SEO. Con una puntuación alta en pagespeed te aseguras el cariño de google a tu página web. Gracias a las ventajas que os contábamos antes, los visitantes estarán durante más tiempo en la página web y visitarán más de una página. Y eso siempre afecta positivamente al posicionamiento web.

Cúal es el mejor formato para imágenes web

Actualmente, para el desarrollo de páginas web, se utilizan una gran variedad de diferentes formatos de imágenes para web. Cada una tiene sus ventajas e inconvenientes. Cuando vamos a diseñar una página web o un artículo nuevo en wordpress, tenemos que usar cuidadosamente el tipo de imagen a usar, ya que dependerá en gran medida el rendimiento de esa página o entrada.

Tipos de imágenes para paginas web

Archivos jpg para web

Este formato de imagen para web es el más conocido por todos. Las ventajas de las imágenes jpg para web es que reflejan fielmente los colores y ocupan poco espacio, al ser imágenes comprimidas. El proceso de compresión de las imágenes jpg suele llevar consigo una pérdida de calidad, tanto en los colores reales como en la resolución. Es habitual encontrar a veces imágenes jpg excesivamente pixeladas o con efecto borroso. Se debe a que la imagen ha sido comprimida en exceso.

Imagen jpg comprimida de forma correcta

La misma imagen pero con una compresión más agresiva que hace perder definición de imagen.

 

Las imágenes jpg se usan de forma frecuente para imágenes reales, fotografías de personas o lugares gracias a su fiel interpretación de los colores.

Archivos gif

Uno de los formatos de imagen más longevos de la lista (se creó en 1987). Su popularidad se debe a que es el único formato de imagen que permite animaciones. Su época dorada llegó a finales del siglo pasado, donde gran cantidad de gifs animados decoraban infinidad de páginas personales alojadas en Lycos (el blogspot del siglo 20).

El uso de imágenes gif en las páginas profesionales actualmente tienen una presencia muy limitada. Las últimas tendencias de diseño web se alejan de las animaciones y con la llegada de los dispositivos móviles con pantallas más reducidas, terminaron de hacer de los gif animados, algo a evitar. La calidad de las imágenes en los gif estáticos tampoco es buena, ya que está limitado a una profundidad de colores de 8 bit (256), perdiendo claramente con la calidad de imagen que aportan otros formatos.

Generalmente los pocos gifs que verás en páginas web se trataran de pequeñas infografias o esquemas que aporten valor al contenido. O algún logotipo que otro con “ritmo”.

Archivos png para web

Este tipo de imágenes se crearon en 1995 para mejorar los GIF. Este formato de imagen perdió la capacidad de las animaciones a costa de poder reducir aún más su tamaño y mejorar la calidad de las mismas. Con una profundidad de 16 bits, reflejaba mejor la realidad y las imágenes complejas con mucha variedad de color.

Aunque este formato de imagen mejora considerable la calidad de los GIF, es más pesado que las imágenes JPG de media. Actualmente en el diseño web, los png los usamos únicamente cuando queremos que una imagen tenga una transparencia. Las imágenes png son las únicas que nos permite publicar imágenes con fondos transparentes (en los jpg las transparencias se vuelven de color blanco).

Archivos svg para web

El formato SVG o Scalable Vector Graphics no contiene mapa de bits, como en el resto de formatos. En los archivos SVG solo podemos encontrar imágenes, textos y diferentes formas de vectores gráficos, como líneas, polígonos, círculos, rectángulos, etc…

La ventaja de usar el formato svg en el diseño web es que la calidad de estos archivos es infinita. Podemos alargar o acortar la imagen todo lo que queramos; nunca veremos ninguna pixelación ni pérdida de calidad.

Usamos los svg para los logotipos, iconos y aspectos que solo aportan valor visual. De este modo podemos mostrar un icono de tamaño reducido en los móviles y de tamaño más grandes en los ordenadores sin tener que cambiar de imagen, manteniendo la misma calidad.

Archivos webp para web

Este formato de imagen, de creciente creación, es el heredero de todos los formatos para usar en páginas web. Creado por el gigante Google, los archivos webp vienen para sustituir tanto a los jpg, gif y png. Las imágenes webp reflejan fielmente los colores de las imágenes, permiten transparencias y animaciones. Y, la gran ventaja de los archivos webp, ocupan muchísimo menos que cualquiera del resto de formatos de imágenes para web.

Con esto lo que obtendremos es que la página ocupe menos megas y se reduzca considerablemente la carga de la web. Recientemente el Pagespeed de Google ya tiene en cuenta si usamos imágenes webp o no para realizar la puntuación.

Cambiar formato de fotos

Es importante saber el formato de foto correcta a usar para según qué elementos. No es buena idea para las imágenes fotográficas usar gif o el formato jpg para los iconos. Tal y como os comentabamos.

 

Si te has equivocado en la elección de alguna imagen no te preocupes, vas a poder mejorar el rendimiento de tu web convirtiendo la imagen al formato adecuado y subiéndola a wordpress.

Puedes buscar las imágenes que quieras en Medios, dentro de wordpress, o editar la entrada que tiene esa imagen con formato erróneo. Si usas photoshop o algun editor de fotos, puedes cambiarle el formato. Asegúrate que la calidad sea la adecuada. Siempre es recomendable ver la imagen con en nuevo formato antes de subirla a wordpress.

Cómo cambiar el tipo de archivo de imagen online

Si no tienes photoshop ni ningún editor fotográfico con opción de cambiar de formato puedes usar algun convertidor de formato de imágenes online. La ventaja de usar los convertidores online es que el proceso es más rápido que con photoshop, donde tienes que abrir y guardar cada foto que quieras modificar.

Con convertio.co el proceso para cambiar de formato es muy simple. Basta con arrastrar la imagen que quieras convertir. Te saldran todos los formatos disponibles a los que puedes pasar la foto (tiene infinidad de formatos, incluido webp). También tienes opción de cambiarle el formato a carpetas enteras de google Drive o dropbox para que el proceso sea aún más sencillo para ti.

Compresor de imágenes

Además de usar el formato adecuado a lo que queremos representar, es igual de importante que la imagen este comprimida. Es la única forma en la que podemos asegurarnos de que nuestra web no pesa más de lo que debería, de cara a Google ya los usuarios.

Para comprimir las imágenes también tenemos la opción de hacerlo con algun editor fotográfico que tenga dicha opción (como photoshop con el modo “Guardar para web”) o con compresores de fotos online. Además en este caso, podemos usar algún plugin de wordpress para comprimir imágenes que realizará todo el proceso automáticamente.

Compresores de imágenes online

El mejor compresor online es, sin duda, TinyJPG. Realiza compresiones de imágenes de forma rápida. Es capaz de reducir cualquier imagen recién sacada de photoshop un 60% sin perder ni un ápice de calidad. La única pega es que solo permite subir 20 imágenes como máximo a la vez y que no superen 5 MB. Para compresiones de un gran volumen de imágenes el proceso puede ser largo y tedioso.

Plugins de wordpress para comprimir imágenes

Este método es más adecuado si nunca has optimizado ninguna imagen de tu página web. Todo se realiza de forma automática o semiautomática según el plugin y los resultados son muy buenos, aunque perdamos cierta capacidad de controlar el proceso y el resultado final.

Con optimizador.io podras comprimir y optimizar todas las imágenes de tu wordpress sin preocuparte de nada. Trabaja en modo automático y genera siempre una copia de seguridad de la imagen, por si decides sustituirla. Lo mejor de todo es que es totalmente gratuito (aunque con limitación de imágenes comprimidas al mes).

Otro plugin para comprimir imágenes conocido por la comunidad es smush con un funcionamiento muy similar a optimizador.io. Aunque en este caso no hay ninguna limitación en la cantidad de imágenes a comprimir aunque no puede comprimir imágenes de más de 5 MB.

Cómo poner imágenes de formato webp en WordPress

El uso de las imágenes webp se está convirtiendo en obligatorio para toda página web que quiera cuidar de la experiencia de usuario de sus visitantes. Tendremos la misma calidad en las imágenes por mucho menos espacio y carga. De hecho pagespeed ya está bajando puntuaciones en aquellas webs que no dispongan de imágenes en formato webp.

El principal problema del uso de imágenes en formato webp es que actualmente no todos los navegadores tienen la funcionalidad de mostrar las imágenes en webp y dejarán un espacio en blanco en su defecto. Hablamos de los navegadores Internet explorer y Safari de Apple. Asi mismo, versiones más antiguas de navegadores como chrome, firefox u Opera tampoco tendrán la capacidad de mostrar correctamente las imágenes en formato webp.

Es por ello, que siempre que vayamos a plantearnos a poner este tipo de imágenes en nuestra web, nos aseguremos de que, en caso de que el navegador no sea compatible, se muestran las imágenes jpeg/png. Mientras que si el navegador es compatible, muestre las imágenes en formato webp.

Aunque este proceso de detectar la compatibilidad del navegador con las imágenes en webp pueda parecer complicado o muy técnico, tenemos la ayuda de algunos plugins que harán ese trabajo por nosotros.

Convertir imágenes a webp

El primer paso es convertir todas las imágenes de la web a webp. Más adelante nos ocuparemos de tratar la compatibilidad con el navegador y de mostrarlas o no. Para poder convertir las imágenes abp podemos recurrir de algun plugin o podemos comprimirlas nosotros mismos en el ordenador y subirlas a la web, y controlar todo el proceso.

Si decidimos convertir nosotros mismos las imágenes jpg a webp debemos de descargarnos un convertidor de webp. Por rendimiento y calidad recomiendo xnConvert. Tras instalarlo debemos de descargarnos todas las imágenes de nuestro wordpress. Las imágenes se encuentran por defecto en la carpeta uploads dentro de wp-content. Puedes obtener las imágenes por FTP o si lo prefieres desde el propio panel del hosting. Si lo haces desde el hosting puedes comprimir la carpeta uploads y descargarla a tu ordenador.

Ahora con la carpeta uploads descomprimida basta con arrastrar la carpeta dentro del convertidor de webp:

Si ves archivos que no son imágenes, como .css, .php u otros ficheros no te preocupes, el propio convertidor de webp los omitirá. En la pestaña “Salida” debemos de seleccionar cuál será la carpeta de destino de las imágenes y pulsar en convert para que el proceso de conversión de imágenes comience.

Una de las ventajas de las imágenes webp es que se convierten muy rápido, por lo que una tienda online con aproximadamente 400 productos con varias imágenes puede convertirse en aproximadamente 6-7 minutos.

Una vez tengamos todas las imágenes en nuestra carpeta, debemos de subirlo a la carpeta uploads de nuestro wordpress. No te preocupes por el proceso, no se va a sobreescribir ningún archivo ya que en tu hosting tienes solo archivos de imagen jpg / png y estás añadiendo imágenes en .webp, por lo que las imágenes seguirán ahí. Asegurate de que las imágenes tengan el mismo nombre, tanto las jpg como las nuevas webp.

Plugins para wordpress webp

Si este proceso te parece muy complicado siempre puedes optar por usar el plugin imagify que automatizará el proceso y meterá en la carpeta uploads las imágenes ya convertidas a webp. Imagify tiene una versión gratuita de 25 MB de conversión al mes, por lo que para páginas con pocas imágenes, el proceso se podría completar en uno o dos meses con imagify. Lo bueno de usar el plugin imagify, es que tiene la opción de mostrar el formato de imagen según si el navegador es compatible con las imágenes webp o no, por lo que nos ahorra el trabajo.

Para las redirecciones de imágenes webp en wordpress deberás seleccionar la casilla “mostrar imágenes en formato webp en el sitio” y la opción de usar las etiquetas picture para las imágenes.

webp express wordpress

Si tienes una gran cantidad de imágenes y quieres hacer el proceso de forma automatizada como imagify pero de forma gratuita puedes probar con webp express, uno de los mejores plugins para convertir imágenes a webp y mostrarlas en tu wordpress. Este plugin, a diferencia de imagify, utiliza tu propio hosting para conrtir automáticamente las imágenes a webp y modificando el htaccess mostrar las imágenes webp si son compatibles con el navegador de tu visitante.

Lo primero de todo hay que aclarar que el proceso de usar tu hosting para convertir las imágenes a webp no es compatible en todos los hostings. Webp express usa diferentes librerías de php que son capaces de convertir imágenes jpg / png a webp. Sin embargo, para que funcione correctamente, la librería tiene que estar instalada en tu servidor. Cuando instales webp express, en los ajustes, verás las opciones diferentes que te van a permitir la conversión de imágenes. Si ninguna opción está en verde significará que en tu alojamiento no hay ninguna librería que permita la conversión a webp de las imágenes.

Si tienes suerte y alguna de las opciones de conversión la tienes en verde, podrás convertir todas las imágenes de wordpress a webp pulsando en “Bulk convert”. Del mismo modo, en las opciones de “alter html” podrás permitir que las imágenes webp se oculten si el navegador es incapaz de mostrarlas. Al igual que con imagify, es recomendable poner las imágenes dentro de etiquetas <picture>.

Redirecciones de imágenes webp cuando el navegador no es compatible

Si te decantas por hacer el proceso de conversión a webp mediante el método manual, con el conversor xnConvert, solo te falta la redirección que permita mostrar imágenes jpg/png cuando el navegador no es compatible. Lo más fácil en este caso es utilizar alguno de los plugins antes comentados, que hacen automáticamente la redirección y además van a ser capaces de convertir las imágenes que no están en la carpeta uploads, como las imágenes del tema.

Para ello basta con instalar el plugin de tu elección y activar las modificaciones de html para añadir la etiqueta <picture> a todas las imágenes. El proceso lo que hace es cargar la imagen según la compatibilidad del navegador. En caso de que el navegador sea compatible, la web cargará mucho antes con las imágenes webp. En caso contrario, la página web funcionará como hasta ahora, con el mismo rendimiento e imágenes.

Para comprobar el correcto funcionamiento de las redirecciones de imágenes, basta con abrir tu página web en chrome y en internet explorer. En ambas 2 se verá la página como hasta ahora pero si investigas el código, verás que las imágenes que muestra en chrome son webp, mientras que en internet explorer se verán los jpg / png.

Cache con imágenes webp

Un problema con el que te podrás encontrar, si sigues esta guia y usas algun cache como wprocket, autooptimize o w3 Total Cache es que las imágenes no redirigen y, tanto en internet explorer como en chrome o firefox, vas a seguir viendo las imágenes con el anterior formato.

Este problema es debido a que las imágenes webp no están servidas desde el cache. Si usas algun cache en tu página web, las imágenes webp deben de ser redirigidas mediante el sistema de caché, para que se pueda generar correctamente la caché con el nuevo formato de imágenes.

Por suerte, es todo bastante sencillo. En casi todos los plugins de cache para wordpress vas a encontrar la opción para permitir que las imágenes webp se cachean. En wp rocket esta opción se encuentra en medios, en la última opción (solo las versiones más recientes de wp rocket).

Si sigues sin ver las imágenes, borra la caché y regenera el caché con las imágenes en formato webp para que se generen las 2 versiones de la web correctamente.

Caso real: ¿Afecta al rendimiento las imágenes webp?

Como caso voy a poner a un cliente al que únicamente se le ha realizado la optimización de imágenes. Lleva meses usando optimizador.io como plugin de compresión de imágenes. La página está desarrollada con visual composer (las mejoras de carga son limitadas).

Partíamos de la situación:

Como muchos visual composer, la puntuación en móviles es bastante pobre. Sobre todo en este caso, que incluye un slider en la página de inicio. El primer renderizado la realiza en 5.4 segundos en móvil. En ordenador, la puntuación también es baja, debido principalmente al slider. En ambos casos se está usando el plugin wp rocket con todas las mejoras de entrega optimizadas y lazy load activado.

He descargado todas las imágenes que tenia en uploads y mediante el conversor a webp xnConvert se le ha pasado todas las imágenes que tenía a webp y subido a la carpeta uploads. Para las imágenes del theme he usado Imagify. Y por último, he activado la cache para webp en WProcket y regenerar la cache.

Los resultados han sido los siguientes:

En móvil ha mejorado considerablemente la puntuación aunque solo llega al aprobado. Gran parte de la mejoría viene por el slider que ha reducido considerablemente su tamaño, pasando de poco más de 200kb a 60kb. Donde más se nota esta reducción de tamaño entre imágenes es en el primer renderizado, ya que necesita cargar menos datos para completar la carga completa de la imagen.

En los dispositivos de sobremesa se ha mejorado considerablemente la carga, con una puntuación de 95 sobre 100. En esta página web el tamaño de las imágenes y el redimensionado eran la razón principal por la cual tenía tan baja puntuación.