CODEWITHSUNDEEP
javascripthtmlgoogle-chromebrowser
chadoh
chadoh

Reputation: 4432

When trying to download inline images in Chrome, what is the file size?

I am generating a GIF in the browser, and so the only link to it I can use is an inline data URL. (Like data:image/gif;base64,...)

I want to allow the user to download the GIF they created. To make it as easy as clicking on a link, I am using an a[download] like so:

<a download="GIF" href="data:image/gif;base64,...">Download</a>

With small files, this opens my MacOS "save as" dialog. With this GIF, it does not. Nothing happens when I click on the link, except that the Chrome icon changes to look like this:

chrome icon with empty download indicator

When I right-click on the GIF and select "save image as", I can save it just fine. This allows me to see that the GIF is a whopping 3MB.

I have checked with a large file linked to in the usual fashion, and the a[download] link works just fine. This seems to only be a problem with inline, data-URL files.

Is there a file size limit?

Bonus questions:

Upvotes: 0

Views: 1182

Answers (1)

chadoh
chadoh

Reputation: 4432

TL;DR: The data-url size limit is 2 MiB. See this demo.

--

This means that the file size is a little smaller than that, as a base64-encoded image is about 37% larger than the original.

Note also that it's a 2 Mebibyte limit, hence the "2 MiB" with the little "i". As explained here, this means the limit is 2 * 2^20 = 2,097,152 bytes, or 2.097 of the familiar base-ten megabytes, MB.

As shown in the demo, this translates to a 1.568 MB file downloading just fine, but Chrome failing to download a 1.581 MB file.

  • Why does Chrome do this? Not sure. Seems like it might be a bug.
  • Workarounds: Not sure. You could try to use URL.createObjectUrl as @roland-starke suggests, or perhaps open the data URL in a new tab

Upvotes: 1

Related Questions