Preparing Images for the Web

Preparing images for the web is an essential part of using images in Plone, or in any online context. As you will see, size matters.

Many people source photographs taken with a digital camera, but they can also be scanned images, graphical illustrations made with software, and other specialized images. Let’s take a look at the case of a butterfly photo taken with a digital camera.

Digital photographs taken with modern cameras are usually too big to post directly on a website, so they need to be resized. A typical web site design may have a width of around 1000 pixels. When a photograph comes off your camera, it may be several thousand pixels wide and tall, and several megabytes in file size. You need to use software on your computer to resize the image to something less than 1000 x 1000 pixels, often much smaller than that.

The software you use to view or print your digital photos will often have this resizing functionality, or you may have graphics software such as Adobe Photoshop or Gimp on your computer. Resizing an image, sometimes called resampling, is a standard function you should be able to find in your software, often under the Image menu. Some also have a special “save for web” command.

How do you know what width, in pixels, to resize your image? It depends. For a little “head shot” photograph to go in a biography, maybe 200 pixels wide is just right. For a group photograph, 200 pixels would be too small to allow identification of the people in the photograph, so it may need to be closer to 400 pixels wide. For a scanned map image, perhaps the image width would need to be 1000 pixels for the map detail to be usable.

After saving your resized image, give it a name that indicates the new size (e.g., butteryfly-resized-300px.jpg). The file format is most commonly .jpg (or .jpeg). Other common formats for images include .png and .gif. Take note of where you save images on your computer so that you can find them when you upload them to your Plone web site.

image\_resizing.png

To summarize:

  1. Take your photograph with your camera, or find an existing image you want to use

  2. Transfer it to your computer

  3. Use image software on your computer to resize your photograph

  4. Upload it to your Plone website