Is PNG Still Okay? A Thorough Comparison of JPEG, WebP, and AVIF File Sizes!

Introduction

Hello, this is Easygoing.

Today, let’s dive into image formats, which are crucial when considering the quality of illustrations.

Four Image Formats

Currently, the four main image formats in use are as follows:

gantt
title Image Format Timeline
dateFormat YYYY-MM-DD
axisFormat %Y
tickInterval 5year

section Traditional
JPEG : done, a1, 1992-01-01,  2025-07-18
PNG : done, a2, 1996-10-01,  2025-07-18

section Next-Generation
WebP : a4, 2010-09-30, 2025-07-18
AVIF : a6, 2018-12-14, 2025-07-18

• Lossless Compression: No quality degradation even after compression.
• Lossy Compression: Quality degrades, but file size is significantly reduced.

JPEG

JPEG was established in the early 1990s to efficiently compress image data, which was large compared to text data.

JPEG uses lossy compression, which degrades image quality but allows for significant file size reduction.

PNG

PNG emerged in 1996. It supports transparent images and, while its compression rate is lower than JPEG, it features lossless compression that preserves image quality.

WebP

In the 2010s, several formats emerged as successors to JPEG and PNG, but in September 2020, Apple’s support for Google’s WebP solidified it as the primary successor.

AVIF

Introduced in 2018, AVIF is gaining attention as a next-generation format alongside WebP, offering superior quality and compression rates.

Both next-generation formats, WebP and AVIF, support both lossless compression and lossy compression.

Quality Settings for Each Format

Now, let’s compare file sizes using actual illustrations.

The quality settings for each format are as follows:

• PNG: 9 (maximum compression)
• JPEG: 85 (Google’s recommended value)
• WebP: 80 (a setting that offers better quality and smaller file size than JPEG)
• AVIF: 80 (same as above)

File Size Comparison (High Resolution)

First, let’s compress a high-resolution illustration generated using an upscaler.

The blue bars represent lossless compression with no quality degradation, while the purple bars indicate lossy compression with some degradation.

For high-resolution illustrations, lossless compression in WebP and AVIF reduces file size by 5–15% compared to PNG.

In contrast, lossy compression reduces file sizes to 6–15% of the original, showing significant file size reduction across JPEG, WebP, and AVIF formats.

Quality Degradation in Lossy Compression

Lossy compression significantly reduces file size, but what about quality?

Let’s measure the changes from the original image using MAE and SSIM.

• Mean Absolute Error (MAE): Detects color differences.
• Structural Similarity Index (SSIM): Detects structural differences in grayscale.

For high-resolution compression, both MAE and SSIM similarities exceed 99%, meaning differences are virtually undetectable to the naked eye.

Actual Illustrations!

Now, let’s take a look at the actual illustrations.

PNG (Original)

JPEG (Quality Setting: 85)

WebP (Quality Setting: 80)

AVIF (Quality Setting: 80)

With proper settings, high-resolution illustrations show almost no degradation even with lossy compression.

Low-Resolution Illustrations (372 x 372)

Next, to further reduce file size, let’s try compressing illustrations scaled down to note’s actual display size (372 x 372 pixels).

For low-resolution illustrations, compression is less effective than with high-resolution images, but lossy compression still reduces file size to about 20% of the original.

Degradation at Low Resolution!

Next, let’s check the quality degradation at low resolution.

At low resolution, MAE similarity is noticeably lower compared to high resolution, indicating a loss of color information from the original illustration.

An MAE similarity of 98% means differences are not immediately noticeable but become apparent upon close inspection or zooming in.

Comparing image formats, the balance between file size and quality in lossy compression ranks as AVIF > WebP > JPEG, confirming that newer formats excel in balancing file size and quality.

Low-Resolution Illustrations

Let’s now look at the actual low-resolution illustrations.

PNG (Original)

JPEG (Quality Setting: 85)

WebP (Quality Setting: 80)

AVIF (Quality Setting: 80)

In this comparison, the resolution is adjusted to the actual display size, but compared to high-resolution illustrations, many people may perceive quality degradation even with PNG.

This is because devices like iPhones and iPads support subpixel rendering, displaying multiple subpixels per logical pixel, resulting in quality changes at roughly three times the resolution.

