Función @image para Blogger

Función utilitaria diseñada para generar y manipular etiquetas de imagen alojadas en servidores de Google (Blogger, Google Fotos, YouTube). Permite controlar dimensiones, aplicar lazy loading nativo y generar atributos responsivos (srcset) de forma centralizada.

Esta función forma parte del proyecto Hamlet. Puedes revisar el código fuente en GitHub.

Definición de la función

<b:includable id='@image'>
  <b:comment>
  Create an image tag with optional attributes and responsive support
  @author zkreations
  @param {image} src - Image URL
  @param {number[]} [sourceSet] - Array of image widths (e.g. [320, 640, 1024])
  @param {number} [width] - Image width
  @param {number} [height] - Image height
  @param {number} [resize] - Change dimensions
  @param {string} [ratio] - Aspect ratio
  @param {string} [id] - Image ID
  @param {string} [class] - Additional classes
  @param {string} [sizes] - Sizes attribute
  @param {string} [loading] - Loading attribute
  @param {string} [fetchpriority] - Fetch priority attribute
  @param {string} [crossorigin] - Cross-origin attribute
  @param {string} [decoding] - Decoding attribute
  @param {string} [referrerpolicy] - Referrer policy attribute
  @param {string} [alt] - Alt text
  @param {string} [params] - Additional parameters for proxy images
  </b:comment>
  <b:if cond='data:src'>
    <b:with value='data:src.isYoutube
      ? data:src.youtubeMaxResDefaultUrl
      : data:src' var='baseImage'>
      <b:with value='(data:resize
        ? resizeImage(data:baseImage, data:resize, data:ratio)
        : data:baseImage
      )' var='image'>
        <b:tag name='img'>
          <b:attr name='b:whitespace' value='remove'/>
          <b:class cond='data:class' expr:name='data:class'/>
          <b:loop values='["id","sizes","loading","fetchpriority","crossorigin","decoding","referrerpolicy","alt"]' var='attr'>
            <b:with expr:value='+("data:",data:attr)' var='value'>
              <b:attr expr:name='data:attr' expr:value='data:value'/>
            </b:with>
          </b:loop>
          <b:with value='[
            "com/img/a/",
            "com/blogger_img_proxy"
          ]' any (server => server in data:image)' var='isProxyImg'>
            <b:with value='data:params and data:isProxyImg ? ("-" + data:params) : ""' var='params'>
              <b:with value='data:sourceSet ? resizeImage(data:image, data:sourceSet.first, data:ratio) : data:image' var='image'>
                <b:attr name='src' expr:value='data:image + data:params'/>
                <b:attr name='width' expr:value='data:width ?: data:image.width'/>
                <b:attr name='height' expr:value='data:height ?: data:image.height'/>
              </b:with>
            </b:with>
          </b:with>
          <b:if cond='data:sourceSet'>
            <b:attr name='srcset' expr:value='sourceSet(data:image, data:sourceSet, data:ratio)'/>
          </b:if>
        </b:tag>
      </b:with>
    </b:with>
  <b:else/>
    <b:comment render='true'>Parameter [src] is required.</b:comment>
  </b:if>
</b:includable>

Especificación de Parámetros

Parámetro Tipo Descripción
src image URL u objeto de imagen de Blogger.
sourceSet number[] Anchos para generar el atributo srcset.
width number Ancho de la imagen. Tiene prioridad sobre ratio.
height number Alto de la imagen. Tiene prioridad sobre ratio.
resize number Redimensiona la imagen mediante la API de Google.
ratio string Relación de aspecto. Requiere resize.
id string Valor del atributo id.
class string Clases CSS de la imagen.
sizes string Valor del atributo sizes.
loading string Modo de carga (Ej: "lazy", "eager").
fetchpriority string Prioridad de descarga (Ej: "high", "low").
crossorigin string Modo CORS de la petición.
decoding string Método de decodificación (Ej: "async").
referrerpolicy string Política de referencias.
alt string Texto alternativo. Usa el de Blogger por defecto si se omite.
params string Parámetros adicionales del proxy de Blogger.

Modo de uso

Para implementar esta función, añade el fragmento en los marcados predeterminados (<b:defaultmarkups type='Common'>) de tu tema.

src

Determina el origen de la imagen. Se recomienda usar elementos alojados en Google. Si la imagen proviene de YouTube, la función extraerá automáticamente la versión de máxima resolución (youtubeMaxResDefaultUrl).

<b:include data='{ src: data:view.featuredImage }' name='@image'/>
<img src='/s1600/demo.png'/>

sourceSet

