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
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.
En imágenes verticales, el recorte con este sufijo se produce desplazado hacia abajo.
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.
Pues si, la verdad es que me encuentro imgenes que he subido al blog, duplicadas e incluso triplicadas en Picasa, no sé porqué.
ResponderEliminarGracias por el post.
Saludos
Cuando están duplicadas suele ser porque las subiste un par de veces aunque finalmente sólo usaras una para el post.
EliminarHay tres variantes que a mí en lo particular me parecen interesantes. Una es que con el sufijo -d permite que se descargue la imagen:
ResponderEliminarhttp://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 :)
Evidentemente, esas tres no las conocía, así que las incluyo en la entrada. Muchas gracias Potro.
EliminarPues 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.
ResponderEliminarUn 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?
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:
Eliminarh3.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;
}
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.
ResponderEliminarGracias por la información Oloman y Potro
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¿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...
ResponderEliminarPor 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.
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á.
EliminarEjemplo:
< 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.
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.
EliminarNo 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.
EliminarDe todas formas me ha parecido que ya usas el formato -c para los sumarios. Para mí es la mejor opción.
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 :)
EliminarHola 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
ResponderEliminarEso 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.
EliminarY que hacer cuando llegaste al tope de imagenes a subir?
ResponderEliminarClaro si boro imagenes de mi Picassa, se me borraran del blog automaticamente verdad?, ains que lio!!!!
ResponderEliminarTe contesté aquí.
EliminarDe 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í.
Muy útil, gracias Oloman!
ResponderEliminarGracias!!!, esas redimensiones cuadradas a las miniaturas de los post relacionados en mi blog me tenían loca. ¡Muy buena explicación!
ResponderEliminar