Parámetros de imágenes de Blogger

El increíble potencial del servidor de imágenes de Blogger y como aprovechar sus características.

Google a traves de sus servicios proporciona lo que a mi parecer es el servidor de imágenes gratuito más poderoso y hoy te voy a explicar como sacar el máximo provecho a las imágenes alojadas en Blogger. Este articulo va a ser extenso asi que ve por tu taza de café o bebida favorita y empezamos.

Introducción

Cuando subes una imagen mediante Blogger o Google Fotos, obtienes un enlace muy largo debido a una cadena de caracteres que se encuentra entre el dominio y el lugar en donde van los parámetros. Con el fin de que los ejemplos sean cortos y fáciles de entender, usaré xxxxx para reemplazar esa cadena tan larga:

      https://lhx.googleusercontent.com/pw/xxxxx=params

Aspecto del enlace de una imagen subida a Google Fotos

      https://blogger.googleusercontent.com/img/a/xxxxx=params

Aspecto del enlace de una imagen subida desde el widget Header o Imagen de Blogger

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/params/example.png

Aspecto del enlace de una imagen subida desde el editor de entradas de Blogger

https://x.bp.blogspot.com/xxxxx/params/example.png

Aspecto del enlace de una imagen del servidor antiguo de Blogger

Importante: Ya no es posible obtener la "URL /a/" al subir imágenes desde los widgets Header o Imagen. Ahora todas las imágenes subidas devuelven la "URL /b/".

En todos los casos params es el lugar en donde puedes escribir parámetros de imágenes. Los ejemplos de este artículo utilizarán las URL de las imágenes subidas desde el editor de entradas de Blogger.

Tambien cabe aclarar que en la mayoría de los ejemplos de este artículo hay algunos términos que simbolizan un tipo de valor por el cual pueden ser reemplazados. Te dejo este cuadro para que puedas comprender mejor:

Símbolo	Significado
`*`	Se reemplaza con otros parámetros
`#`	Se reemplaza por un valor numérico

Obtener la URL /a/

Las imágenes subidas desde los widgets Header e Imagen ahora devuelven una URL /b/. Sin embargo, puedes obtener la URL /a/ correspondiente modificando la estructura de la URL de la imagen. Se espera que ambos formatos sigan funcionando indefinidamente, aunque no hay garantía de ello.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/IMAGE_ID/params/example.png
https://blogger.googleusercontent.com/img/a/IMAGE_ID=params

Traslada el ID de la imagen a la estructura de la URL A. Así podrás seguir utilizando parámetros al final de la URL.

Cambiar nombre

Esto solo es posible en los enlaces que contienen el nombre de la imagen al final, es decir, imágenes del servidor antiguo o enlaces del tipo /b/.

Puedes manipular esto al punto de eliminar completamente todo lo marcado. En todos los casos, al descargar la imagen el nombre y la extension original estarán presentes. En caso de eliminar los parámetros, el parámetro por defecto sera s512

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/s400/demo.png

Todo lo resaltado es modificable. Cambiar la extension no afectará el formato original.

Escalado

Estos parámetros te permiten cambiar las dimensiones de la imagen. En todos los casos, cuando el parámetro de escala no esta especificado, el valor por defecto será s512.

Parámetro	Sintaxis	Descripcion
`w`	`w#`	Ancho, si el valor es `0` se usa el ancho original
`h`	`h#`	Alto, si el valor es `0` se usa el alto original
`s`	`s#`	Escala (alto y ancho), si el valor es `0` se usa la escala original
`nu`	`*-nu`	Escala limitada al tamaño original.
`s`	`w#-h#-s`	Fuerza la escala. Requiere `w#` y `h#` e ignora el parámetro `nu`

w#

Especifica el ancho limitado al tamaño real de la imagen, por ejemplo, si especificas w4000 y la escala original es 1080x720, el valor será 1080.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/w400/example.png

