From GIF to WebP: The Long-Planned Stories of "Images" in HTML

Hey everyone! Today, let's talk about the "grand plans" hidden in HTML. From the ancient GIF to the currently popular WebP, images have been real troublemakers in front-end development. They're not just decorations on web pages; they're magic wands in the hands of designers and developers, turning plain web pages into something dazzling. Don't be fooled by their small size—there are plenty of stories behind them!

Today, let's dive into the past and present of image formats, exploring their applications and charm in front-end development.

I. BMP – An Outdated Image Format

BMP (Bitmap Image File) is one of the earliest image file formats. Born in the early days of the Windows operating system (1980s), it became the standard image format for Windows.

BMP is a primitive image format that uses no compression algorithms (lossless) and directly stores pixel information (direct color), resulting in large file sizes.

Compression Explanation: Many images contain blocks of the same color. Instead of storing the color value of each pixel, we can store one color value and the number of consecutive pixels with that color. For example:

• Uncompressed:
• 000000003333333333
• 222222222226666666
• Compressed:
• (0,8) (3,10)
• (2,11) (6,7)
• Lossless Compression: Doesn’t compress image data, accurately preserving the original image.
• Lossy Compression: Omits details invisible to the human eye during compression, significantly reducing file size while maintaining similar quality.
• Direct Color: Each pixel’s color is defined by RGB components (8 bits per component, 256 shades each), allowing 16,777,216 colors. This stores complete color info per pixel, resulting in rich colors but large file sizes.
• Indexed Color: Stores indices of predefined colors from a color table instead of actual values. This reduces file size but limits color range.

BMP is mainly used in Windows systems and bitmap editing. Its large file size slows web loading, making it unsuitable for web applications.

II. GIF – Animated Image Format

GIF (Graphics Interchange Format) uses lossless compression, resulting in smaller sizes than BMP. It supports transparency and animation.

GIF restricts images to 8 bits per pixel (max. 2^8 = 256 colors), so it’s unsuitable for images with complex colors or details.

The 1989 GIF89a version allowed multiple images in one file, played sequentially at specified intervals to create simple animations.

GIF’s standout feature is dynamic imagery, ideal for lively web elements like ad animations, simple icons, loading spinners, and memes. The 8-bit limit keeps animation sizes small and internet-friendly.

III. JPEG (JPG) – The Most Common Image Format

JPEG (Joint Photographic Experts Group) uses lossy compression, ignoring imperceptible details to drastically reduce file size, improving storage and transmission efficiency.

It supports rich colors, making it perfect for product images where overall visual impact matters. It balances quality and size, speeding up loading for user avatars, e-commerce products, and corporate brochures.

Digital cameras and mobile apps often use JPEG to save space while retaining quality.

JPEG is one of the most used web image formats but lacks animation and transparency. It’s unsuitable for logos, line art, or images needing seamless background integration.

Difference between JPG and JPEG: They’re identical. Introduced in 1992, JPEG was shortened to JPG for Windows (which only supported 3-character extensions), while Mac/Linux kept "JPEG." Today, systems accept both, along with variants like JPE, JIF, and JFIF.

IV. PNG – Widely Used Web Image Format

PNG (Portable Network Graphics) is a lossless format supporting transparency and gradients.

It has three versions: PNG-8, PNG-24, and PNG-32 (none support animation). PNG-8, like GIF, uses indexed color and transparency but with cleaner edges and better colors. PNG-24 is a lossless alternative to JPEG, while PNG-32 adds transparency to PNG-24.

PNG offers high compression, small files, and combines GIF/TIFF advantages (lossless compression, transparency, gradients). It’s ideal for web icons, logos, and small graphics.

Its transparency makes it perfect for logos needing versatile background integration. However, PNG files are larger than JPEG, so they’re unsuitable for size-sensitive scenarios.

V. WebP – The Best Alternative to JPEG & PNG

Developed by Google, WebP is a modern format designed to compress and transmit images efficiently, reducing load times. It combines lossy/lossless compression and supports transparency (alpha channel), achieving smaller sizes with similar quality.

WebP reduces file sizes by ~30% compared to PNG/JPG at the same visual quality. It also supports lossy/lossless compression, transparency, and animation, theoretically replacing PNG, JPG, and GIF. While older browsers/ devices may lack support, 97% of browsers supported it by 2020.

VI. SVG – Scalable Vector Graphics

SVG (Scalable Vector Graphics), developed by W3C, is an XML-based vector format using points, lines, and mathematical equations instead of pixels.

Unlike bitmaps (JPG/PNG), it isn’t resolution-dependent, so it scales infinitely without distortion and often has smaller file sizes.

1. Infinite Scalability: SVG stays sharp at any size, ideal for responsive design.
2. Small Files: Smaller than equivalent bitmaps, reducing load times.
3. Animation & Interaction: Supports complex animations and interactive graphics.

• Raster Images: Define pixels at a fixed resolution (e.g., 1280×720). Enlarging stretches pixels, causing blurriness.
• Vector Images: Use geometric shapes (points, lines) via mathematical formulas. Enlarging reveals no pixels.

While efficient for simple graphics, will vectors replace bitmaps? As Wang Xinchi put it:

"Vectors are made of points/lines—drawn, not photographed. They’re 'drawings'; bitmaps are 'images.' A vector with pixel-level detail would either mimic a bitmap (array-based) or have excessive elements with huge file sizes (line/color-based)."

Thus, SVG suits simple illustrations, shapes, and text but not complex designs (e.g., high-detail art), as large SVGs can harm rendering performance.

VII. Base64 – A Special Application Format

Base64 encodes binary data (e.g., image bytes) into 64 printable characters, converting it to text.

For example, embedding images directly in HTML uses this string instead of a URL, downloading the image with the HTML:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFU"/>

This enables binary data transmission over text-based protocols.

1. No extra HTTP requests for images.
2. Suitable for tiny/simple images, not medium/large ones.
3. No cross-domain issues; avoids caching, headers, or cookies problems.

VIII. The Smart Era – AI-Driven Future Formats