JMiur [E]

Ahora que todos estamos un poco concientes de la necesidad de tener un blog que dependa lo menos posible de sevicios externos, vale la pena reciclar cosas escritas alguna vez. Una de ellas es las imágenes.

Alba, comentaba hace unos días, que las imágenes las tenía alojadas en ImageShack. Le sugerí colocarlas en Blogger mismo porque me estoy volviendo un poco paranoico con este asunto y su pregunta fue ¿cómo se alojan en Blogger?

Obviamente, no estamos hablando de las imágenes de las entradas sino de las que usa la plantilla. Tampoco estoy diciendo que no debe usarse un servicio externo, sólo creo que es mejor tenerlas en Blogger porque a la larga, será más rápido y nos evitaremos colapsos indeseados.

Lo que debemos hacer para alojar imágenes que luego usaremos en la plantilla es aprovechar el editor de entradas, ya sea en un post existente o, mejor aún, en uno nuevo al que usaremos de borrador. Vamos a un ejemplo práctico.

Creo una entrada nueva y me ubico en Edición HTML ya que allí tendré que mirar para saber la dirección URL de la imagen. Click en el ícono y me aparecerán una serie de opciones.


Elige un diseño nos da cuatro posibilidades: poner la imagen centrada, flotando a la derecha, flotando a la izquierda o no darle formato. Vamos a elegir esta última aunque, en realidad, no importa.

Tamaño de la imagen tiene tres posibilidades: Pequeñas, Medio y Grandes ¿Qué significa esto? Lo mejor es verlo. Voy a subir la misma imagen cuyo tamaño original es de 600x200:

Tamaño Pequeñas:

Tamaño Medio:

Tamaño Grandes:

Me dará tres codigos similares pero diferentes donde elimino todo y me centro exclusivamente en lo único importante, la de la etiqueta IMG que contiene la URL:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://......./s1600-h/demoIMG.jpg"><img style="cursor: pointer; width: 200px; height: 60px;" src="http://......./sXXX/demoIMG.jpg" alt="" id="BLOGGER_PHOTO_ID_XXXXXXXXXXXXXX" border="0" /></a>
Si sólo me concentro en esa parte, tendré tres etiquetas "normales. Algo así:
<img src="http://......./s200/demoIMG.jpg" />
<img src="http://......./s320/demoIMG.jpg" />
<img src="http://......./s400/demoIMG.jpg" />
Ninguna de las tres se muestra tal como es la imagen original, la primera tiene 200 pixeles de ancho, la segunda 320 y la tercera 400. Aparentemente, han sido redimensionadas por Blogger pero, en realidad, eso no es del todo cierto, lo que está ocurriendo es que nos está mostrando tres miniaturas que se crean automáticamente al subirlas. No habrá diferencias si el ancho de la imagen no supera cierto valor pero si se trata de imágenes más grandes, no se mostrarán a menos que hagamos algo.

Si se fijan en esas etiquetas IMG, verán que son iguales con una excepción, hay un directorio que se muestra en el parámetro src que difiere:
src="http://......./s200/demoIMG.jpg"
src="http://......./s320/demoIMG.jpg"
src="http://......./s400/demoIMG.jpg"
Ese dato, es el que indica cuál es la miniatura a mostrar.

¿Y dónde está la imagen original? Por suerte, Google siempre usa el mismo criterio en todas esas cosas y las coloca en el mismo directorio pero con un nombre distinto, el s000 así que si la cambiáramos por:
src="http://......./s000/demoIMG.jpg"
veríamos esto:

Tamaño Original:

Da lo mismo usar s000 que s00 o bien s0:
src="http://......./s00/demoIMG.jpg"
src="http://......./s0/demoIMG.jpg"
Funcionará siempre que estemos en blogspot porque hay una restricción para quienes tienen dominios propios ya que nuestras imágenes son alojadas en Picasa y este, impide el hotlinking.

No son las únicas miniaturas disponibles, hay más:

