The image in the past, today, and tomorrow

TL;DR
Humans have recorded information through images since the ancient cave paintings in Lascaux. The evolution continued with Georges Seurat’s detailed pointillism in the 19th century. Today, the digital age has introduced various image formats like BMP, TIFF, GIF, JPEG, and PNG, each with unique features for storing and sharing images. Modern formats like WebP and AVIF offer superior compression and quality, making them the recommended choices for future use due to their efficiency in handling high-quality images with smaller file sizes.

Chapter 1: The Beginnings: Cave of Lascaux

Human beings have recorded their experiences, stories, and visions through images for thousands of years. One of the earliest and most profound examples is found in the Cave of Lascaux in southwestern France. Discovered in 1940, these Paleolithic cave paintings, estimated to be around 17,000 years old, depict large animals such as bulls, horses, and deer, reflecting the life and environment of early humans. These images are not just art; they are a form of communication, a way to pass down knowledge and experience through generations.

Depiction of aurochs, horses and deer — From Wikipedia

From the beginning, humans have known how to pass information from generation to generation with these kinds of paintings. Like books, painting helps to preserve information.

Chapter 2: The Leap to Modern Art: Georges Seurat’s “Un dimanche après-midi”

Fast forward to the 19th century, and the way humans recorded visual information had dramatically evolved. Georges Seurat’s painting “Un dimanche après-midi à l’Île de la Grande Jatte” (A Sunday Afternoon on the Island of La Grande Jatte) from 1884–1886 represents a significant leap in artistic technique and style. Seurat pioneered the technique known as pointillism, where tiny dots of color are applied in patterns to form an image.

Un dimanche après-midi par Georges Seurat

Pointillism is a unique form of art that illustrates how we can understand how can we preserve information in the modern age which I will explain in the next chapter.

Chapter 3: The Digital Age: The First Image Format

In Chapter 2, we learned about pointillism, the art of creating a painting from tiny dots of color. Today, to enable the machine to understand, and display correctly an image with different colors, you can imagine that we almost did the the same thing. We define by each pixel inside a frame which color it should display and we store that information in a container which we call image format. The computer reads and understands the instructions from the format we give to show us the image.

This is a simple example of how each pixel with a different color can give you some meaning

The first digital image format created was the BMP (Bitmap, .bmp) format, developed by Microsoft. Introduced with Windows 1.0 in 1985, BMP was a simple format that stored images as uncompressed bitmaps.

Chapter 4: The Digital Age: PNG and JPEG

You may have heard about PNG and JPEG but if you haven’t, let's dive into the details of these two formats:

1. Compression:

• PNG: Uses lossless compression, which means no data is lost during the compression process. This results in larger file sizes compared to JPEG but maintains the image’s original quality.
• JPEG: Uses lossy compression, which reduces file size significantly by discarding some image data. This can result in a loss of quality, especially at higher compression levels, but achieves much smaller file sizes.

From a raw image to PNG(illustration only) with lossless compression

From a raw image to JPEG(illustration only) with lossy compression, some data are missing

2. Image Quality:

• PNG: Maintains the original quality of the image regardless of how many times it is saved and edited, making it ideal for images requiring high fidelity.
• JPEG: Image quality can degrade with each save due to cumulative loss from compression. It is best suited for photographs where minor loss of quality is acceptable in exchange for reduced file size.

3. Color Support:

• PNG: Supports a broader range of colors, including 24-bit RGB and 32-bit RGBA color spaces. This allows for high-quality images with transparency and is ideal for images with text, graphics, and sharp contrasts.
• JPEG: Supports 24-bit color, providing up to 16.7 million colors. While this is sufficient for most photographs, more is needed to support transparency.

4. Transparency:

• PNG: Supports transparency through an alpha channel, allowing for varying levels of transparency and opacity. This makes it perfect for web graphics, logos, and images requiring transparent backgrounds.
• JPEG: Does not support transparency. Any transparent areas in the original image will be filled with a solid color (typically white).

5. Usage:

• PNG: Preferred for web graphics, logos, text-heavy images, and any image where clarity and transparency are essential. Its lossless nature ensures that images remain crisp and clear.
• JPEG: Widely used for photographs and images where a balance between quality and file size is important. Ideal for sharing photos on the web and social media due to its efficient compression.

6. File Size:

