Image file size from data URI in JavaScript

Question

I am not sure it's even possible but - can I get the image file size from data URI?

For example, let's say there is an IMG element where src goes:

src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...

Based on the src, can I get the image file size by using plain JavaScript? (without server request)

Daniel Tran · Accepted Answer · 2017-12-17T05:12:23.800

24

If you want file size, simply decode your base64 string and check the length.

var src ="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP/// yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";

var base64str = src.substr(22);
var decoded = atob(base64str);

console.log("FileSize: " + decoded.length);

edited Dec 17 '17 at 05:12

answered Dec 17 '17 at 05:03

Daniel Tran

6,083
12
25

3

I am pretty much sure the OP means the file size, not the image's dimension. – Deepak Kamat Dec 17 '17 at 05:06
1

what is 22 in var base64str = src.substr(22); ? what does that number indicate? – Tushar Kotlapure Dec 04 '18 at 05:58
4

data:image/gif;base64, we need to exclude that 22 characters – Daniel Tran Dec 04 '18 at 06:01
@DanielTran what about data:image/jpeg;base64 ? – Asheeka K P Jan 07 '19 at 09:26
1

@AsheekaKP it’s not part of the image content. Just metadata – Daniel Tran Jan 07 '19 at 10:47
1

Noticed this doesn't work on jpeg's for me. `ERROR Error: Uncaught (in promise): InvalidCharacterError: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded. Error: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.` – jackofallcode Nov 25 '19 at 09:07
You are a god. Thank you. – mitch Aug 12 '20 at 18:47

AuxTaco · Answer 2 · 2018-12-13T09:15:38.753

If you're okay with a (very good) estimate, the file size is 75% of the size of the base64 string. The true size is no larger than this estimate, and, at most, two bytes smaller.

If you want to write one line and be done with it, use atob() and check the length, as in the other answers.

If you want an exact answer with maximum performance (in the case of gigantic files or millions of files or both), use the estimate but account for the padding to get the exact size:

let base64Length = src.length - (src.indexOf(',') + 1);
let padding = (src.charAt(src.length - 2) === '=') ? 2 : ((src.charAt(src.length - 1) === '=') ? 1 : 0);
let fileSize = base64Length * 0.75 - padding;

This avoids parsing the entire string, and is entirely overkill unless you're hunting for microoptimizations or are short on memory.

This "estimate" is exactly right for my use case. I've tested up to 8 MB animated PNG images created in the browser, and it's correct to the byte for each one I've checked. Also, not parsing the entire string is a big plus as the images get larger. — kevinmicke, Dec 12 '18 at 21:28

score 3 · Answer 3 · answered Dec 17 '17 at 05:14

Your best option is to calculate the length of the base64 string itself.

What is a base64 length in bytes?

You have to convert the base64 string to a normal string using atob() and then check it length, it will return a value that you can say is close to the actual size of the image. Also you don't need the data:image/jpeg;base64, part from the data URI to check the size.

score 3 · Answer 4 · answered Feb 04 '20 at 07:25

3

This is a universal solution for all types of base64 strings based on Daniel Trans's code.

var src ="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP/// yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";

var base64str = src.split('base64,')[1];
var decoded = atob(base64str);

console.log("FileSize: " + decoded.length);

answered Feb 04 '20 at 07:25

Deyl Raytop

51
5

you can just do `var dataStr = src.split(',')[1];` for all dataUri strings – rosmcmahon Jun 25 '20 at 19:36

score 1 · Answer 5 · answered Nov 18 '21 at 02:46

The other solutions make use of atob, which has now been deprecated. Here is an up-to-date example, using Buffer instead.

const src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...";
const base64str = src.split('base64,')[1]; //remove the image type metadata.
const imageFile = Buffer.from(base64str, 'base64'); //encode image into bytes
console.log('FileSize: ' + imageFile.length);

Image file size from data URI in JavaScript

5 Answers5

Linked

Related