Blogger y las imágenes

Como cada día se suman nuevos usuarios a Blogger hay preguntas que se repiten y este es uno de los temas por el que me llegan más consultas: ¿qué hacer con las imágenes? ¿cómo las pongo? ¿dónde están?.

Lo elemental es entender que las imágenes de los posts son archivos externos que podemos mostrar, vincular o ambas cosas a la vez. Una imagen "incrustada" es una imagen que incluimos con la etiqueta IMG:

<img src="URLimagen" />

y a la que podemos mostrar con un tamaño distinto al original agregando los atributos WIDTH y HEIGHT:

<img src="URLimagen" width="ancho" height="alto" />

Todas las imágenes son externas por lo tanto podemos crear vínculos a ellas:

<a href="URLimagen">Aquí está la imagen</a>

o vínculos que, en lugar de texto, contengan una miniatura de la imagen original:

<a href="URLimagen">
  <img src="URLimagen" width="ancho" height="alto" />
</a>

Para que al hacer click se abran automáticamente en en una nueva ventana o una nueva pestaña, usamos el atributo TARGET:

<a href="URLimagen" target="_blank">Aquí está la imagen</a>

Si dentro de la etiqueta IMG agregamos algunas propiedades de estilo, logramos hacer que se muestren "flotando" al lado de un texto:

<img src="URLimagen" style="float: left;/>Aquí va el texto al lado
<br clear="left" />
Aquí va el texto abajo

Donde agregamos la etiqueta CLEAR para forzar a que el siguiente elemento aparezca debajo y no al lado. Lo mismo, puede hacerse utilizando right en lugar de left.

Si un imagen es un vínculo, por defecto tendrá un borde, para eliminarlo, usamos el atributo BORDER:

<img src="URLimagen" border="0"/>

Cuando subimos una etiqueta con Blogger, aparece un código por defecto que asusta:

<a href="URLimagen"
     onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" >
<img src="otraURLimagen" border="0" alt=""
     id="BLOGGER_PHOTO_ID_000000000000000000"
     style="float:left; margin:0 0 10px 10px;cursor:pointer; cursor:hand;" />
</a>

Esto es así porque Blogger crea dos imágenes, una contiene la imagen original, la otra una miniatura que se redimensiona automáticamente para que entre en el área de posts y es la que se muestra con la etiqueta IMG. A la otra, sólo se accede a través del vínculo, haciendo click en la imagen.

Un ejemplo simple:

http://4.bp.blogspot.com/XXX/xxx/XXX/xxx/s1600/imagen.gif es la imagen completa
http://4.bp.blogspot.com/XXX/xxx/XXX/xxx/s400/imagen.gif es la miniatura

Por cierto, esto tiene algunos problemas. Si subimos una imagen grande y queremos usarla en la plantilla ¿cuál es la URL que debemos poner? La lógica nos dice que la primera, la que se encuentra dentro de la etiqueta A ya que es la que tiene el tamaño completo, sin embargo, muchas veces esto no funciona, la imagen no se muestra.

Incluso, si ponemos la URL de la imagen en el navegador, no se mostrará sino que nos preguntará si queremos descargar el archivo ¿Por qué? al parecer, Blogger no apunta a la imagen sino a una página intermedia a la que no tenemos acceso. Esto es bastante frecuente si la imagen es muy grande, por ejemplo, los fondos de las plantillas.

Explicaciones no tengo pero la solución práctica es simple. Si la URL de la imagen que subimos es de este tipo o similar:

http://4.bp.blogspot.com/XXX/xxx/XXX/xxx/s400/imagen.gif

basta fijarse en el nombre de la carpeta, es este caso s400 y modificarla para que apunte a s00, de tal forma, la URL a incluir en la plantilla sería:

http://4.bp.blogspot.com/XXX/xxx/XXX/xxx/s00/imagen.gif

Tal vez, alguna vez Blogger se digne explicar claramente qué hace con las imágenes y cómo podemos usarlas.