Otros servicios son buenos, pero relativamente. No es la primera vez que alguna imagen, sobre todo en Photobucket, me ha desaparecido sin ninguna razón aparente. Otros servicios como Flickr o Imageshak parecen más estables, pero quién nos dice que en el futuro lo seguirán siendo. Con Picasa tampoco tenemos ninguna garantía, pero mi reflexión siempre ha sido la siguiente: Si Picasa se va a hacer puñetas, es porque Blogger y el resto de servicios Google también tienen problemas. En ese caso, que pierda las imágenes, será la menor de mis preocupaciones.
Pero en fin, si este puede ser un motivo algo peregrino, lo que sí es un dato y no una opinión, es que Blogger tiene una ventajilla sobre el resto en cuanto a la redimensión de las imágenes.
Sabeis -y si no para eso estamos- que para cambiar el tamaño de una imagen sin necesidad de editarla, es suficiente con añadir un WIDTH al estilo. El alto se recalculará automáticamente y la imagen se hará más pequeña o más grande en la misma proporción en que cambiamos el ancho original. Esta imagen, tiene por ejemplo 300px de ancho y es la que tengo alojada en Picasa.
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdWfd9hxKm9MAPRxN0uGesq3pbC9sdnZwFiDD0IareNsu5EtJY6EHqihZJIBgtRj2zdCkHo3lTgNTynaljP84x8vzUXAgvi4li9GiHYdn3m53H0us7yy7tsEndSsOogkVg-yxwEGXC-bU/s1600/pez1.jpg" />
Por lo que hemos dicho, en general, para redimensionar una imagen es suficiente con añadir un WIDTH:
<img width="100px" border="0" src="URL_IMAGEN_ORIGINAL" />
<img style="width:100px;" border="0" src="URL_IMAGEN_ORIGINAL" />
<img style="width:100px;" border="0" src="URL_IMAGEN_ORIGINAL" />
Cualquiera de las dos formas anteriores serviría para reducir la imagen a 100px de ancho sin tener que editarla.
No conviene hacer esto para agrandar la imagen, porque se apreciaría la falta de definición (reproduzco sólo una porción por no tener tanto ancho en el blog).
<img width="1000px" border="0" src="URL_IMAGEN_ORIGINAL" />
Pero seguimos con Blogger. Las direcciones de las imágenes allí alojadas, incluyen un subdirectorio que incluyen una s y un número. En el ejemplo anterior, en la etiqueta SRC podeis ver como la dirección de la imagen termina en .../s1600/pex1.jpg. Como vimos hace tiempo, s1600 hace referencia a la imagen del tamaño original y cambiando ese número, obtenemos otras versiones de menor tamaño: s800, s400, s320, s200...
Esto por sí mismo ya es una ventaja, pero es que gracias a Vagabundia y a un posterior comentario de José GDF en nuestra página de Facebook, sin el cual me hubiera pasado esto desapercibido, hace unos días descubrimos que actualmente se puede usar cualquier tamaño. Es decir, podemos usar por ejemplo un s180 sin ningún problema.
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdWfd9hxKm9MAPRxN0uGesq3pbC9sdnZwFiDD0IareNsu5EtJY6EHqihZJIBgtRj2zdCkHo3lTgNTynaljP84x8vzUXAgvi4li9GiHYdn3m53H0us7yy7tsEndSsOogkVg-yxwEGXC-bU/s180/pez1.jpg" />
¿Y para qué esto si podemos usar el WIDTH que antes explicábamos para reducir las imágenes? Pues muy sencillo.
- En primer lugar simplificamos la manera de hacer una redimensión, pues sólo hay que cambiar los dígitos del subdirectorio sin necesidad de añadir código extra.
- Y en segundo pero no menos importante, para reducir el peso de la imagen en el total de la página.
Sólo teneis que ver las propiedades de las dos primeras imágenes para comprobar que, independientemente de su tamaño aparente, ambas ocupan 20.528bytes. Sin embargo la última, que realmente se trata de una miniatura en origen, ocupa sólo 8.994 bytes. Y esto a pesar de ser más grande que la segunda que tiene un tamaño aparente menor (100px vs 180px) .
¿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.
Y muchos más artículos interesantes si nos sigues en...
Gracias Oloman.
ResponderEliminarYo al principio subia al blog las fotos mias originales, muy grandes,supongo que habre cargado la capacidad de el servidor ¿mio?. Yo que se, como va esto.
Saludos
oh.. este dato es genial.. muchas gracias.
ResponderEliminarya que se habla de esto os paso un truco que uso y que tal vez conozcan.
Las miniaturas de nuestra última entrada en otros blogs muestran la primera imagen que encuentran en la entrada, si está alojada en blogger.
Para manipular a mi antojo la miniatura que se verá en otros blog lo que hago es incluir antes de la imagen principal una mas pequeña de 72x72 a la que luego le pongo width 1px y height 1px para que solo se vea un puntito.
entonces esa imagen puede ser un png semitransparente o muchas variantes que luego resultan más vistosas entre las otras miniaturas ;)
Saludos
Es complicado llenarlo todo Gildo, pero todo es posible si eran de varios megas cada una. En cualquier caso, en una pantalla de ordenador, por lo general, no cabe una imagen original tomada con una cámara fotográfica. Así que mejor reducirla antes de subirla.
ResponderEliminarLuis, me ha gustado la idea. También serviría para los sumarios automáticos, ya que también coge la primera imagen y esa no es siempre la que nos conviene. A ver si tengo un rato y experimento con ello. Gracias.
Wow, en verdad no lo sabía. Todas las imágenes de mi blog son de Photobucket y algunas ya han desaparecido. Por cierto, Oloman, ¿no sabes de alguna página que tenga plantillas predeterminadas para Blogger?
ResponderEliminarHola Oloblogger soy nuevo en tu blog, me gustaria que me explicases como cambiar por completo el diseño de mis comentarios: fondo, bordes e imagenes en las nuevas plantillas. He estado en Ciudad Blogger y el Escaparate pero no han sabido o no he entedido la solución. Me harias un gran favor.
ResponderEliminarhttp://cdvillanuevadelarzobispo-javier.blogspot.com/
Hola, Oloman. Muy ilustrativa esta entrada.
ResponderEliminarSólo quería decirle a Gildo que yo siempre subo las fotos tal como las tengo guardadas para mí, lo hago así por comodidad aunque tarden más en subir, pero luego Blogger las redimensiona a 1600 y de ahí para abajo en diferentes subdirectios, como has explicado muy bien. Así que la foto original queda a 1600, no creo que se queden con la original que he subido, pero además Blogger le baja el peso porque si yo redimensiono a 1600 me sale un archivo más grande que si guardo en disco la imagen de 1600 del blog. En datos, puedo decirte que las fotos originales de mi blog de fotos me ocupan unos 3 gigas en mi disco mientras que en blogger sólo tengo ocupado un 17% de esa giga que entiendo que es el tope máximo permitido por usuario. Un saludo.
P.D.: Eso de poder poner /s180 o el número que uno quiera debe ser nuevo porque antes sólo se aceptaban unos números determinados dentro de la url.
Sinceramente, aún no entiendo como algunos/as bloggers siguen buscando alojamiento de imágenes fuera, cuando en casa tienen uno muy bueno.
ResponderEliminar¿De verdad no te habías dado cuenta de lo de los tamaños :D?
Un saludo y gracias, una vez más, por tu mención.
Annais, sólo tienes que poner "plantillas blogger" o "blogger templates" en tu buscador, para encontrar centenares de ellas. El problema no va a ser encontrar una, sino seleccionar entre tantas.
ResponderEliminarSi lo que quieres es destacar sólo los tuyos, prueba con este post Javier. Si lo que quieres es cambiar el aspecto de TODOS los comentarios, entonces tendrás que trabajar con las clases de tu plantilla que lleven la palabra "comment". Aunque no te garantizo nada, ya que no sé si los códigos que se dan como referencia aparecen en las plantillas del nuevo diseñador. Es que yo le tengo un poco de manía.
Miguel Emele, gracias por la aportación. La verdad es que lo que dices es lo más lógico. Si el tamaño máximo es el 1600, Blogger probablemente no guarde versiones mayores.
José GDF debe ser que le tienen una inmensa manía a Google y por eso lo evitan a toda costa. Y sobre lo de los tamaños la respuesta es NO. NO me había dado cuenta de que se pudiera usar cualquier tamaño. Pensaba que seguíamos con los intervalos antiguos. Gracias ;)
A mí nunca se me ocurrió utilizar un alojamiento de imágenes que no fuera blogger para mis entradas, y hace un tiempo, siguiendo un consejo de una página del estilo de Oloblogger, incluso subí a blogger las imágenes de mi plantilla, para hacer más rápida la carga y noté resultados positivos. Como dijo José, para que ir a otro lado, si lo tenemos en casa, ¿no?
ResponderEliminarSaludos!!
Ana Laura, eso es lo lógico, pero se necesita que la casa tenga una buena estructura y esté bien amueblada. En algunos casos, Blogger todavía deja un poco que desear. Le faltan habitaciones ;)
ResponderEliminarHola Oloman,
ResponderEliminar¿Cuál crees que debe ser el tamaño adecuado de las imágenes para blogger?
fina
Yo creo que el tamaño adecuado lo rige ni más ni menos que el ancho de tu columna de las entradas. Otra cosa es que quieres que se vea grande al pinchar en ellas, entonces el tamaño de vista en página (el s400 por ejemplo) será el adecuado al ancho del post y la imagen grande la que quieras.
ResponderEliminarAtendiendo al detalle de que el número detrás de s400 es la dimensión máxima, no el ancho. Si la imagen es apaisada, coincide con el ancho, si es vertical, es el alto.
A ver si está de acuerdo Oloman conmigo.
Un saludo.
No entiendo la pregunta Fina. Como dice José GDF, en un principio el mejor tamaño para la imagen que quieres mostrar, sería el que coincida con el ancho del blog, siempre que la imagen sea relevante para la estética de la entrada. A veces sólo es un detallito que queremos poner a derecha o a izquierda y en ese caso, para que quede rodeada por el texto, pues evidentemente debería ser menor.
ResponderEliminarSin embargo, puede que te refieras al tamaño de la imagen original, no al de la redimensionada. En ese caso, si usas en cada ocasión la que se ajuste a tu blog (en el ejemplo de José la s400), es indiferente que la original mida por ejemplo 1000px, ya que no se va a cargar esa sino la redimensionada y no va a ralentizar en la carga de la página.
Esto de la velocidad de carga sería el único incoveniente para no usar imágenes muy grandes, pero como decía, si se usa este truquillo de los subdirectorios 's', no nos afectará.
Distinto es que uses un WIDTH con una imagen grande para hacerla más pequeña, porque entonces sí que cargarás la imagen más pesada.
Bueno, yo me refería a la imagen que insertas en las entradas, quería decir el tamaño, digamos que no sea muy excesivo para luego cargar la página.
ResponderEliminarEn ese caso, creo que la mejor es la que menos ocupa. Es decir, si vas a mostrar una imagen de 200px de ancho, usa la s200. Es la que tendrá menos Kb, en la mejor resolución posible.
ResponderEliminarWow, que de información útil en este blog. Lo dejo en mis favoritos. Con lo pez que ando en el tema, me va a venir de maravilla...!
ResponderEliminarBuenas, Señor Oloman, quisiera preguntar/comentar algo que me extraña con respecto a blogger, con la intención de ver si usted puede brindarme la respuesta o su opinión con respecto a esto.
ResponderEliminarDesde siempre cada vez que subo una imagen a mi blog, por medio del editor de entradas, la imagen raras veces queda del tamaño que yo la quiero, siempre más pequeña, y cuando la quiero modificar siempre queda de una forma como borrosa o pixeleada, ahun si el tamaño al que la modifique en el html es al del tamaño original de la imagen.
¿Por que pasa eso?
Ahora, me puse a investigar un poco y descubrí que las imágenes que se guardan a través del blog se guardan en una cuenta de picasa, pero las imágenes que utiliza el blog no son en realidad las que están guardadas en picasa.
Y es aqui en donde estoy confundido.
¿Por que Blogger almacena la imagen en picasa Y tambien la almacena en otro servidor Y en lugar de darme un codigo bultoso como:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/-DLv9ApQ8UNI/TZKb4TVk7II/AAAAAAAAA5g/P2bgRj1sqwQ/s1600/Entradas%2Bpopulares.bmp"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 520px; height: 85px;" src="http://2.bp.blogspot.com/-DLv9ApQ8UNI/TZKb4TVk7II/AAAAAAAAA5g/P2bgRj1sqwQ/s400/Entradas%2Bpopulares.bmp" border="0" alt="Entradas populares" title="Entradas populares" id="BLOGGER_PHOTO_ID_5589701479085960322" /></a>
no ofrece un código más compacto y útil como este:
<a href="https://lh4.googleusercontent.com/_vYlDRvFVixI/TZKb4TVk7II/AAAAAAAAA5g/tdRWt_x0abg/Entradas%20populares.jpg"><img width="520" height="85" src="https://lh4.googleusercontent.com/_vYlDRvFVixI/TZKb4TVk7II/AAAAAAAAA5g/tdRWt_x0abg/Entradas%20populares.jpg" /></a>
... osea, ¿Por que duplicar una imagen que ya tienen y usar este duplicado inferior?
Buena pregunta Carlos Hugo... ¡no tengo ni idea! Son de esas cosas raras que hace Blogger y que supongo que tendrán sentido para sus sistemas de gestión de contenidos, pero no para nosotros los usuarios.
ResponderEliminarDe todas formas, con el nuevo editor (no he comprobado si con el antiguo sigue siendo como tú dices) ya no sale ese tipo de código, sino uno más parecido al segundo que tú propones. La excepción es cuando insertas un pie de imagen, porque en ese caso, se nos vuelve a complicar el código con la incorporación de tablas.
No obstante, este post intenta explicar que el farragoso sistema de Blogger también puede ser utilizado de forma ventajosa si se conoce el truco de cambiar el valor sel subdirectorio S (s400, s300, etc.) Visto esto, te darás cuenta que no hay duplicidad de imágenes, sino mucho más, ya que tienes disponibles las imágenes en todos los tamaños que puedas imaginar (s415, s60, s1554...)
Lo de que las imágenes te salgan mal usando el tamaño original, no me cuadra mucho. No hay razón para que sea así. Lo único que he observado es que subes las imágenes en formato .bmp y tengo que decirte que ese es el peor formato para usar en Internet. No creo que tenga que ver con lo de la calidad, pero lo que es seguro, es que es el que más ocupa y con mucha diferencia.
No obstante, creo que Blogger las transforma a .jpg automáticamente (seguramente por lo del espacio que ocupan), por lo que yo probaría a transformarlas antes de subirlas, no fuera que su conversión no fuera correcta del todo.
Estoy buscando pero no lo encuentro por ninguna parte.
ResponderEliminarComo se puede reducir el espacio entre los gadgets de la columna lateral. En mi caso son imágenes.
Si no se puede ya lo colocaría mediante código.
Gracias
http://fenixrugby.blogspot.com.
Hola. Tienes que buscar esto en tu plantilla y cambiar ese valor de 30px que representa el margen superior de cada una de las imágenes:
Eliminar.widget {
margin: 30px 0;
...
}
Si no lo encuentras, escribe directamente antes del cierre SKIN:
.widget {
margin: 10px 0;
}
Si lo que quieres es que esas imágenes en concreto NO lleven margen, pero que futuros gadgets si lo lleven, entonces no toques eso. Mejor directamente abres un solo gadget en el cual tienes que colocar las tres imágenes juntas ;)
Hola Oloman,
ResponderEliminarPor favor puedes ayudarme!!...
Tengo dos problemas con la forma de mostrar las entradas, y es que las imágenes se ponen siempre del tamaño de la entrada y no se como solucionarlo (leí tu ejemplo pero no me funciona=, además no se porque me aparece la imagen primero en la entrada y luego de darle Read more la pone donde yo la he colocado. Mi blog es: http://victoriasanjurjoprueba.blogspot.com
Gracias
Victoria, eso es por el tipo de plantilla que utilizas. No se ve nada ahora mismo porque sólo tienes una entrada y sin imagen, pero supongo que tienes un sistema de "sumarios" para portada y eso precisamente es lo que hace ese sistema: resúmenes de texto e imágenes para portada que en las entradas se ven "normales".
ResponderEliminarHola Oloman,
ResponderEliminarAhora he subido una imagen y verás como la agranda. Me gustaría darle yo el tamaño que quisiera y que además aparezca en el lugar donde la pongo. Siempre va al principio.
No me entero bién lo que me indicas como sistema de "sumarios". Por favor, puedes ayudarme?.
Gracias
A ver... Un sistema de sumarios es el que te genera para la página de portada un resumen de cada entrada, en el que sólo se muestra una imagen (o una parte de esta) y un breve fragmento del texto. Tu plantilla es precisamente para hacer eso ahí, así que si no lo quieres, lo mejor es que elijas otra plantilla, pues todo está modificado para que funcione así.
EliminarNo obstante mi opinión es que lo dejes si no te sabes manejar bien con los códigos y que para que todo salga mejor, hagas dos cosas:
1) Usar siempre como primera imagen de tus entradas una imagen apaisada (más ancha que alta), pues ahora mismo todas las que vi son al contrario
2) Añadir a tu plantilla, en la parte CSS esto
.post-image {
max-height: 300px;
overflow: hidden;
}
Con la primera cosa solucionas parte de tus problemas y con lo segundo arreglas un poco lo de usar imágenes alargadas.