La etiqueta picture es una etiqueta de HTML que nos permite poner distintos formatos de imagen en una sola.
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.
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:
Comencemos por lo básico. De esta manera etiquetamos una imagen por medio de HTML:
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á.
En HTML el orden de los atributos en una etiqueta no altera el producto, por lo que se pueden poner en cualquier orden.
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.
Aunque Google cada vez interpreta mejor las imágenes, actualmente, sigue siendo necesario hacer un correcto uso de estos atributos.
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.
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:
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.
Te falta mi máster. Accede a una formación avanzada que te permitirá aplicar e implementar SEO en cualquier tipo de WEB
¡Accede al Máster de SEO Técnico!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.
