Preparing Images for the Web
Important things to know about preparing images that can improve the performance of your website.
Digital images can come from many places: your digital camera, the web, digital scanners, and other sources. Before uploading your images into Plone, you must often do some preparation first to optimize them. Common problems encountered with images that aren't ready for the web are:
- images that are too large and overwhelm your pages visually
- images files that are too large and slow down your page load time
- images that are in a non-standard file format and don't load properly
Fortunately, there are some easy steps to take to prevent there sort of problems. It's a good idea to go through your image library before uploading your pictures into Plone. There are three main things to check before an image is ready to be uploaded:
Image dimensions: How big (in terms of pixels) is the image? Your website's content area has a fixed width generally around 350-400 pixels wide. So what's the best size to use? The simple answer is that the smaller you can use, the better. Under 200 pixels square is best for most images. Only use larger images if you need to display maps, groups photos or landscapes.
File size: How big (in terms of bytes) is the image? Just like image dimensions, the smaller the better. Under 100 Kb is good; under 50Kb is even better. The more images you have on a page, especially large ones, will slow down the time it takes for a visitor to load the page. Slow loading pages will drive people away from your website. If you're not sure how to verify file size, simply right click on the image file and select Properties.
File format: What file format is the image in? The two formats that are cross-browser compatible are .jpg and .gif. Either one will work for a particular image, although .jpg is best for photo-realistic images while .gif is better for simple graphics. Avoid formats such as .tiff and .bmp
A fourth consideration with images that sometimes comes up is image resolution or DPI. Monitors can only display up to 72 DPI. While you do not necessarily have to adjust your images to this resolution, you will find that you can get your file size smaller if you do.
Image Software
In addition to these guidelines, you may also need to crop your images to focus on one part of the image. Plone does not have the ability to perform cropping, compressing, or re-sizing and must be done with software outside of Plone. Here are some ideas for software and web applications that can perform these tasks:
Adobe Photoshop - Expensive and probably overkill
Abode Photoshop Elements - Inexpensive
ShrinkPictures.Com - Free through-the-web tool
GIMP - Free and Open Source

