Optimización de JPEG para la Web - Guía definitiva

La compresión de imágenes se encuentra en todos los formatos de medios nativos. Sin embargo, la diferencia entre GIF, PNG y JPEG es cómo La información se comprime y se muestra en pantalla. Hay tantos consejos para componer grandes medios de imagen publicados en la web, y sin embargo, muchos diseñadores aún no entienden algunos de los fundamentos..

En esta guía me gustaría compartir algunas ideas para la compresión JPEG adecuada. Desea optimizar sus imágenes para disminuir los tiempos de carga de la página web y al mismo tiempo mantener un nivel de calidad decente. Se trata de encontrar el equilibrio entre el tamaño de los archivos y la representación de la pantalla. No hay una solución perfecta para los diseñadores a seguir. Requiere algo de práctica inicial, pero una vez que entiendes la compresión JPEG, se vuelve mucho más fácil desarrollar sitios web en el futuro.

Evita siempre ahorrar al 100%.

Casi nunca debes guardar tus imágenes JPEG al 100% de la calidad. Esta voluntad no producir lo mas posible “optimizado” imagen. En realidad, se calcula mediante una fórmula de límite de optimización que aumenta el tamaño de los archivos de forma exorbitante. Incluso en comparación con el 90% o el 95% de calidad, verá una disminución significativa en el tamaño del archivo.

La mayoría de las veces se te recomendará guardar imágenes con una calidad inferior al 90%. Si abre el cuadro de diálogo Guardar para Web en Photoshop, notará que ofrecen valores preestablecidos que puede elegir. A continuación, agregué los posibles valores JPEG: observe las convenciones de nombres inherentes..

• Bajo - 10%
• Medio - 30%
• Alto - 60%
• Muy alto - 80%
• Máximo - 100%

Incluso en Adobe Photoshop, la calidad de imagen del 60% se considera "alta". Muchos desarrolladores web responderán entre el 50% y el 70% es un rango seguro para mantener.

¿Qué tan bajo es demasiado bajo?

Los valores que elija para la optimización dependen completamente del proyecto en cuestión. Tendrá que considerar qué tipos de gráficos producirán los tamaños de archivo más altos; estos son los que realmente necesitan compresión.

Yo diría que por debajo del 30% realmente está cortando la calidad de imagen fundamental. Otros diseñadores jurarán el 50% como “límite” A disminuir el valor óptimo. ¡Pero el mejor consejo aquí es probar diferentes configuraciones y ver qué se ve mejor! No puedes equivocarte con algunos estudios de prueba que optimizan imágenes JPEG para la web.

Opciones de compresion

Primero debemos aclarar los dos términos 'compresión' y 'calidad' que son el uno al otro. Esto significa que si guarda un JPEG al 40% de compresión obtendrá un 60% de calidad (en comparación con un máximo de 100% de calidad sin compresión).

Estas son las opciones más básicas para utilizar, y deberían ser suficientes al guardar para la web. Los usuarios generales no entran en personalizaciones mucho más profundas. El submuestreo se mete en asuntos más complicados en los que estás convirtiendo imágenes RGB en YCbCr (luminancia, azul de croma, rojo de croma).

(Fuente de la imagen: Kara Monroe)

los luminancia o la configuración de brillo siempre se mantiene en el valor más alto posible en compresión JPEG. Con este valor de brillo en un canal separado, es más fácil optimizar los valores de color individuales de Rojo y Azul. Esto también se conoce como submuestreo de croma. A los diseñadores interesados ​​en ensuciarse las manos les encantará leer un poco más sobre este algoritmo de compresión. Echa un vistazo a esta gran publicación de blog sobre muestreo de croma específicamente centrada en imágenes JPEG..

(Fuente de la imagen: Derek Hatfield)

Como nota interesante, Adobe Photoshop no siempre utiliza el submuestreo para la compresión. Cualquier imagen guardada a través del “Guardar para Web” El diálogo solo utilizará el submuestreo de croma por debajo de un valor de calidad del 50%.

Diferentes medios web

La web también está llena de diferentes tipos de medios de imagen. Puedes tener fotografías, iconos, botones, insignias y muchos otros gráficos. Pero es notable que la comparación de la calidad entre un botón y una fotografía simplemente no tiene sentido.

Cuando utilice fotografías o imágenes detalladas, considere vincularlas a un archivo JPEG menos comprimido separado. Luego, puede configurar las miniaturas en su sitio con una relación de compresión más alta y tamaños de archivo mucho más pequeños. El único inconveniente es que deberá proporcionar dos conjuntos de imágenes para una galería multimedia. Tome nota de los muchos gráficos diferentes que ha cosido en un sitio web y considere las técnicas de optimización para cada uno individualmente.