h#

Especifica el alto limitado al tamaño real de la imagen, por ejemplo, si especificas h2000 y la escala original es 1080x720, el valor será 720.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/h200/example.png

s#

Escala la imagen tomando de referencia el valor más alto, por ejemplo, si la imagen original es 1980x1080 el valor de referencia será 1980. Por el contrario si la imagen es 900x1400, el valor de referencia será 1400.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/s300/example.png

*-nu

Por defecto, los cambios de escala respetan el tamaño original de la imagen, sin embargo, algunos parámetros combinados (generalmente de recorte) fuerzan la escala más allá de los limites, lo que muestra una imagen de menor calidad. Con este parámetro evitarás se supere la resolución original de la imagen.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/s300-nu/example.png

w#-h#-s

Requiere obligatoriamente w y h y sirve para forzar la escala especificada. Ignora el parámetro nu si está presente, también ignora la relación de aspecto, lo que puede resultar en una imagen estirada.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/w400-h120-s/example.png

Rotación

Parámetro	Sintaxis	Descripcion
`fh`	`*-fh`	Voltear imagen horizontalmente
`fv`	`*-fv`	Voltear imagen verticalmente
`r`	`*-r#`	Rotar imagen en `90`, `180` y `270` grados

*-fh

Voltea imágenes en el eje X (horizontalmente).

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/s300-fh/example.png

*-fv

Voltea imágenes en el eje Y (verticalmente).

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/s300-fv/example.png

*-r#

Rota la imagen en 90, 180 y 270 grados unicamente, cualquier otro valor será inválido. También cambia el punto de referencia del parámetro s# durante el cálculo.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/s300-r90/example.png

Recorte

Parámetro	Sintaxis	Descripcion
`c`	`*-c`	Recorte cuadrado desde la parte superior
`ci`	`*-ci`	Recorte cuadrado forzado desde la parte superior
`cc`	`*-cc`	Recorte circular. Si la imagen es PNG o WebP, el fondo será transparente
`br`	`*-br#`	Bordes redondeados. Si la imagen es PNG o WebP, el fondo será transparente
`n`	`w#-h#-n`	Recorte desde el centro. Requiere `w#` y `h#`
`p`	`*-p`	Recorte inteligente de personas. También busca rostros.

*-c

Corta la imagen desde la parte superior. Tiende a ser un cuadrado perfecto, pero si los parámetros w# y h# están presentes, el recorte seguirá el tamaño indicado preservando la relación de aspecto.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/w400-h200-c/example.png

*-ci

Corta la imagen desde la parte superior en forma de un cuadrado perfecto en todos los casos, el resultado mantiene la relación de aspecto.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/w400-h200-ci/example.png

*-cc

Corta la imagen desde la parte superior en forma de un circulo perfecto conservando la relación de aspecto. Si la imagen es PNG o WebP el fondo será transparente.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/s280-cc/example.png

*-br#

Corta la imagen redondeando los bordes conservando la relación de aspecto. Si la imagen es PNG o WebP el fondo será transparente.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/s280-br30/example.png

w#-h#-n

Corta la imagen desde el centro en todos los casos. Requiere que los parámetros w# y h# estén presentes. El resultado mantendrá la relación de aspecto.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/w400-h200-n/example.png

*-p

Corta la imagen mediante inteligencia artificial, principalmente busca personas. Si el sujeto ocupa gran parte de la imagen intentará buscar rostros. Aveces es necesario borrar la cache y actualizar en la primera consulta para apreciar el corte según los criterios de la IA.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/w400-h200-p/example.png

Formato

Parámetro	Sintaxis	Descripcion
`rj`	`*-rj`	Formato JPEG
`rp`	`*-rp`	Formato PNG
`rg`	`*-rg`	Formato GIF
`rw`	`*-rw`	Formato WebP
`h`	`*-h`	Formato HTML
`d`	`*-d`	Descarga directa

