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.
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.
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.
These are mainly used for menus and image hover links, however, you can use them to consolidate small images to reduce file sizes.
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.