Including base64 gzipped stylesheetsimages in javascript? - Stack Overflow

admin 管理员组

文章数量: 1086019

I know you can include css and images, among other file types, which have been stored in base64 form within a javascript file. However, those are decently huge... and gzipped, they shrink down a LOT, even with the ~33% overhead from base64 encoding.

Non-gzipped, images are data:image/gif;base64, data:image/jpeg, data:image/png, and css is data:text/css;base64. What mime type can/should I be using, then, to include css or image data URIs which are gzipped? (Or if gzip+base64 can't work, is there any other pression I can do to bring down the string's size, while still keeping the data stored within the javascript?)

..edit.. I think the question is being misunderstood. I am not asking if I should include gzipped base64 strings within javascript. Yes, I know it's best, in most cases, to gzip the javascript and other files on the server end. But that is not applicable for a userscript; a userscript has no server, and consists of only a single file. Firefox allows a @require directive, but Opera and Chrome do not, and local file security issues e into play with loading any local files. Thus anything needed by the script has to be either: 1) on the web (slow) or 2) embedded in the userscript (big).

Now this question assumes that big is preferable to slow, but that big does not have to mean we totally ignore just how big; if it can be smaller, that's an improvement.

So assuming that a base64 string is embedded in javascript, the question is how to make it into something meaningful.

Either:

1) atob() can convert raw base64-encoded gzip to raw gzip within javascript. (atob does not need to know the mediatype). The question then would be how to depress that raw gzipped css or image file so that the resulting output can be fed into the document.

or 2) given the proper mediatype, browsers at least theoretically (per the datauri RFC) should be able to load any file directly from a datauri. "" is sufficient to load a non-gzipped css stylesheet. The question here would be what link type attribute and datauri mediatype bination should work (and which browsers would it work for)? Preferably, for a userscript, this would be a bination that works in Opera, FF, and Chrome.

I know you can include css and images, among other file types, which have been stored in base64 form within a javascript file. However, those are decently huge... and gzipped, they shrink down a LOT, even with the ~33% overhead from base64 encoding.

Non-gzipped, images are data:image/gif;base64, data:image/jpeg, data:image/png, and css is data:text/css;base64. What mime type can/should I be using, then, to include css or image data URIs which are gzipped? (Or if gzip+base64 can't work, is there any other pression I can do to bring down the string's size, while still keeping the data stored within the javascript?)

..edit.. I think the question is being misunderstood. I am not asking if I should include gzipped base64 strings within javascript. Yes, I know it's best, in most cases, to gzip the javascript and other files on the server end. But that is not applicable for a userscript; a userscript has no server, and consists of only a single file. Firefox allows a @require directive, but Opera and Chrome do not, and local file security issues e into play with loading any local files. Thus anything needed by the script has to be either: 1) on the web (slow) or 2) embedded in the userscript (big).

Now this question assumes that big is preferable to slow, but that big does not have to mean we totally ignore just how big; if it can be smaller, that's an improvement.

So assuming that a base64 string is embedded in javascript, the question is how to make it into something meaningful.

Either:

1) atob() can convert raw base64-encoded gzip to raw gzip within javascript. (atob does not need to know the mediatype). The question then would be how to depress that raw gzipped css or image file so that the resulting output can be fed into the document.

or 2) given the proper mediatype, browsers at least theoretically (per the datauri RFC) should be able to load any file directly from a datauri. "" is sufficient to load a non-gzipped css stylesheet. The question here would be what link type attribute and datauri mediatype bination should work (and which browsers would it work for)? Preferably, for a userscript, this would be a bination that works in Opera, FF, and Chrome.

• javascript
• base64
• mime-types
• data-uri
• data-uri-scheme

Share Improve this question Follow edited Jan 28, 2012 at 22:10 BrianFreud asked Jan 28, 2012 at 20:56 BrianFreudBrianFreud 7,48466 gold badges3737 silver badges5151 bronze badges 13

• the base64 encoding has 33% overhead. – Dan D. Commented Jan 28, 2012 at 21:00
• 1 Fixed. :) I don't really care about the overhead's size; for a userscript, size isn't as important to me as keeping everything to one single distributable file. But it'd be nice to keep the base64 blobs as small as I can, hence this Q. – BrianFreud Commented Jan 28, 2012 at 21:04
• Wouldn't you want to just include the base64 in your JS, and gzip the JS? – sdleihssirhc Commented Jan 28, 2012 at 21:06
• if size is not that important for you, why do you want to reduce vhe base64 blob size: is it for development readability? – Mathieu Commented Jan 28, 2012 at 21:25
• Well, that, and also just sheer js file bloat. It still has to be parsed in, right? So if I have several icons, and a stylesheet or two, that can easily be 50 or 60k of base64. gzipped, then base64, it's significantly less: (real world example) 9917 bytes of base64 from text source, vs 3306 bytes of base64 from gzipped text source. – BrianFreud Commented Jan 28, 2012 at 21:31

 |  Show 8 more ments

1 Answer 1

Sorted by: Reset to default 7

In HTTP, pression is most often only applied for transmission to reduce the payload that is to be transmitted. This is done by the Content-Encoding header field.

But the data URL scheme is very limited and you can only specify the media type:

dataurl    := "data:" [ mediatype ] [ ";base64" ] "," data

Although you could use a multipart message, most user agents don’t support them in data URLs. It would also be questionable whether the additional data to describe such a multipart message wouldn’t be more than the data you safe by pressing the actual payload.

So pressing the data in a data URL is possible in theory but impracticable. It is better to simply press the whole document the data URL is embedded in.

本文标签： Including base64 gzipped stylesheetsimages in javascriptStack Overflow