Mejora tu posicionamiento web con imágenes WebP

En digitalDot hace tiempo que tratamos el tema de el posicionamiento y SEO con imágenes pero, en esta ocasión, además de hacer hincapié en su importancia para el SEO On Page, insistiremos en la influencia para el SEO, a nivel de usabilidad para el usuario (UX) si una foto está correctamente optimizada.

Como empresa especializada en desarrollo de páginas web y tiendas online, hemos trabajado siempre en optimizar el peso y la optimización de las imágenes y desde la salida del html5 apostamos por el formato picture que permite tener varias versiones de nuestra imagen dependiendo del tipo de dispositivo y la resolución.

De esta forma podemos controlar la imagen que ofrecemos en cada dispositivo.

Imaginad una slider con una resolución más ancha que alta, en versiones móviles, este slider o banner, quedaría desproporcionado por lo que podremos crear una slider propia para el móvil.

El ejemplo de este formato sería algo como:

<picture>
<source src=”optimización-imágenes-full.jpg” media=”(min-width: 1000px)”>
<source src=” optimización-imágenes-tablet.jpg” media=”(min-width: 800px)”>
<source src=” optimización-imagenes.jpg”>
<img src=” optimización-imagenes.jpg” alt=”Atributo Picture para páginas Web Responsive.”>
</picture>

Pero, ¿qué opinaríais si os dijéramos que se puede conseguir mucha más optimización de una página web o tienda online? Además de tener una foto propia por tipo de dispositivo, también lo podemos conseguir con el formato de imágenes WebP.

¿Qué es WebP? Ventajas e inconvenientes

Este nuevo formato gráfico, en un primer momento, fue elegido por Google como una opción a las imágenes PNG con fondos transparentes o GIF.

WebP viene a remplazar tanto las imágenes JPG, PNG e incluso los GIF, permitiendo reducir el tamaño de las mismas hasta en un 80%, lo que supone tener una tienda o web mejor optimizada y con mejores tiempos de carga.

#WebP viene a remplazar tanto las imágenes JPG como las PNG. Permite reducir el tamaño de las mismas hasta en un 80%, lo que supone tener una #web mejor optimizada y con mejores tiempos de carga. #palabradedigitalDot Compartir en X

Si queréis saber más sobre WebP podéis tener toda la documentación en la página web del proyecto de Google Webp.

Como todo en la vida siempre hay una cara B, incluso en lo que creemos que es perfecto, y WebP no podría ser menos, el problema principal es que no todos los navegadores soportaban bien este formato, por suerte Chrome fue el primer navegador en añadir compatibilidad y Mozilla está en proceso y puede que antes de que leas este artículo esté ya operativo.

Cambiar JPG/PNG a WebP

Si ya tenéis vuestro gestor de contenido lleno de bellas imágenes o vuestra tienda online con cientos de imágenes en PNG o JPG seguro que querréis poneros manos a la obra para cambiarlas al nuevo formato y mejorar vuestro SEO.

En digitalDot ya hemos hecho el trabajo por vosotros y os vamos a decir cómo lo podéis hacer. En el caso de que tengáis Prestashop, existe un módulo que permite gestionar las imágenes en este formato: Webp Generator Module

Para los que vuestro CMS de cabecera sea WordPress, tenemos una mala noticia: aún no ha incorporado en su última versión WordPress 5 el soporte para subida de imágenes en formato WebP, pero podemos conseguirlo con unas simples líneas en el htaccess.

Vale, tú no tienes ni WordPress ni Prestashop, pues nada, con estas reglas de htaccess las podéis incluir en Drupal y en Joomla, y también en Prestashop por si no queréis adquirir el módulo.

Al aplicar esta regla debemos tener en la misma ruta de nuestras imágenes la alternativa en este nuevo formato de imágenes optimizadas para web (WebP).

Para facilitaros el trabajo os contamos algunas formas de hacerlo de forma automatizada, ya que, si hablamos con una web con cientos de imágenes o una tienda con miles de productos, este trabajo se puede convertir en un proceso algo engorroso.

Si contamos con sistemas Linux podemos hacer uso de la herramienta de ImageMagick  o bien una alternativa como img2webp.

Para ello instalamos Webp desde consola:

sudo apt install webp

Una vez lo tengamos podremos lanzar un proceso de compresión sobre las carpetas con el comando:

img2webp -loop 2 imagensinoptimizar.png -lossy in1.jpg -d 80 in2.tiff -o out.webp

Si queréis más información sobre el comando lo encontraréis en Google Developer.

Por último, si contamos con un Windows, el proceso se simplifica bastante.

Para ello tenemos dos herramientas conocidas WebPconv y XnConvert, esta última se nos ha mostrado como más intuitiva y completa ya que permite incluso renombrar fotografías.

Indicando la ruta de nuestras fotografías, en caso de WordPress la carpeta UPLOAD, en el caso de Prestashop la carpeta IMG, podremos preparar todas las fotografías tanto de nuestra tienda online como las de nuestra web.

Optimizar imágenes para mejorar la velocidad web

Llegado a este punto solo nos quedaría explicar la importancia de optimizar las imágenes para mejorar la velocidad de carga de una web o tienda online.

Al optimizar las imágenes y al tenerlas con el formato webp que recomienda Google, conseguiremos que la web cargue más rápido y eso se traduce en mejor usabilidad y mejor experiencia para el usuario. ¿Por qué?, porque a partir de 4 segundos, de tiempo de carga, puede suponer una perdida del 15% de los usuarios. Y, estamos convencidos de que no quieres perder usuarios.

Herramientas de análisis y auditoría SEO, como por ejemplo Page Speed, inciden en la importancia de las imágenes para el posicionamiento y por ello cuentan con apartados propios que arrojan datos necesarios para que se tenga en cuenta en el trabajo de posicionamiento web.

Por haber llegado hasta aquí te mereces un truco para el SEO de imágenes.

Como ya sabréis el tráfico estimado por Google Images es de un 15%, un valor nada despreciable, por lo que si queremos beneficiarnos de ese tráfico orgánico podemos hacer uso del atributo Longdesc de una imagen para poner una descripción más larga a las fotografías

Ejemplo:

<img src="infografiaseo.gif" alt="Posicionamiento con Imágenes" width="100" height="132" longdesc="Posicionamiento SEO con imágenes Webp y la optimización de nuestra Web">

Como ya todo el mundo conocerá el formato hml5 ? podemos incluso indicar con metadatos toda la información que necesita Google.

<figure itemscope itemtype=”https://schema.org/ImageObject”><img src="infografiaseo.gif" alt="Posicionamiento con Imágenes" width="100" height="132" longdesc="Posicionamiento SEO con imágenes Webp y la optimización de nuestra Web"><figcaption itemprop= “description”>Optimización Seo con imágenes WebP</figcaption> </figure>

Y ahora sí que nos despedimos esperando que os haya sido de utilidad este artículo. Si tenéis una web o tienda online y sentís que no crecéis en posicionamiento no dudéis en contactar con nuestro servicio de asesoría SEO en Murcia.