CODEWITHSUNDEEP
aem
Shivani Garg
Shivani Garg

Reputation: 107

Adobe Granite HTML Library Manager

In Adobe Granite HTML library Manager, How "max data uri size" works? I tried an image with a lot of data size in the configuration.But there is no change. Can someone tell me how this configuration works in AEM?

Upvotes: 0

Views: 511

Answers (1)

Alexander Berndt
Alexander Berndt

Reputation: 1728

The minification of css-files can auto-inline small resources (e.g. icons). The config-parameter htmllibmanager.maxDataUriSize steers maximum size for resources to be auto-inlined.

Here is an example css:

#tiny-icon {
    height: 32px;
    width: 32px;
    background-image: url("tiny-icon.gif");
}

My sample-icon has a size of 360 bytes. With maxDataUriSize <= 360, the minified css file will look:

#tiny-icon{height:32px;width:32px;background-image:url("test-alex/tiny-icon.gif")}

With maxDataUriSize > 360, the icon will be auto-inlined as data-url:

#tiny-icon{height:32px;width:32px;background-image:url("data:image/gif;base64,R0lGODlhIAAgAIQQAEeczSqmzligoGmarl6khnCdy3CpaBjo9Gbuk4HxcbLf1Gb35tnhhtna19T2NO/w7////////////////////////////////////////////////////////////////yH5BAEKABAALAAAAAAgACAAAAXlYCGOZCkOhBGsgOm+I6qycF3Ka9DaPErkO17NBxSSHshHY8lwOA6LhWJJpdaS1OYzOq1Wr0qmEyr1Vh/XrCNB7pobyJqazX0vk/JGk162J9EwemttdnB/NXuEfn+ALgKDdYuMLwIGfG5mjHgjAiKVBIpvmpsFlaUGBACRoqNKnqifAAF9rJpWsaiyAZherVWxAQK6BYW+WbksKyKSjFVNqcrKy5mjzmvDBTojvcZibNIm3LZzUAGBd92CCGR5rWFi61xy7tbxC0tGLwOVwuD5JvsM9DP3z0XAgQUN8sOWkMRBhjBCAAA7")}

If you want to test it by yourself, please be aware that client-libs are cached. Either delete the cache in /var/clientlibs, or update the css file. Otherwise the configuration changes will have no effect, as you will still see the cached version of the clientlib.

Upvotes: 3

Related Questions