This website uses cookies to customize ads and analyze traffic. If you continue browsing, we'll consider you accept their utilization. More information.
Blog

How to Create a CSS Sprite

Programming -

Combining images into as few files as possible using CSS sprites reduces the number of requests and delays in downloading images, and can also reduce the total amount of bytes downloaded by a web site. Getting iterative images from CSS sprites is a essential part of WPO. These are the steps to follow:

1. Create a GIF, JPG or PNG mosaic with all the images you want to get:

2. Insert one DIV object for each image in your CSS stylesheet. This DIV object will include two coordinates indicating the superior left point of your image. They will be negative values (horizontal and vertical), which you can get in Photoshop by clicking on the left corner. The "height" and "width" parameters also must be declared:

.king_hearts {background:url("http://www.danielpinero.com/pics/naipes.png") repeat scroll -84px -118px 
transparent;height:118px;width:84px;}

3. Insert the DIV box inside the HTML code:

<div class="king_hearts"></div>

Create independent CSS sprites for different types of images: GIF for icons and transparencies with little chromatic diversity, JPG for pictures, and PNG for complex images using transparencies.


Related Posts
  • How to Enable Gzip Compression

  • How to Enable Keep-Alive

  • How to Create an Internal Hyperlink

  • How to Massively Optimize Images in PageSpeed

  • How to Enable HTTP Deflate Compresion
  • Send Comment
    Name
    E-mail
    Comment