How to use CSS Sprites to speed up your website...

If you use a lot of photos on your home page, you may notice it takes a bit longer for your website to load, particularly if you do a reload/clear your browser cache.

While you may only care about how fast it loads for you with your photos in your browser cache, consider that a first time visitor to your website is very unlikely to have any of your home page photos in their browser cache, so your website load speed may factor into their impression of your website and of your club/district.

While it is certainly true that the FreeToastHost 2 system design has a very high impact on website responsiveness, the content that you put into your webpages also does, particularly when it comes to photos.

If you have a lot of photos on your pages, then a first time visitor will have to wait while your browser downloads each photo in the process of building and presenting the web page of interest.

There is a way to address this with an advanced technique, if you are up for it. The way is to use CSS Sprites.

CSS Sprites are a way to combine multiple photos/images into one (or a few) files to decrease the number of downloads required, thus speeding up the web page being shown.

You can use the following website to create a CSS Sprite from photos that you want to combine into a sprite: css.spritegen.com/
Make sure that you pay attention to the CSS and HTML code that you are provided in that website along with the actual sprite image.

Once you have saved the sprite image file from that website, you can upload it via the editor just like any other image file.

Now here is the advanced part, actually using the sprite... You will need to work in Source View of the editor for this:

In source view, create a style block at the top and copy/paste the CSS code the above website provided into the style block...:

To insert the individual images from the sprite, you can either use the div command from the normal editor view and assign the class to it that corresponds to the image of interest, or you can just copy/paste the HTML that the above website provides into Source view, switch to normal editor view and then delete the images you don't want.

That is all there is to it. This is a bit different approach for putting a photo into a page, since you are referencing the photo via an assigned class name versus the specific filename. The reason for this, of course, is that you already uploaded a file containing a bunch of images combined.