Blogger Tutoriales

La Guía Definitiva Para Personalizar y Editar Imágenes de Blogger (BlogSpot)

Hoy en día, tengo el honor de presentar a todos los desarrolladores de plantillas de Blogger sobre la mejor manera de recortar y cambiar el tamaño de las imágenes de Blogger / Blogspot utilizando los parámetros de la estructura de URL de la imagen.

Aunque muchos experimentados aconsejan WordPress para una plataforma autohospedada, la plataforma Blogger de Google es también una excelente opción para un gran número de bloggers. La gente a menudo se queja de la limitada flexibilidad disponible en esta última plataforma de blogs. Pero, esta afirmación es parcialmente correcta. Hay muchas características ocultas de Blogger que un usuario normal desconoce.

Y, una de estas características poderosas y extremadamente flexibles es cómo puede personalizar las imágenes utilizadas en las entradas de tu blog. Aquí estamos hablando de diferentes tipos de optimizaciones y efectos que podemos aplicar a nuestras imágenes subidas. Afortunadamente, las imágenes subidas a la plataforma Blogger están alojadas internamente en Google App Engine. Esta última plataforma tiene potentes capacidades de procesamiento de imágenes que pueden ser utilizadas por los usuarios de Blogger, con gran facilidad. Y eso es lo que vamos a aprender hoy. Una vez que te familiarices con estas opciones de procesamiento de imágenes, puedes hacer las entradas de tu blog, mucho mejor que antes. Empecemos y dominemos las flexibles técnicas de manipulación de imágenes de la plataforma Blogger.

Antes de empezar, le recomiendo encarecidamente que pruebe estas técnicas de procesamiento de imágenes a través de un post de demostración. Una vez que estés familiarizado con las técnicas, no dudes en aplicarlas en las entradas reales del blog. Así que, ¡aquí vamos!

Tamaño Original

Después de subir una imagen a tu entrada, y elegir mostrarla como original, la URL de tu imagen será como la de abajo:

https://4.bp.blogspot.com/-kGNEb3Mncto/Ww35Why5PrI/AAAAAAAAH8U/jw1o8ypIPpYHetXj0qthwHYqFC_AcnnnACLcBGAs/s1600/bannerbloggerfusion.png

El texto /s1600/ en la URL le dirá a Blogger / Blogspot que quieres la versión de tamaño original de tu imagen.

** AVISO: Sin embargo, en algunos casos especiales, Blogger sólo mostrará una versión pequeña en s1600 para imágenes muy largas y/o grandes (ejemplo: imágenes infográficas). En ese caso, debe aumentar el tamaño para igualar la altura de su imagen para acceder a la versión original real, por ejemplo: s5000 si la altura de su imagen es de 5000 píxeles.

Especificar Ancho Máximo

Si deseas cargar una imagen que NO sea MÁS GRANDE que 200px de ancho (la altura es automática), reemplaza s1600 por w200 como se muestra a continuación:

https://4.bp.blogspot.com/-kGNEb3Mncto/Ww35Why5PrI/AAAAAAAAH8U/jw1o8ypIPpYHetXj0qthwHYqFC_AcnnnACLcBGAs/w200/bannerbloggerfusion.png

Si el ancho establecido en la URL es mayor que el ancho original, Blogger te devolverá la versión de tamaño original. Por eso lo llamamos Ancho Máximo o Max Width.

Especificar Altura Máxima

Similar al parámetro de ancho máximo, si desea cargar la imagen que no es más grande que 50px de altura, deberás reemplazar s1600 por h50:

https://4.bp.blogspot.com/-kGNEb3Mncto/Ww35Why5PrI/AAAAAAAAH8U/jw1o8ypIPpYHetXj0qthwHYqFC_AcnnnACLcBGAs/h50/bannerbloggerfusion.png

Si estableces un valor de altura mayor que la altura original, te devolverá la versión de tamaño original.

Especificar Ancho y Alto Máximo

