Herramienta para cortar imágenes en secciones y optimizar la carga
Publicado por Juanguis el dia 20 Ago 2008 - Guardado en Diseño, Herramientas
Online Image Splitter
A través del blog del amigazo Héctor me encuentro una interesantísima herramienta para recortar imágenes en secciones y así hacer su carga más rápida, se llama Online Image Splitter y con sólo subir la imagen podremos cortarla online y luego descargarla en un archivo comprimido para utilizarla.
Este tipo de imágenes recortadas se usan en diseños donde el contenido principal es una imagen grande que hay que optimizar para su carga, al ser varias imágenes de tamaño reducido carga todo más rápido.
Para recortar nuestra imagen sólo la seleccionamos y luego configuramos algunas opciones, como la cantidad de filas y columnas para recortar, el formato de salida y la cantidad de colores, etc. Una vez que terminamos podemos descargar todos los archivos en un zip y listo.
Tags: Diseño, Herramientas
Anunciarse aquí
¿Quieres anunciarte en éste espacio y ser visto por más de 300.000 personas al mes? Para hacerlo sólo tienes que contactarte con nosotros.
Que el segmentar una imagen grande en pequeños trozos acelere la carga de ésta es un error común, puesto que lo hace tan sólo aparentemente: La imagen comienza a aparecer antes en pantalla, y se carga independientemente en varios trozos. Distintos navegadores manejan estas múltiples llamadas de distinta forma, pero el resultado estético final es que cuando uno de los trozos ha terminado de cargar, se muestra en pantalla aunque los demás aún estén cargando.
Sin embargo, al segmentar una imagen en varios archivos independientes, obligamos al navegador del usuario a abrir tantas conexiones como fragmentos hayamos creado. Esto, sobretodo cuando hay muchos segmentos, y cuando el mismo web requiere de la carga de otras tantas cosas (imágenes, CSS, JS …), se traduce finalmente en un incremento del tiempo de carga total del web, esto es: el tiempo que transcurre desde que se realiza la petición HTTP hasta que el último elemento del web ha terminado la carga y el navegador ha interpretado todo para su visualización.
De tal modo, cada nueva apertura de conexión (una para cada archivo, por simplificar), requiere una negociación HTTP y un establecimiento de conexión que suma al total de datos transferidos, esperas intermedias, latencias y demás. A estos inconvenientes habría que añadir un hecho destacable que enlentece notablemente las páginas web que requieren de muchas conexiones para su completo renderizado, y es que algunos proveedores de hospedaje limitan la cantidad de conexiones de esta clase simultáneas, lo que puede traducirse en una velocidad de carga ya catastrófica.
En definitiva, yo diría que la segmentación de una imagen ofrece tan sólo una carga más rápida en apariencia, lo que en cuanto a la usabilidad del web puede reportar en ocasiones un beneficio: el usuario puede tener la percepción de que el web carga más rápido, pero no es así: hay fragmentos de la imagen aún por cargar.
Si uno considera que puede obtener beneficio con este método, perfecto, pero sinó, me gustaría recomendar otras prácticas para la optimización de la carga de imágenes:
. El algoritmo de compresión JPEG es más configurable de lo que muchos conocen: El mismo conversor de Photoshop (opción “guardar para web”), permite configurar no sólo la calidad de compresión, sinó incluso la compresión JPEG independiente para cada una de las capas o zonas de la imagen, pues es muy probable que en una imagen grande hayas zonas que podamos comprimir mucho sin pérdida aparente de calidad. La compresión JPEG se pensó para algo! En la mayoría de las ocasiones, una imagen comprimida a calidad 7 u 8 es idéntica al ojo de una imagen a calidad 12
. Los JPEG entrelazados, permiten que muchos navegadores muestren versiones en baja resolución de la imagen a medida que se va cargando. Esto consigue la mejora en la velocidad de carga aparente para la percepción del usuario.
. Algunas imágenes, especialmente las que pueden interpretarse con pocos colores, las que no son fotografías, los iconos, etcétera, se comprimen mucho mejor en GIF que en JPG. Una vez más, aún así, hay que jugar con los parámetros que la opción “guardar para web” de photoshop (por ejemplo) nos brinda para el formato GIF
. Pensar en buenas soluciones CSS para la maquetación de un web, que utilicen con ingenio pocas imágenes y resulten amistosos con los distintos navegadores. Muchas soluciones visuales se pueden implementar con CSS con muy pocas imagenes, y algunas incluso sin ninguna imagen.
. El formato PNG es moderno, casi totalmente soportado y conlleva todo lo bueno del JPG y del GIF, hay que investigarlo!
. A ver si pronto se deciden con la estandarización del algoritmo JPEG2000
No os parece?
Un saludo!
Gracias por referenciarme Juanguis!!!
Un abrazo
Hector
[...] en secciones para acelerar la carga (si quieren una buena explicación sobre el tema pueden leer el comentario de Lorenzo en un post similar a [...]