*-rj

Convierte la imagen a JPEG. Para comprobar el formato guarda la imagen de este enlace.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/s600-rj/example.png

*-rp

Convierte la imagen a PNG. Para comprobar el formato guarda la imagen de este enlace.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/s600-rp/example.png

*-rg

Convierte la imagen a GIF. Para comprobar el formato guarda la imagen de este enlace.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/s600-rg/example.png

*-rw

Convierte la imagen a WebP. Para comprobar el formato guarda la imagen de este enlace.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/s600-rw/example.png

*-h

Visualiza la imagen en HTML. Para comprobar el formato revisa la imagen de este enlace.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/s600-h/example.png

*-d

Empieza una descarga directa. Para comprobar la descarga visita la imagen de este enlace.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/s600-d/example.png

Exclusivo de GIF

Parámetro	Sintaxis	Descripcion
`k`	`*-k`	Muestra el primer frame con el icono “Play”
`a`	`*-a#`	Muestra el frame especificado con el icono “Play”
`no`	`*-no`	Deshabilita el icono “Play”
`rh`	`s#-rh`	Formato de salida MP4

*-k

Muestra el primer frame de la imagen en formato GIF lo que detiene la animación, ademas de reducir considerablemente su peso. También se agrega el icono “Play”.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/s0-k/example.png

Original: 15.9MB - Parámetro: 108KB

*-a#

Funciona igual que el parámetro anterior, solo que nos permite seleccionar un frame especifico de la imagen en formato GIF. De igual forma el icono “Play” estará presente.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/s0-a88/example.png

Original: 15.9MB - Parámetro: 113KB

*-no

Este parámetro se combina con *-k o *-a# y solo se encarga de deshabilitar el icono “Play”.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/s0-k-no/example.png

Original: 15.9MB - Parámetro: 108KB

*s#-rh

Convierte el formato GIF a un video MP4. El peso también se reduce notablemente.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/rh/example.png

Original: 15.9MB - Parámetro: 650KB

Optimización

Parámetro	Sintaxis	Descripcion
`ft`	`*-ft`	Compresión sin pérdida solo para JPEG
`l`	`*-l#`	Compresión con pérdida para WebP y JPEG
`v`	`*-v#`	Compresión alternativa con pérdida para WebP y JPEG
`e`	`*-e#`	Tiempo de almacenamiento en caché

*-ft

Optimiza imágenes en formato JPEG utilizando el método de compresión sin pérdida, lo que reduce bastante su peso sin perder calidad.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/s0-ft/example.png

Original: 236KB - Parámetro: 75.9KB

*-l#

Optimiza imágenes en formato JPEG y WebP mediante el método de compresión con pérdida, en donde 1 es el nivel de compresión con mas pérdida y 100 es el valor con menos pérdida.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/s0-l5/example.png

Original: 236KB - Parámetro: 3.6KB

*-v#

Optimiza imágenes JPEG y WebP mediante el método de compresión con pérdida limitado a 4 niveles, en donde 3 es el valor con más pérdida y 0 el valor con menos pérdida.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/s0-rw-v3/example.png

Original: 236KB - Parámetro: 6.59KB

*-e#

Establece en el encabezado de respuesta HTTP el tiempo de almacenamiento en caché de la imagen. El valor numérico es igual a la cantidad de días deseados. La cantidad máxima permita es de 90 días.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/s0-e30/example.png

Antes: max-age=86400 (1 día) - Parámetro: max-age=2592000 (30 días)

Conclusión

Hay muchos parámetros que puedes utilizar, solo he recopilado los que a mi parecer son más útiles, de todas formas este articulo se seguirá actualizando. En los enlaces adjuntos puedes consultar las fuentes.

Si conoces algún parámetro que no se haya explicado en este documento ni en las fuentes, o si tienes alguna duda por favor házmelo saber en los comentarios. Muchas gracias por leer.