Optimize “CSS Repeated” Background Images In Photoshop

Today were going to take a look at how to optimize your background images in Photoshop. Most blogs use a repeated background image to provide a sense of individuality in their blog designs. In most cases, this sets blogs apart by appearance which is an excellent first step in attracting new readers.

Photoshop CS3 is an amazing tool that has years of experience built into its image algorithms. By utilizing the 4 pane view in Photoshop (when saving an image) you can reduce the size of your image to the smallest possible.

Using CSS’s repeat function, you can use beautiful gradients and background images without killing your web server.

Lets take a real look at what I’m talking about here:

The Correct Way To Optimize Background Images in Photoshop:

Step 1 – Find a vector image on the internet or custom design your own gradient with Photoshop, as such:

Step 2 – Depending on the image chosen, make the vector as small as possible so that you can “repeat” the property using CSS – Using a large image to repeat a pattern just wastes bandwidth. For gradients, reduce your picture to 1px by the height.

Step 3 – Click “File” and “Save for Web & Devices” (just using “Save As” doesn’t take advantage of the unique algorithms). Once you are in this menu, choose the “4-Up” option in the tabs which allows you to see four different previews in any format you choose.

Step 4 – In the first square is the original file. Click the second frame and choose a JPEG, set it to at least high quality. In the third frame choose the PNG-24 encoding and finally in the fourth frame choose the PNG-8 option. You can change the colours as you wish, but the best you can get with PNG-8 is 256 colours.

Step 5 – Now comes the easy part, after adjusting the settings on each of the proofs, you can now view which file is the smallest! For 1px width gradients, I’ve found that PNG-24 compresses it the best without a loss of quality.

Step 6 – Choose your save location and then start using it in your website! If you like the gradient used in the example, save this file to your computer and feel free to use it. If you want to use it via CSS, simply use the “background” property of an element. IE:

.elementexample {
background: url("WhereisTheGradientLocated.png") repeat-x;
}

Conclusion – Compressing Gradients For Faster Loading Websites

This is such an easy method to use if you have Photoshop to reduce website loading times. I utilize this technique on every website that I design and find it to be well worth the effort. This method can be used to save any image for a website, as it gives you four different formats to choose from.

Have you found a better way to compress gradients? What techniques do you use when saving a gradient for a website?

Part 1 of the “Reduce Your Blog’s Loading Speed” post series.