0

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:

  • Why is there a file size limit?
  • Is there a workaround?
chadoh
  • 4,343
  • 6
  • 39
  • 64
  • https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs#Common_problems **Length limitations**: _Although Firefox supports data URLs of essentially unlimited length, browsers are not required to support any particular maximum length of data. For example, the Opera 11 browser limited URLs to 65535 characters long which limits data URLs to 65529 characters (65529 characters being the length of the encoded data, not the source, if you use the plain data:, without specifying a MIME type)._ – mplungjan Nov 17 '17 at 14:40
  • Instead of a data URL you could try to use [URL.createObjectURL(object)](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL) – Roland Starke Nov 17 '17 at 14:46
  • Both of these would have made good _answers_ instead of adding them as _comments_, in which case I could properly respond to each. The Length Limitations, if I'm not mistaken, refer to various browsers' abilities to use long data URLs _at all_, whereas Chrome allows humongous ones except in _this particular case_. `URL.createObjectURL` fails with the message "Failed - No file". – chadoh Nov 20 '17 at 15:08

1 Answers1

1

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
chadoh
  • 4,343
  • 6
  • 39
  • 64