Humanitarianresponse Logo

Preparing your images

Before you upload your images to HR.info, it is important that you optimize their size for the context in which they will be published. The smaller the filesize of the image, the faster it will load on the visitor’s display of choice - and vice versa, having heavy images on your page will make it slower to load which is something that will particularly affect your visitors with slower connections.

Note: The instructions below are intended for working with images that you add to cluster/working group pages or simple pages directly, usually via a custom block. They are not intended for images added when uploading documents, events, maps, and assessments. For the purpose of editing images as described below, any photo editing software of your choice can be used.

Image width

Consider a likely scenario - a cluster/working group page with a left sidebar menu where you want to add an image that will occupy the full-width of the main content pane. The maximum width of an image in this case is 850px. Having images wider than this brings no additional value as they will be shrunk on display - but since the whole file will need to be downloaded, this will negatively affect page load speed.

Other common scenarios are pages with a left sidebar menu and two or three columns in the main content pane, several thumbnail images in a row, or - less common - a full width page without the left sidebar menu.

Here are maximum image width examples for different scenarios:

Without the left sidebar menu

Mockup of HR.info image sizes

  • Full width image: 1080px
  • Image in one of the two (half-width) columns: 500px
  • Image in one of the three (one-third width) columns: 320px
  • Thumbnails (aligned in a row): ~1080px divided by the number of thumbnails (for example, if you want to have 4 thumbnails in one row, each should be around 250px in width)

See step-by-step instructions on how to add images to your content blocks and how to add how to add thumbnails in a row.

Mockup of HR.info layout with sidebar

  • Full width image: 884px
  • Image in one of the two (half-width) columns: 360px
  • Image in one of the three (one-third width) columns: 220px
  • Thumbnails (aligned) which occupy the full width of the content pane: 796px divided by the number of thumbnails (For example, if you want to have 4 thumbnails in one row, each should be around 170px in width, the difference is lost in padding)

See step-by-step instructions on how to add images to your content blocks and how to add how to add thumbnails in a row.

Use “Display as Teaser”?

In short: no. HR.info’s own media editor has a feature to add resized images, that is ‘teasers’ (the longer side of the image will be 220px in width) and ‘previews’ (a square thumbnail of 100*100px). Although the ‘teaser’ option comes close to some of our scenarios outlined above, inserting an image as a teaser will automatically link the ‘teaser’ image to a full version of that image meaning that users will end up on a separate page with a full size image, instead of the document.

Use editor's own image sizing feature?

In short: no. You could upload a large image in the editor, then right click on the image and select "Image Properties" - this would allow you to set the width and the height of the image. But as mentioned earlier, this would result in users having to download the full image which would then be resized on display.

Other optimization steps

If you’re well versed in image optimization, consider other steps that you can take to reduce the filesize of the image - reducing the number of colors used and reducing image resolution. The smaller the size of the file - while preserving an acceptable quality of the image - the quicker the images will load for your visitors!

Naming image files

Name your image files using keywords which best describe the content of the image. For example, women-distributing-pots.jpg is a telling filename, whereas screenshot-2388740-23092019.jpg is not. Avoid blank characters in filenames, as well as special characters. To separate words (as in the earlier example) use dashes.

Adding images

Now that you are familiar with preparing images for publication, have a look at the following step-by-step instructions on adding images to your content blocks: