base64 Images

Todd1 · August 30, 2012, 12:49am

I just saw this Coda 2 plugin for creating base64 images http://tinyurl.com/8byevqu. What’s the benefit?

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · August 30, 2012, 12:51am

You can encode simple tiny images directly in your CSS, saving an image hit. (Each connection between the browser and the server has a setup/teardown cost, sometimes larger than the image itself.)

Walter

On Aug 29, 2012, at 8:49 PM, Todd wrote:

I just saw this Coda 2 plugin for creating base64 images http://tinyurl.com/8byevqu. What’s the benefit?

Todd
http://xiiro.com

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Todd1 · August 30, 2012, 12:59am

The operative word being “simple”. To be used with discretion then?

Todd

On Aug 29, 2012, at 7:51 PM, Walter Lee Davis email@hidden wrote:

You can encode simple tiny images directly in your CSS, saving an image hit. (Each connection between the browser and the server has a setup/teardown cost, sometimes larger than the image itself.)

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · August 30, 2012, 2:56am

I wouldn’t start with anything much over 64k total. And it looks really awful in your CSS, so if you care about the look of things, I would consider looking at sprites before you try this. Oh, and IE < 7 or 8 doesn’t like it too much, I think.

Walter

On Aug 29, 2012, at 8:59 PM, Todd wrote:

The operative word being “simple”. To be used with discretion then?

Todd

On Aug 29, 2012, at 7:51 PM, Walter Lee Davis email@hidden wrote:

You can encode simple tiny images directly in your CSS, saving an image hit. (Each connection between the browser and the server has a setup/teardown cost, sometimes larger than the image itself.)

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · August 30, 2012, 3:11am

Try adding this class to a line of text

gist.github.com

https://gist.github.com/walterdavis/3521942

gistfile1.css

.waiting {
  background: url("data:image/gif;base64,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") no-repeat left center;
  padding-left: 20px;
}

I just tried this now on a CMS I’m working on, when a two-stage picker is being loaded by JavaScript, I indicate that it’s busy this way. The original was a 2K animated GIF. Base64 encoding makes it a little larger than that, but it gets cached in the CSS.

Walter

On Aug 29, 2012, at 8:59 PM, Todd wrote:

The operative word being “simple”. To be used with discretion then?

Todd

On Aug 29, 2012, at 7:51 PM, Walter Lee Davis email@hidden wrote:

You can encode simple tiny images directly in your CSS, saving an image hit. (Each connection between the browser and the server has a setup/teardown cost, sometimes larger than the image itself.)

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Todd1 · August 30, 2012, 3:19am

Yikes! I see your point. That’s a whole lot of ugly.

Todd

Walter Lee Davis wrote:

Try adding this class to a line of text

gist:3521942 · GitHub

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Tim3 · August 30, 2012, 8:33am

I used base64 images in the submission page for the Site Mapper Action (Freeway 5.5) as I knew the target browser would support them (no IE here) as well as eliminate any issues with the Action incorrectly handling file attachments as we’ve seen in the past.

Personally I like the idea of small images like this in the CSS as (for one thing) certain email clients will still load the image even if external images have been blocked by the user.
Regards,
Tim.

On 30 Aug 2012, at 01:49, Todd wrote:

What’s the benefit?

Experienced Freeway designer for hire - http://www.freewayactions.com

offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options