You should noticed that we have set the CSS minifier before our base64ImageEncoder. 64Bundle.filepostprocessors=base64ImageEncoder 64Bundle.bundlepostprocessors=cssminify,base64ImageEncoder If the .default is set to true, by default all the CSS images will be encoded, except if the are followed by the annotation : jawr:base64-skip The property .default will define if the postprocessor should encode the CSS image in base64 by default or not. Įnable/disable the base64 image encode on generated sprite image Integer [ The maximum size (in bytes) of the image to encode in base64 defaultĮnable/disable the base64 image encoding by default The id of the postprocessor to use is base64ImageEncoder.\ There are 3 properties related to the base64 encoding available in the Jawr configuration : Property name This means that by just setting the correct postprocessor in your bundle, Jawr will generate the content of the CSS for the different browsers. Since version 3.3, Jawr is able to generate variant bundles from postprocessors. Otherwise Jawr will set the reference to the CSS bundles and will let a place holder for the web application URL. The values of these properties will be used to reference the absolute path of the CSS bundles. : The context path of the application for HTTP - .override : The context path of the application for HTTPS When you generate the Jawr bundles at build time, if you have defined absolute paths for the following properties : The resolution of the absolute path will be done at runtime for the first request, then it will be put in cache. For bundles generated at server startup.So Jawr will use a placeholder named JAWR_BUNDLE_PATH in the generated bundle. As you know, Jawr generates the bundle at server startup or at build time.Īt this stage, Jawr doesn’t know the application absolute URL. How Jawr handles the absolute URL for MHTML referencesĪs we’ve seen, we must use absolute URL to reference the current CSS which contains the MHTML content.Otherwise IE will raise an warning saying that you have SSL and non SSL content in your page. logo - the identifier of our resource in the MHTML part.Īs we are using absolute URL, Jawr will generate a bundle version for HTTP requests and another one for HTTPS ones.
If we take a look at the image URL, we have: Then for each resource, we have some information: - Content-Type : the content type - Content-Transfer-Encoding : the encoding used for this resource - Content-Location : the property which will allow us to reference this particular resource in the CSS file In the first line, we define the boundary used to separate the declaration of each resource. Here we can see that the MHTML part is set at the top of the file in a commented section. Here is an example of the base64 encoding of a CSS image reference:Ĭontent-Type: multipart/related boundary="_ANY_SEPARATOR" This will increase the size of your CSS files, but will reduce drastically the number of HTTP requests, as there will be no HTTP request required for your images. So your images will be embedded in your CSS. It means that in you generated bundle, the URL references to the image will be replaced by the content of your images. There is another way to reduce the number of HTTP requests by encoding the content of the images in base64. So, with sprite all the reference of the images defined in your CSS will point to one or a few sprites, which will reduce the number of HTTP requests. Please take a look at the Jawr sprite documentation Jawr already provides a way to handle this case.
One of the way to achieve this is to create image sprites, which combines multiple images in a single image.
#Base64 encoding size increase how to#
The goal of this tutorial is to explain how to set up Jawr to generate base64 encoded images in the CSS bundles.Īs you know, one of the main rules to increase performance in your web application is to reduce the number of HTTP requests. How to use Google Closure Compiler with Jawr How to generate base64 images in CSS with Jawr.Jawr strict mode - Illegal bundle request handler
0 kommentar(er)
