Preparing Images for the Web
Note: This is the print view with all the tutorial pages on one page. The paginated version is available here, if you prefer that.
The Basics
It's a good idea to put all images for the site in one area. You can link to them from anywhere on the site, and they'll be easier to manage.
Preparing your images properly is an important first step in publishing good website content. Not all internet users have a broadband connection, and it will frustrate them if your site loads too slowly because of a large image. You'll lose your audience quickly if they cannot view your site as soon as possible. To that end, you should follow these guidelines, when working with images:
- Compress images to make the file size as small as possible. Less than 50 Kilobytes is ideal
- Make
images less than the width of your content area, generally less than
400 pixels. Height should be less than about 400 pixels as well unless
you are going to use the entire screen to
display a picture. A good general size to shoot for is around 150
pixels square.
This may seem small, but you also need room for text, navigation tabs,
banners, etc.
- Keep in mind the more pictures you put on a webpage, the slower it will load.
- Only use JPG, GIF, or PNG formats. Other formats such as TIFF or BMP will not work with all browsers.
- When you save your images be sure to use "web-friendly" file names; that means No Spaces! Use hyphens or underscores when you need to seperate words like this: "picture-of-myself.jpg"
To summarize, there are three main factors to be aware of:
- What are the dimensions of the image?
- How big is the file?
- What format is the file in?
Resizing
Finding the right size for an image is an important skill to develop. For the most part, you want your images to be fairly small; 150x113 is a good average size. However, most images that you find aren't the size that you want for the web. You must resize the image, and there are a few different ways of doing so:
Use Plone:
Newer versions of Plone (2.1 and higher) have a built in image scaling feature that supports some preset image sizes for you to use. This
is great because you can upload images of various sizes, then size them
up or down. That means you can use the same image with different sizes.
When you insert an image into a page you can access the resizing
options with this drop-down menu:

Use Photoshop:
Adobe Photoshop is a powerful image manipulation program. Watch this video on resizing with Photoshop.
Other Software:
There are other programs besides Photoshop that work perfectly well for resizing images. XNview is a free, open-source software tool that you can download and start using right away. There is also Paint, which comes with Windows and is capabale of very basic resizing. Corel Draw is yet another option. Since all of these work differently, you should read the help documentation to find out how resizing works in your chosen program.
Compressing
Physical image size is only one factor to consider when preparing images for the web. You must also take into account the actual size of the file; that is, how many bytes is your image? A good target to shoot for is a file less than 50 Kb. You can go higher, but keep in mind that your site is going to load slower the more that you put large files on it, including images. Any of your site visitors who use a dial-up connection will appreciate not waiting 5 minutes for your graphics-rich page to load.
Typically the smaller the image (in pixels) will yield as smaller file size (in bytes), so that if you're dealing with a small image you probably won't have to compress it.
In order to get your file size smaller, you will have to use a graphics editing program like Adobe Photoshop, Corel Draw or XNview. Again, each program differs in how file compression is achieved, but you can view this video on using Photoshop for image compression (the first half is about resizing).