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
https://blogger.googleusercontent.com/img/a/xxxxx=params
https://blogger.googleusercontent.com/img/b/R29vZ2xl/xxxxx/params/example.pnghttps://x.bp.blogspot.com/xxxxx/params/example.pngEn 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.pngEnlace 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:
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-nuw#-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-dExclusivo 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”.
*-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.
*-no
Este parámetro se combina con *-k o *-a# y solo se encarga de deshabilitar el icono “Play”.
*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.
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.
*-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.
*-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.
*-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-e30Antes: max-age=86400 (1 día) - Parámetro: max-age=2592000 (30 días)
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-noConclusió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.
