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.
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.