|
Optimizing images for the web will increase the speed of your website dramatically. Before we begin, there are a few things you are going to need to know.
Image formats and extensions
Every image format ends in a three-letter extension, the most common are .BMP, .JPG, .GIF and the newcomer, .PNG. First and foremost .BMP files are usually huge and can be further optimized. .PNG files are the new bad boys of the net, they are extraordinarily flexible- they can be optimized and while showing excellent quality. That leaves us with the two most common web extensions, .JPG and .GIF.
JPG files are generally used for high quality images since JPG files do a better job at retaining subtle color changes such as gradients and large sums of color. JPG files are used when it's pertinent that you retain quality in your image, but are generally always larger than GIF files because they compress at a color bit rate.
 GIF files on the other hand, are always compressed. They can be compressed using 128, colors, 256 colors and using a full range of colors (notice they're not compressed at a bit rate). Naturally, the more colors you use, the larger the file will be. The single most advantageous feature of GIF files is the fact that they can contain a transparent background while JPG files cannot.
This brings us to what rules we should follow in terms of size. On the web we don't think in terms of inches or centimeters, we use a different form of measurement- pixels. The next thing to know is what screen resolution your website is designed for. Many older sites are designed for 640x480, which has nearly died in the web world. Most web sites are now designed for an 800x600 resolution, but that's starting to lose its favor to the now common 1024x768. Playing it safe, anything at about 300x300 is probably a good size for a product view when it comes to e-commerce.
Every site is different and the best way to find the right size for your images is to experiment with the size for optimal performance.
You may want to compress the thumbnails using GIF images (for faster load times) and provide a really nice high quality image for the actual product image using. JPG's. If a person's going to click on that product, they are going to want to see a nice image (they are probably willing to wait a few extra seconds to download the larger image.)
So this brings us to the next question. How exactly do we resize and/or compress our images? Well there's hundreds of ways to do it, but I'll run over a few ways that are quick and easy.
Dreamweaver - Visit this link: Click Here and download the Macromedia 'Web Photo Album 2.1'. It's worth it. After you've installed the extension, just open up Dreamweaver and fire up the wizard. Follow the prompts and you'll have your images recreated and optimized in no time.
Windows XP - If you're using Windows XP, there's a neat image re-sizing tool built right into Windows. You can access it simply by browsing to where you have the photo stored and selecting the image, right clicking on the image and select 'resize image'. You'll then be guided through a quick wizard where you can select some options on how you want your images resized.
Fireworks/Photoshop - You can always resize the images individually in Fireworks or Photoshop, but this really isn't the best way to do this since you need to work with each image individually. When exporting as a GIF, note which color settings you choose, 128, 256 or exact. The same goes for your JPG files. Be sure to use the bar selector to select how much compression the image should receive. 80 is the standard in a JPG and it works.
ACDsee - As a last resort (if all else fails), visit www.acdsystems.com, and download the trial version of ACDsee. After installed, use the program to find your photo(s) and create a web page from the menu. It's as simple as that.
Ultimately, your goal in the end is to come up with an image that is compressed, that looks sharp and that takes up very little disk space. If your image is over 50kb, you may want to consider what you can do to make the file size smaller. You should definitely consider resizing the image if it's over 1mb. Most of the time a form of compression or resizing will help make the file smaller, thus make your site load faster. |
