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.

stackoverflow.com/questions/11442712/… You can just fetch the width and the height from the "img" tag. — Blaatpraat
– Blaatpraat, Commented Feb 10, 2015 at 11:09
can I calculate the size in bytes (kb,mb,gb, etc.) with just the width and height?, and if so how? — user4532193
– user4532193, Commented Feb 10, 2015 at 11:10
@Blaatpraat: The question isn't about width and height, it's about size in bytes. — T.J. Crowder
– T.J. Crowder, Commented Feb 10, 2015 at 11:10
possible duplicate of Determining image file size + dimensions via Javascript? — Jamiec
– Jamiec, Commented Feb 10, 2015 at 11:11
My bad, was too quick. stackoverflow.com/questions/4552369/… and stackoverflow.com/questions/1310378/… are 2 solutions. — Blaatpraat
– Blaatpraat, Commented Feb 10, 2015 at 11:13

Punit S · Accepted Answer · 2018-02-05 06:15:09Z

22

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.

edited Feb 5, 2018 at 6:15

answered Jul 31, 2017 at 7:18

Punit S

3,2571 gold badge24 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

emersonthis Over a year ago

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 Over a year ago

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)

user985399 Over a year ago

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

Owyn Over a year ago

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

Juan José Rueda · Accepted Answer · 2020-11-12 22:14:21Z

9

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

answered Nov 12, 2020 at 22:14

Juan José Rueda

911 silver badge3 bronze badges

Collectives™ on Stack Overflow

JavaScript - Get size in bytes from HTML img src

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related