CODEWITHSUNDEEP
javascripthtmlbytesrc
user4532193
user4532193

Reputation:

JavaScript - Get size in bytes from HTML img src

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.

Upvotes: 17

Views: 32900

Answers (2)

Juan Jos&#233; Rueda
Juan Jos&#233; Rueda

Reputation: 91

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

Upvotes: 9

Punit S
Punit S

Reputation: 3247

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.

Upvotes: 22

Related Questions