Cómo agregar imágenes a blogger con medidas exactas

Share

Como sabrás, al subir alguna imagen a blogger, la misma plataforma te da varios tamaños en la cuál mostrar tu imagen: Pequeño, media, grande, extra-grande u original; sin embargo cuando no nos convence ninguno de los tamaños, tenemos la posibilidad de modificar el tamaño en pixeles mediante el HTML que incrusta la foto, con un sencillo tutorial que explico a continuación:

Como recordarán, al insertar una imagen y seleccionar HTML en la parte izquierda superior del editor de las entradas, les aparecerá una estructura como la siguiente:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbW61qeC0CX3HEj52r_Qs6zSKG4YHeLQjYPyo4mSaQGzUlLu4jYnfd4WTOLAm_4wJSk79a4S7Btz7dRiwuVd6IHfgEL_id3t4oWG1TZzROdGxaC3K7Pesaf-4htdScWr2Ms5CSTD7YHB0/s1600/fox-692081_1280.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbW61qeC0CX3HEj52r_Qs6zSKG4YHeLQjYPyo4mSaQGzUlLu4jYnfd4WTOLAm_4wJSk79a4S7Btz7dRiwuVd6IHfgEL_id3t4oWG1TZzROdGxaC3K7Pesaf-4htdScWr2Ms5CSTD7YHB0/s320/fox-692081_1280.jpg" width="320" /></a></div>

Verán que hay tres elementos remarcados en colores distintos: el elemento en rojo muestra lo alto de la imagen, mientras que lo marcado en morado, indica el ancho de la imagen y lo marcado en color rosa es el tamaño original de la foto subida.

Height: altura

Width: anchura

En el código HTML que ven arriba las medidas de 180x320 hacen que la foto se vea como a continuación:

¿Muy pequeña, no creen? Cuando quieras cambiar el tamaño de una imagen en tu blog, simplemente sube la imagen e insértala a tu contenido normalmente, cuando ya esté en el cuerpo del post, dirígete al apartado de HTML de las herramientas como se muestra en la imagen:

Cuando veas todo un conjunto de letras y números, busca el código HTML correspondiente a la imagen, cuando lo encuentres viene lo divertidamente sencillo: vamos a cambiar los valores para que la imagen quede en la medida (en pixeles) que a nosotros nos guste. Dentro del código HTML que genera blogger mientras escribes tu post te aparecerán los dos valores por default, sin embargo sólo necesitaremos modificar el valor numérico de widht, mientras que en el de height sólo cambiaremos el valor entre comillas por la palabra auto ¿Qué es lo que hace esto? Que sea cual sea el valor que introduzcas en width, el valor de height siempre se adaptará al de la anchura de la imagen.

¿Muy sencillo no crees? Ahora te daré un tip muy funcional: si manejas imágenes en una resolución muy grande, cambia el valor de widht a 100% (siempre dentro de las comillas) para que la imagen se adapte al ancho total del espacio de tu blog como en la siguiente imagen, donde verás la estructura para que se vea abarcando todo el espacio del post:

<img border="0" height="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaU5FUE1c7-SIxdaBmBStdLFSZnSTp9cHY5Rx-SxxDMlnAS3l5AYyX6Glo2AGmUbuaQ6yv9haaeF79_bapzRb-6lJimciMR1DYPI95Kr-13m677NtJa4Eel42mddOUxjgWPogIQ2HWUws/s1200/panoramic-639860_1920.jpg" width="100%" /></div>

Ten en cuenta una cosa: El tamaño original de la foto en pixeles marcado en color rosa tiene que ser mayor al del atributo en color morado que escribas en la URL, ya que la foto se puede ver borrosa al no ser en una resolución muy grande, como consejo personal te sugiero que siempre lo pongas en s1600, ya que mostrará la imagen en calidad máxima.

Recuerda que cualquier duda que tengas puedes plantearla en los comentarios ¡Hasta la próxima!