Si desea cargar una versión con un ancho y alto máximos específicos, por ejemplo: Que NO SEA MÁS GRANDE que 200px de ancho y NO SEA MÁS GRANDE que 30px de alto, reemplaza s1600 por w200-h50:

https://4.bp.blogspot.com/-kGNEb3Mncto/Ww35Why5PrI/AAAAAAAAH8U/jw1o8ypIPpYHetXj0qthwHYqFC_AcnnnACLcBGAs/s200-h50/bannerbloggerfusion.png

La versión que verás tendrá un ancho no mayor de 200px y una altura no mayor de 30px y también mantendrá la relación de escala de la versión original.

Recortar Imagen

Si deseas cargar una imagen con un ancho y alto EXACTO , por ejemplo 300px de ancho y 100px de alto, debes reemplazar s1600 por w300-h100-c. El texto -c al final significa”crop” (de recortar). La URL final será:

https://4.bp.blogspot.com/-kGNEb3Mncto/Ww35Why5PrI/AAAAAAAAH8U/jw1o8ypIPpYHetXj0qthwHYqFC_AcnnnACLcBGAs/w300-h100-c/bannerbloggerfusion.png

Si desea recortar la imagen como CUADRADO, por ejemplo, tamaño de 250px tanto en ancho como en alto, debes reemplazar s1600 a s250-c:

https://4.bp.blogspot.com/-kGNEb3Mncto/Ww35Why5PrI/AAAAAAAAH8U/jw1o8ypIPpYHetXj0qthwHYqFC_AcnnnACLcBGAs/s250-c/bannerbloggerfusion.png

El parámetro -c siempre devolverá una versión de recorte desde el centro de la imagen.

Recortar con Borde Circular

Si introduce -cc en lugar de -c, la imagen se recortará con un borde circular circular.

https://4.bp.blogspot.com/-kGNEb3Mncto/Ww35Why5PrI/AAAAAAAAH8U/jw1o8ypIPpYHetXj0qthwHYqFC_AcnnnACLcBGAs/s250-cc/bannerbloggerfusion.png

Elegir imagen de recorte

Si tu imagen tiene un contenido principal que no se mantiene en el centro de la imagen, por ejemplo: tu imagen tiene una cara en la parte superior o a la derecha y no quieres recortar la imagen desde el centro porque cortará la cara por la mitad, entonces puede usar -p en lugar de -c.
Cuando añades -p al final del parámetro de tamaño, un algoritmo inteligente de Google Photos inspeccionará la imagen y elegirá el área más valiosa de la imagen para devolverla como versión de recorte.

La URL final será así:

https://4.bp.blogspot.com/-kGNEb3Mncto/Ww35Why5PrI/AAAAAAAAH8U/jw1o8ypIPpYHetXj0qthwHYqFC_AcnnnACLcBGAs/s250-p/bannerbloggerfusion.png

Color de Fondo Específico

Si tu imagen tiene un fondo transparente (normalmente imágenes PNG) y deseas rellenar ese fondo de transparencia con un color específico, necesita añadir el parámetro -rj-c0xHEX_COLOR luego del tamaño. Por ejemplo, si deseas rellenarlo con color azul (hexagesimal 0000FF), tendrás que añadir -rj-c0x0000ff al parámetro de la URL. La URL final será:

https://1.bp.blogspot.com/-RbmzqSnEQn0/XIx7aWrTbRI/AAAAAAAAINg/Uwhy-yRMiYgGoon-TmXe2OOSRUoPxlx_wCLcBGAs/s250-rj-c0x0000ff/BloggerfusionLogo.png

Si agrega sólo -rj sin -c0xHEX_COLOR, el color de fondo se volverá negro por defecto.

Voltear Imagen Verticalmente

Para voltear una imagen verticalmente, utiliza la opción -fv. Por ejemplo, s250-fv volteará la imagen con las dimensiones originales verticalmente.

https://4.bp.blogspot.com/-kGNEb3Mncto/Ww35Why5PrI/AAAAAAAAH8U/jw1o8ypIPpYHetXj0qthwHYqFC_AcnnnACLcBGAs/s250-fv/bannerbloggerfusion.png

Rotar Imagenes

Si desea girar la imagen, utilice la opción -r. Sólo hay tres ángulos de rotación disponibles: 90, 180 y 270 grados. Por ejemplo, s250-r90 es esencialmente un giro en 90 grados.

https://4.bp.blogspot.com/-kGNEb3Mncto/Ww35Why5PrI/AAAAAAAAH8U/jw1o8ypIPpYHetXj0qthwHYqFC_AcnnnACLcBGAs/s250-r90/bannerbloggerfusion.png

Obtener Imagen en formato JPG

Utiliza la opción -rj para obtener la imagen en formato JPG. Por ejemplo, una imagen PNG con los parámetros s250-rj le devolverá la misma imagen en formato JPG.

https://4.bp.blogspot.com/-kGNEb3Mncto/Ww35Why5PrI/AAAAAAAAH8U/jw1o8ypIPpYHetXj0qthwHYqFC_AcnnnACLcBGAs/s250-rj/bannerbloggerfusion.png

Obtener Imagen en formato WebP

Para obtener una imagen en el formato WebP de Google, utiliza la opción -rw.

https://4.bp.blogspot.com/-kGNEb3Mncto/Ww35Why5PrI/AAAAAAAAH8U/jw1o8ypIPpYHetXj0qthwHYqFC_AcnnnACLcBGAs/s250-rw/bannerbloggerfusion.png

Obtener Imagen en formato GIF

Para convertir la imagen en un formato GIF, utiliza la opción -rg.

https://4.bp.blogspot.com/-kGNEb3Mncto/Ww35Why5PrI/AAAAAAAAH8U/jw1o8ypIPpYHetXj0qthwHYqFC_AcnnnACLcBGAs/s250-rg/bannerbloggerfusion.png

Obtener MP4 de un GIF animado

Si desea incrustar un GIF animado en forma de archivo de vídeo MP4, utiliza la opción -rh. Aquí un ejemplo de una animacion GIF.

https://1.bp.blogspot.com/-1SDFjUkQBgE/WByen0OZ7vI/AAAAAAAAAFo/mSF3WloztjsfaFN1H9ZEEFwZdCxmHy3KQCLcB/s1600/gifgolazo.gif

Y aquí un ejemplo de la misma animacion GIF convertida a MP4.

<video width="480" controls>
<source src="https://1.bp.blogspot.com/-1SDFjUkQBgE/WByen0OZ7vI/AAAAAAAAAFo/mSF3WloztjsfaFN1H9ZEEFwZdCxmHy3KQCLcB/s1600-rh/gifgolazo.gif" type="video/mp4">
</video>

El ancho puede ser cambiado según tus necesidades. Como habrás notado, hemos usado el tag HTML5 <video> en lugar de usar el tag regular <img>.

Desactivar la Animación de un GIF

Si deseas desactivar la animación de un GIF y deseas la versión estática de la misma, utiliza la opción -k. Por ejemplo, s1600-k devuelve una imagen estática de un GIF animado.

https://1.bp.blogspot.com/-1SDFjUkQBgE/WByen0OZ7vI/AAAAAAAAAFo/mSF3WloztjsfaFN1H9ZEEFwZdCxmHy3KQCLcB/s1600-k/gifgolazo.gif

Definir bordes/marcos personalizados

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?

https://4.bp.blogspot.com/-kGNEb3Mncto/Ww35Why5PrI/AAAAAAAAH8U/jw1o8ypIPpYHetXj0qthwHYqFC_AcnnnACLcBGAs/s320-rj-l85-b10-c0x000000/bannerbloggerfusion.png

Afortunadamente, uno puede obtener fácilmente un borde personalizado (ejemplo arriba) a través de una combinación de dos parámetros. El primer parámetro b añade un borde grueso de píxeles especificados a la imagen.

El segundo parámetro c se utiliza para especificar el color del borde en formato hexadecimal. El ejemplo anterior utiliza los parámetros s320-rj-l85-b10-c0x000000. Aquí, el grosor del borde es de 10 píxeles (b10) y el color está en formato hexagesimal.

