17

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.

  • http://stackoverflow.com/questions/11442712/javascript-function-to-return-width-height-of-remote-image-from-url You can just fetch the width and the height from the "img" tag. – Blaatpraat Feb 10 '15 at 11:09
  • can I calculate the size in bytes (kb,mb,gb, etc.) with just the width and height?, and if so how? –  Feb 10 '15 at 11:10
  • 3
    @Blaatpraat: The question isn't about width and height, it's about size in bytes. – T.J. Crowder Feb 10 '15 at 11:10
  • 2
    possible duplicate of [Determining image file size + dimensions via Javascript?](http://stackoverflow.com/questions/1310378/determining-image-file-size-dimensions-via-javascript) – Jamiec Feb 10 '15 at 11:11
  • My bad, was too quick. http://stackoverflow.com/questions/4552369/how-to-get-image-size-in-bytes-using-javascript and http://stackoverflow.com/questions/1310378/determining-image-file-size-dimensions-via-javascript/1310399#1310399 are 2 solutions. – Blaatpraat Feb 10 '15 at 11:13

2 Answers2

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.
Punit S
  • 3,079
  • 1
  • 21
  • 26
  • 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. – emersonthis Feb 03 '18 at 21:23
  • Second parameter for getEntriesByName is optional. Ref : https://developer.mozilla.org/en-US/docs/Web/API/Performance/getEntriesByName And the code above uses document.getElementsByTagName to first get image tags (for their urls) – Punit S Feb 05 '18 at 06:16
  • Does it work on `document.getElementsByTagName('script')` or other than `img`? –  Jun 18 '19 at 19:46
  • 3
    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 – Owyn Sep 05 '19 at 23:10
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
Juan José Rueda
  • 91
  • 1
  • 2