Data URI

El data URI (definido como estándar en el rfrc2397 de IEFT) no entra estrictamente en ninguna de las categorías (URL o URN), ya que es una cadena de caracteres que presentan una imagen. Aun así se sigue considerando un subconjunto de las URIs, ya que siguen el mismo formato básico de una cadena de caracteres que identifica los recursos de una web.

Los data URIs son un tipo de URI muy especial que se utiliza para representar imágenes directamente en el código, sin necesidad de hacer una petición de HTTP por separado para descargarlos. Dependiendo del caso, puede beneficiar o perjudicar el WPO. Se diferencian precisamente por eso de las URLs, ya que las imágenes para funcionar no necesitan ser almacenadas en un servidor web. No es una dirección, es la imagen en si misma, aun así, por la definición de URI, encaja dentro de las URIs aunque no la englobe ninguna de sus dos categorías oficiales.

Una imagen con Data URI puede estar en base 64 o no, en contra de lo que se piensa, se pueden convertir imágenes a data URI sin necesidad de una codificación en base 64. Y al igual que los QR, que es otra forma de almacenar información, no tienen por qué ser estricamente imágenes. Se puede hacer un data URI de una cadena de texto. E incluso para almacenar o codificar una URL

Funcionamiento Data URI

El Data URI comienza con el protocolo o esquema data: seguido de un identificador de tipo de contenido MIME (conocido como MIME/TYPE), seguido de una , y la cadena de caracteres que representa el recurso:

Hay distintos tipos de MYME/TYPES como identificadores de contenido, los registros tienen distintos formatos de: Aplicaciones; audio; tipografías; imágenes; formatos de texto y de vídeo entre otros. Incluyendo un MYME/TYPE creado solo para ejemplos.

Texto con base 64:

data:text/plain;charset=utf-8;base64,aHR0cHM6Ly9jYXJsb3Muc2FuY2hlemRvbmF0ZS5jb20v

Mismo texto sin base 64:

data:text/plain;charset=utf-8,https%3A%2F%2Fcarlos.sanchezdonate.com%2F

Imagenes DATA URI

En cuanto a SEO, las imágenes en Data URI son perfectamente rastreables e indexables por Google. No es una forma de evitar el indexado de imágenes.

El funcionamiento es igual que cuando se pone una URL dentro de la etiqueta IMG de HTML. Se puede poner el URI en el atributo Resource (src). Ejemplo:

<img src="data:image/svg+xml;base64,{data}" alt="El texto alternativo funciona igual y todos los atributos">


Ventajas

• Menos solicitudes de HTTP.
• Puedes integrar imagenes png y jpg dentro de un archivo SVG y que funcionen en cualquier dominio y ordenador. Debido al CORS.
• Al no ser una dirección y ser directamente la imagen, no necesita cargar ningún recurso externo, por lo que si carga la página, carga la imagen.

El CORS es el intercambio de recursos de origen cruzado. Por razones de seguridad, los navegadores restringen las peticiones HTTP de origen cruzado iniciadas desde scripts.

Desventajas

• Incrementan notoriamente el tamaño de una petición de un archivo HTML, puede hacer que el texto debajo tarde más en cargar.
• Mayor complejidad de implementación.
• No se cachean, por lo que si se utiliza la misma imagen en distintas páginas, se descargará de nuevo.
• No tiene buen soporte en Internet Explorer (para quien le importe).
• La ventaja de menos solicitudes de HTTP es menos prioritario si se tiene implementado HTTP/2 o HTTP/3.

Por cierto, si alguna vez te ha surgido la duda de si es posible crear imágenes con Data URI con Chat-GPT, ya te la resuelvo yo 😉: