Alojando imágenes en Blogger

Ahora que todos estamos un poco concientes de la necesidad de tener un blog que dependa lo menos posible de sevicios externos, vale la pena reciclar cosas escritas alguna vez. Una de ellas es las imágenes.

Alba, comentaba hace unos días, que las imágenes las tenía alojadas en ImageShack. Le sugerí colocarlas en Blogger mismo porque me estoy volviendo un poco paranoico con este asunto y su pregunta fue ¿cómo se alojan en Blogger?

Obviamente, no estamos hablando de las imágenes de las entradas sino de las que usa la plantilla. Tampoco estoy diciendo que no debe usarse un servicio externo, sólo creo que es mejor tenerlas en Blogger porque a la larga, será más rápido y nos evitaremos colapsos indeseados.

Lo que debemos hacer para alojar imágenes que luego usaremos en la plantilla es aprovechar el editor de entradas, ya sea en un post existente o, mejor aún, en uno nuevo al que usaremos de borrador. Vamos a un ejemplo práctico.

Creo una entrada nueva y me ubico en Edición HTML ya que allí tendré que mirar para saber la dirección URL de la imagen. Click en el ícono y me aparecerán una serie de opciones.

Elige un diseño nos da cuatro posibilidades: poner la imagen centrada, flotando a la derecha, flotando a la izquierda o no darle formato. Vamos a elegir esta última aunque, en realidad, no importa.

Tamaño de la imagen tiene tres posibilidades: Pequeñas, Medio y Grandes ¿Qué significa esto? Lo mejor es verlo. Voy a subir la misma imagen cuyo tamaño original es de 600x200:

Tamaño Pequeñas:

Tamaño Medio:

Tamaño Grandes:

Me dará tres codigos similares pero diferentes donde elimino todo y me centro exclusivamente en lo único importante, la de la etiqueta IMG que contiene la URL:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://......./s1600-h/demoIMG.jpg"><img style="cursor: pointer; width: 200px; height: 60px;" src="http://......./sXXX/demoIMG.jpg" alt="" id="BLOGGER_PHOTO_ID_XXXXXXXXXXXXXX" border="0" /></a>

Si sólo me concentro en esa parte, tendré tres etiquetas "normales. Algo así:

<img src="http://......./s200/demoIMG.jpg" />
<img src="http://......./s320/demoIMG.jpg" />
<img src="http://......./s400/demoIMG.jpg" />

Ninguna de las tres se muestra tal como es la imagen original, la primera tiene 200 pixeles de ancho, la segunda 320 y la tercera 400. Aparentemente, han sido redimensionadas por Blogger pero, en realidad, eso no es del todo cierto, lo que está ocurriendo es que nos está mostrando tres miniaturas que se crean automáticamente al subirlas. No habrá diferencias si el ancho de la imagen no supera cierto valor pero si se trata de imágenes más grandes, no se mostrarán a menos que hagamos algo.

Si se fijan en esas etiquetas IMG, verán que son iguales con una excepción, hay un directorio que se muestra en el parámetro src que difiere:

src="http://......./s200/demoIMG.jpg"
src="http://......./s320/demoIMG.jpg"
src="http://......./s400/demoIMG.jpg"

Ese dato, es el que indica cuál es la miniatura a mostrar.

¿Y dónde está la imagen original? Por suerte, Google siempre usa el mismo criterio en todas esas cosas y las coloca en el mismo directorio pero con un nombre distinto, el s000 así que si la cambiáramos por:

src="http://......./s000/demoIMG.jpg"

veríamos esto:

Tamaño Original:

Da lo mismo usar s000 que s00 o bien s0:

src="http://......./s00/demoIMG.jpg"
src="http://......./s0/demoIMG.jpg"

Funcionará siempre que estemos en blogspot porque hay una restricción para quienes tienen dominios propios ya que nuestras imágenes son alojadas en Picasa y este, impide el hotlinking.

No son las únicas miniaturas disponibles, hay más:

s48, s64, s144, s150, s512, s640 e incluso, hay una que algunos utilizan para mostrar las imágenes en su tamaño real:

src="http://......./s1600/demoIMG.jpg"

pero esta en particular suele no funcionar en la plantilla.

En resumen, una vez que subimos la imagen y copiamos la URL que se encuentra el el atributo src, le cambiamos ese directorio, sea cual sea por s000 y ya tenemos la imagen disponible. Ahora, podemos hacer dos cosas, borramos el post y al hacerlo, le decimos que no borre la imagen, o lo guardamos como borrador para utilizarlo en cualquier otro momento.