Performance Optimization: Image Compression, Loading Strategies, and Format Selection

Introduction

In modern e‑commerce and large‑screen projects, image resources account for a large proportion of first‑screen requests—up to 75% of the 145 initial requests—making image optimization a critical factor for overall website performance.

Binary Bits and Color

Pixels are represented by binary bits; the more bits per pixel, the richer the color palette and the larger the file size. Understanding this relationship is the first step toward effective image optimization.

Image Compression

Compressing images is the most immediate solution. Tools like TinyPNG reduce file size by selectively decreasing the number of stored colors (quantization), converting 24‑bit PNGs to smaller 8‑bit indexed images.

When you upload a PNG file, similar colors are combined (quantization), allowing 24‑bit PNGs to become much smaller 8‑bit indexed color images.

Image Formats

JPEG / JPG

Advantages: high compression ratio, adjustable quality, supports up to 16 million colors.

Disadvantages: lossy compression leads to noticeable artifacts on vector graphics, logos, or high‑contrast images; does not support transparency.

Typical use cases: large background images, carousel images, and preview pictures on e‑commerce sites.

PNG‑8 vs PNG‑24

PNG is a lossless bitmap format.

PNG‑24 offers full color depth and alpha transparency but results in larger files.

PNG‑8 provides lossless compression with smaller size, suitable for simpler graphics and icons.

SVG

Scalable Vector Graphics is an open‑standard XML‑based vector format. It scales without quality loss and can be styled via CSS (e.g., fill , font-size ), making it ideal for icon fonts.

Pros: infinite scalability, programmable.

Cons: limited browser support (IE8 needs a plugin) and slower rendering for complex images.

Base64

Base64 encodes binary data into ASCII characters, allowing images to be embedded directly in HTML or CSS, reducing HTTP requests for tiny icons.

Drawbacks: encoded size grows by ~33% (4/3), making it unsuitable for large images and potentially harming rendering performance.

WebP

WebP supports both lossy and lossless compression, offers smaller file sizes, and includes alpha transparency.

Drawback: limited browser compatibility, often used together with JPEG/JPG as a fallback.

OSS + CDN

Storing images in Object Storage Service (OSS) and delivering them via a Content Delivery Network (CDN) moves resources closer to users, reduces server load, and enables caching, solving the problems of large bundled assets and regional latency.

Lazy Loading

When the first‑screen contains many images, lazy loading defers image requests until they enter the viewport, using placeholders or skeleton screens in the meantime.

window.onload = function () {
    // Get all img elements
    var imgs = document.querySelectorAll('img');
    // Get distance from top of the page
    function getTop(e) { return e.offsetTop; }
    // Lazy load implementation
    function lazyload(imgs) {
        var h = window.innerHeight; // viewport height
        var s = document.documentElement.scrollTop || document.body.scrollTop; // scroll offset
        for (var i = 0; i < imgs.length; i++) {
            if ((h + s) > getTop(imgs[i])) {
                (function(i) {
                    setTimeout(function () {
                        var temp = new Image();
                        temp.src = imgs[i].getAttribute('data-src'); // request once
                        temp.onload = function () {
                            imgs[i].src = imgs[i].getAttribute('data-src');
                        };
                    }, 2000);
                })(i);
            }
        }
    }
    lazyload(imgs);
    // Scroll handler
    window.onscroll = function () { lazyload(imgs); };
};

Conclusion

Performance optimization is an essential hard skill for front‑end engineers. Unlike learning a new framework, it requires continuous experimentation, habit formation, and a keen sense for bottlenecks.

References

Best practice: Using Alibaba Cloud CDN to accelerate OSS access.

Juejin Book: Front‑end Performance Optimization Principles and Practices.

Wallhaven – high‑quality wallpaper source.