Parámetros de imágenes de Blogger

thumbnail

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

En todos los casos params es el lugar en donde puedes escribir los parámetros de imágenes de Google. Es importante que tomes en cuenta esto ya que para simplificar las cosas, los ejemplos los realizaré con los enlaces de imágenes subidas desde un widget 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

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 subidas desde el editor de entradas.

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.

Enlace mas pequeño

Si deseas obtener una version más corta de la url, sube tu imagen a traves del editor de Blogger y tras finalizar la carga, en lugar de aceptar, da clic derecho sobre la vista previa y copia ese enlace:

enlace de imagen de Blogger más corta

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/a/xxxxx=w400

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/a/xxxxx=h200

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/a/xxxxx=s300

*-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/a/xxxxx=s300-nu

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/a/xxxxx=w400-h120-s

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/a/xxxxx=s300-fh

*-fv

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

https://blogger.googleusercontent.com/img/a/xxxxx=s300-fv

*-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/a/xxxxx=s300-r90

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, 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/a/xxxxx=w400-h200-c

*-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/a/xxxxx=w400-h200-ci

*-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 el fondo será transparente.

https://blogger.googleusercontent.com/img/a/xxxxx=s280-cc

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/a/xxxxx=w400-h200-n

*-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/a/xxxxx=w400-h200-p

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/a/xxxxx=s600-rj

*-rp

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

https://blogger.googleusercontent.com/img/a/xxxxx=s600-rp

*-rg

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

https://blogger.googleusercontent.com/img/a/xxxxx=s600-rg

*-rw

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

https://blogger.googleusercontent.com/img/a/xxxxx=s600-rw

*-h

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

https://blogger.googleusercontent.com/img/a/xxxxx=s600-h

*-d

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

https://blogger.googleusercontent.com/img/a/xxxxx=s600-d

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/a/xxxxx=s0-k

Original: 15.9MB - Parámetro: 108KB

image

*-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/a/xxxxx=s0-a88

Original: 15.9MB - Parámetro: 113KB

image

*-no

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

https://blogger.googleusercontent.com/img/a/xxxxx=s0-k-no

Original: 15.9MB - Parámetro: 108KB

image

*s#-rh

Convierte el formato GIF a un video MP4. Aunque teóricamente no se necesita otro parámetro, en todas las pruebas me fue imposible de reproducir sin uno adicional, es por eso que estoy usando s0. El peso también se reduce notablemente.

https://blogger.googleusercontent.com/img/a/xxxxx=s0-rh

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/a/xxxxx=s0-ft

Original: 236KB - Parámetro: 75.9KB

image

*-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/a/xxxxx=s0-l5

Original: 236KB - Parámetro: 7.33KB

image

*-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/a/xxxxx=s0-rw-v3

Original: 236KB - Parámetro: 6.59KB

image

*-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/a/xxxxx=s0-e30

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

image

Videos

Importante: Actualmente, estos parámetros no tienen utilidad, ya que Blogger deshabilitó la posibilidad de subir videos en el cargador de imágenes de Blogger.

Parámetros destinados a videos subidos a Google Fotos. Actualmente, ya no es posible subir videos con la herramienta para subir imágenes de Blogger.

Parámetro Sintaxis Descripcion
m m# Calidad y formato del vídeo (MP4, 3GP y AAC)
no *-no Deshabilita el icono “Play”

m#

Este parámetro solo cuenta con algunas opciones disponibles que se deben escribir estrictamente como se indican en la siguiente tabla:

Parámetro Formato Calidad
m18 MP4 320p
m22 MP4 720p
m36 3GP 180p
m37 MP4 1080p
m140 AAC Solo audio
https://lh3.googleusercontent.com/xxxxx=m37

*-no

Los videos se pueden utilizar con parámetros de imagen para mostrar una vista previa con el icono “Play”. Este parámetro se encarga de deshabilitar ese ícono.

https://lh3.googleusercontent.com/xxxxx=s0-no

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.