Planificación de un modelo gráfico

Quieres tener un sistema de archivos organizado que sea lo suficientemente fácil como para revolverlo. Algunos webmasters elegirán alojar sus fotos en otros sitios de la web, como Flickr o Picasa. Sin embargo, aún querrá usar alguna herramienta de compresión para reducir el tamaño de las imágenes, pero la forma en que las muestre en su sitio variará. Esto es especialmente cierto con el aumento popular de dispositivos móviles con acceso a Internet..

Encontré un artículo interesante sobre la codificación de JavaScript JPEG que sucedería en su código de interfaz. Las galerías de imágenes de alta calidad no ofrecen muchos beneficios, pero pueden reducir los tiempos de carga para sus visitantes móviles. También sería una técnica útil para vincular imágenes o volver a recortar las miniaturas dinámicamente.

Otra herramienta de lujo para revisar es Yahoo! Smush.it. Es una aplicación web basada en el navegador donde puede cargar una imagen y Smush.it eliminará todos los bytes adicionales innecesarios para optimizar el tamaño del archivo. Es 100% sin pérdidas, lo que significa que la calidad de la imagen no se degradará en absoluto. Y aún mejor, puede cargar imágenes por lotes desde URL directas si las tiene alojadas en su sitio web o en un servidor de terceros..

Herramientas adicionales

Hay un montón de software para probar en lo que respecta a la manipulación de imágenes. Cualquier byte adicional que puedas eliminar del tamaño de cada archivo es crucial. No hay mucho software por ahí, pero las opciones disponibles son increíbles.

IrfanView

Este software gratuito para Windows le permite ver y optimizar cualquier conjunto de imágenes grandes. Me gusta especialmente este software porque admite la conversión por lotes de imágenes en varios directorios. Puede aplicar las mismas funciones a cientos de imágenes JPEG automáticamente.

Lo que es aún mejor es el soporte de plugin de desarrolladores de terceros. Un ejemplo es RIOT (herramienta de optimización de imagen radical). Este complemento funciona para otros editores de gráficos de código abierto similares, como GIMP. Ofrece una vista de imagen dual donde puede ajustar manualmente los parámetros de compresión para cada una de sus imágenes..

El soporte de software es maravilloso y las características de RIOT son muy fáciles de usar. Junto con la compresión de imágenes, también tiene acceso a eliminar metadatos adicionales como EXIF ​​y Adobe XMP. Estos bits adicionales de datos solo pueden agregarse a su tamaño de archivo total y rara vez son necesarios.

ImageOptim para Mac

Si está ejecutando OS X y necesita una aplicación de compresión potente, no busque más. ImageOptim es una herramienta poderosa para comprimir imágenes para la web, a veces incluso mejor que Photoshop.

Toda la aplicación admite la funcionalidad de arrastrar y soltar, por lo que es fácil optimizar grandes conjuntos de imágenes. De manera similar, puede ejecutar comandos directamente desde el Terminal y configurar los scripts de shell. Consulte la página de códigos de Google para obtener más información y soporte técnico.

Ha habido algunos problemas menores con la última versión estable 1.3.3 en la representación de imágenes JPEG pixeladas en Opera. Intente verificar todas sus imágenes optimizadas en los 4 navegadores principales: Chrome, Safari, Firefox y Opera (y quizás IE). Si algo se ve torcido, puedes intentar descargar ImageOptim 1.3.0 que convierte un poco más limpio.

Recursos útiles

• JPEG 101: Una guía de cursos intensivos sobre JPEG
• Configuraciones de compresión correctas para guardar imágenes JPG para WordPress
• Técnicas inteligentes de optimización JPEG
• Cómo optimizar imágenes JPEG para sitios web
• Todo lo que necesitas saber sobre la compresión de imágenes

Conclusión

La compresión JPEG es complicada, ya que necesita encontrar el equilibrio adecuado entre calidad y sustancia. A pesar de que nuestra moderna velocidad de conexión a Internet está aumentando, todavía es necesario reducir el tamaño de las páginas web. Los nuevos marcos como jQuery y Typekit pueden incluir cientos de kilobytes adicionales, incluso en un diseño bien optimizado.

Todavía tengo que recomendar Adobe Photoshop como mi primer software de edición de imágenes. Hay otros ejemplos posiblemente mejores para el proceso de optimización de JPEG. Pero los diseñadores web pueden arreglárselas con soluciones de código abierto aún menos conocidas. Si tiene trucos o ideas similares sobre la compresión JPEG, compártalos con nosotros en el área de discusión posterior a continuación..