JMiur [E]

Cuando subimos una imagen a Blogger, el proceso es sencillo pero a veces, desconcertante, sobre todo si queremos hacer alguna clase de modificación en la imagen o se nos ocurre intentar algo distinto de las cosas que ya están predefinidas. De todas las cosas extrañas, el tamaño de la imagen subida es la que más confusión crea ya que sólo hay tres alternativas:

Tamaño de la imagen:
Pequeñas
Medio
Grandes

¿Que significan esas opciones? Así, en abstracto, parecerían no significar nada porque algo es grande o chico si tenemos otra cosa con que compararlo y aquí, no hay nada. Tampoco significa que si la imagen es "grande" debamos usar esa opción y si es "pequeña" la otra; en realidad, mientras la imagen no pese mas de 8MB, da lo mismo si elegimos una opción u otra, la imagen original se guardará tal y como es, aunque no nos demos cuenta.

Al subir una imagen, Blogger crea una serie de miniaturas de manera automática y son esas las que normalmente usamos; al definir Pequeñas/Medio/Grandes estamos decidiendo cuál de esas miniaturas vamos a usar y eso es lo que nos muestra el código HTML.

Supongamos que yo tengo una imagen que mide 617x423 pixeles, la subo a y elijo Medio y Centrar; el código generado dirá algo así:
<a href="http:// ....... /s1600-h/miImagen.jpg"> 
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 219px;" src="http:// ....... /s320/miImagen.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_XXXXXXXXXX" />
</a>
Lo primero que tenemos que saber es que lo único que nos interesa es la etiqueta IMG, el enlace no importa. Allí, en esa etiqueta hay dos datos claves en el parámetro style:

width: 320px; height: 219px;

es decir, la imagen, se mostrará de ese tamaño, de 320x219, no es la imagen subida, es una miniatura; usando Grande, pasaría algo similar, sólo cambiarían los valores, el valor de width diría 400px y si usara la opción Pequeña diría 200px.

Ah, bueno, entonces, para ver la imagen real deberé cambiar ese valor y poner width:617px ... no; eso no funcionará, veremos la imagen de ese tamaño pero no será la original, seguirá siendo la misma pero redimensionada y por lo tanto, se verá mal (pixelada): Ver/Ocultar un ejemplo [+]

El problema es que sin importar la parte de style, la URL de la imagen es la miniatura y eso está indicado por el directorio donde está guardada; es lo que vemos justo antes del nombre:

htp://......./s320/miImagen.jpg"

Ese dato define la miniatura a usar:

dirá s200 si elegimos Pequeña
dirá s320 si elegimos Medio
dirá s400 si elegimos Grande

Sólo cambiar ese dato tampoco servirá de nada porque style seguirá influyendo, veremos las distintas miniaturas, todas redimensionadas así que tendrán el mismo tamaño. Ver/Ocultar el ejemplo [+]



Si cambiamos la miniatura también debemos cambiar las propiedades width y height o eliminarlas. Ver/Ocultar el ejemplo [+]

Es importante entender que lo que hace Blogger es limitar el tamaño pero no necesariamente el ancho, eso depende de la imagen, si es apaisada (más ancha que alta) el tamaño máximo lo define width pero si no lo es (es más alta que ancha), el máximo lo define height. Por ejemplo, al insertar una imagen de 533x800 se generará este código:
<img 
style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 213px; height: 320px;"
src="http:// ....... /s320/miImagen.jpg"
border="0"
alt=""id="BLOGGER_PHOTO_ID_XXXXXXXXXX" />
Las miniaturas generadas por las opciones por defecto tendrán un tamaño máximo en alguno de sus sentidos (ancho o alto) pero ¿dónde está la imagen original? ¿podemos usarla? Si nuestro blog está en un dominio de blogspot.com, podemos usarla con facilidad, si está en un dominio propio, no porque hay restricciones que limitan su uso.

Como el resto de las miniaturas, la imagen original se encuentra en un directorio especial o mejor dicho, en varios: s00, s000 o s1600. Todos ellos contienen la imagen real, la que nosotros hemos subido y pueden usarse con el mismo criterio anterior, eliminando width y height del style y cambiando el directorio:

http:// ....... /s00/miImagen.jpg

Esta es la imagen original de 617x423 y esta otra la de 533x800.

