Las miniaturas de Blogger

Cuando subimos una imagen a Blogger, el proceso es sencillo pero a veces, desconcertante, sobre todo si queremos hacer alguna clase de modificación en la imagen o se nos ocurre intentar algo distinto de las cosas que ya están predefinidas. De todas las cosas extrañas, el tamaño de la imagen subida es la que más confusión crea ya que sólo hay tres alternativas:

Tamaño de la imagen:
Pequeñas
Medio
Grandes

¿Que significan esas opciones? Así, en abstracto, parecerían no significar nada porque algo es grande o chico si tenemos otra cosa con que compararlo y aquí, no hay nada. Tampoco significa que si la imagen es "grande" debamos usar esa opción y si es "pequeña" la otra; en realidad, mientras la imagen no pese mas de 8MB, da lo mismo si elegimos una opción u otra, la imagen original se guardará tal y como es, aunque no nos demos cuenta.

Al subir una imagen, Blogger crea una serie de miniaturas de manera automática y son esas las que normalmente usamos; al definir Pequeñas/Medio/Grandes estamos decidiendo cuál de esas miniaturas vamos a usar y eso es lo que nos muestra el código HTML.

Supongamos que yo tengo una imagen que mide 617x423 pixeles, la subo a y elijo Medio y Centrar; el código generado dirá algo así:

<a href="http:// ....... /s1600-h/miImagen.jpg"> 
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 219px;" src="http:// ....... /s320/miImagen.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_XXXXXXXXXX" />
</a>

Lo primero que tenemos que saber es que lo único que nos interesa es la etiqueta IMG, el enlace no importa. Allí, en esa etiqueta hay dos datos claves en el parámetro style:

width: 320px; height: 219px;

es decir, la imagen, se mostrará de ese tamaño, de 320x219, no es la imagen subida, es una miniatura; usando Grande, pasaría algo similar, sólo cambiarían los valores, el valor de width diría 400px y si usara la opción Pequeña diría 200px.

Ah, bueno, entonces, para ver la imagen real deberé cambiar ese valor y poner width:617px ... no; eso no funcionará, veremos la imagen de ese tamaño pero no será la original, seguirá siendo la misma pero redimensionada y por lo tanto, se verá mal (pixelada): Ver/Ocultar un ejemplo [+]

El problema es que sin importar la parte de style, la URL de la imagen es la miniatura y eso está indicado por el directorio donde está guardada; es lo que vemos justo antes del nombre:

htp://......./s320/miImagen.jpg"

Ese dato define la miniatura a usar:

dirá s200 si elegimos Pequeña
dirá s320 si elegimos Medio
dirá s400 si elegimos Grande

Sólo cambiar ese dato tampoco servirá de nada porque style seguirá influyendo, veremos las distintas miniaturas, todas redimensionadas así que tendrán el mismo tamaño. Ver/Ocultar el ejemplo [+]

Si cambiamos la miniatura también debemos cambiar las propiedades width y height o eliminarlas. Ver/Ocultar el ejemplo [+]

Es importante entender que lo que hace Blogger es limitar el tamaño pero no necesariamente el ancho, eso depende de la imagen, si es apaisada (más ancha que alta) el tamaño máximo lo define width pero si no lo es (es más alta que ancha), el máximo lo define height. Por ejemplo, al insertar una imagen de 533x800 se generará este código:

<img 
  style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 213px; height: 320px;"
  src="http:// ....... /s320/miImagen.jpg"
  border="0"
  alt=""id="BLOGGER_PHOTO_ID_XXXXXXXXXX" />

Las miniaturas generadas por las opciones por defecto tendrán un tamaño máximo en alguno de sus sentidos (ancho o alto) pero ¿dónde está la imagen original? ¿podemos usarla? Si nuestro blog está en un dominio de blogspot.com, podemos usarla con facilidad, si está en un dominio propio, no porque hay restricciones que limitan su uso.

Como el resto de las miniaturas, la imagen original se encuentra en un directorio especial o mejor dicho, en varios: s00, s000 o s1600. Todos ellos contienen la imagen real, la que nosotros hemos subido y pueden usarse con el mismo criterio anterior, eliminando width y height del style y cambiando el directorio:

http:// ....... /s00/miImagen.jpg

Esta es la imagen original de 617x423 y esta otra la de 533x800.

El hecho que Blogger cree esas miniaturas es útil ya que con una sola imagen, tenemos cuatro variantes a nuestra disposición ¿No habrá más? Pués la verdad si y ahí las cosas se vuelven interesantes.

Subo otra imagen, esta vez de 596x596. No importa el método porque lo único que voy a usar es la URL de la etiqueta IMG así que ya dispongo de cuatro:

http: ....... /s00/demoIMGs_01.jpg la original de 596x596
http: ....... /s200/demoIMGs_01.jpg una miniatura de 200x200
http: ....... /s320/demoIMGs_01.jpg una miniatura de 320x300
http: ....... /s400/demoIMGs_01.jpg una miniatura de 400x400

Pero si juego un poco y pruebo otros directorios, me encuentro con que todos estos también funcionan y para verlos, uso una imagen mayor, la de 533x800:

s220 mostrará la imagen como miniatura de 220x220
s640 mostrará la imagen como miniatura de 426x640
s720 mostrará la imagen como miniatura de 480x720
s800 mostrará la imagen como miniatura de 533x800 que es la original

Pero también es interesante que nos muestra miniaturas mucho más chicas lo que es útil para generar galerías:

s32 son miniaturas de 32 pixeles
s48 son miniaturas de 48 pixeles
s64 son miniaturas de 64 pixeles
s128 son miniaturas de 128 pixeles
s150 son miniaturas de 150 pixeles

Y Plethoras comenta que ha encontrado más así que seguimos ampliando la lista de posibilidades:

s72 | s94 | s104 | s110 | s144 | s160 | s288 | s512 | s576 | s912 | s1024 | s1152 | s1280 | s1440