Herramienta para cortar imágenes en secciones y optimizar la carga

3

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.

Otros llegaron buscando:

Compartir

Comparte este post en redes sociales

Juanguis

Ex técnico de PC y redes, actualmente blogger fulltime desde hace 5 años. CEO y creador (?) de Punto Geek. Me encanta el buen café, hago Reiki, y estoy muy enamorado de mi novia Mar.

Suscríbete al feed

Si te gustó este post, no te olvides de suscribirte al feed RSS para que recibas las actualizaciones antes que nadie

únete a los 18505 seguidores

es gratis y toma menos de 2 minutos

2 Comentarios en este artículo

  1. Lorenzo  

    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!

  2. Gracias por referenciarme Juanguis!!!
    Un abrazo

    Hector

Un Trackback en esta entrada

  1. [...] 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 [...]

Deja un comentario

(*) (*)

Tu E-Mail no será visible públicamente
Los campos marcados como (*) son obligatorios

Otras personas llegaron buscando:

  • cortar imagenes con css
  • herramientas para cortar

  • dibujos de herramientas para cortar
  • dividir imagen jpg
  • como cortar imagenes
  • programa para partir una foto en varios trozos
  • ímagenes de herramientas para cortar
  • programa cortar imagenes y guardar en diferentes documentos
  • cortar imagenes

  • herramienta para cortar imagenes
  • herramienta para recortar imagenes
  • herramienta para recortar imagen
  • cortar jpg
  • herramienta para cortar fotos
  • FOTOS A TROZOS PARA FACEBOOK
  • dividir imagen jpeg
  • algunas herramientas para podar
  • recortar imagen css
  • cortar imagen en trozos
  • herramienta para cortar
  • seo forum