• http://www.geekpoweredstudios.com Guillermo Ortiz

    An seo article with street fighter sprites? Full of win! This is definitely something to consider putting into the mobile seo tool belt. Thanks for point it out Chris!

  • Ralph D. Klonz

    now, I have to admit that I wasn’t in the SEO-World at the time of the 90tees. But I’m sure going to look into this and disseminate it to my coder friends. Starting with this article. Always willing to learn more and if it’s been around it only proves that the old tried and proven tactics will prevail.

  • http://www.elite-strategies.com/blog Patrick Coombe

    Ahh yes, the sprite. This is when I was learning HTML, linux, and TCP/IP. I wish I would have learned SEO at that time rather than waiting another decade. Imagine the domains alone!

  • http://uk.queryclick.com/ Chris Liversidge

    @GeekPoweredStudios:disqus thanks sir, my pleasure. It was fun to walk down memory lane.

  • http://uk.queryclick.com/ Chris Liversidge

    @patrickcoombe:disqus yep the early days of domaining were pretty mixed too.

  • http://www.vincenttobiaz.com/ Vincent Tobiaz

    Sprites weren’t really at all in use on web sites until 2000’s, they existed in the 90’s but were not used. You think someone was going to wait for 1 gigantic image to download on 56k? Nope. And speed helps mobile a little, but even less than before and will be even less in the future due to speeds rising. And certainly isn’t as a determining SEO factor for mobile as is location.

    Sorry to slam the coolness of the 90s graphics but the actual information here is just dead wrong.

  • http://www.cynicologist.com/ Orun Bhuiyan

    Neat article, but I don’t really feel like the title was congruent with the content, since using sprites does benefit SEO, but rather indirectly through load time.

    There are a number of techniques one can use to optimize the speed at which a site loads, but I don’t think they’d be worthy of savior-of-the-future-of-SEO status.

    Imagine I said “progressively loading jpeg’s will save the future of SEO”. Seems pretty farfetched and indirect right? Progressively loading jpeg’s only amounts to a miniscule fraction of that which will help one’s SEO efforts—the same applies to sprites.

    Besides, in my experience, sprites in CSS have been used pretty consistently over the past decade by well-rounded developers.

  • Michael Cottam

    Well done, Chris…haven’t seen anyone cover this before. Great job pointing out the effect on mobile!

  • http://www.pixxelznet.com/ Vikram Rout

    Very Nice information about HTML code that use in 90’s.

  • http://uk.queryclick.com/ Chris Liversidge

    Well, I can say for sure I and the developers I know did, of course everyone will have had different experiences back then. Sprites to deliver all of the architectural elements of the page was pretty common back then.

  • http://uk.queryclick.com/ Chris Liversidge

    @orun:disqus I hear where you’re coming from, the importance of the impact comes from the mobile aspect and my bet that speed is going to be a transformational element in mobile in 2014 for SEO. Lots of coding practices will contribute to that speed, but I think the sprite is particularly well positioned to allow that target of sub one second critical render mobile performance that Google is asking web developers to shoot for for the reasons given in the article.

    Other elements of old coding practices – like progressive jpeg’s – won’t deliver improvement in that scenario, given that with patchy mobile device browser support a big chunk of mobiles (using Safari) progressive jpegs load the same as normal jpegs (i.e. without progression), and aren’t any smaller as jpeg files with 80-90%+ compression applied (so: same speed to download), and even when they do get rendered progressively, usability studies have suggested that they give the impression to users that the render time was slow. It’s not clear if Google would consider the full load time to be at the first level of compression load or the last: I’d suspect the latter as that’s in line with their policy in other areas (like using headless browser rendering with their standard indexing spiders to get a true render time inclusive of JavaScript fired elements).

    None of these issues are the case for sprites, which are a simple, powerful tool in the developer’s toolkit. I think they’re underused and the opportunity to deliver performance improvement across mobile with them is compelling.

  • sharithurow

    Hi all-

    Couple of items.

    (1) The problem with sprites is ‘aboutness’. When you have one large image where you get multiple smaller images to preserve alleged download time, you lose the ‘aboutness’ of the large image because it can be so many things.

    The closest I’ve come to preserving ‘aboutness’ of a sprites image is having one graphic image be the backgrounds for an entire website. If there are other exceptions, I’d love to know them.

    (2) Google continues to interpret download time incorrectly. What is important to users is perceived download time, not actual download time. Even the phrase “download time” isn’t that accurate. Google should be calling it response time.

    The origin of this problem, I think, is the mental model of the Google staff. I think they need to get out of their software, techie frame of mind and really observe users during usability tests…and I DO mean observe because their objectivity is well…not there. An outside usability firm could easily show what is most important to users.

    When the slideshare goes up for SMX West, you can see my citations about download time in the slides.

    My 2 cents.

  • http://www.vincenttobiaz.com/ Vincent Tobiaz

    You are probably right on that – smaller gif based ones I guess I could see on working websites back then

  • https://plus.google.com/u/0/+NielHirjee Niel Hirjee

    The point you are missing, Vincent Tobiaz, is that sprites in the 90’s were not big images which had to be downloaded on 56kbps (or even 14.4 kbps). A sprite in those days of limited bandwidth and RAM was a single optimized image which was put to multiple uses, often taking advantage of low level functions of the GPU to update multiple areas of the screen simultaneously.

    As a person who has used sprites to program games on home computers with as little as 32 kilobytes of RAM in the min 80s and then web pages in the days of wais and gopher, I can vouch that the information here is not “dead wrong”.

  • http://neotrope.com/ Christopher Laird Simmons

    I’ve been anxiously awaiting stable (not edge) version of latest mod_pagespeed to see how well it does with auto conversion of background elements to sprites on the fly with caching. I’m still struggling with concept of converting three individual graphic elements (say, INC 5000, 31 years logo, and BBB logo), which are each linked graphics (moved from jpeg to png/8), that have alt and title tags for SEO but also for rollover — converting to backgrounds with hidden overlay for title tag seems contra intuitive to minification of elements and responsive span elements moving on page rework. It’s the future, but kind of a pain since “semantically” having a graphic “inc5000” seems better than “sprite24.png” and having to make a background with clickable overlay for SEO. (Ouch!). But I’ll get there :-) Great article. Takes me back, man!

  • http://avgjoegeek.net/ avgjoegeek

    Considering that the sprites used at the time were only a few kb in size it was a smart way to do static images.

    The issue was positioning them on the site correctly! What a pita before CSS was introduced!

  • http://uk.queryclick.com/ Chris Liversidge

    @michael_cottam:disqus thanks – it seemed about time Sprites got their love.

  • http://uk.queryclick.com/ Chris Liversidge

    @sharithurow:disqus interesting points, and I agree Google is not clear on its definition of page speed – at least for SEO. Where we see TTFB being cited in tests, but the full DOM render referenced by engineers.

    Ref ‘aboutness’, I think when you consider appropriate usage of sprites this issue clears up. Should the main image for a page (product image, news item photo, etc) be a sprite? No: and that’s the image due for SEO optimisation techniques. It is all other, structural images (and that’s a lot!) that should be rethought.

  • http://uk.queryclick.com/ Chris Liversidge

    Thanks @neotrope:disqus For accuracy, relying on mod_pagespeed may not be the answer in my experience. If you really care, you should build sprites, rollovers, etc yourself. It’s not too demanding, and just requires aforethought: then you can nail the SEO elements accurately too.

  • http://scottreed.eu Scott Reed

    Using sprites is good but personally to me the important thing it to make sure both the site and the server are optimized. Compressing and combining all of your js/css files in to a single payload is a first must. Also configuring your web server to auto deflate gzip all of the static content is important too. It is good to use sprites but also make sure you’ve optimized, compressed and cached as much as you can

  • http://www.vincenttobiaz.com/ Vincent Tobiaz

    Looks like you’re not even reading the article at all. Article is talking about web/html graphics. Not computer games or stuff back when computers didn’t even matter nearly as much. Did you even read the title of the post, because it mentions it?! Now that I’ve had to take the time in coming back to this post I found more in making my information even more correct and @cliversidge:disqus is wrong.

    http://www.studiopress.com/design/css-sprites.htm says CSS sprites as a technique started showing up in 2003 and became common in 2004, which sounds correct in my experience. I’ve been HTML programming since 1996 and CSS the language itself has only been since around 1997. http://en.wikipedia.org/wiki/Cascading_Style_Sheets#History

    CSS Sprites were not at all common on the web until the 2000’s. Period. Which there may have been some around in the 90’s but not really much or common. Then you further make yourself contribute to said post @nielhirjee:disqus by saying that sprites were around in the 80’s and that the post was correct but post says sprites came out in the 90’s (in which you’re both wrong). We need to clarify what sprites we are talking about. But in context of his article, we are talking about CSS sprites. Re-confirming the information in this article, and both of you, are as a matter of fact, “dead wrong.”

  • http://www.vincenttobiaz.com/ Vincent Tobiaz

    http://www.w3.org/TR/#tr_CSS for a more official/trusted source

  • http://neotrope.com/ Christopher Laird Simmons

    It’s been working pretty well for number of things on our server. With some sites being 15+ years old with different sections and technologies (e.g., shtml, php, hybrid), being able to retrofit some old stuff without redoing it, is where some of the mod_pagespeed stuff has been awesome (remove comments + whitespace! how cool is that?)

  • http://www.andreapernici.com/ Andrea Pernici

    Google is very clear about speed and they released a patent where they exactly talk about how the measure the load time…and they are WRONG as @sharithurow:disqus wrote. Up to now they used the total page load time to promote/demote results in only some very particular cases.

    Exept from that the important part is the perceived download time and the time to make the web app interactive and usable. The fluidity of use is also important from a user perspective, lot more than the total load time (document ready).

    I think that now thanks to Ilya Grigorik Google is moving to this new way of measuring the load time focusing more on the time to render and time to interactive document. It’s quite easy to obtain the values cause in Chrome simply writing in the console performance.timing you can see in a very granular way the various phases of a page download.

    I conducted lots of tests in the past and what I saw is that the most important part of web performance to increase conversion rate and offer a better UX is how fast you make the visible part of the app usable…and sometimes you absolutely don’t need any sprite!