The first tutorial I published on CSS was a “trick” to essential hide the text generated from the HTML file and replace it with an image. Let me clarify what I mean by “trick” because its not meant to decieve anyone. It’s a non-obvious way of achieving two competing goals: displaying graphical representation of text while not compromising the HTML text mainly for Google. If you’re a web designer, you’ll know of the limitations to HTML and CSS and what may make a better user experience isn’t always good for Google. CSS and HTML is not only limited by the font selection, but something like a logo in which specicial types faces are created cannot be created through CSS. Using an image with an alt attribute just doesn’t seem like a good solution for a h1 headline tag either. For something like a screen reader, or viewing plain HTML, using the text is a better solution than the alt attribute of an image.
Now don’t get me wrong, this technique can be used for evil by hiding keywords to try to bolster search engine rankings on Google. I don’t know exactly how Google creates the ranking, but I do know that h1 headline serve as a key part in determining page rank for keywords. So who uses the negative text-indent trick? Google themselves use images for there main logo, but both Apple.com and Digg.com use negative text-indent to hide lot things. Apple hides their top navigation bar, and homepage featured items. Digg hides the h1 tag which states their name. (If you want to see for yourself, I’d recommend checking Apple homepage because you can see the relavent css directly in the source of the webpage. With Digg, you have to navigate your way through the file references.) Google doesn’t seem to penalize either of theses two sites. You might say that these guys are too big to be penalized, well in that case, this website, Tutorial Dog uses the negative text-indent and the site ranks on the first page for the keyword “javascript image gallery”.
Inadvertent Discovery While checking out Digg.com to see if they use negative text-indent, I discovered that they combine all their images for the site into one large gif image. They then direct the CSS file to specific sections of the image to show different images using the ‘background-position’ attribute. Why would they imbed all images into one document? For a site like Digg, which recieves millions hits daily, by combining the images into one file, their servers receive less of a usage because many image files aren’t requested from the server. Once this large image file is requested and sent, the web browser can reference the file to generate the page. To further illustrate why this is better, think of moving a bunch of boxes. Digg likens the large image file to one large box. In this case, while this box may be bigger and weight more, you only have to move it once to get all of the required materials to the receiver. With a bunch of small images, you will have to move a bunch of boxes one at a time. This technique probably won’t be worth your while to implement for your web designs, because it will take more time for what its worth. Digg, because they deal with large traffic, finds that this technique optimizes their page serving ability.
