En esta entrada voy a compartir un pequeño tip que he descubierto recientemente, gracias al cual podremos mostrar imágenes alojadas por Google a diferentes tamaños, sencillamente modificando ligeramente la ruta o URL de la misma. Esto será especialmente útil para imágenes muy grandes, que la aplicación de G+ reduce automáticamente a un menor tamaño cuando las subimos a nuestro perfil.
Recientemente Google ha introducido algunos cambios en el sistema de subida y alojamiento de imágenes en su nube, que afectan especialmente a los usuarios de Blogger. La mayoría no habrá notado nada, pero sin duda sí los que pongan en sus blogs y webs imágenes grandes (sobre todo muy alargadas verticalmente). El cambio consiste en una limitación respecto al tamaño de las imágenes publicadas, de forma que, por ejemplo, una fotografía de 1000 píxeles de alto puede mostrarse después en el blog a 800.
Afortunadamente no es algo irreversible, pues he descubierto que puede operarse con la URL de la imagen para devolverle el tamaño original que tenía (con tanto height o altura en píxeles como sea necesario).
Ya que menciono el atributo height de las imágenes, en realidad este truco funciona de forma parecida, pues podremos establecer el alto (y ancho) en píxeles de la imagen directamente a través de su URL. En el fondo lo que parece ocurrir es que la aplicación de Google+ Fotos, que gestiona y almacena todas nuestras imágenes alojadas en la nube de Google, guarda la misma imagen a varios tamaños. De esta forma, cuando subimos una foto, ya sea compartiéndola en G+, o poniéndola en un blog de Blogger, o en un álbum privado que compartimos con nuestra familia, la herramienta creará varias copias para optimizar la forma en que las muestra en los diversos entornos web.
Esto es una teoría mía personal. En cualquier caso los hechos son que, si subimos una imagen muy grande verticalmente a cualquier sitio de Google, observaremos que aparece después publicada a un menor tamaño. Si hemos dado atributos width y height a dicha imagen, esto tendrá el resultado de que aparecerá borrosa, pixelada. Ello se debe a que la imagen que se está mostrando es más pequeña ahora, de forma que los atributos que indicamos en la etiqueta <img> ya no son correctos. Al subirse, es como si Google Fotos (que gestiona y almacena la totalidad de las imágenes que subimos) la hubiera reducido a un tamaño menor al guardarla.
Ante esto hay varias soluciones. Podremos cambiar los atributos al nuevo tamaño de la imagen (lo más recomendable) o sencillamente eliminar los atributos width y height de la misma para que la muestre a su tamaño real (menos recomendable pues se agiliza el tiempo de carga estableciéndolos). Por último existe una tercera opción que he descubierto, y que es el motivo de que haya escrito este post: podemos modificar la URL de la imagen para llamar la versión del tamaño original que habíamos subido inicialmente.
Así pues la aplicación de Google Fotos tiene también guardada dicha versión original. Explico por tanto como modificar la URL de la imagen:
Pongo de ejemplo una imagen de una de mis webs (fue precisamente aquí cuando me di cuenta de todo esto). Como puede verse la imagen aparece pixelada:
Me extrañó mucho cuando lo vi, y al hacer clic derecho en la imagen para mostrarla sola en otra pestaña del navegador, descubrí que al subirse a G+ la imagen había sido reducida de tamaño. Era más pequeña ahora, de 340×1433 píxeles pasó a medir 206×868. Al tener establecidos los atributos height y width en la etiqueta <img>, la mostraba lógicamente pixelada (a un tamaño mayor del que tenía la nueva imagen). En realidad, la foto que había guardado Google Fotos era ésta:
Es decir, una imagen de 206×868 píxeles. De esta forma, tendremos que cambiar los atributos height y width de la etiqueta <img> al nuevo tamaño, o eliminarlos por completo para que muestre la imagen a su nuevo tamaño real. No obstante, fijándome en la URL de la imagen, descubrí algunas cosas:
http://lh4.googleusercontent.com/-jqFSHX7SiOs/U2yVS2PrJ1I/AAAAAAAAF7s/pCtsdIhIPKg/w206-h868-no/sports-for-all-interior-paginas%255B6%255D
Posteriormente, también he visto que pueden aparecer igualmente URLs de este tipo:
http://lh4.googleusercontent.com/-jqFSHX7SiOs/U2yVS2PrJ1I/AAAAAAAAF7s/pCtsdIhIPKg/s868/sports-for-all-interior-paginas%255B6%255D
Subrayo y pongo en negrita las partes de la URL que me llamaron la atención. Me fijé en que parte de ella incluye unos números, acompañados de una W y una H, o bien con una «s» minúscula al principio. No fue muy difícil colegir que correspondían al ancho y alto de la imagen (width y height). Y en efecto era así. En el caso de la S minúscula se refiere al alto de la imagen. De esta forma, cambiando estos números por las medidas de mi imagen original, teníamos la siguiente URL:
Voilà! Como puede verse clicando en los enlaces, estas URL devuelven la imagen a su tamaño original. Seguí probando, eliminando partes de la URL que no parecían importantes de cara a poner sencillamente la imagen en una web. Al final me quedé con estas fórmulas:
Basta por tanto con añadir las medidas en píxeles en la parte que pongo en negrita (junto a W y H, o el alto de la imagen tras la S en el segundo caso). Con esto podremos publicar nuestra foto a su tamaño original, o modificar su tamaño por el que queramos.
Como se ve esta parte de la ruta contiene comandos modificadores, que pueden incluso eliminarse. Lo fundamental es lo anterior, que alude a nuestra cuenta y al ID de la foto, eso no puede quitarse. Si eliminamos la parte de la URL que alude al tamaño, pues entonces nos devuelve una imagen aún más pequeña:
Es por esto que digo que seguramente G+ guarda las imágenes a varios tamaños cuando las subimos, para mostrar un tamaño u otro según convenga (razones de optimización de velocidad de carga, con toda probabilidad).
En cuanto a los atributos %255B6%255D no sé muy bien para que servirán, aunque pueden eliminarse sin problema. De igual forma pasa con "-no" que acompaña a "w" y "h". Sin duda tienen alguna función, pero para el caso que nos ocupa (poner la imagen a su tamaño original en un blog o web) no parecen influir.
Y esto es todo lo que he descubierto por ahora. Espero haya sido útil para aquellos que se hayan extrañado porque sus imágenes aparecen ahora más pequeñas en sus blogs. Si alguien tiene información que aportar en este asunto, que no dude en comentarlo. Será bien recibida.