Dec 30

Cutting your design for the web involves more than simply cutting, saving, and uploading. Follow along as I take you through steps to improving your workflow and loading time.

Before you start cutting your design, look for where you can use css instead of an image. After seeing how you can use css to replace some images, you can start to see how you can improve your site design from the ground up.

Below are some examples of how you can cut your design more effective and efficiently.

For Example:

Using an Image
File Size - 220 bytes
Using Css - 1 line w/compression
File Size - 76 bytes

Of course when you do need to use images make sure you are either using good compression or index the image to a specific number of colors.

Examples:

Jpeg Image at Full Quality
File Size - 16.7KB
Jpeg Image at Lower Quality
File Size - 6.7KB



Png not indexed
File Size - 2.67KB
Png indexed
File Size - 1.07KB

There isn't really a rule of thumb of when to use a png, gif, or jpg. When ever I'm not sure if I should index and use png or gif or if I should compress and use jpg, I try them both to see what the file size difference is. Which ever one is smaller I use that.

The last thing I'm going to cover is CSS Sprites. I'm not going to go into detail in this blog about how to do sprites, I'm just going to give some examples. Subscribe to my blog and I will be covering CSS Sprites in detail.

CSS Sprites
These are mainly used for menus and image hover links, however, you can use them to consolidate small images to reduce file sizes.

Example:

Actual Image

Hover over image using Sprites

By using css instead of images you also reduce the number of http request and thus reduce the load time of your site dramatically. Check back for updates and other related posts.