Get Image size (not dimension) inside image tag using javascript

Question

I have an <img> tag which is filled with dynamic src attribute. I would like to display the image size (in bytes) upon image load using javascript/jQuery.

I tried using the below. But, it returns zero in all 3 properties.

$('#img').on('load',
                function() {
                    var imgUrl = $(this).attr("src");
                    var imgPerf = performance.getEntriesByName(imgUrl)[0];
                    console.log(Math.round(imgPerf.decodedBodySize)); // returns 0
                    console.log(Math.round(imgPerf.encodedBodySize)); // returns 0
                    console.log(Math.round(imgPerf.transferSize)); // returns 0
                });

Is there any other possible ways to get the image size value?

FYI, the images are loaded from different domain.

The problem with "image size" is that it will depend on the compression, so the file size and the image size are not always the same thing. — fdomn-m
– fdomn-m, Commented Feb 4, 2022 at 13:34

Xcorp · Accepted Answer · 2022-02-04 13:32:15Z

1

if you have image url you can try this:

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 Feb 4, 2022 at 13:32

Xcorp

211 silver badge4 bronze badges

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

1 Comment

fdomn-m Over a year ago

You can also use this to only load the image once (rather than use src= to have the browser load it then re-load it to get the size) - see : stackoverflow.com/a/44069294/2181514

Collectives™ on Stack Overflow

Get Image size (not dimension) inside image tag using javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related