Utilizing the Performance Resource Timing API

The Performance interface allows developers to inspect various metrics of loaded resources. When the browser fetches assets like images, scripts, or stylesheets, it automatically generates a PerformanceResourceTiming object.

const assetUrl = "https://example.com/image.jpg";
const resourceMetrics = window.performance.getEntriesByName(assetUrl)[0];

if (resourceMetrics) {
    console.log("Compressed Size:", resourceMetrics.encodedBodySize);
    console.log("Uncompressed Size:", resourceMetrics.decodedBodySize);
    console.log("Transfer Size:", resourceMetrics.transferSize);
}

Considerations for Performance API

A common issue when using this method is receiving a value of 0 for size metrics. This typically happens with cross-origin resources. To expose size informasion for cross-origin assets, the server must include the Timing-Allow-Origin HTTP response header. Without this header, the browser restricts access to sensitive timing and size data for security reasons.

Fetching Data as a Blob or ArrayBuffer

If the Performence API is unavailable or returns inaccurate data due to CORS restrictions, you can programmatically fetch the image data. This method is highly accurate but may result in a redundant network request if the asset is not correctly cached.

Using the Fetch API

async function getImageMetadata(url) {
    try {
        const response = await fetch(url);
        const blobData = await response.blob();
        console.log("File size in bytes:", blobData.size);
        return blobData.size;
    } catch (error) {
        console.error("Fetch failed:", error);
    }
}

Using XMLHttpRequest

For environments where fetch is not preferred, XMLHttpRequest provides similar functionality by setting the responseType to arraybuffer.

function getByteLength(url) {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "arraybuffer";
    
    xhr.onload = function() {
        if (this.status === 200) {
            const buffer = this.response;
            console.log("Byte length:", buffer.byteLength);
        }
    };
    
    xhr.send();
}

Conversion via HTML5 Canvas

This approach involves drawing the image onto a canvas element and then exporting it as a Blob. However, this method is generally discouraged for calculating original file size because the re-encoding process (e.g., converting to JPEG or PNG) will likely result in a different file size than the original source.

function estimateSizeViaCanvas(imgElement) {
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    
    canvas.width = imgElement.naturalWidth;
    canvas.height = imgElement.naturalHeight;
    
    context.drawImage(imgElement, 0, 0);
    
    canvas.toBlob((blob) => {
        console.log("Re-encoded size:", blob.size);
    }, "image/jpeg", 1.0);
}

Because toBlob applies compression and encoding logic, the resulting sizee is an approximation of the canvas state rather than the source file's binary size. Use the Fetch or Performance API for reliable data metrics.