El hecho que Blogger cree esas miniaturas es útil ya que con una sola imagen, tenemos cuatro variantes a nuestra disposición ¿No habrá más? Pués la verdad si y ahí las cosas se vuelven interesantes.

Subo otra imagen, esta vez de 596x596. No importa el método porque lo único que voy a usar es la URL de la etiqueta IMG así que ya dispongo de cuatro:

http: ....... /s00/demoIMGs_01.jpg la original de 596x596
http: ....... /s200/demoIMGs_01.jpg una miniatura de 200x200
http: ....... /s320/demoIMGs_01.jpg una miniatura de 320x300
http: ....... /s400/demoIMGs_01.jpg una miniatura de 400x400

Pero si juego un poco y pruebo otros directorios, me encuentro con que todos estos también funcionan y para verlos, uso una imagen mayor, la de 533x800:

s220 mostrará la imagen como miniatura de 220x220
s640 mostrará la imagen como miniatura de 426x640
s720 mostrará la imagen como miniatura de 480x720
s800 mostrará la imagen como miniatura de 533x800 que es la original

Pero también es interesante que nos muestra miniaturas mucho más chicas lo que es útil para generar galerías:

s32 son miniaturas de 32 pixeles
s48 son miniaturas de 48 pixeles
s64 son miniaturas de 64 pixeles
s128 son miniaturas de 128 pixeles
s150 son miniaturas de 150 pixeles

Y Plethoras comenta que ha encontrado más así que seguimos ampliando la lista de posibilidades:

s72 | s94 | s104 | s110 | s144 | s160 | s288 | s512 | s576 | s912 | s1024 | s1152 | s1280 | s1440

s32s48s64s128s150s00
596x596
501x750
450x609
533x800
617x423

37 comentarios:

Jorge R.  

No sabia esto de los tamaños de la imágenes que subimos a blogger, y mucho menos que había miniaturas. Muy bueno saber esta información. Muchas gracias señor JMiur. Lo de las imágenes de mas de 800 no aplica en dominios propios verdad?

Responder
Alejandro  

No sabes lo bien que nos a caído esta entrada, estamos comenzando a usar miniaturas a manera de enlace en la sidebar para reflotar entradas antiguas, por lo que tomábamos la imagen de la entrada en cuestión, la llevábamos al paint shop pro para achicarla, guardarla nuevamente en el pc y de ahí vuelta a subirla a blogger.
Con esta clase magistral nos ahorraremos muchísimo trabajo, gracias Jmiur por el tiempo y la paciencia en enseñarnos a sobrevivir en este cada vez más complejo mundo blogger, un abrazo

Responder
Graciela  

bravo JMIUR utilizaba una herramienta para achicar los píxeles, para mi es imposible entender cómo funciona Blogger si no lo explican así :) besitos!!!

Responder
Plethoras  

Muchas gracias JMIUR por el aporte, desconocía esta característica.
Cuando lo leí me puse inmediatamente a investigar cuál era el total de miniaturas que crea blogger de nuestras imágenes. He probado con 2 imágenes distintas, la suya, de dimensiones 617x423 y una de 1600, y estos son los resultados.

Valores de miniaturas entre 0(con todos los ceros que queramos) y 1600 (La mayor de las dimensiones de la imagen subida)
32 / 48 / 64 / 72 / 94 / 104 / 110 / 128 / 144 / 150 / 160 / 200 / 220 / 288 / 320 / 400 / 512 / 576 / 640 / 720 / 800 / 912 / 1024 / 1152 / 1280 / 1440 /
(Recuerden que el límite lo impone la imagen subida. No van a encontrar imágenes más grandes a la que subieron) Espero que les sea de alguna ayuda.

Responder
Claudio  

Lo que no entiendo es ¿cómo hacen para dimensionar tanto tamaño y peso de las imágenes? :S
En vez de dejarnos subir otros archivos (*.css, *.js, *.txt, *.flv, etc) al servidor... ¡no comprendo!

A mi no me molesta dimensionar mis imágenes.

Responder
Shark_Bloody  

Jaja copado! Ojala YouTube hiciese lo mismo con sus miniaturas.

Responder
Loco 21  

No tenes idea de la alegria que tengo. Gracias!!! Ahora las fotos quedan mucho mejor que antes...

Te hago una pregunta, con un programa para hacer fotos, yo puedo poner cualquier foto de internet en el mismo y achicarla o agrandarla a mi gusto?? es decir, editarle los pixeles.