s48, s64, s144, s150, s512, s640 e incluso, hay una que algunos utilizan para mostrar las imágenes en su tamaño real:
src="http://......./s1600/demoIMG.jpg"
pero esta en particular suele no funcionar en la plantilla.

En resumen, una vez que subimos la imagen y copiamos la URL que se encuentra el el atributo src, le cambiamos ese directorio, sea cual sea por s000 y ya tenemos la imagen disponible. Ahora, podemos hacer dos cosas, borramos el post y al hacerlo, le decimos que no borre la imagen, o lo guardamos como borrador para utilizarlo en cualquier otro momento.

47 comentarios:

Jorge R.  

Estimado señor JMiur:

Desde hace tiempo quiero hacerle una pregunta sobre las imágenes alojadas en blogger. Resulta que a la hora de usar lightwindow con las imágenes alojadas en blogger no me funciona. Lo que hago es usar una miniatura para mostrar la imagen, por ejemplo http://......./s400/demoIMG.jpg, y el enlace es http://......./s000/demoIMG.jpg. Pero no se que hago mal que no se abre con lightwindow. Lo que hago aveces es alojar la imagen en Photobucket y poner el enlace de Photobucket y así si funciona. ¿Alguna sugerencia?

Espero explicarme.

Muchas gracias.

Responder
MALINA  

Jmiur yo la alojo en Bloger pero a través de Picasa. Además para las entradas yo uso Windows Live Writter y por defecto las sube Picasa.

He tenido toda clase de malas experiencias con las imáginas, y la verdad que queda muy feo un blog cuando salen las tipicas imágene de exceso banda ancha o el banner de image no found.

Sin embargo a mi me queda una duda: Tiene capacidad de 1GB, y yo lleo la mitad gastado en el año y medio que llevo con mis blogs, que pasará cuando la llene del todo? conoces algún caso?

Responder
JMiur  

Jorge: Es el mismo estilo que uso yo ¿Podrías poner un ejemplo y decirme donde puedo verlo? Tal vez así pueda descubir el problema.

Malina: Subir las imágenes a Picasa o a Blogger es más o menos lo mismo, en ese sentido, sólo es un tema de comodidad ¿Qué pasará cuando llegues a usar toda la capacidad? Nada, simplemente abre otra cuenta con otro mail. Puedes tener todas las que quieras sin inconvenientes.

Hasta ahora, son los únicos servicios donde no he tenido problemas de ancho de banda porque ese cartelito que aparece es de terror :D

Responder
Jorge R.  

Algunas veces me funciona o algunas no. Aquí: http://www.iramucogto.com/2009/04/tunombreiramucogtocom-especial-para.html tengo una imagen como le digo, y algunas veces si se abre con lightwindow y algunas veces no. Hoy estaba en una computadora que no es la mía, revise el blog y di click en la imagen y nada, y algunas personas también me han dicho lo mismo. Por eso aveces pongo un enlace de photobucket u otro servio externo, y así si funciona.

Responder
Bonzu Pipinpadaloxicopolis III  

Lo que podría hacer Jorge es entrar directamente a Picassa y copiar la url en sus albumes.

Creo que Picassa conviene para organizarse.

Responder
Anahí  

Ahhhh, esa es la gran diferencia con picasa, no se pueden redimensionar ;)

Responder
JMiur  

Jorge: Creo entender el problema. Ese método, sólo sirve si usas un dominio de blogspot, cuando usas un dominio propio, suele haber inconvenientes ya que Picasa no permite el hotlink de las imágenes salvo dentro del dominio de blogspot de Blogger. Tengo entendido que el valor máximo admitido es de 800. Yo probaría cambiando s000 por s800

Responder
Jorge R.  

Bonzu Pipinpadaloxicopolis III: voy a entrar a Picasa y experimentar un poco, no había pensando en eso, bueno no sabia que las fotos alojadas en blogger se quedaban en picasa.

Gracias.

Responder
TwitterBoy  

