Current time: 11-14-2019, 04:50 PM Hello There, Guest! (LoginRegister)

Post Reply 
 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Inline Images using data URL
06-18-2010, 12:02 AM
Post: #1
Inline Images using data URL
Just learned about this awesome technique : http://www.websiteoptimization.com/speed...ne-images/

I have few CSS images which use external images which cant be sprited cause they are repeated ones... using inline images within my CSS will reduce number of requests by 3 or 4 (and 6 more as im adding more css images)

Unfortunately IE7 and below doesnt support it. So i plan on serving regular css to ie7 and below and use the css with inline images for other browsers using conditional comments...

Any problems I should take note of in advance before i start?

since only ~27% of my traffic uses internet explorer 7 and below, I should see a vase improvement...

cdnplanet.com: We help you select the right CDN
Visit this user's website Find all posts by this user
Quote this message in a reply
06-18-2010, 01:39 AM
Post: #2
RE: Inline Images using data URL
FWIW, IE7 and below support MHTML which works a lot like data URI's (even have some benefits over data URI's) : http://www.phpied.com/mhtml-when-you-nee...and-under/
Visit this user's website Find all posts by this user
Quote this message in a reply
06-18-2010, 03:20 AM
Post: #3
RE: Inline Images using data URL
MHTML looks interesting...

so did i understand this correctly? I gotta implement BOTH mhtml and data uri ... ie < 8 will use mhtml and others will use data uri automagically?

cdnplanet.com: We help you select the right CDN
Visit this user's website Find all posts by this user
Quote this message in a reply
06-18-2010, 03:22 AM
Post: #4
RE: Inline Images using data URL
That's one way to do it but you'd be sending down twice as much image data (though it should compress well since it's the same image twice). Another way would be to do it dynamically based on the user agent.
Visit this user's website Find all posts by this user
Quote this message in a reply
06-18-2010, 04:17 AM
Post: #5
RE: Inline Images using data URL
just did it using the mhtml method...

interesting... Chrome needs to have the '==' part at the end of the base64 encodings or else it wont work.... doesnt '==' mean a newline?

cdnplanet.com: We help you select the right CDN
Visit this user's website Find all posts by this user
Quote this message in a reply
06-20-2010, 12:26 AM
Post: #6
RE: Inline Images using data URL
here is a quick python script to automagically generate the new css with the assets embedded directly into it...

at the moment only does the data uri method ,.. will add mhtml also ... requires more work....

usage :-

./css-bundle.py <source css file url> <final destination>

NOTE: couldnt upload .py file, so its attached as .txt ... rename to .py and make it executable...


Attached File(s)
.txt  css-bundle.txt (Size: 1.5 KB / Downloads: 360)

cdnplanet.com: We help you select the right CDN
Visit this user's website Find all posts by this user
Quote this message in a reply
06-20-2010, 07:53 AM
Post: #7
RE: Inline Images using data URL
Nice, thanks. I just updated the forums to allow .py attachments as well.
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread: 1 Guest(s)