Saludos.

Responder
JMiur  

Jorge: Hasta donde sé, hay restricciones de uso para los dominios propios.

Alejandro, Graciela: sin duda es algo que puede ser útil para crear miniaturas con facilidad. Me gustó :)

Plethoras: Gracias por la lista. Muy buen aporte, voy a agregarlas al post :D

Claudio: la verdad, no sé si se guardan en todos esos tamaños o las crean onfly cuando las solicitamos, de todas maneras, es un desperdicio de esfuerzo así que adhiero a la queja y tampoco comprendo ;)

Shark_Bloody: Sería bueno :D

Loco 21: Eso lo puedes hacer pero no se modificará la original, deberás subirla otra vez, claro.

Responder
javfanel  

Jmiur ocupo to ayuda, en mi blog http://unimundiblogger.blogspot.com/ al dejar un comentario suo el ya anteriormente ex`licado ligthwindow http://vagabundia.blogspot.com/2008/03/lightwindow-en-los-comentarios.html pero para cerrar la ventana emergente me sale "close" yo quiero poner "cerrar" ya me meti a los archivos del script y no encuentro, que cambiar, ayuda...

Responder
Solidaridad  

JMIUR respondiste a mi consulta cuando dijiste que por medio de un DIV una imagen de fondo, puede verse completa su tamaño asi no allá contenido en la entrada...intente con algunos Div, pero no me funcionaron, me puedes indicar la forma y el DIV que tengo que colocar, para que la imagen de fondo se vea completa y permanezca en su lugar sin producir ningún movimiento de ella.

Responder
JMiur  

javfanel:Si mal no recuerdo, allí habia un ZIP con el script traducido. Para modificar eso, debes editarlo, por ejemplo, con el block de notas y buscar esa palabra. Creo que la línea dice algo así:

'<a id="lightwindow_title_bar_close_link">CLOSE</a>'+

debes cambiar a palabra CLOSE por la que quieras, guardar y subir el archivo otra vez.

Solidaridad:
Supongamos esta imagen:
http://4.bp.blogspot.com/_weww1siWWEE/SjJwXX0eF8I/AAAAAAAACoY/bX8Z1WzXZBQ/S1600-R/fc_69_fondos_paisajes_SGcY9.jpg
tiene 888x200

Así creo un div de 888x200 con esa imagen de fondo, sin contenido y lo centro:

<div style="width:888px;height:200px;margin:0 auto;
bachground: transparente url(http://......fc_69_fondos_paisajes_SGcY9.jpg" no-repeat left top;">
</div>

Responder
Vku  

realmente muy interesante, te felicito por el dato.
yo no subia las imagenes a blogger justamente por lo de los tamaños no originales utilizo ImageShack, pero y a pesar de tener cuenta hay veces que las imagenes no cargan (no se porque).
bueno muchas gracias por el dato.

Responder
Retro Icon  

JMiur
Gracias por direccionarme a esta entrada. Tengo muchas preguntas, pero no te voy a agoviar con todas ellas (quizas mas adelante si y poco a poco).
Ok, misteriosamente mis imagenes suben con este código "onblur =" comenzando el código. Seguido en el código sale esto: "parent.deselectBloggerImageGracefully", y muchas cosas mas que no entiendo.

Con esto, resulta ser que la imagen sube con una gama de color distinta. ¿Para que es esto? y ¿Cómo lo quito?.

Otra cosa,
Por lo que entiendo en esta entrada, en el código html de la imagen debo quitar el WIDTH y el HEIGHT, además de cambiar el "/s400/ (sopongamos) por el /s600/ que sería el tamaño real de la imagen. Cierto?

Gracias JMiur por tu auyda.

Responder
JMiur  

Retro Icon:
Lo de los colores no podría contestarte, eso escapa a mis conocimientos.

La imagen en si misma es todo lo que está entre <img ......... y el cierre /> El resto, es un enlace que puede usarse o eliminarse. También es posible tomar sólo el contenido del atributo SRC que es la URL de la imagen y usar eso solamente.

Tal como dice, cambiando s400 por s600 se verá la imagen mas grande pero no la real, si la real tuviera 800 de ancho se mostrará de 600. La real, sea cual sea el tamaño es s000

Todas las demás son miniaturas de alguna clase.

Siempre debes quitar width y height porque sino, las redimensará el navegador.

Responder
Retro Icon  

Ok Gracias JMiur, ya comprendí lo del s000 etc...pero lo del Onblur, no se, antes no me salía en el código de las imagenes...es muy raro esto.

Gracias!

Responder
JMiur  

Si, eso salía siempre; tal vez no lo habías notado antes pero, por ejemplo, en esta entrada del 2006 ya hablaba de eso mismo. Eso sí, no me preguntes por qué a Blogger se le ocurrió semejante etiqueta en lugar de poner algo más normal :D

Yo suelo eliminar todo eso usar sólo la URL en una etiqueta IMG normal.

Responder
Xoán  

Estoy aprendiendo muchísimo. Tus indicaciones son perfectas. Antes de saber ésto yo copiaba la URL del enlace para utilizarla en una etiqueta IMG normal, pero no me funcionaba, tenía que hacer un pequeño cambio:
<http://.../s1600-h/mi imagen.jpg>
<http://.../s1600/mi imagen.jpg>
Entonces recurría a Picasa (álbumes web) y allí encontraba una URL que podía utilizar, pero ésto debe de ser otro tema :D.

Responder
JMiur  

Copiar el enlace suele no funcionar, lo seguro es usar la URL de la etiqueta IMG. Picasa y Blogger tienen relación epro no está muy clara :)

