JPEG, WEBP, HEIC, AVIF? Esta guía te ayudará a elegir.
Después de décadas de dominio sin igual de JPEG, los últimos años han sido testigos de la aparición de nuevos formatos, WebP y HEIC, que desafían esta posición. Solo tienen soporte parcial, pero significativo, de los principales actores entre los navegadores web y los sistemas operativos móviles. Se espera que otro nuevo formato de imagen, AVIF, entre en escena en 2019 con la promesa de arrasar en toda la web.
En este artículo, comenzaremos con una breve revisión de los formatos clásicos, seguida de una descripción de WebP y HEIC / HEIF. Luego pasaremos a explorar AVIF y terminaremos con un resumen que reúne todos los puntos principales.
Los comentarios sobre las ventajas e inconvenientes se basan tanto en la revisión de los informes autorizados disponibles como en las observaciones de primera mano durante el desarrollo y la implementación de herramientas para las canalizaciones de optimización de imágenes en los flujos de trabajo de comercio electrónico.
Formatos de imagen clásicos para la web con soporte universal
Recordemos, en orden cronológico, los tres formatos clásicos más importantes para imágenes web.
GIF
GIF admite compresión LZW sin pérdida y múltiples cuadros que nos permiten producir animaciones simples.
La principal limitación de este formato es que está limitado a 256 colores. Esto era razonable cuando se creó a finales de los 80, ya que la misma limitación se aplicaba a las pantallas existentes. Sin embargo, con la mejora de la tecnología de visualización, se hizo evidente que no era adecuado para reproducir gradientes de color suaves, como los que se encuentran en las imágenes fotográficas. Podemos detectar fácilmente las bandas de color que produce.
Sin embargo, GIF permite animaciones ligeras con soporte universal. Esta característica ha mantenido vivo el formato hasta el día de hoy en casos de uso no sensibles a problemas de calidad, siendo los más típicos las pequeñas imágenes animadas con pocos o ningún color.
JPEG
El rey de los formatos de imagen para web se desarrolló para admitir flujos de trabajo de fotografía digital.
Con una profundidad habitual de 24 bits, proporciona mucha más resolución de color (que no debe confundirse con rango o gama) de la que el ojo humano puede discernir. Apoya la compresión con pérdida mediante la explotación de mecanismos conocidos de la visión humana.
Nuestros ojos son más sensibles a las escalas medias que a los detalles finos. En consecuencia, JPEG nos permite descartar detalles finos (altas frecuencias espaciales), en una cantidad controlada por un factor de calidad. Menos calidad significa que se conservan menos detalles. Además, somos mucho más sensibles a los detalles con alto contraste de luminancia que a los detalles con solo contraste cromático.
Por lo tanto, JPEG recodifica internamente imágenes RGB (rojo, verde y azul) en un canal de luminancia y dos de crominancia. Esto nos permite utilizar el submuestreo de croma para descartar más detalles solo en los canales de croma. Vale la pena señalar que JPEG codifica imágenes en bloques de 8x8 píxeles.
A medida que reducimos el factor de calidad y / o aplicamos un submuestreo de croma más agresivo, comenzamos a obtener artefactos crecientes de timbre, halos, bloqueo o desenfoque. Un problema con JPEG es que, según el contenido de la imagen, pueden aparecer artefactos con diferentes valores de factor de calidad. La diferencia más sorprendente aparece cuando se comparan los efectos de la fotografía natural con los efectos de la obra de arte. Dado que las ilustraciones (formas, fuentes) generalmente se basan en bordes afilados, comienzan a producir artefactos incluso para pequeñas cantidades de detalles descartados.
Para las fotos, JPEG ofrece fácilmente una reducción del peso del archivo en un factor de 10 con artefactos apenas perceptibles, en comparación con la compresión sin pérdida.
PNG
Este formato de gráficos sin pérdidas se desarrolló para reemplazar GIF, abordando sus problemas de bandas de color (y licencias). Era necesario para imágenes con una cantidad considerable de material gráfico, para las cuales JPEG producía grandes artefactos incluso con tasas de compresión mínimas.
Es compatible con la transparencia y una compresión mejorada en comparación con GIF. Dado que no descarta información, PNG no produce artefactos. Por supuesto, esto se produce a expensas de un mayor peso de la imagen en presencia de muchos gradientes de color diferentes, en comparación con la compresión con pérdida.
Logra explotar una característica frecuente de la obra de arte: a diferencia de la fotografía, que presenta un continuo de colores con variaciones sutiles, las imágenes de la obra de arte generalmente presentan pocos colores bien definidos.
Por lo tanto, PNG comprime imágenes asignando grandes cantidades de píxeles a una paleta discreta simple y, como resultado, ahorra muchos bits. En comparación con GIF, ofrece una calidad mucho mayor con menos bytes.
Recién llegados con soporte parcial: WEBP y HEIC basados en HEVC
Los mecanismos utilizados por los códecs de video para comprimir flujos pueden clasificarse en dos tipos principales: entre cuadros e intra cuadros. Mientras que el primero explota las redundancias a lo largo del tiempo, los mecanismos intracuadros se centran en reducir la redundancia dentro de un marco determinado, sin depender del resto. Este mecanismo de compresión se puede aplicar a imágenes fijas.
La explosión del intercambio de videos, con las redes móviles en su centro, y el aumento constante de la resolución de la pantalla ha impulsado los esfuerzos en nuevos estándares de codificación para lograr la mayor eficiencia posible en la compresión.
Por tanto, están surgiendo nuevos formatos de imagen como derivados de los nuevos estándares de codificación de vídeo. Estos nuevos formatos de imagen ofrecen conjuntos de funciones más grandes que JPEG y prometen ahorros importantes en el peso del archivo con una calidad visual mejorada.
WEBP
Google desarrolló este formato con el objetivo de proporcionar un único formato de imagen compatible con la web para hacer frente a todos los casos de uso típicos.
Es importante destacar que busca lograr imágenes más claras que JPEG, sin penalizar la calidad visual. Utiliza operaciones más complejas, como la predicción de bloques, y es un derivado del códec de video VP8. Admite compresión sin pérdida y, a diferencia de JPEG, permite transparencias y animaciones que pueden combinar imágenes codificadas con compresión sin pérdida y con pérdida.
En principio, debería servir como reemplazo de JPEG, PNG y GIF. Un inconveniente importante ha sido la falta de apoyo universal. Hasta hace poco, WebP se había restringido al software respaldado por Google, como el navegador Chrome y las aplicaciones nativas de Android.
Sin embargo, con el anuncio de que Edge y Firefox (excepto iOS Firefox) introducirán el soporte WebP en 2019, evidentemente está ganando terreno. También vale la pena señalar que Apple, Safari e iOS, aún no es compatible con WebP.
HEIC / HEIF
Este formato trae una importante evolución en dos aspectos diferentes.
En primer lugar, el contenedor de archivos admite el conjunto de funciones más grande entre los formatos de imagen disponibles. Admite, por ejemplo, imágenes de varios fotogramas con compresión de varios fotogramas, una característica clave para obtener imágenes HDR, de enfoque múltiple o de vista múltiple eficientes.
Secondly, it supports many types of non-image data with a remarkable flexibility. Currently, most images using this container are compressed with a derivative for images from the H265/HEVC video codec, developed to efficiently cope with the 4k and 8k resolutions featured by the latest generation displays. HEVC coding involves more complex operations with fewer restrictions than JPEG. It achieves a much higher compression efficiency at the cost of slightly higher coding times — not a problem at all in web workflows.
Like H265, HEIC based on HEVC is backed by Apple. It has native support in iOS and macOS, but — mostly due to patent and licensing issues — it is not supported by the rest of platforms (Android, Windows). Even in macOS, Safari doesn't support it. iOS apps appear to be the only viable usecase for HEIC in the web.
So a big question arises: should we offer WEBP/HEIC alternatives and JPEG, with PNG versions as a fallback?
Let’s look at each case...
Should I serve WEBP derivatives?
Google claims that this format produces much lighter images than JPEG with comparable quality. However, independent tests have pointed that this result is not consistent across different measures of quality, and weight reduction is, in most cases, balanced by increasing blurriness.
In our own tests with ecommerce images, we saw file savings for WebP, but at the price of more blur and less detail. Although, we also saw less risk of ringing and blocking artifacts, which we’d consider more visually annoying than blur.
As WebP lacks support by Apple browsers and operative systems, we do not generally recommend serving WebP derivatives competing with JPEG. Such moves would increase media management complexity with limited benefits.
This situation would change if Apple started supporting WebP.
If this were the case, then the extended feature set of WebP and the lighter images produced may be worth its use, effectively simplifying image management workflows.
To try WebP yourself, a classic tool like ImageMagick is a good option. It makes easy-to-compare image versions with different settings of quality and resolution for both WebP and JPEG. Results can be viewed with Chrome.
# Convert to WEBP quality 60 convert input.jpg -quality 60 output_60.webp # Convert to JPEG quality 60 convert input.jpg -quality 60 output_60.jpg # Convert to WEBP quality 60 and width 450px convert input.jpg -resize 450 -quality 60 output_450_60.webpDifferent combinations of quality and resolution will have different effects in each case, as the compression algorithms work differently. So, check your relevant file sizes on several images to get a grasp of the potential savings and the best settings for a given use case.
Should I serve HEIC derivatives?
The advantage of HEIC (over JPEG) is clear. Weight reduction is consistently significant — about 50% — without loss of visual quality. The feature set supported is simply amazing.
The problem again is browser and operative system support.
Given the patent issues of HEVC and the hefty royalties associated, we can expect support to remain restricted to those in the Apple world. Since JPEG is already efficient in compressing images, the 50% of something small might not be worth enough to add complexity to our image processing workflow.
Certain cases using large images, with a major interest in visual quality AND with a large percentage of Apple devices in their user base should consider serving this format.
Performing tests with HEIC is very easy with a Mac. Preview allows us to export an image to HEIC and JPEG with different quality values and different resolutions. You won’t need to run many tests to see the clear and systematic difference between them.
If you want to try something more flexible that may be integrated in a web image processing workflow, GPAC is worth a look.
What about AVIF?
AVIF is the last of our contenders.
Like WebP and HEIC based on HEVC, AVIF is a derivative of the latest efforts in video standards. It also uses HEIF containers and so supports a complete feature set, encompassing all the main formats available. It brings much higher efficiency in compression inherited from the use of AV1 intra-frame coding mechanisms. These advantages make this format compelling.
Another significant advantage comes from the Alliance for Open Media, the large consortium behind its development as a fully open approach, with an open license, free of royalties. Big players like Google, Netflix, Adobe, Mozilla, Microsoft, Facebook and Amazon — major actors in the web graphics and video scene — are backing this new format and making a case for a fast and wide adoption, both in software and hardware. While the stream format was frozen in March 2018 with a reference code available, the first devices with hardware support for AV1 are expected by the end of 2019.
At the time of writing this article, the open source implementation of AV1 available may be still considered experimental and not suitable for production.
Summary
JPEG will remain the king format for general images for web in 2019, and PNG will remain as a default option for images with significant artwork.
The reason? Universal support.
Anything that opens an image will open JPEG or PNG in 2019, just like in previous years and decades! So no doubt that these universal formats will remain in place for some time yet.
The benefits of WebP remain controversial. A clear advantage of WebP is its ability to also replace PNG, potentially simplifying image processing workflows. However, without universal support this advantage vanishes. This may change only if Apple changes their mind and WebP finally gets universal adoption, then it could be used as a replacement for all JPEG, PNG and GIF images.
In contrast, HEIC images based on HEVC do offer clear benefits, especially for large resolutions. If traffic of iOS users is relevant for a website with large heavy images, it may be worth considering serving HEIC alternatives for them, with potential UX improvements, especially for slow mobile connections. Besides speeding up, HEIC assures quality, almost free of the annoying blocking and ringing artifacts that plague aggressive JPEG policies.
Although AVIF is expected for 2019, support and adoption will take time. But for sure, it is an image format to keep under your radar for the near future.
Of course, the use of a cloud service -through an image optimization API or an image optimization plugin- will always remain an easy and straightforward alternative for getting the job done.