Hola JMiur en esta ocasión, y viendo lo que está pasando con nuestro "querido" Blogger, me gustaría invitarte a ti y a todos tus lectores a sumarse a una campaña para pedir alojamiento a Blogger mediante Twitter.
Esta es la entrada: Blogger...nos vas a oir

Espero tu opinión y tu apoyo!!
Saludos,
@TwittBoy

Responder
Jorge R.  

Ya veo señor JMiur, muchas gracias por el dato, no sabia que picasa/google no permitía el hotlink en dominios propios. Voy a cambiarlo a 800 y ver que pasa.

Saludos.

Responder
Ivan Benito  

Gracias por el apunte. Lo desconocía. A veces me he vuelto loco para acertar con el tamaña original

Responder
ZonZo  

Lo primero, muchas gracias por el dato!!

Lo segundo: avisarte de lo que me ha ocurrido: he probado a cambiar el parámetro siguiendo tus indicaciones al pie de la letra. Hecho esto, me ha resultado imposible insertar más imágenes en las entradas (nuevas o anteriores). Estaba a punto de pedirte ayuda cuando he probado a reiniciar blogger y, gracias al dios del ciberdespacio, todo a vuelto a su ser.

Nada más, sólo quería comentarte el susto que me he llevado:O

Un saludo y gracias de nuevo!!:P

Responder
Graciela  

J siempre digo que no se nada, pero mis imágenes las tengo en blogger...viste que tengo varios blog de pruebas QUE SON DE TERROR!!!.
Muy buena tu explicación, porque creaba las imágenes dándoles los píxeles, sin errarle...porque no creo en pequeña, mediana, grande...si no me entiendes, te comprendo!!!...besitos!!!

Responder
La Blogueria  

Recomiendo Dragdropupload para subir (y sobre todo resubir) las imágenes a Blogger, proporciona comodidad al poder seleccionar y subir todos los archivos a la vez. Saludos!

Responder
FalconFix  

Saludos master, aún recuerdo cuando hace bastante tiempo ud. escribió un post acerca de esto (emocionante en aquellas épocas jeje), y particularmente el s1600 no me ha fallado hasta ahora, el s000 lo desconocía pero a probar se ha dicho.

El hotlinking (por lo del dominio propio) si lo vivi en carne propia jajaja recuerdo echarle la culpa todo un día a la empresa q me vendió el dominio(falta de experiencia pense q la culpa era suya jeje).

Master hablando de otra cosa, he alojado los archivos .CSS y Javascript pero como .TXT en Google Sites y veo q no hay problema (bueno hasta el momento),pero sabe principalmente que me hace pensar que no habrá "muchos" problemas mas adelante,ps es el hecho q empresas, colegios y universidades del mundo estan utilizando Google Sites y al menos en las universidades donde tantos alumnos se encuentran en linea ps no saturan el ancho de banda, entonces porque habría de pasarnos eso a nosotros no ¿que dice master?

Responder
Birdelo  

Hace tiempo que llevo viendo esta posibilidad, por suerte los detalles, aunque tengo una duda.

¿por que a veces las imágenes del body no se ven si estan alojadas en Blogger? Ya me ha pasado varias veces, no sé porque!.

Responder
Alba  

JMiur muchas gracias por tus siempre acertadas entradas para quienes estamos en este fascinante mundo del blog,ésta me ha resultado por razones obvias :P muy muy interesante, una vez más ,gracias por ayudar a tantos , saluditos de una novata desde Venezuela :)

Responder
JMiur  

TwitterBpy: Recién me siento, lo vi muy por arriba. Desde ya tienes mi apoyo. Intentaré darlo de manera más explícita en estos días. Me parece buena idea.

Rarísimo, Zonzo. Menos mal que sólo fue un susto :D

Sí, Graciela, se entiende :D

Es una muy buena extensión Vane. La uso hace rato.