Low-resolution illustrations are more susceptible to compression-related degradation. For high-quality illustration delivery, it’s advisable to prepare illustrations at about three times the display size and adjust compression quality to meet target file sizes.

High-Resolution Displays Are Now Essential!

High-resolution displays using subpixels are not limited to iPhones and iPads but are also common in Android devices like Samsung’s Galaxy series (AMOLED displays) and Sony’s Xperia series (high-resolution LCD or OLED).

Smartphone users now outnumber PC users, and subpixel rendering is widespread, even in entry-level models. Moving forward, preparing illustrations at higher resolutions than the display size should become standard practice.

Are WebP and AVIF Universally Supported?

Let’s examine the compatibility of the new image formats, WebP and AVIF, across various services.

Browser

Blog Platform

SNS Platform

Image Generation Tool

note: ComfyUI supports AVIF through custom nodes.

Since Apple’s Safari adopted WebP in 2020, its compatibility has expanded, and it is now supported by nearly all services.

AVIF, while supported by all major browsers, is not yet widely supported by individual services like note.

In Japan, note and X are particularly popular services, so for now, using WebP as the next-generation format is the safer choice.

Is PNG Still Okay?

PNG is currently the mainstream format for lossless compression, and for the following reasons, I believe it will remain dominant.

1. WebP and AVIF Cannot Be Distinguished by File Extension

WebP and AVIF support both lossless and lossy compression.

While this allows for unified file formats, the file extension alone doesn’t indicate whether the compression is lossless or lossy.

With PNG, it’s clear that it’s lossless compression with no quality degradation, making it more user-friendly in this regard.

2. Image Generation AI Accuracy Is Improving

As shown in earlier graphs, lossless compression in WebP and AVIF only reduces file size by about 10% compared to PNG.

Additionally, advancements in image generation AI, such as new models like Flux.1 and HiDream, produce fewer errors (e.g., in hands) compared to SDXL, resulting in fewer generated images.

Since still images have smaller file sizes compared to videos, the adoption of WebP and AVIF to replace PNG is unlikely to gain significant traction.

3. Web Page Loading Speeds Are Improving

Google recommends scaling images to the actual display resolution and delivering them in lossy WebP or AVIF to speed up web page loading.

However, as previously shown, this approach significantly degrades image quality.

With the spread of 5G networks and the standardization of lazy loading for images in 2020, properly designed websites are minimally affected by image file sizes in terms of page load times.

Moreover, with the rise of AI search engines, users often complete their searches without visiting pages. For those who do visit, providing high-quality illustrations can enhance the user experience.

PNG Can Be Used Directly on X and note!

On X and note, uploading high-resolution illustrations in PNG format automatically resizes them to an appropriate resolution and converts them to lossy WebP.

Users can simply keep high-resolution illustrations in PNG format and rely on the platform’s automatic conversion for a straightforward approach.

Apps for Easy Image Conversion

Here are some apps that make converting image file formats easy.

Squoosh

Squoosh is an online app by Google that allows easy conversion of image file formats.

With Squoosh, you can drag and drop images, input settings, and convert compression formats effortlessly.

XnView MP

For batch-converting multiple files locally, XnView MP is a convenient, free tool for personal use.

XnView MP is like an enhanced file explorer for images, allowing batch conversion of file names, formats, metadata, and resolutions, and it also supports RAW formats from various camera manufacturers.

Using AVIF Format in ComfyUI!

ComfyUI does not support AVIF format saving by default, but you can save images in AVIF using the following custom nodes.

Note that ComfyUI does not support loading AVIF images, so you’ll need to convert AVIF images to PNG or WebP yourself before loading.

Conclusion: PNG Is Still Okay!

• Aim for a resolution three times the display size.
• High-resolution images don’t degrade even with compression.
• PNG will remain fine moving forward.

JPEG and PNG are longstanding formats but remain widely used.

WebP and AVIF, as next-generation formats, are convenient for automatic conversion and file size reduction on platforms like X and note.

However, times are changing, and the previously recommended approach of prioritizing low-resolution, high-compression images for faster loading is becoming outdated.

Moving forward, I plan to prioritize image quality while keeping delivery speed in mind when sharing illustrations.

Thank you for reading until the end!