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
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 MonsterCommerce large
product view. 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.
As a developer for MonsterCommerce stores, I like to compress the daylights
out of 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. I figure 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
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 - Yes, Dreamweaver saves the day again! The initial install
comes with a 'Create Web Photo Album' option under 'commands' menu. You can use
that, but that's not the good one. 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. Out of the two programs, I
find Photoshop better for resizing and compressing images.
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.