Comprimir Imagenes

Si te preocupa la velocidad de tu blog, no se recomienda en absoluto servir imágenes de gran peso a los visitantes. 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.

Está disponible el parámetro de compresión de imagen l que reduce el tamaño del archivo y al mismo tiempo afecta a la calidad de la imagen. Un ejemplo de lo mismo es s1600-rj-l60. Con esto le estamos diciendo que nos muestre la imagen con una calidad del 60% con respecto al original, lo que comprime el archivo en un 40%.

https://4.bp.blogspot.com/-kGNEb3Mncto/Ww35Why5PrI/AAAAAAAAH8U/jw1o8ypIPpYHetXj0qthwHYqFC_AcnnnACLcBGAs/s1600-rj-l60/bannerbloggerfusion.png

Almacenar Imagen en Caché del Navegador

El almacenamiento en el caché del navegador 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.

Para ello, utiliza el parámetro e. Por ejemplo, s1600-e30 almacenará la imagen en el caché del navegador del visitante durante 30 días.

https://4.bp.blogspot.com/-kGNEb3Mncto/Ww35Why5PrI/AAAAAAAAH8U/jw1o8ypIPpYHetXj0qthwHYqFC_AcnnnACLcBGAs/s1600-e30/bannerbloggerfusion.png

Desenfocar Imagen

Utiliza la opción fSoften que toma 3 parámetros numéricos para añadir el efecto de desenfoque. Para la imagen de ejemplo, usaremos fSoften=1,5,0 para añadir el efecto de desenfoque deseado. Aquí, el número del medio se puede cambiar de 0 a 100 para ajustar y ajustar la intensidad del efecto de desenfoque.

https://4.bp.blogspot.com/-kGNEb3Mncto/Ww35Why5PrI/AAAAAAAAH8U/jw1o8ypIPpYHetXj0qthwHYqFC_AcnnnACLcBGAs/s1600-fSoften=1,5,0/bannerbloggerfusion.png

Agregar Degradado y Sombra de Borde

Y ahora viene el efecto de degradado combinado con un color de sombra de borde personalizado. Sí, ¡también puedes hacer eso!

Utiliza la opción fVignette para añadir ambos efectos a la imagen. Para la imagen de demostración, usaremos fVignette=1,100,1.5,0,000000 para añadir el degradado y la sombra de borde.

Aquí el número del tercer parámetro puede usarse para ajustar el área de cobertura del degradado y el código de color hexadecimal (último parámetro) puede usarse para especificar el color de sombra del borde.

https://4.bp.blogspot.com/-kGNEb3Mncto/Ww35Why5PrI/AAAAAAAAH8U/jw1o8ypIPpYHetXj0qthwHYqFC_AcnnnACLcBGAs/fVignette=1,100,1.5,0,000000/bannerbloggerfusion.png

Versión Descargable

Si deseas proporcionar un enlace de descarga de imagen, debes añadir -d al final del tamaño:

https://4.bp.blogspot.com/-kGNEb3Mncto/Ww35Why5PrI/AAAAAAAAH8U/jw1o8ypIPpYHetXj0qthwHYqFC_AcnnnACLcBGAs/s250-d/bannerbloggerfusion.png

XML Object

Si deseas proporcionar un XML Object para tu imagen, debes añadir -g al final del tamaño:

https://1.bp.blogspot.com/-RbmzqSnEQn0/XIx7aWrTbRI/AAAAAAAAINg/Uwhy-yRMiYgGoon-TmXe2OOSRUoPxlx_wCLcBGAs/s250-g/BloggerfusionLogo.png

Conclusión

Estos son “casi” todos los parámetros de manipulación de imágenes cuidadosamente seleccionados disponibles para los usuarios de la plataforma Blogger. Aprovecha estas opciones para ofrecer mejores imágenes a los lectores de tu blog blog.

Publicidad

Síguenos en Facebook