FalconFix: Eso del dominio me lo habían comentado pero nunca lo pude comprobar hasta intentar usar Picasa en otro sitio y encontrarme con problemas. Ahí traté de buscar explicaciones aunque no parece haber muchas.

Lo del ancho de banda disponible en google Sites es así. No sé si habrá un límite, hace días que quiero meterme ahí para poner als cosas como backup y averiguar un poco más. Yo, en lo personal, voy a seguir insistiendo en que hay que tratar que todo eso esté en la plantilla. Será más práctico y el blog funcionará más rápido.


Birdelo: dependerá de la URL que coloques, es fácil confundirse con eso. Revisa bieb ese directorio tipo sXXX. Muchos usan la URL que está en el enlace y esa no funcionará.

Alba: Me alegro que te sirviera.

Responder
Birdelo  

Ya entendí. El problema está en copiar ruta de la imagen, no sé porque pasa eso pero ya tiene solución.

Muchas gracias.

Responder
JMiur  

Exacto, siempre hay que usar la ruta que está en la etiqueta IMG.

Responder
Oloman  

Tal y como le ocurre a Falconfix, yo también uso el S1600 para mostrar imágenes a tamaño "original" y nunca he tenido el menor problema. De hecho, como tengo una plantilla de ancho variable, es el tamaño que más utilizo junto con un WIDTH:100% en porcentaje y un MAX-WIDTH para que no sobrepase del tamaño original.

Los distintos tamaños que genera son para mí el gran misterio, porque cada vez genera unos distintos. Seguramente sea alguna proporción con respecto a los originales.

Por cierto, es la primera vez que no me funciona el formulario de comentarios en tu página, aunque puede ser porque he intentado hacer una Vista Previa de esas que también te gustan tanto.

He tenido que recurrir a la ventana modal. Saludos.

Responder
JMiur  

Oloman:
Pués en Blogger hay una regla "si funciona, déjalo" :D Es raro ese nombre de s1600 ¿será el ancho máximo admitido? Como bien dices, el criterio de los tamaños es un misterio.

¿Vista Previa? Ahhhhhhhh ese botoncito de abajo. Lindo. Todo gris, letras negras, muy decorativo :D

Responder
Oloman  

:D

Responder
Víctor  

Condenado Jmiur, eres un maldito genio, no cabe duda de ello, magnífico, al fin dejaré de depender por completo de los infelices de guindous y su mocosoft, :D :D :D

Responder
Roudy  

Jmiur, te he citado al final de esta entrada Gif animadoEs una prueba que hice y funcionó, aunque sinceramente no se si resulte siempre. Con Blogger nunca se sabe.

Responder
JMiur  

Roudy:
Como bien dices, no se si funcionará siempre, por las pruebas que hice, todo parece bastante aleatorio, recuerdo una entrada donde subí gifs animados a Blogger directamente y sin motivo aparente, algunos funcionaban y otros no.
De todas maneras, el procedimiento que explicas es correcto y vale la pena leerlo porque es el más seguro.

Responder
Esteban  

Hola!!
Hasta el momento no tengo la menor idea de como usar Picasa para subir fotos, no veo de donde sacar el link.. Por el momento estoy usando Photobucket e ImageShack, pero no tengo idea cual sería mejor. Lo anterior es para las imágenes de los posts, para los de la plantilla uso Fileden...

Que opinan, cual sería el mejor servicio??

Responder
JMiur  

Todos esos funcionan bien. Ahí ya es sólo cuestión de gustos. Uso los cuatro :D

Responder
adrix  

hola mi pregunta es la siguiente:

tengo imagenes alojadas en picasa, y quiero hacer un post que linkee auna de mis imagenes, es decir que se vea la imagen en el post y al hacer click en ella se vea la foto en pantalla completa.

Sin embargo el link que me sale en el album de picasa solo me permite que salga la imagen el el post muy pequeña, y si hago clik en la foto, me sale un poco mas grande, pero dentro de la pagina de picasa, y no la imagen sola.
no se si me exlico bien.

