---
title: "La etiqueta Picture enfocada al SEO y los formatos de nueva generación - Carlos Sánchez"
description: "La etiqueta picture es una etiqueta de HTML que nos permite poner distintos formatos de imagen en una sola."
author: "Carlos Sánchez"
url: https://carlossanchezdonate.com/articulo/etiqueta-picture/
image: https://carlossanchezdonate.com/wp-content/uploads/og-picture-tag.jpg
---





# Etiqueta Picture enfocada al SEO




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






![Etiqueta Picture enfocada al SEO](https://carlossanchezdonate.com/wp-content/uploads/cover-picture-tag.jpg)




**Autor:**

        : [Carlos Sánchez](https://carlossanchezdonate.com/sobre-mi/)


**Temática: **
: [Multimedia](https://carlossanchezdonate.com/seo-avanzado/multimedia/)
, : [WPO](https://carlossanchezdonate.com/seo-avanzado/rendimiento-velocidad/)




**Fecha de publicación:**

        : 2022-03-04



**Última revisión:**

        : 2026-03-02




        **Índice**
                mostrar


        1
                ¿Cómo publicamos imágenes con formatos de próxima generación?
        1.1
                Paso a paso de cómo se usa la etiqueta Picture
        1.1.1
                Añadimos los atributos alt y title si procede
        1.1.2
                srcset y source media
        1.2
                Qué es Source type en la etiqueta Picture
        1.2.1
                La extensión Avif en el SEO
        2
                Bibliografía

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](https://carlossanchezdonate.com/seo-avanzado/rendimiento-velocidad/#informacion) 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](https://carlossanchezdonate.com/articulo/la-extension-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://carlossanchezdonate.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á.



                ¿No lo estás entendiendo?
                Si quieres aprender a aplicar todo esto y mucho más, accede a mi formación:
                [¡Aprende SEO de verdad!](/master-seo-tecnico/)




#### 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://cdn-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">

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í](https://developers.google.com/web/fundamentals/design-and-ux/responsive/images?hl=es) 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](https://productdesigner.es/pildoras/que-es-un-breakpoint-en-css-y-cuales-usar/#:~:text=Explicado%20de%20una%20forma%20r%C3%A1pida,a%20diferentes%20pantallas%20y%20dispositivos.), 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í](https://www.iana.org/assignments/media-types/media-types.xhtml) 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](https://carlossanchezdonate.com/articulo/la-extension-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](https://sanchezdonate.com/wp-content/uploads/etiqueta-picture-ejemplo.png)

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:

- avif 8,28KB
- jp2 92KB
- png  115KB
- webp 77KB

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.

#### La extensión Avif en el SEO

La extensión AVIF (AV1 Image File Format) es un formato de archivo de imagen que se basa en el estándar de compresión de video AV1 (vídeo). Es un formato abierto y libre de regalías desarrollado por la Alianza para Medios Abiertos (AOMedia). AVIF ha ganado popularidad en los últimos años y se ha convertido en uno de los formatos de imagen más utilizados en la web.

**
Actualización: Desde finales de agosto de 2024, AVIF es un tipo de archivo [compatible con Google Search](https://developers.google.com/search/blog/2024/08/happy-avifriday), lo que significa que las imágenes en este formato pueden ser indexadas y utilizadas en Google Images y otros servicios de búsqueda de Google sin necesidad de realizar ningún ajuste especial. No obstante, la etiqueta Picture sigue siendo recomendable.

Así que, las imágenes en formato AVIF pueden ser indexadas y utilizadas en Google Images, así como en cualquier otro lugar que utilice imágenes en Google Search. No se necesita hacer nada especial para que tus archivos AVIF sean indexados por Google.

Además, [Googlebot](/articulo/googlebot/) y Crawley están verificando la compatibilidad de los archivos AVIF. Se recomienda evaluar cuidadosamente si el formato AVIF es adecuado para tus necesidades específicas antes de realizar cambios masivos en las imágenes de un sitio web. Si decides cambiar el formato de imagen, y esto resulta en cambios en los nombres de archivo o extensiones, es importante configurar [redireccionamientos en el servidor](https://carlossanchezdonate.com/recursos/redirecciones-servidor/) para evitar problemas de SEO. Recuerda que se puede hacer de una forma relativamente sencilla por medio de [regex.](/articulo/regex-xpath-y-selectores/) Puedes ver ciertos [trucos sobre como hacer redirecciones](https://carlossanchezdonate.com/articulo/redireccionar-parametros-htaccess/).

##### Ventajas de AVIF

- Alta compresión con calidad superior: Una de las mayores ventajas del formato AVIF es su capacidad para ofrecer una alta compresión sin sacrificar la calidad de la imagen. Esto se traduce en archivos más pequeños en comparación con otros formatos como JPEG o PNG, lo que mejora los tiempos de carga en sitios web y reduce el consumo de ancho de banda.
- Soporte para transparencia: Al igual que el formato PNG, AVIF soporta imágenes con transparencia, lo que lo hace ideal para gráficos, logotipos y otros elementos que requieren fondos transparentes.
- Rango dinámico alto (HDR): AVIF es compatible con imágenes de alto rango dinámico, lo que significa que puede manejar una gama más amplia de luminosidad y color, mejorando la representación visual en dispositivos que soportan HDR.
- Compatibilidad con navegadores y plataformas: AVIF es compatible con todos los navegadores web principales y es compatible con una variedad de servicios y plataformas en la web, como WordPress, Joomla, y CloudFlare.

##### Desventajas de Avif

- Facilidad de edición: Uno de los inconvenientes del formato AVIF es que, debido a su compresión y tecnología subyacente, puede ser más difícil de editar en comparación con otros formatos más comunes como JPEG o PNG. No todos los programas de edición de imágenes tienen soporte completo para AVIF, lo que puede limitar su usabilidad para algunos usuarios.
- Tiempo de codificación: Aunque la compresión de AVIF es eficiente, el proceso de codificación (es decir, convertir una imagen a AVIF) puede ser más lento en comparación con otros formatos de imagen, debido a la complejidad del algoritmo de compresión.
- Compatibilidad limitada en algunos entornos: A pesar de su creciente adopción, AVIF todavía no es compatible universalmente con todas las herramientas y software de edición de imágenes, lo que puede ser un obstáculo en flujos de trabajo que dependen de un amplio soporte de formatos.

## Bibliografía

- [Nuevas formas de acceso a internet](https://www.expansion.com/fueradeserie/tecno/2022/02/15/6201319f468aeb63638b4623.html)
- [Pasamos de media 7 horas al día en internet](https://datareportal.com/global-digital-overview#:~:text=The%20average%20global%20internet%20user,human%20existence%20online%20in%202022.)
- [Prácticas recomendadas de Google Imágenes](https://developers.google.com/search/docs/advanced/guidelines/google-images)
- [Etiqueta <picture> en Developer Mozilla](https://developer.mozilla.org/es/docs/Web/HTML/Element/picture)


        Si te gusta este artículo, me ayudarías un montón compartiendo mi contenido:

        Compartir:


                [![Compartir en LinkedIn](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/linkedin.svg)](https://www.linkedin.com/cws/share/?url=https://carlossanchezdonate.com/articulo/etiqueta-picture/)



                [![Compartir en Twitter](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/tw.svg)](https://twitter.com/intent/tweet?url=https://carlossanchezdonate.com/articulo/etiqueta-picture/)



                [![Compartir en Facebook](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/facebook.svg)](https://www.facebook.com/sharer/sharer.php?u=https://carlossanchezdonate.com/articulo/etiqueta-picture/)



                [![Compartir en WhatsApp](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/whatsapp.svg)](whatsapp://send?text=https://carlossanchezdonate.com/articulo/etiqueta-picture/)



                [![Compartir en Telegram](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/tlg.svg)](https://telegram.me/share/url?url=https://carlossanchezdonate.com/articulo/etiqueta-picture/)





        No se te da mal el SEO Técnico

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!](/master-seo-tecnico/)



  Tal vez te interesen otros artículos:
  [Artículos de SEO](/seo-avanzado/)





                [Texto alternativo para imágenes](https://carlossanchezdonate.com/articulo/alt-imagenes/)







                [Sitemaps](https://carlossanchezdonate.com/articulo/sitemaps/)







                [Curación de enlaces en el SEO](https://carlossanchezdonate.com/articulo/curacion-de-enlaces-en-el-seo/)







                [El presupuesto de rastreo](https://carlossanchezdonate.com/articulo/el-presupuesto-de-rastreo/)







                [Rich Snippets con HTML](https://carlossanchezdonate.com/articulo/rich-snippets-sin-datos-estructurados/)