Si has auditado tu web con Google Page Speed o Google Lighthouse es posible que una de las recomendaciones que Google te haya dado sea transformar las imágenes de tu web a formatos next-generation. A continuación te contamos qué son estos nuevos formatos, cómo puedes preparar las imágenes antes de subirlas a la web y qué puedes hacer para cambiar el formato de las imágenes tocando algo de código.
¿Qué son las imágenes next-generation?
Las imágenes next-gen son un formato de imágenes con mayor compresión y menor peso que los formatos tradicionales (JPEG, PNG, TIFF, RAW…) que se han venido utilizando hasta ahora.
Estos nuevos formatos están pensados especialmente para websites, navegadores y medios online.
Las imágenes next-gen mantienen la misma calidad de la imagen pero con un menor peso, por lo que tu web cargará con mayor rapidez.
Actualmente contamos con los siguientes formatos next-gen:
- AVIF
- Browser JPEG
- Browser PNG
- JPEG XL (beta)
- MozJPEG
- OxiPNG
- WebP
- WebP v2
JPEG 2000 es el formato utilizado por safari, JPEG XR es el de Microsoft Edge y WebP es usado en Chrome, Firefox y Opera.
Debido a que esto implicaría tener la imagen por cuatriplicado, te recomendamos utilizar los formatos WebP y OXiPNG en tu web ya que son dos formatos con buen rendimiento y con más soporte de navegadores.
¿Es importante optimizar las imágenes?
Si. Las imágenes deben ocupar el menor espacio posible en el servidor.
Un sitio rápido es importante principalmente para los visitantes ya que abandonan la web si carga demasiado lenta, pero también es importante para el rendimiento de SEO, ya que los motores de búsqueda consideran la velocidad del sitio web como un factor de clasificación.
El tamaño del sitio web es uno de los factores más importantes que afectan el rendimiento del sitio web: las imágenes pueden representar el 50% del tiempo de carga.
Al optimizar las imágenes, ganarás rápidamente unos segundos muy valiosos y hará que tu sitio web sea más rápido.
¿Cómo transformar las imágenes a formatos next-gen?
En Interdominios recomendamos la herramienta online gratuita: Squoosh
Nos gusta mucho porque es una herramienta desarrollada por Google y es muy sencilla de utilizar.
Para usar Squoosh solo tienes que acceder a la página https://squoosh.app/ seleccionar la imagen que quieras transformar y utilizar el menú de la derecha.
Cómo usar squoosh
Donde pone «restize«, puedes ajustar el ancho y alto de la imagen.
En «Reduce palette» podrías elegir el número de colores que tiene la imagen. Cuánto más reduces los colores, más optimizada está la imagen pero te recomendamos no tocar este ratio para no perder calidad en tu imagen.
En «compress» puedes elegir el formato next-gen que quieras.
«Advanced settings» te permite afinar aún más la optimización de la imagen, aunque te recomendamos no tocar demasiado para que la imagen no pierda calidad.
Una ventanita te mostrará cuánto se ha optimizado la imagen con el nuevo formato respecto al original. Solo tienes que descargar la imagen haciendo clic en la flechita hacia abajo para poder subir la imagen next-gen a tu web.
Verás que la pantalla de la aplicación se divide en dos. A la izquierda ves cómo es la imagen original. A la derecha el resultado tras la optimización. Puedes ir jugando con los parámetros y comprimiendo las imágenes todo lo que desees. En ocasiones la optimización llega a ser de un 95% y 99% respecto a la original.
Cambiar las imágenes a formato next-gen con código
La forma más óptima de implementar esto sería utilizar la etiqueta picture y reemplazar todas las imágenes de nuestra web.
De esta forma, el navegador que si soporta el formato webp utiliza dicha imagen y si no utiliza la imagen por defecto.
<picture>
<source srcset="imagenwebp.webp" type="image/webp">
<img src="imagenpng.png" >
</picture>
Aún así, no siempre es posible o viable introducir ese fragmento de código que modifica toda la web. Vamos a dar un pequeño tip para hacerlo sin modificar nuestra web.
Existen numerosas librerías que se encargan de hacer la conversión a webP, así que nos vamos a basar en esta librería para simplificar el trabajo.
Una vez descargada dicha librería, solo tenemos que añadir estas líneas a nuestro archivo htaccess
<IfModule mod_rewrite.c>
RewriteEngine On # Redirect to existing converted image in cache-dir (if browser supports webp)
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^/?(.+)\.(jpe?g|png)$ /imagenes-webp.php [NC,L,E=REQFN:%{REQUEST_FILENAME}]
<IfModule mod_headers.c>
<FilesMatch "(?i)\.(jpe?g|png)$">
Header append "Vary" "Accept"
</FilesMatch>
</IfModule>
</IfModule>Con esta orden, le estaremos diciendo al navegador que primero rastree nuestro archivo imagenes-webp.php en caso de que nuestro navegador soporte el uso de este tipo de formato. Una vez tengamos esto, simplemente creamos dicho archivo en el que crearemos la imágenes en webp
<?php require_once "./webp-convert-master/vendor/autoload.php"; use WebPConvert\WebPConvert; $source = $_SERVER['REQUEST_URI']; $destination = $source . '.webp'; WebPConvert::serveConverted($source, $destination, [ 'fail' => 'original',
'serve-image' => [
'headers' => [
'cache-control' => true,
'vary-accept' => true,
],
'cache-control-header' => 'max-age=2',
],
'convert' => [
],
]);
De esta forma, estaremos utilizando imágenes next-gen en nuestra web y la velocidad de carga de nuestra web se verá reducida y nuestra puntuación en Google PageSpeed Insights será mucho más alta.
Cómo convertir el formato de las imágenes a Webp con Imagify
Si lo de tocar código no te convence, puedes consultar nuestros servicios de optimización web profesional donde se incluye el cambio a formatos next-generation de las imágenes, su compresión y reescalado.
También puedes utilizar alguno de los múltiples plugins que hay en el repositorio de WordPress para minificar imágenes y cambiar su formato a Webp.
Nosotros recomendamos Imagify, es muy sencillo de utilizar y suele dar buen resultado.
Con Imagify puedes comprimir las imágenes sin perder calidad, conviertir los formatos a WebP y acelerar tu sitio web.
Imagify es uno de los plugins para WordPress más avanzados para optimizar imágenes.
Después de habilitarlo, todas sus imágenes, incluidas las miniaturas, se optimizan automáticamente cuando se carguen en WordPress. Imagify no solo comprime las imágenes, también puedes usarlo para convertir imágenes WebP,
Es compatible con WooCommerce y NextGen Gallery.
Esperamos que te haya resultado útil el artículo.
También te puede interesar…
- Cómo hacer que un correo no llegue como spam – [guía completa]
- Novedades en Google Page Speed ¿En qué ha cambiado?
- TOP 5 herramientas para crear un boceto web o wireframe
- Nuevo hosting para WordPress de Interdominios ¡Más rápido, seguro y con todo instalado!