Responder
JMiur  

Si, creo entenderlo. Picasa impide que se vean las imágenes en tamaño real aunque en Blogger esa restricción no existe ¿Cuál es la dirección de la imagen que usas?

Responder
adrix  

he probado con las 2 opciones que me ofrece el album picasa, en la parte que dice a la derecha "enlazar esta foto"

Mi idea es subir muchas imagenes a picasa, y luego enlazar las que quiero en los post. (y que se vean como si las hubiera subido por blogger: es decir, que se vea la imagen, y haciendo clik que se vea esta-la foto- en pantalla completa)

Pero evidentemente eso no se puede segun comentas, habra que subirlas por blogger

Muchas gracias, me has respondido a mi pregunta.

Responder
JMiur  

Se puede adrix, lo que ocurre es que la URL de las imágenes no están a la vista. Para los posts con Wallpapers uso albums de Picasa y tiene sus ventajas porque se crean miniaturas de diferente tamaño de manera automática aunque, en realidad, hacerlo en Blogger es lo mismo ya que si subes algo a Blogger se aloja en Picasa y las miniaturas también se crean de manera automática.

Responder
adrix  

gracias jmiur , si tienes razon, al subirlo a bogger se aloja automaticamente en picasa.

Lo que sucede es que yo he complicado un poco las cosas por lo siguiente:

Tengo una un blog alojado en una cuenta de blogger en el que quiero que aparezca la foto. Pero al album de fotos de picasa lo quiero crear en una cuenta distinta y común -que sea publica- con unos amigos, donde somos varios los que vamos subiendo fotos, (distinta a la mia de blog donde quiero que aparezcan las fotos)

Resumiendo: blog con una cuenta, album picasa con otra.

HAAAAAAAAAAA!!!!!

mientras te escribía ya encontre la solucion, ya vi donde estaba el link oculto a la foto directamente del que hablas.
Luego hay que cambiarle el S... por S000 como exlicas más arriba.

Gracias jmiur eres un capo.

Responder
JMiur  

Claro, con ese criterio es lógico. Lo mismo hago yo :D

Menos mal que has encontrado ese enlace oculto, es exacto así como has hecho, hay que cambiarlo por s000 o por sXXX para mostrar el original o cualquier otro tamaño. Cuando se encuentra ese enlace, Picasa es muy pero muy útil.

Responder
MaRiLu  

Perdona; es click.

Responder
Guía Para Tejer Bien  

Hola, he probado esto que comentas en la entrada y al parecer funciona, etse mes puse las imagenes en un hosting pago pero la idea es poder dejarlo, encontrar una manera de alojar las benditas imagenes de la plantilla. con el hosting pago voy usando este mes 8BG de transferencia mensual, Existirá límite de ancho de banda con este truco? al parecer no, porque las imágenes de las entradas no se dejan de ver, que opinas?

Responder
JMiur  

Si las imágenes está alojadas en Blogger no hay ancho de banda máximo así que en principio, lo mejor, es alojar las imágenes de la plantilla en el mismo Blogger. La única restricción es para dominios propios, ahí hay un límite en el tamaño máximo a ser mostrado pero en dominios blogspot no hay ninguna.

Responder
NeoAkira  

yo subo las imagenes en blogger bueno ahi las cargo..n_n !! o en mi blog de respaldo..n_n "! asi las mantengo en blogger..n_n y solo copio el url.. aunk se ke es mucho trabajo al final estoy seguro ke ahi estan.. tambien las de la plantilla .. bueno en mi plantilla actual no la hehecho. mas bien solo ke tenga tiempo lo hare..n_n

Responder
Aleho Limón  

genial post!!!! me ha servido de gran ayuda! muchas gracias :DDDD

Responder
AleMauri  

Hola JMiur, donde conviene alojar las imagenes para las entradas?
segun tu experiencia, que me puedes recomendar? gracias ... saludos !

Responder
JMiur  

