Preparing images for your website

Before you can use an image on your website you must first ensure that it has been optimised for web delivery. This generally means ensuring that the image is in the correct:


Most images are made up of coloured dots (or pixels). An image with lots of coloured dots is considered high resolution. An image with relatively few coloured dots is considered low resolution.

DPI (dots per inch) is the number of coloured dots per inch of an image. Most images taken with digital cameras are relatively high resolution, about 300 dpi. However images used on the web need to be approximately 72 dpi to correspond with the low resolution of computer monitors. Therefore your high resolution images need to be converted to low resolution images before they can go on to your web page.


Related tutorial: Adobe Acrobat (PDF) Saving images for the web (PDF)


Crop or cropping refers to the process of deleting extraneous parts of an image to alter composition. Cropping can be done for practical purposes (e.g. deleting parts of the image that simply have no relevance) or for artistic purposes (e.g. close-up shots can be more dramatic than wide shots).


Related tutorial: Adobe Acrobat (PDF) Cropping Images (PDF)


The dimensions of an image are the physical width and height of the image, as it is displayed on the computer screen. Image dimensions are measured in pixels and referenced as width by height (e.g. 300 x 190 pixels). You must set the dimensions of your images appropriately in order for them to fit on your web pages correctly.


More information: Images on Plone Pages, Methods for resizing images

File type

Images intended for use on the web must to be saved in one of a few available ‘web-safe’ file types (usually JPEG, GIF or PNG). You must choose which file type is the most appropriate for your particular image.

More information: See Image File Types for guidance on how to choose the correct file type for your images.

File size

The size of an image file is usually measured in kilobytes (KB) or megabytes (MB). The file sizes of images on the internet must be kept as low as possible to ensure they download quickly. Slow loading images result in slow loading web pages.

More information: See Images on Plone Pages for the suggested file sizes for images on a Plone website.
Related tutorial: Adobe Acrobat (PDF) Saving images for the web (PDF)