How to optimise and resize images

Image optimisation process

Minimising the file size — (without losing resolution quality). As a rough guide, banner images should be less than 200kb, smaller images less than 100kb

Resizing image dimensions to fit webpage context. For example, if you have an image that’s 1000px wide to be used in the body of a standard webpage, the width should be decreased before you upload it. Decreasing the width will also help to bring the file size down.

Applying ALT tags — during the asset creation (or upload) process. See more about ALT tags.

Tools to help with resizing

Photoshop

If you have access to Photoshop, you probably already know how to save your images for the web using Photoshop's optimising tool. Depending on what version you are using, there are plenty of online instructions to help with using Photoshop to optimise images for the web.

Otherwise, there are two browser-based tools we recommend.

Free browser-based editing tools to resize images

Resizing image dimensions

Pixlr Editor will resize and crop images e.g. for setting the correct dimensions for a banner or widget. Then, after applying your changes, download the edited image to your desktop and upload it into the relevant Media folder in your area of the CMS. Although this editor is free, you do need to set up an account.

Go to Pixlr Editor

Decreasing file size

Tiny JPG — or Tiny PNG — reduces or compresses the file size of your images without losing quality e.g. optimising an image previously used for print media down from 500kb to 100kb.

Go to Tiny JPG

Basically, this is all you need to do once you open these tools:

  1. Drag and drop images from your desktop (or wherever) into the online tool.
  2. Select and apply the changes you want to make.
  3. Download the edited image to your computer.
  4. Using Edit+, upload the optimised image to your relevant Media folder.

See information about creating image assets in Edit+

h4> ALT tags

Previous Next

Page