AleMauri:
En Blogger mismo, sin la menor duda. Hay espacio más que suficiente y es la forma más segura. No tendrás problemas de anchos de banda.
Tiene la ventaja de que se generan miniaturas de modo automático.

Responder
Luis  

Oye Jmiur esque mira yo aloje la imagen en blogger pero diferente solo subi la imagen en la entrada y en edicion html copie su link mas o menos asi: http://2.bp.blogspot.com/........./s320/descargarps2.png y esa imagen la puse en todos los post que habia creado copiando su url pero un dia entro y la imagen habia expirado me aparecia este error "Not Found" y pff en todas las entradas habia expirado porque habia copiado el link en todas las entradas y ahora tengo que modificar todas las entradas para resubir la imagen pero pensaba alojarla en "tinypic" pero me di cuenta y entre a picasa y vi mis fotos de mi blog ahy y mi pregunta es si subo una imagen a picasa y copio el link de la imagen mas o menos asi: http://lh6.ggpht.com/...../s512/53753_medal-of-honor---rising-sun-ps2.jpeg y esa url la pego en la entrada pata poner la imagen ahi EXPIRARA LA IMAGEN? O ES LO MISMO SI LO SUBIERA EN BLOGGER? esque tengo miedo de subir la imagen y ps ponerla en cada entrada y que expira la imagen y tener que editar todos los post =(

Me Confundo con la url mira si la subo a blogger por medio de la entrada me aparece este link de imagen:

http://2.bp.blogspot.com/........./s320/descargarps2.png

y si la alojo en picasa y copio su url me aparece asi:

http://lh6.ggpht.com/...../s512/53753_medal-of-honor---rising-sun-ps2.jpeg

se pueden poner esa url de picasa en blogger? o tendre que subirla a tinipyc que me dicen que es muy buen hosting =) si la subo a picasa y copio su url sera esa? y ya la pego en cada entrada, porque ya van varias veces que imagenes alojadas en blogger por medio de la entrada expiran :SSS

Responder
JMiur  

Yo jamás he visto tal cosa como que una imagen subida a Blogger expire y tengo miles subidas en estos años. Blogger aloja las imágenes en Picasa y da lo mismo usar uno u otro. La URL será la que muestra Blogger o la que muestra Picasa. Desde Blogger Draft puedes incluso navegar los albums de Picasa y seleccionar las imágenes directamente.

En cuanto a las imágenes desaparecidas, puedes acceder a Picasa con la cuenta de tu blog y fijarte si allí están porque puede ser que simplemente, la URL sea errónea ya que, insisto, las imágenes no expiran así que el problema debe ser de otro tipo.

Responder
Luis  

si jmiur muchas grasias por tu buena explicacion =) si me he di cuenta que mi error fue que como copiaba la misma imagen en todas las entradas y era la misma url y me acuerdo que habia creado una entrada y no me gusto y la suprimi y elimine todas las imagenes de esa entrada y entre las imagenes venia la misma de todos los post y ese fue mi error elimine la imagen y por eso expiro xd =)

muchas graxx jmiur siempre sacandome de dudas thx forever =)

Responder
JMiur  

Eso explica el problema; ya me estaba preocupando :D

Responder
ArtenadasCultura  

Hola! Antes que nada, muchas gracias por compartir tus conocimientos! Estoy muy agradecido.
Por otro lado, tengo una pregunta:
¿Existe alguna manera de copiar rápidamente un post de Reuters transfiriendo las imágenes subidas en su servidor al servidor de Blogger? (En Wordpress es posible hacerlo mediante un scrip o algo así http://forobeta.com/wordpress/44723-copiar-imagenes-externas-a-nuestro-hosting-solucion-imageshack.html)
Por favor, agradecería que me des una ayudita
Saludos!

JMiur  

No creo que sea posible; el sistema es completamtne distinto; una cosa es descargarlas a tu PC o a un hosting propio y otra muy distinta subirlas a un servidor externo como Picasa que es lo que usa Blogger.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR