JavaScript - Get size in bytes from HTML img src

Question

I would like to know how to get the size in bytes from the "src" from an "img" tag with HTML/JS.

<img src="https://ofbuckleyandbeatles.files.wordpress.com/2011/01/testpattern.gif"/>

In the above example I would basicly want to know how big "testpattern.gif" is (in bytes).

Thanks in advance.

Solution 1

Well, this is 2017 and you can now use Resource Timing API to extract an image's transferSize, encodedBodySize, decodedBodySize within javascript:

Below is the code to access size information for all the imgs on a page (see the caveat to all below):

var imgElems = document.getElementsByTagName('img');
for ( var i=0, len = imgElems.length; i < len; i++ ) 
{
    var url = imgElems[i].src || imgElems[i].href;
    if (url && url.length > 0)
    {
        var iTime = performance.getEntriesByName(url)[0];
        console.log(iTime.transferSize); //or encodedBodySize, decodedBodySize
    }
}

• Make sure you run the above code after document onload (to be sure images are loaded)
• Due to CORS, timing information for images coming from a different domain may not be available (unless the different domain's server has set Timing-Allow-Origin HTTP response header)
• Be sure resource timing api is available for the browser(s) you are targetting : http://caniuse.com/#feat=resource-timing
• Make sure you get a grasp of the difference between transferSize, encodedBodySize, decodedBodySize to be sure you use the right size attribute.

Solution 2

Sadly the proposed solution does not work since the returned value does not match the image actual size.

Assuming you are using a URL you can do the following:

const fileImg = await fetch(URL_TO_IMG).then(r => r.blob());

This will get the resource through HTTP and then returns the full binary as a blob object, then you can access its properties including its size in bytes as:

fileImg.size

Comments

[Blaatpraat]

stackoverflow.com/questions/11442712/… You can just fetch the width and the height from the "img" tag.

[Admin]

can I calculate the size in bytes (kb,mb,gb, etc.) with just the width and height?, and if so how?

[T.J. Crowder]

@Blaatpraat: The question isn't about width and height, it's about size in bytes.

[Jamiec]

possible duplicate of Determining image file size + dimensions via Javascript?

[Blaatpraat]

My bad, was too quick. stackoverflow.com/questions/4552369/… and stackoverflow.com/questions/1310378/… are 2 solutions.

[emersonthis]

This is good API to discuss, but the code above wont' work as written. getEntriesByName() expects a second parameter. And I don't see any image entries in performance.getEntries() by default.

[Punit S]

Second parameter for getEntriesByName is optional. Ref : developer.mozilla.org/en-US/docs/Web/API/Performance/… And the code above uses document.getElementsByTagName to first get image tags (for their urls)

[Admin]

Does it work on document.getElementsByTagName('script') or other than img?

[Owyn]

all three parameters are zero for images in latest firefox if the image is on a sub-domain (most of the cases it is so), so pretty much useless sadly

[Pangamma]

Cors is such a pain.

[Ivan]

Just love these one-liner solutions. +1