Details
New Feature
Major
Description
The Device themes use only a few small images for various components. Encoding the image data via base64 encoding has its pros and cons.
Pros
- images are loaded immediately with the style sheet
- reduces the total number of http request/responses
Cons
- images encoded are about 30% larger when encoded in base64, offset using gizip but still bigger
- managing the base64 encoded images is a bit tedious.
The initial tests show that style sheets even when compressed are about double the previous sized.
Fore example using the Iphone Theme:
Pre base64, iphone-min.css 28KB
Post base64, iphone-min.css 59 KB
The total images for the the iphone-min.css theme amount to 18KB. That said there are about 2.4KB of images that are duplicate in the base64 style sheet. However when I look at these numbers the cost of base64 doesn't seem to make it worth while.
The JSP component build script balloons to 38 sec from 9 seconds when compressing base64 encoded CSS files which is also an interesting fact. Most of our themes currently 7 images so we need to justify if the cost of the extra http requests is greater or less then a larger CSS file.
Pros
- images are loaded immediately with the style sheet
- reduces the total number of http request/responses
Cons
- images encoded are about 30% larger when encoded in base64, offset using gizip but still bigger
- managing the base64 encoded images is a bit tedious.
The initial tests show that style sheets even when compressed are about double the previous sized.
Fore example using the Iphone Theme:
Pre base64, iphone-min.css 28KB
Post base64, iphone-min.css 59 KB
The total images for the the iphone-min.css theme amount to 18KB. That said there are about 2.4KB of images that are duplicate in the base64 style sheet. However when I look at these numbers the cost of base64 doesn't seem to make it worth while.
The JSP component build script balloons to 38 sec from 9 seconds when compressing base64 encoded CSS files which is also an interesting fact. Most of our themes currently 7 images so we need to justify if the cost of the extra http requests is greater or less then a larger CSS file.
Activity
There does not appear to be a compelling argument for applying this technique in 1.1 Final, but it should be considered for certain cases in 1.2 beta.
Show
Ted Goddard
added a comment - There does not appear to be a compelling argument for applying this technique in 1.1 Final, but it should be considered for certain cases in 1.2 beta.
| Field | Original Value | New Value |
|---|---|---|
| Fix Version/s | 1.2 Beta [ 10344 ] | |
| Assignee | Steve Maryka [ steve.maryka ] | Patrick Corless [ patrick.corless ] |
| Fix Version/s | 1.3 Beta [ 10373 ] | |
| Fix Version/s | 1.2 Beta [ 10344 ] |
| Fix Version/s | 1.4 Beta [ 10874 ] | |
| Fix Version/s | 1.3 Beta [ 10373 ] |
Closing do to inactivity.
Show
Patrick Corless
added a comment - Closing do to inactivity.
| Status | Open [ 1 ] | Resolved [ 5 ] |
| Resolution | Won't Fix [ 2 ] |
To encode an image into base 64 the following side works well, http://www.motobit.com/util/base64-decoder-encoder.asp
And encoding the base64 for a URL, http://ostermiller.org/calc/encode.html
A typical base64 enoded url looks as follows, the can be no white space in the url declaration.
.mobi-menu-btn-btn span
{ /*background: url('down-arrow.png') no-repeat right;*/ background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAANCAYAAABlyXS1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ%0AbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp%0Abj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6%0AeD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0%0AMDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo%0AdHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlw%0AdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAv%0AIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RS%0AZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpD%0AcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNl%0ASUQ9InhtcC5paWQ6MDhENDkwMEM0RDBBMTFFMTgxM0NBMUM2M0Q4MDQ2RDQiIHhtcE1NOkRvY3Vt%0AZW50SUQ9InhtcC5kaWQ6MDhENDkwMEQ0RDBBMTFFMTgxM0NBMUM2M0Q4MDQ2RDQiPiA8eG1wTU06%0ARGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowOEQ0OTAwQTREMEExMUUxODEz%0AQ0ExQzYzRDgwNDZENCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowOEQ0OTAwQjREMEExMUUx%0AODEzQ0ExQzYzRDgwNDZENCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1w%0AbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsUW0wAAAACDSURBVHjaYvz//z8DLsDEgAeQL8mikLb4%0A/6PbVzAk5FR1GBgYHcr%2B//j16//PX7/B%2BPvPn/%2B/fPv%2BHyTOIianysDpVsNwbnIiw9%2B/fxn%2BALFl%0A8VIGkDgDyCvCUTPAKldv2gmmQXyQOCPMn0JAgQ/P7zMISCoyvFuWwQgSYxyAQAAIMACeNkcw015n%0AqQAAAABJRU5ErkJggg%3D%3D') no-repeat right; padding-right: 15px; }