La ventaja de subir una sola imagen y disponer de cientos | Oloblogger Como todas las plataformas, Blogger tiene cosas buenas y cosas malas, pero en lo que respecta a las imágenes pienso que tiene más de lo prim...

27 de febrero de 2012

La ventaja de subir una sola imagen y disponer de cientos

Como todas las plataformas, Blogger tiene cosas buenas y cosas malas, pero en lo que respecta a las imágenes pienso que tiene más de lo primero. El título de la entrada es en lo que baso esta opinión, porque cuando subimos una imagen, realmente generamos infinidad de copias de todos los tamaños imaginables y otro buen puñado de, al menos, un formato recortado de proporción cuadrada que nos puede venir bien para ciertas cosas.


Creo que es conocido que cuando se sube una imagen a una entrada, esta se almacena en Picasa, un servicio que como Blogger, es propiedad de Google. Sólo tenéis que acceder a ese servicio y veréis cómo hay algún álbum con el nombre de vuestro blog y dentro de él las imágenes que históricamente habéis subido.


Y no sólo estarán las publicadas. También encontramos las que permanecen en un borrador o incluso las que terminasteis descartando y no publicando. En resumen, todo lo que habéis subido alguna vez y no borrado en Picasa. Bueno, todo todo realmente no.


El cómo se se van abriendo esos álbumes o por qué en ocasiones se genera un segundo álbum sobre el mismo blog, es algo que desconozco, pero sí que tengo detectado en qué caso las imágenes serán visibles allí y en qué casos no.

La respuesta es que cuando usamos el icono para subir imágenes desde la pestaña Redactar del editor de entradas, es cuando Picasa recoge el guante y archiva la imagen. Sin embargo, cuando la imagen se incorpora desde la pestaña HTML, ni caso.


Hay otra circunstancia y es que las direcciones que genera Picasa y las que inserta el editor en una entrada, son bien distintas. A la imagen que se muestra en este post le corresponden estas tres. Por cierto que su autor es Sean R. Heavey y si la queréis ver a mayor tamaño, sólo tenéis que pinchar en ella.

Picasa: https://lh3.googleusercontent.com/-qwYyRPVImeI/T0qQJI9ARfI/
AAAAAAAAB6U/HHR2ByPKy1k/s1024/yellow%2520dwarf.jpg

Editor (Redactar): http://4.bp.blogspot.com/-qwYyRPVImeI/T0qQJI9ARfI/
AAAAAAAAB6U/HHR2ByPKy1k/s1600/yellow+dwarf.jpg

Editor (HTML): http://2.bp.blogspot.com/-7O_zBJFszRQ/T0qQYJQtU_I/
AAAAAAAAB6g/oLDD6A_8vH8/s1600/yellow%2Bdwarf.jpg

Como se puede comprobar, se parecen como un huevo a una castaña, por lo que parece fácil deducir que hay algo más que Picasa tras todo esto y que Blogger seguramente tiene otro almacén interno distinto, dónde también guarda nuestras imágenes.


Pero lo interesante de todo esto no es lo diferentes que son las direcciones, sino precisamente lo que tienen en común y que es una carpeta que siempre empieza con una s. En las anteriores serían s1024 y s1600.

Ya hemos explicado en otras ocasiones (1) (2) (3) que ese numerito tras la s es como una réplica de la imagen original, pero redimensionada proporcionalmente al ancho en píxeles indicado por los dígitos (o a la altura si esta es mayor). De esta manera podemos cambiar el tamaño de la imagen original a una más pequeña, con sólo cambiar esos números.

s1600 - s0 - s00 - s000
(Original 1024x254px. Parcialmente oculto por ser el ancho de la entrada de menor tamaño)

Estos serían los tamaños que Blogger proporciona en el editor y que se consiguen al pinchar en Extra grande, Grande, Mediano y Pequeño, así como sus correspondientes carpetas.

Extra grande s640 (640px)

Grande s400 (400px)

Mediano s320 (320px)

Pequeño s200 (200px)


Pero como decía al principio, las posibilidades son muchísimas, ya que podemos indicar cualquier número en esa carpeta por quebrado o raro que sea. El único límite sería el ancho (o alto) de la imagen original, ya que si bien lo podemos utilizar, Blogger siempre nos mostrará como mucho el tamaño original:


Personalizado s566 (566px)

Personalizado s362 (362px)

Personalizado s440 (440px)

Todo esto puede carecer de interés o no dependiendo de como tratemos las imágenes en nuestro blog. Normalmente cargamos uno de los cuatro tamaños "estándar" pero quizás por las dimensiones de nuestro blog, nos interese otro distinto. Por ejemplo, en mi anterior plantilla tenía unos 520px para las entradas, así que la de 400 se me quedaba algo pequeña y la de 640 demasiado grande.