Genera un conjunto de imágenes responsivas pasándole un array de números. El navegador elegirá la imagen óptima según la pantalla.

<b:include data='{ src: data:view.featuredImage, sourceSet: [300, 600, 900] }' name='@image'/>
<img src='/s1600/demo.png' srcset='/w300/demo.png 300w, /w600/demo.png 600w, /w900/demo.png 900w'/>

width

Establece un ancho fijo numérico o porcentual para la etiqueta HTML final.

<b:include data='{ src: data:view.featuredImage, width: 300 }' name='@image'/>
<img src='/s1600/demo.png' width='300'/>

height

Establece una altura fija numérica o porcentual para la etiqueta HTML final.

<b:include data='{ src: data:view.featuredImage, height: 200 }' name='@image'/>
<img src='/s1600/demo.png' height='200'/>

resize

Modifica el tamaño físico de la imagen de origen mediante la API nativa de Google.

<b:include data='{ src: data:view.featuredImage, resize: 300 }' name='@image'/>
<img src='/w300/demo.png'/>

ratio

Recorta la imagen bajo una relación de aspecto predefinida. Se añaden automáticamente los atributos de dimensiones calculadas. Requiere de forma obligatoria el uso de resize.

<b:include data='{ src: data:view.featuredImage, resize: 300, ratio: "4:3" }' name='@image'/>
<img src='/w300-h225-p-k-no-nu/demo.png' height='225' width='300'/>

id

Asigna un identificador único en el árbol DOM de la etiqueta resultante.

<b:include data='{ src: data:view.featuredImage, id: "img-principal" }' name='@image'/>
<img src='/s1600/demo.png' id='img-principal'/>

class

Aplica una o múltiples clases CSS a la imagen para manejar estilos externos o bibliotecas.

<b:include data='{ src: data:view.featuredImage, class: "img-fluid hero-banner" }' name='@image'/>
<img src='/s1600/demo.png' class='img-fluid hero-banner'/>

sizes

Define las condiciones de medios (media queries) para acompañar al uso de sourceSet. Para entender más sobre su comportamiento, consulta la guía de MDN sobre imágenes responsivas.

<b:include data='{ src: data:view.featuredImage, sizes: "(max-width: 600px) 100vw, 50vw" }' name='@image'/>
<img src='/s1600/demo.png' sizes='(max-width: 600px) 100vw, 50vw'/>

loading

Habilita la carga diferida nativa en navegadores modernos (Lazy loading). Valores soportados: "lazy" | "eager".

<b:include data='{ src: data:view.featuredImage, loading: "lazy" }' name='@image'/>
<img src='/s1600/demo.png' loading='lazy'/>

fetchpriority

Asigna prioridad de descarga HTTP frente a otros recursos críticos. Útil para optimizar el LCP (Largest Contentful Paint).

<b:include data='{ src: data:view.featuredImage, fetchpriority: "high" }' name='@image'/>
<img src='/s1600/demo.png' fetchpriority='high'/>

crossorigin

Permite configurar las credenciales CORS necesarias si requieres procesar los píxeles de la imagen desde scripts locales o elementos <canvas>.

<b:include data='{ src: data:view.featuredImage, crossorigin: "anonymous" }' name='@image'/>
<img src='/s1600/demo.png' crossorigin='anonymous'/>

decoding

Proporciona una sugerencia al navegador sobre cómo debe decodificar la estructura de la imagen (de forma síncrona o asíncrona).

<b:include data='{ src: data:view.featuredImage, decoding: "async" }' name='@image'/>
<img src='/s1600/demo.png' decoding='async'/>

referrerpolicy

Controla qué datos e información de cabecera de referencia (Referrer) se envía al realizar la solicitud del recurso de imagen.

<b:include data='{ src: data:view.featuredImage, referrerpolicy: "no-referrer" }' name='@image'/>
<img src='/s1600/demo.png' referrerpolicy='no-referrer'/>

alt

Define el texto alternativo para accesibilidad (SEO). Si no se envía este parámetro, la función renderiza una etiqueta genérica por defecto.

<b:include data='{ src: data:view.featuredImage, alt: "Texto alternativo" }' name='@image'/>
<img src='/s1600/demo.png' alt='Texto alternativo'/>

params

Añade flags específicos extras para las imágenes alojadas en los servidores nuevos de Blogger (WebP, compresión, etc.). Detalles completos en el artículo de parámetros adicionales.

<b:include data='{ src: data:view.featuredImage, params: "rw-e30" }' name='@image'/>
<img src='/s1600/demo.png-rw-e30'/>