Optimizing Images On The World's Top 100 Websites

The world’s most visited websites attract staggering volumes of traffic, delivering petabytes of data to users worldwide. Given that images constitute over 60% of today’s Internet traffic, it’s reasonable to expect the top 100 websites to prioritize lightweight image content. After all, optimizing images could potentially save millions of dollars in annual bandwidth and storage expenses. Let’s delve into how visual content is managed on these influential platforms.

Methodology

The most reliable method to retrieve all images from these websites is by employing a real browser on a desktop machine. Consequently, we manually crawled the websites in this test and exported all network activity as HAR (HTTP Archive) files. While Puppeteer with the stealth plugin and an auto-rotating proxy typically yields satisfactory results for most use cases, we wanted to ensure absolute accuracy in capturing all visuals. After all, the quality of test results is contingent upon the integrity of the input data.

The collected HAR files were then loaded into our test application and parsed. Subsequently, we extracted all requests with a matching image/* MIME type, filtering out those with a body length of less than 100 bytes, which primarily consisted of 1x1 GIF tracking pixels.

A notable advantage of utilizing HAR files is that all binary responses are already base64-encoded within them. Thus, we simply needed to load them into temporary buffers and save the binaries to disk:

(async () => {
    const src = Buffer.from(response.content.text, "base64");

    try {
        await fs.writeFile(`./sites/${site_name}/images/${file_name}`, src);
    } catch(err) {
        console.error(err);
    }
})();

Test Results

We processed all the source images through the Optidash API. Overall, we collected and optimized 8353 images, achieving an impressive 32.61% reduction in the initial file size.

The optimization and recompression outcomes were quantified using the following formula:

100 * (original_size - optimized_size) / original_size

Popular Image Formats

JPEG maintains its dominance as the most commonly utilized image format, commanding a 53% share, followed by PNG at 23% and WebP at 16%. It’s noteworthy that certain websites, such as StackOverflow, Amazon AWS, and Atlassian, heavily favor SVGs, employing them almost exclusively.

JPEG Images

• The most commonly used (24% of all the JPEGs) encoding quality is 87 followed by 77 (8.6%) and 100 (8.3%).
• Only 31% of JPEG images use progressive coding.
• 4:2:0 is the most commonly used sampling scheme (69%) followed by 4:4:4 (30%) and 4:2:2 (1%)

The statistics above reveal significant potential for further reducing the file size of JPEG images. By implementing progressive coding alongside the 4:2:0 sampling scheme and determining the ideal Q value based on each image, substantial savings can be achieved.

The Rise of WebP images

It’s encouraging to see that exactly 33.33% of the top 100 websites prioritize WebP as their primary image format. However, serving WebP images is just one part of the equation; optimizing them is equally crucial. We’ve managed to enhance all WebP content further using a near-lossless algorithm, resulting in significant savings.

Interesting Stats

• The total weight of visual content across all 100 websites is 228.96MB.
• The website with the largest number of images (397) is Rakuten.
• The website with the heaviest visual content (11.1MB) is Sina.
• The top five heaviest images were served on Sina (3.7MB), Reddit (3.6MB), IMDB (3.0MB), Office (2.8MB) and BBC (1.9MB).

Detailed Results

Below we present a detailed list of the top 100 websites along with optimization results. Please reach out to us if you want to get access to the dataset used for compiling the following table.