JMiur [E]

La pregunta era: "Aunque estoy usando miniaturas para mostrar imágenes que luego se abren en otra ventana, mi página tarda mucho en cargarse ¿Qué pasa?"

Buena pregunta, ¿qué pasa? ¿Acaso no se supone que de esa manera agilizamos la carga del sitio?

La respuesta es SI pero ... hay un error conceptual; el código es este:
<a href="mi_imagen" target="_blank">
<img src="mi_imagen" width="128" height="128" />
</a>

¿Estamos cargando miniaturas? NO. Estamos cargando la imagen tal como es, en este caso, de 700x700 y le colocamos en la etiqueta los atributos width y height para que el navegdor la muestre más pequeña y ese es el problema. La muestra pequeña pero carga la grande.

Es un problema de sentido común. Hay un archivo que tiene una imagen, un único archivo. El navegador lo carga y una vez cargado, le decimos que lo muestre de alguna forma y los atributos width y height o las propiedades CSS equivalentes, sólo hacen eso. Podríamos decirle que lo recorte, que lo coloque acá o allá pero siempre sería ese archivo único de 700x700.

Claro, una imagen de ese tamaño demorará un poco pero, si hablamos de muchas imágenes, las cosas se complican. Sólo diez imágenes de ese tamaño significarán uno tres millones de bytes. Es un número sin significado aparente pero, imaginen que una plantilla tiene unos cien mil bytes, una librería como Prototype otro tanto ¡y nos preocupamos por su tamaño!

Para usar miniaturas debemos tener miniaturas, es decir, dos archivos, uno con la imagen original y otro con la imagen reducida y entonces sí, el código será parecido pero diferente:
<a href="mi_imagen" target="_blank">
<img src="la_miniatura" width="128" height="128" />
</a>

Donde los atributos width y hight sólo son un apoyo que permite que el navegador reserve el espacio necesario para cargar la imagen miniatura que tiene 128x128.

Muchos servicios de alojamiento de imágenes como ImageShack, Photobucket o Picasa nos dan la dirección URL de la imagen original pero a la vez, crean miniaturas automáticas que podemos usar. Blogger hace lo mismo, al subir una imagen se generan miniaturas de distintos tamaños que podemos usar y que reducirán sustancialmente el tiempo de carga.


Esto, no significa que siempre debemos usar miniaturas, significa que debemos entender qué estamos haciendo y cómo funcionan las cosas. Cargar una imagen grande y mostrarla pequeña es una técnica aceptable, puede servir, por ejemplo, para usar un zoom sencillo:


En estos casos, cargamos la imagen más grande y luego la manipulamos. Si usáramos una miniatura, el efecto se perdería ya que debería cargarse la segunda imagen.

En resumen, ambas técnicas son aceptables y no tienen nada de malo. Sólo hay que entender qué hacen y usar las herramientas adecuadas.

19 comentarios:

Bocha  

Estoy editando el footer que tengo dividido en tres, y no se porque el titulo de la primer columna no esta bien colocado, esta alejado del costado izquierdo del blog, como lo arreglo?? por otro lado no me acuerdo cual era el codigo que hay que modificar para disminuir la distancia entre cada columna del footer.

Finalmente queria saber como agrandar cada columna, yo lo sabia, pero en esa plantilla no se que codigo usar.

PD: Me quedo bien lo que me explicaste ayer. :)

Responder
senovilla  

De ronda rápida aquí también quiero dejarte un saludo sanferminero.

Responder
Σ=o) Pau  

No sabía que ajustar la imagen no era lo mismo, claro sigue siendo grande y demoran la carga, revisaré mis imagenes y las achicaré.
Un excelente dato a tener en cuenta ;) muchas gracias!

besos ronroneados ^_^

Responder
Vku  

donde dise a href="la_miniatura" no tendria que ir "mi_imagen" porque asi mostraria la imagen chica y en img src="mi_imagen" width="128" height="128" la_miniatura?

Responder
Manolo  

Un buen post, esta mala técnica de insertar imágenes grandes es muy usada. Al igual, si lo hacemos con CSS (redimensionar) ¿estamos haciendo una verdadera miniatura o seguimos cometiendo un error?

Responder
JMiur  

Bocha: Los títulos están alineados, lo que pasa es que la primera columa tiene una lista ordenada y el número de cada item se muestra hacia la izquierda del margen. Eso puede cambiarse con:
ol {list-style-position:inside;}
Lo de las columnas, no sé a que te refieres porque hay muchos modos; pordía ser el width de #lowerbar-wrapper que es del 33% o el padding de .lowerbar .widget o cualquier margen interno, etc.

senovilla: Gracias por pasar a saludar.

Pau: Es un error bastante común. Un par de imágenes no afectarán mucho pero si se ponen galerías o si son demasiado grandes, las cosas se complican.

Vku: Listo, cambiado.

Manolo: Redimensionarlas con CSS o con los atributos es lo mismo, la imagen siempre será la original, el navegador cargará la grande así que siempre hay que usar una imagen de tamaño adecuado.

