Alojamiento de imagenes en Blogger
16-sep-2008
9
Cuando desde el icono "Añadir imagen" colocamos una imagen en una entrada Blogspot, en realidad estamos alojándola en el propio Blogger y por extensión, en Picasa, que es un servicio también de Google.
Cosa diferente es cuando ponemos directamente la dirección, porque en este caso, recurrimos a una imagen ya alojada en algún sitio y simplemente ponemos su dirección para que se vea. Por cierto: ¡Ojo con hacer HotLinking!. Aquí trataremos el primer caso.
A más de uno, este tema nos ha dado algún que otro quebradero de cabeza, pero la realidad es que es más simple de lo que parece. En un Blogger Para Torpes, ya se explicó cómo subir una imagen.
Ese procedimiento provoca la inserción automática en nuestra entrada, del siguiente código:
La parte de código marcada en azul es introducida por Blogger por motivos que desconozco, pero no son en absoluto necesarios para que una imagen se muestre adecuadamente. Lo marcado en verde es todo lo concerniente al atributo STYLE, con el cual se configura en este caso, los márgenes, alineación y aspecto del cursor. Esta parte tampoco es imprescindible, pero sí recomendable para que la imagen se muestre bien formateada.
Por último, ALT sirve para ponerle un nombre a la imagen, que aparecerá al poner el cursor sobre ella y BORDER para dibujar un borde exterior. En el ejemplo, el valor es 0 (sin borde).
Eliminando lo prescindible, podemos simplificar para la explicación -y a todos los efectos- de la siguiente manera:
Las líneas 1 y 3 crean en la imagen mostrada, un enlace a la imagen original, que observareis que está en el subdirectorio 1600-h y que por lo demás, tiene la misma dirección y nombre que la que realmente visualizamos en un blog (.../s200/nombre.jpg). Si no se desea enlazar a la imagen original, estas dos líneas también pueden ser eliminadas.
Y por fin, estamos en la imagen que realmente se ve en nuestro espacio cuando alojamos en Blogger. Esta imagen es como una miniatura de la original y su tamaño lo marcamos nosotros cuando escogemos en la ventana de "Añadir imagen", entre las distintas opciones: grande, mediano, pequeño.
Cada vez que subimos una imagen, Blogger crea y guarda diversos tamaños, asignándole los directorios s400, s320 y s200 (grande, mediano y pequeño, respectivamente). Esas "miniaturas" tendrán un ancho máximo de 400px, 320px o 200px. La imagen original estará guardada en s1600-h, pero también se puede acceder mediante el directorio s1600. He encontrado que también se crea un s800 con una imagen de 800px.
Pero mejor, veamos un ejemplo de todo lo que se almacena cuando subimos una imagen lo suficientemente grande:
Imagen de 800pixels
Dirección: http://1.bp.blogspot.com/_0eC4K-qZ7AM/SM05MpjnJ6I/AAAAAAAADWk/w1RjA9ulq-Q/s800/lago1280x350.jpg
Imagen original. (1280 pixels)
Dirección: http://1.bp.blogspot.com/_0eC4K-qZ7AM/SM05MpjnJ6I/AAAAAAAADWk/w1RjA9ulq-Q/s1600/lago1280x350.jpg
Si la imagen es, por ejemplo, de sólo 300px, los directorios s1600, s800, s400 y s320, contendrán imágenes idénticas: una de 300px. Digamos que el número del directorio, indica hasta que tamaño se puede almacenar.
Por lo que hemos visto, Blogger a priori no mostrará directamente imágenes de más de 400 pixels de ancho (tamaño grande). Sin embargo, si por ejemplo queremos mostrar una imagen de 500px de ancho, bastará con que sea de ese tamaño y la subamos en tamaño grande. Luego accedemos al código y cambiamos el "s400" por un "s1600". La imagen se verá en su tamaño original: 500px.
Aplicando el atributo WIDTH también podemos aumentar o reducir el tamaño en que se muestra una imagen, pero esta opción, en ocasiones distorsiona demasiado la imagen. De necesitarlo, habría que formularlo así:
<img src="http://1.bp.blogspot.com/.../w1RjA9ulq-Q/s1600/nombre.jpg" width="250px" />
Cosa diferente es cuando ponemos directamente la dirección, porque en este caso, recurrimos a una imagen ya alojada en algún sitio y simplemente ponemos su dirección para que se vea. Por cierto: ¡Ojo con hacer HotLinking!. Aquí trataremos el primer caso.
A más de uno, este tema nos ha dado algún que otro quebradero de cabeza, pero la realidad es que es más simple de lo que parece. En un Blogger Para Torpes, ya se explicó cómo subir una imagen.
Ese procedimiento provoca la inserción automática en nuestra entrada, del siguiente código:
1. <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/.../w1RjA9ulq-Q/s1600-h/nombre.jpg">
2. <img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://1.bp.blogspot.com/.../w1RjA9ulq-Q/s200/nombre.jpg" alt="" id="BLOGGER_PHOTO_ID_5245912030432929698" border="0" />
3. </a>
(*) Los números 1, 2 y 3 se han añadido para poder hacer referencia a las distintas etiquetas HTML que componen el código. No figuran en el código original.
2. <img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://1.bp.blogspot.com/.../w1RjA9ulq-Q/s200/nombre.jpg" alt="" id="BLOGGER_PHOTO_ID_5245912030432929698" border="0" />
3. </a>
(*) Los números 1, 2 y 3 se han añadido para poder hacer referencia a las distintas etiquetas HTML que componen el código. No figuran en el código original.
La parte de código marcada en azul es introducida por Blogger por motivos que desconozco, pero no son en absoluto necesarios para que una imagen se muestre adecuadamente. Lo marcado en verde es todo lo concerniente al atributo STYLE, con el cual se configura en este caso, los márgenes, alineación y aspecto del cursor. Esta parte tampoco es imprescindible, pero sí recomendable para que la imagen se muestre bien formateada.
Por último, ALT sirve para ponerle un nombre a la imagen, que aparecerá al poner el cursor sobre ella y BORDER para dibujar un borde exterior. En el ejemplo, el valor es 0 (sin borde).
Eliminando lo prescindible, podemos simplificar para la explicación -y a todos los efectos- de la siguiente manera:
1. <a href="http://1.bp.blogspot.com/.../w1RjA9ulq-Q/s1600-h/nombre.jpg">
2. <img src="http://1.bp.blogspot.com/.../w1RjA9ulq-Q/s200/nombre.jpg" />
3. </a>
2. <img src="http://1.bp.blogspot.com/.../w1RjA9ulq-Q/s200/nombre.jpg" />
3. </a>
Las líneas 1 y 3 crean en la imagen mostrada, un enlace a la imagen original, que observareis que está en el subdirectorio 1600-h y que por lo demás, tiene la misma dirección y nombre que la que realmente visualizamos en un blog (.../s200/nombre.jpg). Si no se desea enlazar a la imagen original, estas dos líneas también pueden ser eliminadas.
Y por fin, estamos en la imagen que realmente se ve en nuestro espacio cuando alojamos en Blogger. Esta imagen es como una miniatura de la original y su tamaño lo marcamos nosotros cuando escogemos en la ventana de "Añadir imagen", entre las distintas opciones: grande, mediano, pequeño.
Cada vez que subimos una imagen, Blogger crea y guarda diversos tamaños, asignándole los directorios s400, s320 y s200 (grande, mediano y pequeño, respectivamente). Esas "miniaturas" tendrán un ancho máximo de 400px, 320px o 200px. La imagen original estará guardada en s1600-h, pero también se puede acceder mediante el directorio s1600. He encontrado que también se crea un s800 con una imagen de 800px.
Pero mejor, veamos un ejemplo de todo lo que se almacena cuando subimos una imagen lo suficientemente grande:
Imagen de 200pixels
Dirección: http://1.bp.blogspot.com/_0eC4K-qZ7AM/SM05MpjnJ6I/AAAAAAAADWk/w1RjA9ulq-Q/s200/lago1280x350.jpg
Imagen de 320pixels
Dirección: http://1.bp.blogspot.com/_0eC4K-qZ7AM/SM05MpjnJ6I/AAAAAAAADWk/w1RjA9ulq-Q/s320/lago1280x350.jpg
Imagen de 400pixels
Dirección: http://1.bp.blogspot.com/_0eC4K-qZ7AM/SM05MpjnJ6I/AAAAAAAADWk/w1RjA9ulq-Q/s400/lago1280x350.jpg
Dirección: http://1.bp.blogspot.com/_0eC4K-qZ7AM/SM05MpjnJ6I/AAAAAAAADWk/w1RjA9ulq-Q/s200/lago1280x350.jpg
Imagen de 320pixels
Dirección: http://1.bp.blogspot.com/_0eC4K-qZ7AM/SM05MpjnJ6I/AAAAAAAADWk/w1RjA9ulq-Q/s320/lago1280x350.jpg
Imagen de 400pixels
Dirección: http://1.bp.blogspot.com/_0eC4K-qZ7AM/SM05MpjnJ6I/AAAAAAAADWk/w1RjA9ulq-Q/s400/lago1280x350.jpg
Las dos siguientes no se verán enteras porque exceden del ancho de esta entrada. Si teneis curiosidad por ver la imagen a tamaño original, se puede pinchar en cualquiera de las de ejemplo para acceder a la de 1280 x 350 pixels.
Imagen de 800pixels
Dirección: http://1.bp.blogspot.com/_0eC4K-qZ7AM/SM05MpjnJ6I/AAAAAAAADWk/w1RjA9ulq-Q/s800/lago1280x350.jpg
Imagen original. (1280 pixels)
Dirección: http://1.bp.blogspot.com/_0eC4K-qZ7AM/SM05MpjnJ6I/AAAAAAAADWk/w1RjA9ulq-Q/s1600/lago1280x350.jpg
Por lo que hemos visto, Blogger a priori no mostrará directamente imágenes de más de 400 pixels de ancho (tamaño grande). Sin embargo, si por ejemplo queremos mostrar una imagen de 500px de ancho, bastará con que sea de ese tamaño y la subamos en tamaño grande. Luego accedemos al código y cambiamos el "s400" por un "s1600". La imagen se verá en su tamaño original: 500px.Aplicando el atributo WIDTH también podemos aumentar o reducir el tamaño en que se muestra una imagen, pero esta opción, en ocasiones distorsiona demasiado la imagen. De necesitarlo, habría que formularlo así:
<img src="http://1.bp.blogspot.com/.../w1RjA9ulq-Q/s1600/nombre.jpg" width="250px" />
Suscribirse a:
Enviar comentarios (Atom)
NINGUN DERECHO RESERVADO
...aunque se agradece un enlace.
Si crees que algo aquí vulnera los derechos de otro, mándanos un correo.
COLEGUILLAS
9 comentarios:
Oloman, hace un tiempito deje un comentario con una pregunta, :P quizas no la leiste porque estaba en post muy anteriores, así que vuelvo a hacertela.
Hay alguna forma de hacer un índice o algo que se le parezca?
quizás con archivos en una entrada(sin fecha y ponerlo al fondo de las entradas),
pero no sé como poner archivos en una entrada, solo sale para ubicarlo en la sidebar o como widget al final de las entradas.
me explico? gracias por tu tiempo!
saludos
Creo que te contesté Luz. No obstante, no te va a gustar la respuesta aunque la repita: por el momento no sé como hacerlo. Hace tiempo estuve investigando un poco porque a mí también me interesaba y no logré nada que me gustara.
Lo tengo en mi agenda a medio plazo, porque como te decía, yo también quiero uno.
Sorry Oloman, pero no lo vi!!!
bue, acordate de mi cuando lo logres! y si yo encuentro algo como un índice te aviso!jeje :D
Saludos
Uaaaaaaaaau!!!!
Super curradísima la explicación!! :-)))
Gracias!!
Tengo dos preguntas al respecto de las imágenes alojadas en Picasa. Al parecer contamos con una capacidad máxima para alojar en Picasa, de hecho se te informa de ello cada vez que subes una imagen nueva. Por lo que quisiera exprimir esa capacidad al máximo. He comprobado que por ejemplo, si subo varias veces la misma imagen, la vuelve a guardar en Picasa y por consiguiente ocupa otra vez su espacio correspondiente ¿cómo se hace para coger la imagen que ya subí en su día en Picasa si la necesito para otro post? ¿Se puede hacer esto? Y otro pregunta, si eliminase una imagen de uno de mis posts, ¿se eliminaría automáticamente de Picasa, o tendría que eliminarla de ahí también?
No sé si me expliqué convenientemente.
Muchas gracias por tu atención
Ollodepez... para mí Picasa es transparente y comentarlo fue sólo una curiosidad, porque sólo uso la funcionalidad de subir imágenes desde el panel de control de Blogger.
Si quieres usar misma imagen varias veces por ahorrar espacio, dirígite a la entrada donde la publicaste la primera vez y simplemente con el botón derecho-->propiedades, podrás ver la dirección del alojamiento y hasta marcarla y copiarla.
Si has leido esta entrada, luego podrás realizar las modificaciones en tamaño que consideres.
Por otra parte, cuando eliminas un post, hay una casilla de verificación para seleccionar si quieres o no eliminar también las imágenes que pudieran acompañar el texto. Aunque no lo he comprobado, sospecho que esta opción las borra del todo, porque si no, ¿para qué preguntan?
De todas formas y para acabar, salvo que subas ficheros gigantescos, creo que te costará llenar el espacio disponible. Hay 1Gb por USUARIO (no por blog) y, en mi caso, después de casi dos años y 1000 entradas, tengo sólo ocupado un 7%.
Si no me equivoco, tardaré unos 26 años más en llenarlo.
De todas formas, siempre puedes crear otro usuario y contar con otro Giga.
Bueno, yo ya llevo el mismo espacio que tú ocupado y llevo bastante menos tiempo; se ve que tardaré algunos años menos que tú en gastar el Giga, jeje
Ahora en serio, muchísimas gracias por la respuesta, creo que ya sé como ahorrar espacio.
Un saludo
Ollodepez, gracias por tu labor docente
Oleman, a ti muchísimas gracias por el curre y por enseñar al que no sabe
PUBLICAR UN COMENTARIO