Pregunta , sobre la reducción de imagenes...

jafp_pe · #1 (**permalink**) 10/05/2009, 11:05

Hola amigos estaba pensando tengo una inquietud que quiero pues resolver, me sentiría mucho mejor mi duda es por ejemplo tengo una imagen de 1200 x 700 px, yo lo redusco mediante codigo html a 200 x 200 "supongamos", la carga en la pagina se reduce tambien? osea si redusco el tamaño en la web se reduce por sí tambien el PESO? De la imagen?...

o no, simplemente se reduce la imagen mas no el peso,...
sí es así tendría que por ejemplo darles una medida ala imagenes pero ya así estaticas ? osea las imagenes tendrian que ser duplicadas una pequeña que se mostrara en portada y otra grande si quieren verlo completo,

esque lo qu ehago yo es, reducir y vincularlo a el mismo cosa que se abre en grande... pero el reducir quiza no me sirve de nada ya que el peso y la carga de la pagina no cambia...

no se en verdad es mi inquietud, igual trabajo con dos imagenes, miniatura y completo..

pero igual es inquietud... GRACIAS!

#2 (**permalink**) 10/05/2009, 11:15

hola, al cambiar el tamaño a 200x200 no reduces el peso de la imagen, lo que sí puede que se reduzca es la carga en memoria y de procesador del servidor y del navegador

por eso se desarrolló el formato PNG, pero como ya sabemos nunca ha tenido mucho éxito, la idea con PNG es que se enviara una barrida de datos a baja resolución para luego enviar la imagen completa (al igual que ocurre con los JPG progresivos)

ElJavista · #3 (**permalink**) 10/05/2009, 11:18

Tus sospechas son ciertas, no se reduce el peso para nada y es más, al menos en I.E. se ve algo deformada. El HTML no tiene esa capacidad ni nunca lo tendrá por sus características.

Ahora, lo que dice ramonjosegn no es cierto, no reduces la carga en memoria, ya que al hacer una petición al servidor, este envía el archivo como tal, el cual se carga en memoria como es y se guarda en los archivos temporales de Internet. Solamente la visualización es la que se ve más pequeña, pero la descarga de los datos a tu PC y la carga en memoria siguen siendo la mismas.

Ahora bien, puedes hacer dos cosas: La primera reducirlas de manera automática usando PHP u otro lenguage de programación del lado del servidor. Sin embargo sospecho que de eso no sabes mucho que digamos, así que la segunda recomendación es la que tú mismo planteas: crear dos imagenes, la miniatura y la de tamaño completo.

#4 (**permalink**) 10/05/2009, 11:27

ElJavista pues yo creo que si abres una imagen de 6000px x 6000 px en internet explorer, el comsumo de memoria física, será mucho menor que si abres la imagen a 200x200... sólo lo supongo, porque he visto cuelgues en el navegador por abrir esas imágenes y renderizadas por completo, y cuando no es así, no he visto cuelgues, claro que puede ser problema de la programación del navegador...

alguna forma de qué podamos comprobarlo?

ElJavista · #5 (**permalink**) 10/05/2009, 11:41

Supones mal amigo, pareciera que no sabes lo que ocurre cuando digitas una dirección electónica en la barra de direcciones de tu navegador y hacer enter. En ese momento el cliente (o sea el navegador o browser) envía al servidor una petición en donde figura un archivo específico, digamos que el archivo fuera un HTML, entonces el servidor envía el archivo ese a tu navegador, el cual cuando lo recibe lo intenta visualizar, al toparse con una etiqueta: <img hace otra petición al servidor. Eso es así porque el servidor no interpreta el HTML, solo lo envía cuando le hacen una petición. Bueno, esa nueva petición es procesada en el servidor y es envíada el archivo de la imagen completo, total. La imagen cuando llega al cliente es solamente visualizada por el browser en un tamaño determinado según los atributos width y height si es que existieran. O sea, que si visualizas en un browser una imagen de 6000px x 6000px pero en un tamaño de 200x200, el archivo cargado en memoria es de 6000x 6000, pero el navegador al renderizarlo para verlo en 200x200 no crea ni guarda en memoria una imagen renderizada, solo la muestra de otro tamaño. O sea, que al final el browser tiene que invertir más recursos en procesar una imagen para cambiarle el tamaño. Cuando recargues esa página por algún motivo, el navegador busca en los "archivos temporales de Internet" los archivos necesarios (valga la redundancia) y si los encuentra los visualiza y vuelve a repetir el proceceso de renderizarlos. Obviamente el caché de la computadora hace que este proceso sea más rápido, pero de todos modos lo que se procesa es el mismo archivo de 6000x6000 no un archivo de 200 x 200 porque ese supuesto archivo no se ha guardado para nada en ninguna parte.