Responder
Chopi  

GRACIAAAAAAAAAAAAAAAAAS !!! ME RE SIRVIO, FUISTE EL UNICO QUE PUEDO RESOLVER MI PROBLEMA, YA QUE ANTES HABIA ENTRADO A UNMONTON DE PAGINAS Y NO ME HABIAN DADO RESULTADO, MI BLOG ES: http://mecanica-mente.blogspot.com VISITALO SI QUIERES, UN SALUDO ENORME, Y GRACIAS DE NUEVO

Responder
Dña. Urraca  

Oye, ¿no te interesaría hacerte presidente de mi país?, yo te votaria, solucionas más problemas que él.

Responder
JMiur  

Respondo rápido ... NO :D Paso :D

Responder
Gem@  

Que buen trabajo el de esta entrada JMiur, me fijo ahora después de tanto tiempo en la forma que has presentado las miniaturas. Qué detallista!!

Responder
JMiur  

¿Cómo era eso de los métodos audiovisuales? :D

Responder
Gem@  

Si ya sé, es la vieja excusa de siempre pero eso no cambia nada una buena presentación ;)

Responder
JMiur  

:$

Responder
Ana  

Buena entrada!
yo el problema que tengo con mi blog, reciente porque antes no pasaba, es que al compartir la entrada en mi facebook por ejemplo, la miniatura que genera de la imágen se ve muy borrosa. Para más datos, subo mis imágenes en flickr y copio el código en cada entrada.
Sabes a qué puede deberse?
Un saludo!

Responder
JMiur  

No he notado que ocurra eso, Ana pero, puede ser que la imagen se deforme ál crearse la miniatura. En principio, por ejemplo, esta es la imagen que usaría Facebook al compartir una de tus entradas:

http://farm6.static.flickr.com/5099/5485978616_7e7933d964_t.jpg

Eso de _t del final indica la miniatura que será de unos 70 pixeles de ancho por 100 de alto aproximadamente.

Responder
Ana  

Pues no sé porque ocurre. En bloglovin lo mismo. Te adjunto link para que veas las miniaturas:

http://www.bloglovin.com/en/blog/1949888/lovefood

Gracias y un saludo,
Ana

Responder
JMiur  

Ya veo pero, el error no es de tu blog si no del sitio donde se muestra la imagen que en ese caso es www.bloglovin.com

Allí, en lugar de utilizar la imagen tal como se envia (70x100) la amplian de tal forma que la deforman, porque establecen que esas imágenes se muestren de 189 pixeles de ancho y por lo tanto, se ven mal, pixeladas, esfumadas. Las amplían de manera errónea.

Nada puedes hacer al respecto, salvo decirles que se ven mal y que modifiquen eso que les afea el sitio.

Responder
shinigami  

Hola JMiur, he estado buscando y no encuentro nada que me resuelva esta duda..

Cuando se crea una entrada en el blog y se pone una o más imagenes en ella, ¿cómo sabe el sistema que imagen va a tomar como imagen miniatura que represente a la entrada en gadgets o modificaciones como entradas populares, últimas entradas, entradas relacionadas, etc.?

