Imágenes en tamaño real

A veces cuando subimos una imagen desde Blogger batallamos porque queremos la imagen más grande, en tamaño real, pero resulta que la medida más grande que nos aparece es de 400px de ancho.

Lo mismo sucede cuando queremos usar imágenes para la plantilla, si pegamos la URL de la imagen que nos da Blogger simplemente no se ve.

Primero veamos que cuando subimos una imagen Blogger nos da tres opciones de tamaño: Pequeñas, Medio y Grandes.

Las pequeñas tienen un ancho máximo de 200px; las medianas 320px; y las grandes 400px de ancho.

Tamaño chico (200px)

Tamaño mediano (320px)

Tamaño grande (400px)

Cualquiera que sea el caso Blogger nos arrojará un código dividido en dos partes, el primero es el que contiene la URL de la imagen en su tamaño original (cualquiera que sea la medida), y la segunda es el código de cómo se muestra la imagen dentro de la entrada.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/ZA1ny_dAs/S3dezx4UrTI/AAAD1o/WVXOYytI/s1600-h/Desierto.png"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 193px;" src="http://1.bp.blogspot.com/ZA1ny_dAs/S3dezx4UrTI/AAAD1o/WVXOYytI/s320/Desierto.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5437914528676382722" /></a>

Si nos fijamos veremos que en el segundo código vienen las especificaciones del tamaño, estas se encuentran en width y height.
Ambos códigos contienen dos URLs, una tiene la URL de la imagen en tamaño original y la otra es una URL del tamaño pequeño.
Pero lo que nos interesa es tener la imagen en tamaño real, o sea la URL que se encuentra en el primer código:

http://1.bp.blogspot.com/ZA1ny_dAs/S3dezx4UrTI/AAAD1o/WVXOYytI/s1600-h/Desierto.png

El problema es que si usamos esta URL tal como está no funciona, ya que está habilitada para que sólo funcione para abrirse en una ventana nueva. Pero aquí viene el truco; sólo basta eliminar el guión y la letra H que se encuentra después de s1600, con lo cual quedaría así:

http://1.bp.blogspot.com/ZA1ny_dAs/S3dezx4UrTI/AAAD1o/WVXOYytI/s1600/Desierto.png

De esta forma la imagen se mostrará en su tamaño original.

Tamaño real

Por lo tanto el código de una imagen en tamaño real sería así:

<img src="http://1.bp.blogspot.com/ZA1ny_dAs/S3dezx4UrTI/AAAD1o/WVXOYytI/s1600/Desierto.png" />

Así que tomamos la primera URL y eliminamos el -h que se encuentra después de /s1600 y tendremos la imagen en tamaño real dentro de las entradas o en la plantilla.

Ten en cuenta que la imagen que vaya dentro de tus entradas deben medir menos del ancho asignado para tus entradas (main-wrapper) de lo contrario la imagen se cortará y no se mostrará por completo.