Give Your Web Server a Break by Using These Two CSS Tricks
In loose terms, CSS controls the presentation of HTML code used in a website. For example, it gives text its size, color, and font. Most web designers use CSS precisely in that way. However, you can also use it as a substitute for simple images commonly used in web page design as well as for bundling multiple images together into a single image called a CSS sprite.
Why do that? Because images tend to have large file sizes and extensive use of them slows down your page load speed. Slow loading pages turn away impatient visitors and hurt your SEO, all of which hurt your conversions.
Using CSS for Simple Images
An extravagant example of wasteful web design is using a single large image to portray a solid colored background. While most web designers know better, some of these very same people will use images for smaller solid colored rectangles. There’s no reason for this since CSS readily produces the same effect. In addition, you can round the corners and introduce gradients as well as drop shadow effects.
Circles are also possible by rounding off the corners of a square with a sufficiently large radius. By adding gradients to the circle you can create a 3D sphere. Doing the same thing to rectangles and adding some text to the object produces CSS buttons for links. More complex images are possible by combining individual CSS images together to form a composite image. Composite images of buildings for example, are built up from simple rectangles. To get a better idea of the possibilities of CSS, do a Google search for “CSS 3D objects.”
Of course, over elaborate CSS images involve time intensive coding and some of their file sizes are larger than the image file equivalent. For the practical and pragmatic web designer, there are many free CSS code generators for common objects. You can further refine these objects by tweaking their CSS code parameters.
Using CSS Sprites
Although CSS sprites have been with us for a very long time, they are under utilized. As mentioned previously, a CSS sprite is a bundling of several images into a single image. Creating one is a simple matter of using an image editor to paste several images side by side on to a white or transparent background and saving the whole as a single large image. By using the background-position CSS property, you can display any part of the sprite image wherever you like on the web page. Naturally, you would select one of the smaller images on the sprite for display.
The point of doing this is that you can display lots of small images on a web page without uploading multiple image files. A single larger image (the CSS sprite) containing all the smaller images is uploaded instead. Even though the uploaded image file is large, the web page loading time is reduced. The reason for this is that the need for multiple http requests to fetch each individual image file from the web server is eliminated. This is replaced by a single http request for the single sprite file.
The more images placed on the sprite, the greater the savings in page load times. Sprites are often used for pages full of icons, buttons, and decorative page elements. For very large sprites, you can use image compression to reduce the sprite image file size.
One problem with CSS sprites is the difficulty of specifying the exact position coordinates and size of each image on the sprite. It’s a cumbersome process that many web developers detest. However, by using identically sized images on your sprites and arranging them in a simple grid pattern, you can then use a simple mathematical formula for easily obtaining the image position coordinates. Avoid using sprites for images that will see frequent changes or updating.
To achieve greater efficiency at sprite creation, you might want to forego manual photo editing methods in favor of automated sprite creation software. For more information about web servers or web hosting, please contact us.
