Cómo mejorar fácilmente la velocidad de carga de tu web mediante la optimización de imágenes

Cómo mejorar fácilmente la velocidad de carga de tu web mediante la optimización de imágenes

Cómo mejorar fácilmente la velocidad de carga de tu web mediante la optimización de imágenes

Cómo mejorar fácilmente la velocidad de carga de tu web mediante la optimización de imágenes

Compartir
Facebook
Google+
Twitter
LinkedIn

Cuando se trabaja para optimizar una web, se aprende que el tamaño de la imagen es importante para la velocidad. Muchos editores online no tienen tiempo para aprender Photoshop u otros programas de edición de imágenes. Los optimizadores automatizados son la siguiente mejor solución y pueden acelerar su producción. Pero, ¿cuáles hacen un buen trabajo y es suficientemente bueno? Son preguntas que nos debemos plantear.

Hemos probado diversas herramientas online para optimizar imágenes, pero nos han gustado sólo tres. Estas pueden ser tan potentes como la optimización realizada en programas independientes como Photoshop. No se debe ignorar los problemas de velocidad causados por las imagenes. Lamentablemente, reducir a la mitad el peso de la imagen en su página de inicio no hará que se cargue el doble de rápido. Hay muchas otras cosas a tener en cuenta. Sin embargo, el tamaño y el peso de la imagen son los mayores causantes de la velocidad lenta de la web. Vale la pena aprender algunos trucos de compresión.

Las imágenes son el factor más importante del peso lento de la web. Todo el mundo odia las páginas que cargan lentas, especialmente si nos encontramos en móviles. El flujo de trabajo de imágenes automatizado es una forma sencilla de mejorar la experiencia del usuario. Sin dificultad, puede lograr el equilibrio correcto entre el tamaño del archivo de imagen y la mejor calidad. Optimizar las imágenes ayuda a reducir la frustración de los visitantes de su sitio web.

Hicimos una simple prueba de optimizadores en línea con sólo dos imágenes. No nos interesaban los matices. Sólo queríamos saber si las herramientas de optimización cumplían un criterio de procesamiento mínimo. Aquí están las dos imágenes de prueba:

Imagen JPEG del banner de prueba

trees-rocks.jpg, weight: 122.2k, dimensions: 1024 x 300 pixels

Prueba de salida de la cámara Imagen JPEG

 

Por favor, pruebe las 3 herramientas de imagen y compruebe si tienen valor para los tamaños de archivo web que utiliza.

DynamicDrive Online Image Optimizer

Los resultados de imagen de DynamicDrive se muestran en incrementos de Calidad-10. Nos gustó mucho esta sencilla función visual de imágenes fijas. DynamicDrive tenía un límite de tamaño de carga de 2,86 MB. Esto es demasiado pequeño para las imágenes que salen directamente de una cámara digital. No pudimos subir el JPEG de prueba más grande porque es de 5.5MB. Todavía nos gusta más esta utilidad de carga del navegador para la mayoría de los trabajos web porque muestra los diez resultados para su comparación. Nada de jugar con los controles. La selección visual es fácil.

DynamicDrive:
trees-rocks
17k, -85% ahorro

Optimizilla

Resultado con Optimizilla:
trees-rocks
11K, -91% ahorro

wood
121K, -98% ahorro

Web Resizer

Resultado con Web Resizer:
trees-rocks
19.29k, -83% ahorro

wood
63.94k, -98% ahorro

El criterio que hemos seguido en este test:

  • Sólo estamos interesados en comprimir archivos fotográficos. El compresor en línea es mejor si funciona para dos muestras diferentes: un archivo de cámara digital grande y un banner web más pequeño. Ambas imágenes JPEG. Las especificaciones para las imágenes de prueba están abajo:
  • El software necesario para la optimización de imágenes debe ser sólo el navegador. No hay otros programas o plugins; como Adobe Air, Windows solamente, Flash, etc.
  • Queremos subir las imágenes de prueba navegando o arrastrando y soltando.
  • Consideramos que es una ventaja si la herramienta de imágenes del navegador tiene una opción de redimensionamiento de imágenes.
  • La herramienta debe funcionar. ¿En serio? Si falla, está fuera de la lista.
  • Sólo nos interesa para la mayor reducción del peso de la página.
  • Preferimos los optimizadores con control de reducción en pasos de 10 incrementos de calidad. 90Q hasta el rango de 10Q. Hemos bajado a 10Q para hacer pruebas cuando ha sido posible.

Los 7 perdedores al azar.

Los compartiremos para que no te preguntes si los probamos o no:

WP Smush

Hemos usado smush.it antes. Es parte de la herramienta de medición de rendimiento Yslow de Yahoo! nunca hace mucha diferencia. Hay mejores alternativas. Muchos creen en este método. No creemos que sea tan genial en comparación. En la prueba, no pudo subir las imágenes. Lo intentamos de nuevo y nos dimos por vencidos. No nos importaba tanto.

Kraken.io

Creemos que Kraken tiene potencial con la versión de plugin de WordPress. Pero la versión en línea del navegador no le permite hacer ajustes de calidad. Nuestra imagen de prueba de los árboles-rocas sólo se comprime en un 12,4%. No es impresionante. Y la imagen de "madera" más grande no estaba permitida. Dijeron que para ese tamaño tendríamos que actualizar a la versión Pro con un límite superior de 16MB. ¡Olvídalo!

RIOT (Herramienta de Optimización de Imagen Radical)

Sólo para Windows. Descalificado.

Poca PNG

FALLÓ la carga y dio un mensaje de error. "Lo sentimos, hubo un problema con la(s) imagen(es) que estás subiendo. Por favor, asegúrate de que tu imagen es un formato compatible y cumple con tu cuota". Nuestras imágenes funcionaron bien en todas partes? Imagínate. Sí. Lo intentamos más de una vez.

Shrink'o Matic

Aplicación de escritorio para Adobe AIR. Descalificado porque requiere más que un navegador.

TinyPNG - Límite 5MB

Tiene un límite de 5MB y no hace ninguna diferencia. Cambio de "cero por ciento" en la imagen de los árboles y las rocas.

Compressor.io

Compressor.io tampoco pudo ser. Árboles - rocas sólo comprimidas en un 24%. Eso no es suficiente para nosotros. La imagen de "madera" fue mejor (-72%) pero sin opción de redimensionamiento. No era de mucho valor para esas grandes y pesadas imágenes de cámara digital.

 

 

 

 

Fuente del post

Compartir
Facebook
Google+
Twitter
LinkedIn
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (1 votos, promedio: 5,00 de 5)
Cargando…