Bien. espero que haber sido claro en las explicaciones. Sin embargo si alguien sabe algo que yo no sepa en este tema, agradecería mucho que aporte para rectificarme.

mpeg · #6 (**permalink**) 10/05/2009, 11:42

a ver, redimensionar una imagen en el codigo html solamente hace que se vea mas pequeña (ademas el algoritmo que llevan los navegadores es muy basico y se suele ver mal), la imagen completa se transferira del servidor al cliente igualmente (xq html se renderiza en el cliente)

lo que tu buscas es imagemagick, para redimensionar imagenes en el servidor (y de forma automatizada si usas cualquier lenguaje de scripting para hacerlo, bash, php, etc.)

con respecto a si un navegador usa menos memoria y cpu para imagenes redimensionadas (que es un tema totalmente distinto) supongo que usara mas o menos la misma pero creo yo que depende mas del garbage collector del navegador que de otra cosa xd

mpeg · #7 (**permalink**) 10/05/2009, 12:04

he hecho pruebas de memoria:

google chrome vs mozila firefox vs microsoft iexplorer (todos las ultimas versiones estables)
imagen: png de 4mb~ sacado de google images

dos .html, uno que carga la imagen completa y otro que la redimensiona a 200x200 (en el tag img)

en general todos los navegadores tienen mayor gasto de memoria y cpu con la imagen redimensionada (eso era de esperar) y en general si abres dos tabs al mismo tiempo la imagen ya esta cacheada

los 3 navegadores chupan unos 150mb de memoria para mostrar la imagen, la diferencia principal esta en el garbage collector
- chrome no suelta la memoria al momento, pero si cuando deja de ser la tab activa y luego al cambiar otra vez al primer tab ya lo tiene todo cacheado sin mayor problema
- iexplorer suelta la memoria en cuanto ha acabado de mostrar la pagina, luego todo perfecto, un 10 a microsoft :)
- firefox no suelta la memoria hasta un rato despues de que el tab deje de estar activo, pero al volver a cambiar a ese tab vuelve a chupar los 150mb (!!!) y hay un retardo bastante evidente... fatal...

nota: este test ha sido hecho en 5 minutos y no de una forma demasiado cientifica, para hacer algo mejor se tendria que usar un debugger y tener el codigo de cada navegador (y para iexplorer puede ser complicado) pero bueno, para hacerse una idea es util :)
nota2: esto no tiene mucho que ver con la pregunta original, pero necesitaba satisfacer mi curiosidad al respecto de como manejan los navegadores las imagenes grandes y las redimensiones :) para la pregunta original mi post anterior

buzu · #8 (**permalink**) 10/05/2009, 15:08

Cita:

firefox no suelta la memoria hasta un rato despues de que el tab deje de estar activo, pero al volver a cambiar a ese tab vuelve a chupar los 150mb (!!!) y hay un retardo bastante evidente... fatal...

No pues si de siobra se sabe que FF es un comelón.
Buena investigación amigo.

Con respecto al tema, creo que queda resuelto. Solo agrego que hay programas que te crean thumbnails automáticamente, pero si de verdad quieres hacerte la vida más facil, te sugiero que redimenciones en el servidor.

Checa esto:
http://icant.co.uk/articles/phpthumbnails/
Y así hasta te adentras un poco en php.

#9 (**permalink**) 10/05/2009, 18:25

mpeg

muy buena información gracias

esto demuestra que "suponer" las cosas no significa que sean al final ciertas, es más en mi caso incluso eran al revés (pues el navegador consume más con imágenes redimensionadas... aunque sigo sin entender porqué se cuelgan...) y que AXIOMAS como el de ElJavista con "pero la descarga de los datos a tu PC y la carga en memoria siguen siendo la mismas" no sirven de mucho cuando no se ha puesto uno realmente a investigar con profundidad el tema

con respecto al consumo de memoria de Firefox, en realidad, supongo que al mantener las imágenes en el caché quizás están tratando de evitar otros problemas, quiero decir que debe haber una explicación concreta para ello (que los programadores conocerán)

ElJavista · #10 (**permalink**) 11/05/2009, 05:37

La investigación "no de una forma demasiado cientifica" de mpeg pero muy buena y útil, no creo, según mi apreciación, que contradiga lo que yo dije sobre la "descarga de los datos a tu PC y la carga en memoria" y todos los demás aporte que yo dí. Y pediría por favor al mismo mpeg, que nos diga, si es que esos "AXIOMAS" que dí son descartados por su investigación.

jafp_pe · #11 (**permalink**) 11/05/2009, 08:07

Gracias sacando conclusiones solo me queda generar thumbnails..., gracias.

saludos.

posdata.
ya lo entendi completamente =D