Me explico, he visto que en alguna u otra entrada la imagen que aparece luego en las miniaturas de tus "post similares" puede ser cualquiera independientemente del tamaño, y la posición dentro de la entrada, estoy editando una plantilla y cuando posteo una entrada no le asigna la primera imagen que le coloco, como miniatura que la represente.

Has escrito algo sobre eso? espero haberme explicado bien xD

Responder
JMiur  

En principio, la imagen que toma es la primera que se encuentra en la entrada.

En el caso del script que utilizo, cuando no hay una imagen en ese post, se usa una imagen por defecto y, simplemente, en lugar de establecer una imagen genérica, coloque varias que hacen referencia a la categoría.

No recuerdo haber escrito sobre eso (ahora dudo) En todo caso, tomo nota apra hacerlo :-D

Responder
Adolfo Fernnández Penayo  

Hola Jorge. Soy yo de Nuevo. Hace cuestion de unas semanas haciendo cambios all plantilla de mi blog, no se que habre cambiado en el codigo. Lo cierto es que ahora cuando subo una imagen, esta se visualiza en el post, pero la miniatura no aparece ni con Json, ni cuando por ejemplo inserto dicho post a facebook. Sabes a que se puede deber esto?

JMiur  

No sé qué cambios habrás hecho pero, la detección de la imagen es algo que realiza Blogger de modo automático y no existen códigos para eso.

Si es detectada, en el código fuente (no en la plantilla) verás una etiqueta como esta:

<link rel="image_src" href="xxxxxxxx" />

Adolfo Fernandez  

Ya lo he entendido Jmiur... El problema era que insertaba playlist y estos tienen una miniatura estandar, yo pense que blogger tomaria la miniatura del primer video. Lo he solucionado, insertando una imagen pequeña en el post, arriba de cada playlist!

Responder
Adolfo Fernandez  

Hola JMiur... Soy yo de Nuevo
No se si solo me pasa a mi, o es un error generalizado. Por lo general suelo publicar posts con videos de youtube, sin imagenes, solamente videos sin problemas.

Como me explicaste tu, cuando blogger reconoce la miniatura de este video, deberia aparecer esto en el codigo de fuente : link rel "image_src" href="xxxxxxxx"

No he tenido problemas, blogger siempre reconocia las miniaturas de youtube. Pero hace cuestión de 2 días, cuando posteo no me aparece ninguna miniatura. Y al ver ese codigo de fuente, tampoco aparece.

Lo cual me dio a pensar que algo habre cambiado estos dias para que eso pasara. Entonces despues de tanto probar... cree un blog de pruebas, pero el problema sigue... blogger no me esta reconociento las benditas miniaturas de los videos de youtube. Y cuando veo los listados de entradas con Json o inserto dicha entrada a facebook aparece sin imagen.


Sabes a que se debe esto?... te dejo dos ejemplo:
En este funciona perfectamente: http://www.musicadelparaguay.com/2013/06/Grabaran-conciertos-para-TV-Publica.html

En este enlace ya no salen las miniaturas: http://www.musicadelparaguay.com/2013/07/Mosaico-Impresionante-Olimpia-vs-Santa-FeCopa-Libertadores-2013.html

JMiur  

Yo no recuerdo haber dicho semejante cosa. Lo normal es lo que pasa en el segundo ejemplo. Si se incrusta un video, no se detectará la miniatura de este a menos que sea colocada manualmente en un etiqueta IMG.

Lo extraño, a mi entender, no es lo que ocurre en tu segundo ejemplo sino lo que ocurre en el primero.

Adolfo Fernandez  

Hola Jmiur
"Creo" que he dado con la tecla. Al parecer Youtube ha cambiado el codigo de inserción eliminando la "https:" del mismo. No se con que motivo. He probado en vario navegadores. Con el Nuevo Codigo, el Video se inserta igualmente, pero no aparecen las miniaturas cuando Listas las entradas en Json o insertas al facebook.

Antiguo Codigo: src="https://www.youtube.com/embed/D-uj4YeDeVQ?rel=0"
Nuevo Codigo: src="//www.youtube.com/embed/D-uj4YeDeVQ?rel=0"

Muchas Gracias por la aclaración! ya me funciona!

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