Cómo seleccionar el formato de imagen perfecto
JPEG, PNG y GIF, ¡oh, Dios mío! La mayoría de los desarrolladores web solo aprenden qué formato usar a través de prueba, error y una larga experiencia. Y casi nadie entiende cómo estos formatos realmente trabaja.
En este artículo, analizaremos en detalle los algoritmos de compresión de cada formato para comprender cómo sus diferentes estrategias los hacen más o menos apropiados para diferentes tipos de imágenes. Luego, recorreremos algunos próxima generación formatos de imagen (como WebP y JPEG-XR) y vea cómo podemos usar servidores inteligentes para aprovechar estos formatos poderosos (pero aún no universalmente compatibles), hoy.
Empecemos con un viejo amigo querido …
JPEG
Permítanme, por un momento, dedicar un tiempo a apreciar el venerable y sorprendente JPEG. La bolsa de algoritmos de veinticinco años que es ISO 10918 también conocido como el estándar JPEG ha resistido la prueba del tiempo.
¿Entonces, cómo funciona? ¿Y para qué sirve?
La compresión JPEG divide una imagen en bloques de 8 × 8 píxeles y luego les hace algo un poco loco, con un montón de matemáticas. Convierte cada bloque pixeles—Listas de valores R, G y B, mapeados a puntos secuenciales en el espacio — en una lista de coeficientes, utilizado en ecuaciones que describen el bloque en términos de ondas de energía. En términos técnicos, el algoritmo de compresión JPEG traduce la información de una imagen del dominio espacial hacia dominio de la frecuencia.
En la práctica, esto significa que JPEG es muy bueno para comprimir imágenes de tono continuo: imágenes con una gran cantidad de colores y transiciones suaves entre ellas. En otras palabras, JPEG asume que su imagen se parecerá más o menos a una fotografía.
Por el contrario, el formato JPEG es terrible Al comprimir imágenes con bordes nítidos o texturas ruidosas y de alta energía, colocará anillos alrededor de los bordes afilados y difuminará los detalles finos.
Para comprimir bien estas imágenes, debemos emplear diferentes algoritmos de compresión. Ingrese nuestro siguiente formato:
GIF
En los primeros días de la web, si una imagen no era un JPEG, era un GIF.
El formato GIF utiliza el algoritmo de compresión LZW, que es mucho más simple que la matemática de JPEG. Esencialmente, el algoritmo LZW escanea sus datos de imagen y genera códigos muy cortos para las partes que se repiten; LZW acorta la repetición. Lo que significa que el formato GIF es bueno para comprimir imágenes que tienen grandes cantidades de datos idénticos o repetitivos. Las imágenes que solo tienen unos pocos colores, en franjas amplias, con transiciones nítidas entre ellos se pueden almacenar de manera eficiente y sin pérdidas como GIF.
Y aunque es un formato simple, GIF tiene un par de características sofisticadas: transparencia y animación.
Pero… GIF es terrible para comprimir cosas que tienen incluso una cantidad moderada de colores; diablos, el formato tiene un límite fijo de 256 colores. Convertir una imagen con más de esa cantidad de colores en un GIF da como resultado pérdidas posterización, que se ve horrible.
En resumen, GIF y JPEG tienen fortalezas opuestas y complementarias. Formaron un equipo asesino en los primeros días de la web.
Pero las cuestiones de patentes no resueltas que rodean al algoritmo LZW inspiraron a algunas personas muy inteligentes a tomar una segunda oportunidad en el diseño de un formato de imagen sin pérdidas para la web.
PNG
PNG sobresale con el mismo tipo de imágenes que GIF, y aporta algunos beneficios adicionales:
- Sin límite de 256 colores
- Transparencia del canal alfa (por lo que un píxel puede ser parcialmente-transparente, y no simplemente completamente transparente o completamente opaco)
- En todos los casos de borde, excepto en unos pocos, una compresión superior
Esto imagen de Wikipedia muestra la capacidad de PNG para comprimir una imagen a todo color con píxeles semitransparentes bastante bien.
¿Cómo vence PNG a GIF en lo que respecta a la compresión? Añadiendo algunas capas a su pila de compresión …
Primero, el algoritmo PNG intenta reducir la cantidad de datos que necesitará almacenar usando los píxeles que ya conoce para predecir los que no. El formato presenta cinco estrategias de predicción diferentes, pero básicamente, el PNG asume que los píxeles contiguos serán similares. Si esta suposición resulta cierta, PNG guarda los datos almacenando únicamente la diferencia entre su predicción y el valor real; los números pequeños ocupan menos espacio que los grandes.
En segundo lugar, PNG elimina la repetición al permitir que la imagen se refiera a secuencias de píxeles idénticas anteriores (en lugar de almacenar los mismos datos dos veces) utilizando un algoritmo llamado LZ77. Si entrecierra los ojos, el LZ77 de PNG y el LZW de GIF están logrando los mismos fines, eliminando la repetición, pero llegan a través de medios que son lo suficientemente distintos como para evadir a los abogados de patentes. ¡Todos ganan!
Y luego, finalmente, habiendo hecho todo eso, PNG usa un proceso llamado «codificación Huffman» para reducir aún más los valores restantes generando los códigos más pequeños posibles para los valores más comunes (por cierto, el formato JPEG usa la codificación Huffman como un último paso también).
La combinación de estas tres técnicas (sin pérdidas) proporciona enormes beneficios sobre la estrategia única de GIF. Y las herramientas sofisticadas pueden proporcionar índices de compresión aún mayores al alterar los datos de la imagen original con pérdidas antes de que se ejecuten a través de este desafío, para que sea más fácil de comprimir.
Dando un paso atrás, todo lo que necesita saber es esto: PNG funcionará peor que JPEG cuando se trata de fotografías, y mejor que GIF casi siempre. Por lo tanto, utilícelo para imágenes con bordes nítidos y amplias franjas de color sólido o patrones repetidos con precisión.
La próxima generación
En el momento de redactar este documento, esos tres formatos (JPEG, GIF y PNG) son los únicos formatos de imagen con universal apoyo. Es decir, son los únicos formatos que los desarrolladores pueden usar. Pero los formatos nuevos y de vanguardia ya están aquí, y son espectaculares.
WebP
WebP es una rama del formato de video WebM de Google; el núcleo de su estrategia de compresión es predictivo, es decir, lleva la estrategia predictiva simple utilizada por el formato PNG al siguiente nivel. WebP utiliza una de hasta dieciséis estrategias de predicción diferentes para cada bloque (de tamaño variable) en la imagen y, opcionalmente, puede comprimir sin pérdida o con pérdida la diferencia residual entre los valores predichos y reales. La relativa complejidad del formato le da mucha flexibilidad; es bueno para una amplia variedad de imágenes (tanto gráficas, si elige su configuración sin pérdidas, como fotográficas, si pierde), con (generalmente) mejor compresión que PNG o JPEG.
Pero, es el formato de Google y solo es compatible con Chrome en este momento.
JPEG-XR
El formato de elección de próxima generación de Microsoft, JPEG-XR, pone en capas un montón de nuevas técnicas además de la mecánica básica de la compresión JPEG, lo que permite:
- Compresión sin perdidas
- Compresión con pérdida más eficiente
- Semitransparencia de canal alfa
Al igual que WebP, JPEG-XR es mucho más complejo, de rendimiento y menos compatible que sus predecesores. En este momento, el formato solo es compatible con Internet Explorer y Edge.
Cómo utilizar los formatos del mañana, hoy
¿Hay alguna forma de que usemos estos formatos de próxima generación, ahora mismo? ¡Hay!
Nuevo marcado permite a los desarrolladores proporcionar la misma imagen en múltiples formatos y permite que el navegador decida cuál cargar del grupo. Desafortunadamente, este marcado puede volverse un poco complejo:
<picture>
<source type="image/webp"
/>
<source type="image/vnd.ms-photo"
/>
<img src="https://www.webdesignerdepot.com/2016/07/how-to-select-the-perfect-image-format/sunset.jpg"
alt="A colorful sunset" />
</picture>Afortunadamente, hay otra forma de avanzar. Los ingenieros de front-end pueden trasladar esta complejidad al back-end, empleando servidores inteligentes que pueden enviar diferentes recursos a diferentes usuarios desde la misma URL.
Usando un servicio como Cloudinary, los desarrolladores pueden implementar imágenes dinámicas comprimidas de forma adaptativa agregando algunos caracteres simples a sus URL. Palo f_auto en una URL de Cloudinary, y obtiene adaptabilidad sin agregar complejidad. La imagen el marcado anterior se reduce a:
<img src="http://res.cloudinary.com/eric-cloudinary/image/upload/f_auto/sunset"
alt="A colorful sunset" />¿Como funciona esto? Resulta que los clientes les dicen a los servidores qué formatos admiten cuando solicitan recursos de imagen de los servidores. Un servidor inteligente, entonces, puede enviar diferentes recursos a diferentes clientes, según la información contenida en sus solicitudes.
Y eso no es todo lo que puede hacer un servidor inteligente, cuando agrega un q_auto Además, Cloudinary determinará automáticamente no solo qué formato funcionará mejor para cada cliente, sino también qué configuraciones de compresión específicas funcionarán bien para su imagen en particular, lo que le evitará tener que recordar nada sobre el complejo funcionamiento interno de cada formato. ¡Entonces! Deja de leer y Registrate para una cuenta gratis hoy.
[– This is an advertorial post on behalf of Cloudinary –]