Conociendo esto sólo tenia que subir un tamaño cualquiera y luego cambiar a s500 para tener una imagen de 500px de ancho. Justo el que me venía bien.


Pero hay un último detalle que aunque conozco desde hace tiempo, no había llegado nunca  a publicar. Se trata del sufijo -c.

Si a cualquier cifra le añadimos eso, Blogger nos proporciona una imagen cuadrada del ancho indicado y que extraerá del centro de la imagen original a modo de recorte.

Esto nos abre algunas posibilidades interesantes cómo poder maquetar sumarios con este tipo de imagen a modo de miniaturas y sin necesidad de recurrir a otros códigos más engorrosos que recortan las imágenes:

Personalizado s250-c (250px)

Personalizado s100-c (100px)


A diferencia del anterior sistema de redimensión proporcional, hay que tener algo de cuidado con este sufijo. Con él no respeta el límite de la imagen original y podemos encontrarnos con una imagen de baja resolución ampliada en demasía, que se vea mal. Ejemplo:

Personalizado s600-c (600px)


Hay otro sufijo que es -r y que no reviste a mi parecer ningún interés, ya que si bien admite cambio de dígitos para redimensionar, el formato (proporción) permanece como en el original.

¿Conoces algún sufijo más para las imágenes de Blogger que pueda ser interesante?


01-03-2012. El Potro nos da a conocer tres variantes más:

  • -d, que permite descargar la imagen directamente al pinchar en esa dirección
  • -o, que muestra un icono de "play" sobre la imagen, aparentemente sin más utilidad
  • h, un prefijo en sustitucion de s con el que podemos definir el alto de la imagen en lugar del ancho

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDtZeNKoiaxtlhKdCOOBsxhDFIPz_mBpKK7FUwj3KbUrNaYV0vYybR0I7gzxp5j6bOFvbvkgFwfxYn00hwkrwyG1Z_34GVS7cyva-WveATgG2bk7T5YlX0E1P3lau_CbM4IzOQqL0_NDg/s500-d/yellow+dwarf.jpg
s500-d (Descargar)

s500-o (con icono)

h100 (100px de alto)

10-03-2012. Felipe OI nos comenta otro sufijo que hace otro recorte peculiar. Se trata de -p. Este hace también un recorte cuadrado del ancho del número que indiquemos, pero en lugar de sacarlo de la parte central de la imagen, lo hace sobre la parte algo más a la derecha. Podéis comprobar la diferencia de "encuadre" con respecto a los otros -c que están más arriba.

s200-p (cuadrado desplazado de 200px)

En imágenes verticales, el recorte con este sufijo se produce desplazado hacia abajo.

Original s100-c s100-p

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