Responder
Zux  

hola

Rosa me mando para aca, al preguntarle como se hacen esas presentaciones, que tienen varias paginas, estoy hablando de esos cuadros que tienen imagenes rotativas y tienen un titulo y una descripcion en un rectangulo al pie de la foto, como en esta pagina http://www.zomicz.com/index.php

busque, aqui pero no pude pillar, si me dices donde o como estare agradecido chao

Responder
Graciela  

mire Don Jmiur lo que son las cosas :)...casi buenas noches!!!

Responder
Gem@  

En una entrada de Lytebox informo que podemos añadir la misma url para la miniatura que para la imagen ampliada con la idea de simplificar el trabajo a la hora de modificar de tamaño las imágenes, pero llevas razón es conveniente añadir la miniatura en el tamaño que vamos a mostrarla.
Tomo buena nota :)

Responder
JMiur  

Zux: En ese sitio están usando un template específico para sitios que puedan agregar códigos PHP y lo puedes ver acá http://www.frontpageslideshow.net. Imposible implementarlo en Blogger.

Buenas noches Graciela, ¿con frio?

Gem@: Pués, la veradad, ambas cosas son ciertas pero depende del uso que les demos. Por ejemplo, un par de imágenes redimensionadas no serán problema y si las ampliamos, todo será más rápido que usar miniaturas. En cambio, una serie de wallpapers redimensionados, hará que la página sea lentísima.

Me parece que lo importante no es tanto usar una u otra forma sino saber qué significa eso que hacemos para no sorprendernos.

PD: ¿Cómo se siente bloguear bajo las palmeras? :D

Responder
Gem@  

Ahora veo tu respuesta ¿recuerdas que me quejaba de no tener banda ancha? ahora extraño las palmeras.
Soy una quejica :(

Responder
JMiur  

Usted quiere TODO, Gem@ ................ yo también :D

Responder
Rokuta  

Buenos dias/noche JMiur...tal como un par de comentarios atras, Rosa me ha enviado para acá. Mi consulta es respecto al scrpit de "Leer Más" con imagenes en miniatura (Actualmente estoy usando este: http://elescaparatederosa.blogspot.com/2010/03/leer-mas-con-miniatura-de-imagen-y.html)

Mi consulta es la siguiente: Es posible que el script en lugar de achicar la imagen la recorte automaticamente y la deje en los valores que puse, pero al entrar a la entrada aparezca la imagen normal? Digo esto porque realmente, si bien puedo hacer lo de agregar la misma imagén ya achicada al inicio de la entrada, no queda bien ver la imagén repetida.

Responder
JMiur  

No sé si te refieres a este ejemplo de Rosa. Supongo que si.

Allí, lo que se crea es una etiqueta con JavaScript:

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>;

y sería eso lo que debe cambiarse y agregarle algo de CSS para que la imagen, en lugar de una etiqueta IMG fuera un fondo.

imgtag = '<span class="miniatura" style="background-image:url('+img[0]+')"></span>;

y el CSS sería algo así:

.miniatura {float:left; padding:0px 10px 5px 0px;width:120px;height:100px;overflow:hidden;background:transparent url() no-repeat left top;}

la imagen sería el fondo de la etiqueta SPAN que se dimensiona. Ese fondo, se posiciona como quieras y, si la imagen es mas grande, queda recortada.

Es el método que utilizo en este blog aunque el script sea otro.

Responder
Rokuta  

lo probe en mi web (http://www.hikkikomoriroom.com.ar) pero me anulo el scrpit del "leer más", asique lo removi...tiene idea porque puede ser? Sino seguiré con las imagenes como hasta ahora xD

Responder
JMiur  

A ver así:

imgtag = '<span class="miniatura" style="background-image:url('+img[0].src+');"></span>';

Sino, tendría que ver el código puesto para decirte si hay un error de sintaxis porque los scripts dejan de funcionar cuando hay un error.

Responder
Rokuta  

Ahora si funciona :D Ahora un par de consultas. Que parte tengo que modificar para que el texto no quede tan pegado a la imagen? Y Como puedo hacer para que la imagen que se muestra no sea una esquina de la imagen original sino, por ejemplo, el centro?

Responder
JMiur  

Para que se vea el centro, en la propiedad background, en lugar de poner left top coloca 50% 50%.

Esos dos valores controlam la posición, pueden ser porcentajes o pixeles.

Para separar el texto, en la misma regla, agrégale un margen derecho:

.miniatura {
margin-right:10px;
}

Responder
utn  

Existe muchos scripts PHP para redimensionar imagenes al subirlas y crear automaticamente las miniaturas, pero el problema es el uso de memoria, en muchos hostings comerciales no alcanza para ejecutar el escript, recordar que podemos estar subiendo 20 fotos de 12 megapixeles y es mucha información.

Yo prefiero ejecutar un script shell dentro de la carpeta con fotos para crear miniaturas (de un determinado tamaño y calidad) y que tomen el nombre mini-foto.jpg para luego subirla nuevamente al servidor.

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