Comenzamos en: 17d 8h 39m 57s
PLAZAS LIMITADAS

Etiqueta Picture enfocada al SEO

La etiqueta picture es una etiqueta de HTML que nos permite poner distintos formatos de imagen en una sola.

Autor: Carlos Sánchez
Temática: Multimedia, WPO
Fecha de publicación: 2022-03-04
Última revisión: 2022-08-15

Cada vez la tecnología va mejorando y evolucionando más. No se navega de la misma forma que hace 10 años, y no se navegará igual en el futuro. La velocidad de internet es cada vez mayor e internet es ya un fenómeno global.

No obstante, debido a las mejoras de Hardware y a la extensión del uso de internet, el cual se usa a día de hoy. El Software también debe acompañar. Y los usuarios demandan webs rápidas.

Si bien el WPO no es el factor de posicionamiento más importante, tiene bastante importancia, porque evita la frustración de esperar a que una web cargue.

Uno de los factores que pueden ayudar a mejorar el rendimiento en una web, es el uso de formatos de imagen de nueva generación. Los formatos más usados hasta ahora se están quedando cada vez más atrás, realmente el PNG es demasiado pesado, el JPG no permite transparencias, y los nuevos formatos van pisando fuerte.

Si examinamos estos nuevos formatos como JPEG 2000, WebP o AVIF, podemos comprobar que aunque tengan un grandísimo rendimiento, estos no son compatibles en todos los navegadores.

¿Cómo publicamos imágenes con formatos de próxima generación?

Realmente con la etiqueta <picture>, compatible en todos los navegadores excepto con IE y Opera Mini. Esta etiqueta nos permite poner imágenes de los formatos que más nos convengan.

Si bien el uso original de picture, en principio puede parecer similar al del atributo srcset, debido a que nos sirve para mostrar una versión de la imagen u otra, dependiendo del tamaño de la pantalla. La etiqueta picture, además nos permite poner distintos formatos para una misma imagen.

Esta etiqueta funciona parecida a la de <video> o <audio>. Puedes seleccionar distintos formatos, y leyendo de arriba hacia abajo. El primero que sea legible o cumpla los requisitos establecidos, será el primero en mostrarse. Veamos un paso a paso de cómo hacer una buena implementación de esta etiqueta:

Paso a paso de cómo se usa la etiqueta Picture

Comencemos por lo básico. De esta manera etiquetamos una imagen por medio de HTML:

<img src=«https://carlos.sanchezdonate.com/wp-content/themes/sanchezdonate/images/home/code-seo-laravel.png»>

Con HTML5, no es necesario cerrar dicha etiqueta. Como comprobamos, simplemente es la etiqueta img con el atributo src. Src, es un acrónimo de source, y se utiliza para poner la URL de la imagen. Simplemente poniéndole el atributo src a una etiqueta <img> la imagen funcionará.

Añadimos los atributos alt y title si procede

En HTML el orden de los atributos en una etiqueta no altera el producto, por lo que se pueden poner en cualquier orden.

<img alt=»Metaetiquetas implementadas en el FrameWork Laravel» title=»Metaetiquetas en Laravel» src=»https://carlos.sanchezdonate.com/wp-content/themes/sanchezdonate/images/home/code-seo-laravel.png»>

Con el atributo alt, estamos seleccionando un texto alternativo en el caso en el que nuestra imagen no cargue. Además este es el atributo que utilizan los motores de búsqueda como Google para poder interpretar mejor la imagen y entenderla. Este atributo nunca se debe utilizar como un cajón de palabras clave, o para meter las palabras clave que no sabemos cómo añadir a nuestro contenido. Este atributo sirve para hacer una breve descripción de la imagen a la que se refiere.

Lo ideal para su correcta implementación, es pensar en este atributo como si le describiéramos la imagen a una persona que no la puede ver.

A continuación (aunque sea una práctica antiSEO, que tenemos que evitar a toda costa en una web), voy a poner adrede una imagen, la cual no sea capaz de detectar la fuente, con un atributo alt.

