3 ms·

Speed and size - if you you were using images, you are going to incur an extra HTTP request, while using this method everything needed to draw the logo is alrea

Speed and size - if you you were using images, you are going to incur an extra HTTP request, while using this method everything needed to draw the logo is already at the client-side. In terms of size, the HTML and CSS needed to draw the logo could well be smaller than that needed for an image. In this case the HTML+CSS is around 2.6K (without the Google analytics code), while a screenshot of the logo is around 10K - and the HTML+CSS version will scale to any size without pixilation. Google's Marissa Mayer did a talk about Google's quest for speed a few years back, where she showed that an HTML version of the Checkout icon was faster than an image: http://www.bitcurrent.com/marissa-mayer-at-velocity09-and-googles-quest-for-speed/ http://www.bitcurrent.com/marissa-mayer-at-velocity09-and-go... (about halfway through that article).

joshnh 14y ago
What would you then recommend when needing to support legacy browsers?
- theallan 14y ago
  Heh - it is not without its drawbacks! The Google Checkout icon didn't hit that problem, as they used tables, but certainly in this case I don't see how that could be achieved quite so readily.
- deleted 14y ago
  [deleted]
- ekianjo 14y ago
  For legacy browsers you do not have much choice but a bitmap image. SVG is not supported under IE8, and CSS support is very variable depending on the browser versions as well.
illicium 14y ago
Or you could just use SVG. https://gist.github.com/2b239e5d31ddc82ab660 https://gist.github.com/2b239e5d31ddc82ab660 is 897 bytes (579 gzipped)
- theallan 14y ago
  I should have said that - excellent point!
tfennelly 14y ago
If image loading speed is an issue you can embed the image in the html <img src> as a base64 encoded string.... no remote loading then. That of course is dog ugly ... just say'n it's possible :) An SVG or CSS approach would surely be more maintainable.
sp332 14y ago
A PNG of the same size as the one on that page is only 2.8 kB https://www.dropbox.com/s/6epgslr0olpu2rp/tlogosmaller.png https://www.dropbox.com/s/6epgslr0olpu2rp/tlogosmaller.png

joshnh 14y ago

What would you then recommend when needing to support legacy browsers?

theallan 14y ago
Heh - it is not without its drawbacks! The Google Checkout icon didn't hit that problem, as they used tables, but certainly in this case I don't see how that could be achieved quite so readily.
deleted 14y ago
[deleted]
ekianjo 14y ago
For legacy browsers you do not have much choice but a bitmap image. SVG is not supported under IE8, and CSS support is very variable depending on the browser versions as well.

illicium 14y ago

Or you could just use SVG. https://gist.github.com/2b239e5d31ddc82ab660 https://gist.github.com/2b239e5d31ddc82ab660 is 897 bytes (579 gzipped)

theallan 14y ago
I should have said that - excellent point!

tfennelly 14y ago

If image loading speed is an issue you can embed the image in the html <img src> as a base64 encoded string.... no remote loading then. That of course is dog ugly ... just say'n it's possible :) An SVG or CSS approach would surely be more maintainable.

sp332 14y ago

A PNG of the same size as the one on that page is only 2.8 kB https://www.dropbox.com/s/6epgslr0olpu2rp/tlogosmaller.png https://www.dropbox.com/s/6epgslr0olpu2rp/tlogosmaller.png