0xDECAFBAD

It's all spinning wheels and self-doubt until the first pot of coffee.

RSS icon in CSS & HTML

Found something sick from JWZ on LiveJournal - a CSS-based RSS icon. Believe it or not, it's smaller in bytes than the gif.



XML

shortname=ooocaa

Archived Comments

  • jm
    You have another version on Sylvain's weblog
  • Eric Vitiello
    Actually, in the long run, this is not a smaller version. Because browsers cache the images, the image only gets downloaded once. In the case of the CSS version, at the very least, the contents of the A element, with everything in it must be downloaded each time it's needed. of course, you're going to have to download an A element and the IMG element if you're using a GIF, and thus those are equal - and if you link to the stylesheet externally, that would be properly cached, just as the GIF would be. However, it is STILL more bytes for the CSS version, because you must include the stylesheet via the link element, and there is nothing analagous to that when using the GIF version. So, in conclustion of my rambling, the CSS vesion is still bigger, albeit a nice alternative.
  • Sylvain Carle
    The CSS version is also scalable, when a user has larger or smaller fonts configured, the size changes accordingly. The label (xml) can also be read by search engines and screen readers, it's just text. I think these advantages outweight the size issue.
  • Seth Russell
    Why does the button to a RSS feed show a face of XML instead of a face of RSS ? I mean your pointin to a RSS, why not be as specific as you can?
  • Mark Paschal
    Yet another CSS icon. Image is 505 bytes (429 image plus 76 for each link: <a href="/rss.xml"><img src="/xml.gif" height="36" width="14" alt="XML"></a>). CSS is 360 bytes (260 CSS file, 56 to include it: <style type="text/css">@import "/orangeXml.css";</style>, and 44 for each link: <a class="orangeXml" href="/rss.xml">XML</a>) Conclusion: I just wasted time counting for a difference of 145 bytes. But if you have a page like this, you might go with CSS because it repeats less for each link. It says "XML" because the originator of the image also uses it for another XML format, OPML.
  • Seth Russell
    Well me thinks we need a RSS button more than we need a XML button.
  • Janne Jalkanen
    The PNG version of the XML button takes about 396 bytes. It could probably even be smaller, if you'd optimize the color space properly.
  • Bill
    These have just been denounced by Mr. Winer.