<img alt=»Ejemplo de imagen que no es capaz de detectar la fuente» title=»Lo que pone en el title, se muestra al hacer hover»>

Ejemplo de imagen que no es capaz de detectar la fuente

Aquí vemos que ocurre cuando no se selecciona un src, o se manda a una url inexistente o bloqueada.

Aunque Google cada vez interpreta mejor las imágenes, actualmente, sigue siendo necesario hacer un correcto uso de estos atributos.

srcset y source media

Realmente a menos que se automatice y se haga una buena implementación, no soy particularmente fan de esta técnica. Aquí se puede ver si se desea más información.

Sin embargo, la realidad es que tanto en caso de automatizarlo, como en caso de prepararlo «manualmente», es una implementación que conlleva mucho tiempo, y además tienes dos opciones. O que desde diseño se haga una versión de tamaño de la imagen distinta por cada breakpoint , o bien, que desde el back-end se automatice para generar distintas versiones de la página. Lo cual, en un principio parece funcionar bien, por ejemplo WordPress lo hace, pero puede generarnos resultados inesperados en cuanto a calidad de la imagen.

Salvo casos extremos, o que se disponga de un gran equipo, el esfuerzo no suele compensar al resultado en cuanto a diferencia de peso. Sin embargo, en casos de imágenes «full width», es decir que ocupen el ancho de pantalla completo, si que nos puede suponer una diferencia.

Qué es Source type en la etiqueta Picture

Source es un elemento dentro de la etiqueta <picture>, que nos permite incluir recursos de medios diferentes (por ejemplo imágenes en distintos formatos) dentro de la misma etiqueta. Estos medios diferentes (en el ejemplo, los formatos de la imagen), se definen por el atributo type, que nos permite especificar qué formatos de imagen queremos utilizar.

Para saber que valor tenemos se tiene que poner en el atributo type, tenemos que utilizar lo que se conoce como un MIME type. Aquí os ofrezco un ejemplo, y simplemente se tendría que buscar el MIME type correspondiente al formato que deseemos utilizar.

Para verlo de manera más clara podemos observar el siguiente ejemplo:

<picture>
 <source type="image/jp2" srcset="ejemplo.jp2">
 <source type="image/avif" srcset="ejemplo.avif">
 <source type="image/webp" srcset="ejemplo.webp">
 <img src="ejemplo.png" alt="imagen de ejemplo">
</picture>

En esta etiqueta <picture> vemos cómo hay definidas tres imágenes con diferente formato: una imagen en formato jp2, otra en avif, otra en webp y otra en png. En este caso, la imagen se mostraría en formato jp2 si el navegador lo permite, como solo lo permite safari, en caso de que no lo permita, mostrará la imagen en webp y, por último, en caso de no permitir las otras, la mostrará en formato png.

Lo ideal es ir de menos compatible a más compatible. Muestro un ejemplo:

carlos sanchez

Se puede comprobar que versión está mostrando el navegador con el clic izquierdo y abrir imagen en una nueva pestaña.
Nota para los más curiosos:

En conclusión, gracias a este atributo, podemos incluir en la misma etiqueta imágenes con diferentes formatos, para que, si el navegador no soporta uno de ellos, tenga una alternativa para mostrar. Esto nos permite incluir formatos de nueva generación sin miedo a qué no se muestre la imagen si estamos en un navegador que no soporta dicho formato.

Bibliografía

Nuevas formas de acceso a internet.

Pasamos de media 7 horas al día en internet.

Prácticas recomendadas de Google Imágenes.

Etiqueta <picture> en Developer Mozilla.

¿Quieres hacer el Master de SEO Técnico?

Accede a una formación avanzada que te permitirá aplicar e implementar SEO en cualquier tipo de WEB

¡Accede al Master de SEO Técnico!
Tal vez te interesen estos artículos:

Si te ha gustado esta publicación, siempre me lo puedes agradecer dándome like en esta publicación de LinkedIn sobre este mismo artículo.