Aunque los más veteranos aconsejan una plataforma WordPress autoalojada, la plataforma Blogger de Google también es una excelente opción para un gran número de blogueros. La gente suele quejarse de la limitada flexibilidad disponible en esta última plataforma de blogging. Pero esta afirmación es parcialmente correcta. Hay muchas funciones ocultas de Blogger que el usuario general desconoce. Y una de esas características potentes y extremadamente flexibles es la posibilidad de personalizar las imágenes utilizadas en las entradas del blog. Aquí estamos hablando de diferentes tipos de optimizaciones y efectos que podemos aplicar a las imágenes subidas. Afortunadamente, las imágenes subidas en la plataforma de Blogger se alojan internamente en Google App Engine. Esta última plataforma cuenta con potentes capacidades de procesamiento de imágenes que pueden ser utilizadas por los usuarios de Blogger con bastante facilidad. Y eso es lo que vamos a aprender hoy. Una vez que te familiarices con estas opciones de procesamiento de imágenes, podrás hacer tus publicaciones en el blog, mucho mejor que antes. Empecemos y dominemos las flexibles técnicas de manipulación de imágenes de la plataforma Blogger.
Después de aprender las técnicas de procesamiento de imágenes que se comentan a continuación, debes actualizar las imágenes de tus archivos de publicaciones según tus necesidades exactas. Si el archivo de tu blog es enorme, esto puede ser una tarea que lleve mucho tiempo.
Para reducir la carga, actualice un número fijo de entradas, cada día.
Antes de empezar, te recomiendo encarecidamente que pruebes estas técnicas de procesamiento de imágenes en un post de demostración. Una vez que te hayas familiarizado con las técnicas, no dudes en aplicarlas en las entradas reales del blog. Así que, ¡aquí vamos!
Redimensionamiento y recorte de imágenes
Comenzaremos la primera sección con varias opciones de redimensionamiento y recorte de imágenes disponibles para los usuarios de Blogger. Pero antes de eso, echaremos un vistazo a la estructura genérica de la URL de una imagen subida a la plataforma de Blogger. Así es como se ve.
https://1.bp.blogspot.com/xxxxxxxx/xxxxxxxx/xxxxxxxx/s320/baby.png
Lenguaje del código: JavaScript (javascript)
Aquí, el valor s320
es donde ocurre toda la magia. En su caso, el valor numérico puede ser mayor o menor. Sólo tenemos que manipular esta parte de la URL para personalizar las imágenes. Comencemos.
s0 (dimensiones de la imagen original)
A menudo sólo necesitamos mostrar la imagen cargada con sus dimensiones originales dentro de una entrada de blog. Para ello, basta con añadir un cero al parámetro s. Por ejemplo, s0 obtendrá la imagen subida con su tamaño original.
s000 (000 píxeles de imagen en la dimensión más grande)
Si utiliza un número con el parámetro s, por ejemplo, s350, obtendrá una imagen con una dimensión de 350 píxeles.
w000 (imagen con ancho personalizado)
Para obtener una imagen con un ancho de píxel fijo, utilice este parámetro. Por ejemplo, w500 le da una imagen de 500 píxeles de ancho.
h000 (imagen con altura personalizada)
Para una imagen de altura fija (en píxeles), utilice este parámetro. Por ejemplo, h250 recupera una imagen de 250 píxeles de altura.
Si especifica tanto la anchura como la altura, por ejemplo w500-h150, entonces, para preservar la relación de aspecto de la imagen, el parámetro de la altura tiene prioridad y anula el parámetro de la anchura.
Obsérvese que los parámetros múltiples se unen con un guion.
c (recortar la imagen a las dimensiones especificadas)
Este es un simple parámetro de recorte de la imagen y se utiliza junto con los parámetros de anchura y altura.
Por ejemplo, w500-h150-c
recortará la parte superior de la imagen a las dimensiones proporcionadas.
n (recortar la imagen desde el centro)
Este es similar al parámetro c con una sola diferencia. En lugar de recortar desde arriba, este parámetro recorta una imagen (por ejemplo w500-h150-n
) desde el centro.
p (recorte cuadrado inteligente)
Este parámetro intenta recortar la parte importante de la imagen empezando por el centro. La relación de aspecto no se conserva. Un ejemplo es, w500-h150-p
.pp (forma alternativa al recorte cuadrado inteligente)Es exactamente similar al parámetro anterior. A pesar de haber hecho pruebas enérgicas, no he podido encontrar una diferencia de recorte notable con este parámetro.
pa (conservar la relación de aspecto de la imagen)
Este parámetro de recorte inteligente (por ejemplo w500-h150-pa
) es similar al parámetro p. La única diferencia es que preserva la relación de aspecto. Naturalmente, el parámetro de altura también tiene prioridad en este caso.
pf (recorte inteligente con reconocimiento facial)
Este también intenta un recorte inteligente con detección de rostros. La relación de aspecto no se conserva y el recorte comienza desde el centro. Un ejemplo es w500-h150-pf
.
cc (recorte circular de la imagen)
Y, si está interesado en el recorte circular (véase la imagen de abajo), utilice este parámetro. Si también se proporcionan los parámetros de anchura y altura, este último tiene prioridad cuando se trata de la parte recortada.
El área fuera de la parte recortada se devuelve como fondo transparente. Un ejemplo del mismo es w200-h150-cc
.
ci (recorte de imagen cuadrada simple)
Este parámetro (por ejemplo w700-h150-ci
) devuelve una imagen circular recortada perfectamente cuadrada con la dimensión más pequeña posible cerca de los parámetros de anchura o altura más bajos especificados. No es necesario especificar los dos parámetros, si necesitas una imagen circular de 200 pixeles de ancho puedes utilizar w200-ci
, h200-ci
o s200-ci
.
lf (recorte de cara suelta)
Después de muchas pruebas, este parámetro (por ejemplo w700-h150-lf
) simplemente devuelve una imagen con la altura especificada manteniendo la relación de aspecto intacta.
nu (evita el cambio de tamaño más allá de las dimensiones originales)
Este útil parámetro puede utilizarse para desactivar el redimensionamiento de una imagen mayor que sus dimensiones originales. Por ejemplo, si la anchura original de la imagen es de 600 píxeles, a pesar de especificar una anchura mayor w1600-nu
, la imagen no se escalará más allá de la anchura original debido a la presencia del parámetro nu.
Con esto terminamos todos los parámetros comunes y útiles disponibles para el cambio de tamaño de la imagen y el recorte. Siéntase libre de probar estos parámetros a través de una entrada de demostración.
Efectos, filtros y ediciones diversas
Después de familiarizarnos con los aspectos básicos, pasemos a las técnicas avanzadas de personalización de imágenes para editar o mejorar las imágenes subidas. Algunas de estas opciones se utilizan raramente o nunca, mientras que otras pueden utilizarse a diario.
Vamos a familiarizarnos con estas opciones, una por una.
Voltear la imagen verticalmente
Para voltear una imagen, verticalmente, utilice la opción fv. Por ejemplo, s0-fv
volteará la imagen con las dimensiones originales verticalmente.
Voltear la imagen horizontalmente
Para un giro horizontal, utilice la opción fh. Un ejemplo sencillo, una vez más, es s0-fh
.
Girar la imagen
Si quieres rotar la imagen, utiliza la opción r. Hay tres ángulos de rotación disponibles: 90, 180 y 270 grados. Por ejemplo, s0-r180
es esencialmente un giro vertical.
Obtener el formato JPG
Utilice la opción rj para obtener la imagen en formato JPG. Por ejemplo, una imagen PNG con los parámetros s0-rj
le dará la misma imagen en formato JPG.
Obtener el formato PNG
Para recuperar la imagen en formato PNG, utilice la opción rp, por ejemplo s0-rp
.
Obtener el formato WebP
Para obtener una imagen en el formato WebP de Google, utilice la opción rw, por ejemplo s0-rw
.
Obtener el formato GIF
Para convertir la imagen en un formato GIF, utilice la opción rg, por ejemplo s0-rg
.
Aplicar opciones de formato
Generalmente, las imágenes JPEG son de 3 tipos, a saber, Línea de base estándar, Línea de base optimizada y Progresiva. Podemos utilizar estos tipos mediante la opción v con los números 0, 1, 2 y 3.
Por ejemplo, s0-v0
o s0-v1
. A medida que aumentamos el número a 2 y 3, la degradación de la calidad es sustancial y no se recomienda para uso en la web.
Obtener MP4 de un GIF animado
Si quieres incrustar un GIF animado en forma de archivo de vídeo MP4, utiliza la opción rh. He aquí un ejemplo.
<video width="480" controls autoplay loop><source src="https://1.bp.blogspot.com/-ZhJRljC9zUE/YIJJvPgOmiI/AAAAAAAAZwU/hVxth7ITBFUb95RG1oKBbjxIytJldSP_QCLcBGAsYHQ/s200-rh/boom.gif" type="video/mp4"> </video>
Lenguaje del código: HTML, XML (xml)
GIF
2078 kb
MP4
287 kb
La anchura se puede cambiar según sus necesidades. Como habrás notado, hemos utilizado la etiqueta <video> de HTML5 en lugar de utilizar la etiqueta <img> normal.
Para el ejemplo he tomado una imagen GIF con transparencia y evidentemente no se ve bien en formato de video MP4, pero, considerando la inmensa diferencia en tamaño de los archivos resultante si tienes un GIF sin transparencias definitivamente deberías pasarlo a formato de video con el parámetro rh si te interesa que tu web cargue mas rápido.
Deshabilitar animación GIF
Si quiere deshabilitar la animación de la imagen GIF y quiere la versión estática de la misma, utilice la opción k. Por ejemplo, s0-k devuelve la forma estática de una imagen GIF animada. Este parámetro muestra la imagen con un botón de play o reproducir superpuesto, podría utilizarlo para enlazar al gif animado, alternativamente si quieres la imagen estática sin botón puedes utilizar el parámetro rj.
https://1.bp.blogspot.com/-ZhJRljC9zUE/YIJJvPgOmiI/AAAAAAAAZwU/hVxth7ITBFUb95RG1oKBbjxIytJldSP_QCLcBGAsYHQ/s200-k/boom.gif
Lenguaje del código: JavaScript (javascript)
Establecer un borde/marco personalizado
Generalmente, para aplicar un borde personalizado o un marco alrededor de una imagen, utilizamos reglas CSS. Pero, ¿y si podemos hacerlo sin usar ningún código CSS?
Afortunadamente, se puede obtener fácilmente un borde personalizado (ejemplo mostrado arriba) mediante la combinación de dos parámetros. El primer parámetro b añade a la imagen un borde de un grosor determinado de píxeles.
El segundo parámetro c se utiliza para especificar el color del borde en formato hexadecimal. El ejemplo anterior utiliza los parámetros s320-b10-c0xff4B0082
. Aquí, el grosor del borde es de 10 píxeles y el color está en el formato 0xAARRGGBB, el color del marco está definido en los últimos 6 caracteres de la variable en este caso utilicé el color #4B0082.
Comprimir una imagen JPEG
-Si se preocupa por la velocidad del sitio, servir imágenes voluminosas a los visitantes no es nada recomendable. La compresión de imágenes puede reducir el tamaño del archivo, lo que a su vez reduce el tamaño total de la página web.
Existe un parámetro de compresión de imagen l que reduce el tamaño del archivo pero que afecta a la calidad de la imagen al mismo tiempo. Un ejemplo del mismo es s0-rj-l85
que comprime el archivo en un 15%.
Establecer tiempo de cache de la imagen
El almacenamiento en caché de los activos por parte del visitante es una de las características importantes para ofrecer una experiencia de navegación rápida a los lectores. Para ello, hay que especificar el tiempo de caducidad de los archivos.
Para ello, utilice el parámetro e. Por ejemplo, s0-e30
almacenará la imagen en la caché del navegador del visitante del sitio durante 30 días.
Desenfoque de imagen
Por lo general, no difuminamos las imágenes cuando las utilizamos para el contenido de la web. Pero, en algunos casos, podemos necesitar hacerlo. Afortunadamente, también hay un parámetro para desenfocar las imágenes.
https://1.bp.blogspot.com/-RogZQuougII/YIJVvzRT9HI/AAAAAAAAZwc/jhJ3sWC7zzsR5Q1MZiE-JgUiPHUhDRAeACLcBGAsYHQ/w320-h200-pp-b10-c0xff4B0082-fSoften=1,17,0/30.jpg
Lenguaje del código: JavaScript (javascript)
Utilice la opción fSoften que toma 3 parámetros numéricos para añadir el efecto de desenfoque. Para la imagen de muestra mostrada arriba, he utilizado fSoften=1,17,0
para añadir el efecto de desenfoque deseado. Aquí, el número del medio se puede cambiar de 0 a 100 para ajustar la intensidad del efecto de desenfoque.
Añadir gradiente y sombra en el borde
Y ahora viene el efecto de degradado combinado con un color de sombra de borde personalizado. Sí, ¡también puedes hacerlo!
Utilice la opción fVignette para añadir estos dos efectos a la imagen. Para la imagen de demostración, he utilizado fVignette=1,100,1.5,0,4b0082
para añadir el degradado y la sombra del borde.
Aquí el número de punto flotante (3er parámetro) puede ser usado para ajustar el área de cobertura del gradiente y el código de color hexadecimal (último parámetro) puede ser usado para especificar el color de la sombra del borde.
Así pues, estos son los 29 parámetros de manipulación de imágenes disponibles para los usuarios de la plataforma Blogger BlogSpot. Aprovecha estas opciones para servir mejores imágenes a los lectores de tu blog.
En color verde he marcado las secciones que debes tener en cuenta a la hora de optimizar las imágenes de tu sitio para mejorar la velocidad y puntaje en speed insights.
Fuente
Este artículo es una traduccíon del post The Ultimate Guide to Customize and Edit Blogger (BlogSpot) Images de freshtechtips.com.