• PNG: Generally results in larger file sizes compared to JPEG, which can affect web loading times and storage space.
• JPEG: Produces smaller file sizes, making it more efficient for storing large numbers of photos and for quicker web loading times.

For many years, we have used mainly these two formats for daily, personal to professional use. But with time moving, here we come at another age when we should reconsider our preferred format.

Chapter 5: The Age of Smartphones, or Smart Devices

The first smartphone is generally considered to be the IBM Simon Personal Communicator, which was introduced in 1992 and released to the public in 1994. The IBM Simon combined a mobile phone with a variety of computing features such as a calendar, address book, calculator, and email. However, the first iPhone, introduced by Apple in 2007, is widely considered to have set a new standard for smartphones.

Steve Jobs with the first iPhone introduced in 2007

The use of smartphones or tablets leads to the movement of how the image is taken, let look at some numbers below from Photutorial:

In 2024, an estimated 1.94 trillion photos will be taken worldwide.

Globally, we capture 5.3 billion photos daily, or 61,400 per second.

The average American takes 20 photos per day.

There are approximately 14.3 trillion photos in existence.

Smartphones account for 94% of all photos taken in 2024.

Google Image Search indexes an estimated 136 billion images.

14 billion images are shared daily on social media, with WhatsApp leading at 6.9 billion.

We take and upload plenty of images every day and we come to two main problems with our two formats:

1. Storage: JPEG or PNG will eat quickly the storage of the user on smartphones or smart devices
2. Time-consuming for loading: A big file size will consume more bandwidth and roaming data
3. Side effect of storing in data centers: Energy consumption to store large file sizes in the cloud

Chapter 6: The age of new heroes: WebP and AVIF

Here we come two candidates to replace JPEG and PNG, these are WebP and AVIF. So how are these two formats better than the old one?

Benefits of WebP and AVIF

Compression Efficiency:

1. Lossy Compression: WebP provides superior lossy compression, reducing file sizes by 25–34% compared to JPEG with similar quality.
2. Lossless Compression: WebP lossless images are about 26% smaller than PNGs.
3. Lossy and Lossless Compression: AVIF provides even better compression efficiency than WebP, offering up to 50% smaller file sizes compared to JPEG without compromising quality.

Quality:

1. WebP maintains image quality while reducing file size. It uses advanced compression algorithms that preserve visual fidelity even at lower bitrates.
2. AVIF supports a wide range of quality levels, from high compression to very high fidelity, making it suitable for both low-bandwidth scenarios and high-quality photography.

Transparency:

1. WebP supports transparency (alpha channel) in both lossy and lossless modes, similar to PNG but with smaller file sizes.
2. Similar to WebP, AVIF also supports transparency (alpha channel), making it a versatile choice for various image types.

Speed:

Faster to decode than JPEG, resulting in quicker loading times, which enhances user experience, especially on web pages.

AVIF also supports High Dynamic Range (HDR) and greater color depth (up to 12-bit color), making it superior for professional photography and scenarios requiring high color accuracy.

Chapter 7: Example with ImageMagick

ImageMagick® is a free, open-source software suite, used for editing and manipulating digital images. It can be used to create, edit, compose, or convert bitmap images, and supports a wide range of file formats, including JPEG, PNG, GIF, TIFF, and Ultra HDR.

I use this tool to convert a simple AI-generated image from JPEG to WebP, and AVIF, let's see the result and review it by yourself.

Original image, generated by AI — File size: 44Kb

Because Medium didn’t support other file types than JPG, PNG, or GIF, I gave you the link here to see by yourself.

WebP provides very similar images with only 28Kb, saving about 36% in file size.

AVIF provides the same result with only 31Kb, saving about 29.5% in file size.

Conclusion

In conclusion, WebP and AVIF stand out as superior image formats compared to traditional JPEG and PNG. WebP offers enhanced compression, quality, and versatility with support for transparency and animation, making it a significant improvement over JPEG and PNG for most web applications. AVIF takes these benefits further, providing exceptional compression efficiency and advanced features like HDR and higher color depths, making it ideal for both web and professional use. As digital content continues to evolve, adopting these modern formats can lead to faster load times, reduced bandwidth usage, and overall better visual experiences. Embracing WebP and AVIF can thus be a strategic move for developers and designers looking to optimize their digital content.