20 comentarios :

  1. Pues si, la verdad es que me encuentro imgenes que he subido al blog, duplicadas e incluso triplicadas en Picasa, no sé porqué.
    Gracias por el post.
    Saludos

    ResponderEliminar
    Respuestas
    1. Cuando están duplicadas suele ser porque las subiste un par de veces aunque finalmente sólo usaras una para el post.

      Eliminar
  2. Hay tres variantes que a mí en lo particular me parecen interesantes. Una es que con el sufijo -d permite que se descargue la imagen:
    http://2.bp.blogspot.com/-7O_zBJFszRQ/T0qQYJQtU_I/AAAAAAAAB6g/oLDD6A_8vH8/s500-d/yellow%2Bdwarf.jpg

    Otra es que con el sufijo -o muestra un icono de "play" sobre la imagen:
    http://2.bp.blogspot.com/-7O_zBJFszRQ/T0qQYJQtU_I/AAAAAAAAB6g/oLDD6A_8vH8/s500-o/yellow%2Bdwarf.jpg

    Y otra es que podemos definir el alto de la imagen en lugar del ancho:
    http://2.bp.blogspot.com/-7O_zBJFszRQ/T0qQYJQtU_I/AAAAAAAAB6g/oLDD6A_8vH8/h30/yellow%2Bdwarf.jpg

    Y quién sabe cuántas más variantes habrá escondidas por ahí, alguien con mucho tiempo de sobra seguro descubre más :)

    ResponderEliminar
    Respuestas
    1. Evidentemente, esas tres no las conocía, así que las incluyo en la entrada. Muchas gracias Potro.

      Eliminar
  3. Pues muchas gracias por esta propuesta que como en todas tus entradas suelen venirme bien. Tengo el problema de mi ignorancia y guardo muchas de tus entradas para leerlas con más tranquilidad porque no suelo entenderlo bien. Pongo mucho interés y lo intento hasta que desisto y me digo, ya lo entenderé pero no pierdo la información.
    Un fuerte abrazo por tu ayuda.

    PD: Algún día me gustaría devolverte todo lo que aprendo contigo. No sé si conoces mi blog pero me encantaría grabar algo de lo que escribes... Me sugieres algo?

    ResponderEliminar
    Respuestas
    1. Con la de cosas que he publicado, no sabría decirte. Cada cual debe poner aquello que necesite o le agrade. Lo que sí haría sería cambiar algo... Al pasar el puntero por tus títulos, estos desaparecen. La culpa es de esto:

      h3.post-title a:hover {
      color: transparent;
      text-decoration: underline;
      }

      Cámbialo por esto a ver que te parece:

      h3.post-title a:hover {
      text-decoration: none;
      }

      Eliminar
  4. Es interesantísimo, no tenía ni idea, y me viene muy bien, ya que lo que yo hacía era almacenarlas redimensionadas en un servidor propio.

    Gracias por la información Oloman y Potro

    ResponderEliminar
    Respuestas
    1. Esto es cuestión de antigüedad. Los viejos de Blogger sabemos algunos truquillos de estos, pero aún así siempre hay sorpresas, como lo que nos cuenta Potro, que no lo conocía.

      Eliminar
  5. ¿Alguien sabe de una forma de mostrar una imagen cuadrada, pero que sea la redimensión de la imagen original, en vez del fragmento del centro? Me sería útil...

    Por cierto, '-p' también devuelve una imagen cuadrada que es un fragmento de la original, pero por algún motivo no ese fragmento no está centrado sino desplazado a la izquierda (imágenes horizontales) o arriba (imágenes verticales), pero solo en las imágenes muy "alargadas". Es extraño.

    ResponderEliminar
    Respuestas
    1. La redimensión se consigue añadiendo dentro de la etiqueta img, un width con el ancho deseado. Esto hará que el height se recalcule automáticamente. Si la imagen no es cuadrada y quieres hacerla de esa forma, tendrás que añadir expresamente el height con la misma medida que pusiste en el width. Obviamente, con ese sistema la imagen se distorsionará.

      Ejemplo:
      < img src="https://lh3.googleusercontent.com/-qwYyRPVImeI/T0qQJI9ARfI/
      AAAAAAAAB6U/HHR2ByPKy1k/s1024/yellow%2520dwarf.jpg" width="200" height="200" />

      He incluido tu propuesta en el post. Gracias.

      Eliminar
    2. Sí, y así es como lo hacía antes, pero el problema es que ese sistema carga la imagen original y la redimensiona, y últimamente a San Google también le molestan las redimensiones. En un blog con tantas fotos como el mío era un problema, y ahora carga más rápido. Muchas gracias por todas tus explicaciones.

      Eliminar
    3. No tienes por qué cargar la original. En el enlace -para cuando se amplie- pones la s1600, pero en el IMG puedes usar el sXXX con el tamaño exacto que quieres. Esa última es la que se carga, aunque seguirás teniendo el problema de la distorsión.

      De todas formas me ha parecido que ya usas el formato -c para los sumarios. Para mí es la mejor opción.

      Eliminar
    4. El problema de la 's' es que siempre hay que redimensionar, porque las imágenes no son perfectamente cuadradas, y a veces son horizontales y otras veces son verticales. De todas formas ya me he acostumbrado a los recortes de la c, y coincido en que es la mejor opción. Muchas gracias por tu ayuda :)

      Eliminar
  6. Hola modifice mis entradas y solo se ve la imagen y un poco del texto yo quisiera saber si puedo hacer que las imagenes redireccionen a las entradas completas. es que al modificar me pasa que algunas entradas no redireccionan y no c que hacer me estoy volviendo loco xD ojala me puedan ayuda este es mi blog para que entiendan mi problema peliculaspekaz.blogspot.com

    ResponderEliminar
    Respuestas
    1. Eso que hiciste es un sistema de sumarios y lo normal es que el post completo se enlace desde el título de la entrada y hasta ahí todo funciona bien. No sé qué sistema utilizaste para construir esos sumarios, pero si quieres que la imagen también sirva de enlace, en esta entrada expliqué un sistema.

      Eliminar
  7. Y que hacer cuando llegaste al tope de imagenes a subir?

    ResponderEliminar
  8. Claro si boro imagenes de mi Picassa, se me borraran del blog automaticamente verdad?, ains que lio!!!!

    ResponderEliminar
    Respuestas
    1. Te contesté aquí.

      De todas formas añado a esa respuesta que con que borres y SUSTITUYAS EN TU BLOG dos o tres de ellas creo que tendrás suficiente haciendo lo que te comenté allí.

      Eliminar
  9. Gracias!!!, esas redimensiones cuadradas a las miniaturas de los post relacionados en mi blog me tenían loca. ¡Muy buena explicación!

    ResponderEliminar