How to make images look great in Citizen Space

Gone are the days when we could assume that most people would be browsing the web on a desktop or laptop. Data released by ONS in 2018 (opens in new tab) shows that mobile phones or smartphones are the most popular devices (with 78% of all adults) using them to access the internet.

Citizen Space incorporates a fully responsive design. Responsive means Citizen Space adjusts itself to display content, which includes images and photos, in the best possible way depending on the screen size of the device it is being viewed with.

As well as being responsive, Citizen Space is highly visual, giving you lots of ways to incorporate imagery into your activities.

Of course, you'll want to make sure your activities look their best, no matter which device people are using. That's why we've put together this quick guide - follow these tips to get the most out of your imagery with Citizen Space's responsive design:

Copyright and permissions

It's paramount to ensure you have the correct copyright rights to use an image or you could face legal action. Don't assume that you can use any image you find on the internet or even your own images!

Gov.uk provides helpful guidance on this topic which is definitely worth a read: Copyright Notice - digital images, photographs and internet (opens in new tab).

What's file size got to do with it?

You might notice that file size is often mentioned in the same breath as resizing or cropping images. The reason for this is that the two are very much linked to each other.

A large image, that is to say an image with big dimensions, will usually have a big file size. To give an example we'd say that an image that is 2000px wide by 1500px tall is a large image. We'd expect that sort of sized image to have a file size of around 1.2 megabytes (MB), though this will vary depending on how detailed the image is. This is not the largest or biggest sized image you can get by a longshot, but it's still large.

The larger the file size the longer it takes to display. For those accessing your activities from areas with slower internet connections, such as rural areas or using mobile phones, this can be incredibly frustrating.

As a general guide we recommend that you aim to upload images no bigger than 0.5 megabytes (MB) or 500 kilobytes (KB).

If you are hankering after more technical detail then read this article on image resolution tips (opens in new tab) which explains everything in-depth.

The right image and the right size

Citizen Space provides a number of places where you can add images to make your activity that much more appealing and engaging to respondents. Here's a list of all the places you can put images and what to consider when you are selecting what to put in:

Site-wide logo and site-wide wallpaper

This is usually set-up by your customer success manager when your Citizen Space site is first deployed. For more information please see the deployment requirements article.

Activity theme - one or more logos

Example of logos used for an activity banner. If more than one is used, they will be presented next to one another in a row or stacked on each other depending on size of device.

Any logos you upload will be displayed at the top of every page of that particular activity, starting from the overview page all the way through to the response submitted page.

Uploading an image as a logo will be a good option for you if it's important that the entire image is displayed on every sized device. For example if your image contains words or imagery that need to be seen in their entirety to make sense.

Your images should be:

  • Any shape you like - usually a square or rectangle.
  • No bigger than 940px wide.
  • No bigger than 400px tall. Anything taller than this is likely to seem quite big and will push your content down the page.

When you upload the image, Citizen Space provides a preview of what it will look like on desktop and on mobile to help you. The full-screen effect has been achieved by setting the background colour to the same colour as the logo.

Example of theme preview on a desktop.

Example of a theme preview when on a mobile.

Read the instructions in this article on how to add logos to your activity theme in Citizen Space.

Advice for uploading multiple logos

If you are uploading multiple images make the images approximately the same height for the best results. And of course make use of the preview tool that Citizen Space provides to see what the logos will look like on different sized screens.

Activity theme - full width banner

Example of a full width banner that stretches across the entirety of the activity page, more or less of the image will be seen depending on the size of the device.

This image will be displayed at the top of every page of this particular activity, starting from the overview page all the way through to the response submitted page.

Pick an image that:

  • Doesn't have a specific focal point or words. If your image has either you might consider uploading them as logos instead. To find a good image, think in terms of wallpapers which usually have repeating patterns and still look good if the sides, top or bottom are cut off. This is because the full-width banner will look very different on different sized devices and there is no guarantee a user will see any specific part of this image. When you upload the image, Citizen Space provides a preview of what it will look like on desktop and on mobile to help you.
  • Is significantly wider than it is high - e.g. is landscape in orientation
  • Is around 150 pixels tall by 1000 pixels wide.

Read the instructions in this article on how to add a full-width banner image to your activity theme in Citizen Space.

An example of a good full-width banner image

An overhead shot of green clover filling the banner image.

How the good example looks in the previews Citizen Space provides

Example of the banner on a mobile.

Example of the banner on a desktop.

Example 1 of a bad full-width banner image

An image with words should be uploaded as a logo so all the words will be visible all the time.

Example banner with a blue background, white text and a stethoscope. Wording states: Patient Panel. Arlen Hill's voice in the NHS.

How bad example 1 looks in the previews Citizen Space provides

Example of the banner on a desktop which shows part of the banner being cut off. This image would be better added as a logo.

Example of the banner on a desktop which shows part of the banner being cut off. This image would be better added as a logo.

Example 2 of a bad full-width banner image

Although it's very cute - this image has a strong focal point. This would be better uploaded as a logo (however it needs resized before doing so).

Photo of a yellow labrador puppy sitting in a silver water dish.

How bad example 2 looks in the preview Citizen Space provides


Example of the banner on mobile, which still shows most of the puppy in the dish.

Photo of dog is chopped off and distorted when previewed on a desktop.

Featured activity image on the site homepage

Example of feature activity listing on homepage.

Pick an image that:

  • Is wider than it is high - e.g. is landscape in orientation
  • Is 210 pixels tall by 485 pixels wide. If the image is bigger then consider resizing or cropping it. Doing this helps to make an image's file size smaller which helps pages load quickly.
  • Has the most interesting part in the centre and will still make sense if the left and right sides are not displayed. When you upload the image Citizen Space provides a preview of what it will look like on desktop and on mobile to help you.

When adding a featured image, you will also see an example of what it would look like on a desktop or mobile view.

Read the instructions in this article for how to set a featured activity in Citizen Space.

Images within an online survey page

Example of an embedded image on a survey page.

For best results, use images that are no wider than 700px wide. If the image is significantly bigger then resize or crop it. This will help to make an image's file size smaller which helps pages load quickly.

Note: If you’d like your image to appear to the left or right of text, start with an image that is no wider than 300px.

Read instructions on to add images to an online survey page in this article.

Images within a question

Example of an embedded image in a text answer component.

For best results, use images that are no wider than 650px wide. If the image is significantly bigger then resize or crop it. This will help to make an image's file size smaller which helps pages load quickly.

If you’d like your image to appear to the left or right of text start with an image that is no wider than 300px.

You can add images to questions by using the Additional information Text and Fact bank answer components, more information about these can be found in our What are the different types of answer component article.

Resizing and cropping images

There is a difference between resizing and cropping images.

  • Cropping - This is when you cut off part of an image to achieve a new shape eg new dimensions. Cropping an image will result in a smaller file size.
  • Resizing - This maintains the entire image and simply changes the size.  Resizing an image to make it smaller will also reduce the file size. 

How do I crop or resize an image?

Firstly a few lessons learned from us:

  • Always have a duplicate copy of your original image to hand. Sometimes resizing and cropping takes a bit of experimenting and it's useful to be able to start again with a fresh copy of your image!
  • It is usually a bad idea to resize images to make them larger as this results is pixellated/blurred images.

How you will crop or resize images will depend on the Operating System and version you use. Here are some handy links to help you (the following links open in a new tab):

And last but not least Picresize.com is an online service you can use to resize your images. Follow the instructions on screen to edit your images as needed.