Preparing Images for the Web   

Formatting images for the web can be tricky. Here are some things to watch out for:
 
Image Types
The two file types you can use for images are jpg and gif. jpg is almost always superior to gif for pictures, except when your picture has very few colors. In this case a gif file will often look better and have a smaller file size. Black and white line art will always be smaller and look better as a gif.
 
If you have Photoshop (which I highly recommend) you can use the Save For Web feature to optimize your images. Using this tool you can see what your picture will look like using different formats, different compressions levels for jpg, or fewer/greater colors for gifts. It also shows you what the resulting file size will be and how long the image will take to download with different speed Internet connections, which is very useful!
 
File Size
Generally you want to aim for well under 40 KB in size, unless it's a map or something else where you really need the detail. To make pictures smaller in size what you're mostly going to need to do is to reduce the overall size of the image, which brings us to...
 
Width and Height
The precise maximum width for images depends on the graphic design of your site. However, here's a general rule of thumb: for images that you want to have text to the right or left of (which means selecting align left or right in the Web Editor) keep the width of the image under 350 pixels. For larger pictures that you do not want to have text on either side of (so align center) keep the width under 450 pixels.
 
Note: if the image is much taller than it is wide you may need to make the width significantly smaller to keep the file size reasonable. So for example, if your image is three times as tall as it is wide, you might need to reduce the width to less than 350 pixels in order to keep the file size down.
 
Resolution
You always want to change the resolution of graphics to 72 DPI (dots per inch) because this is the highest resolution that monitors will show. For print images the DPI is usually set much higher, but on the web all higher resolutions do is increase the file size.