This article describes how to make images look great in the new version 3 of Citizen Space, but contains useful advice for everyone, too. We are in the process of upgrading all sites to version 3 so if you don't have it yet, you will do soon!
Gone are the days when we could assume that most people would be browsing the web on a desktop or laptop. Nowadays more than two-thirds of UK adults own a smartphone and mobiles are overtaking computers as the preferred way to access the internet.
To make Citizen Space even easier to use from phones and tablets, v3 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 you are viewing it with.
Being responsive is great! And v3 is highly visual, giving you lots of ways to incorporate imagery into Citizen Space.
Of course, you'll want to make sure your consultations 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 within v3's responsive design:
- Copyright: make sure you have permission to use an image.
- What's file size got to do with it?: upload the smallest file size possible, aim for under 0.5 megabytes.
- The right image at the right size: guidance on how to choose the right image for every available space Citizen Space provides.
- Resizing/cropping images and file size: the difference between cropping and resizing and links on how to do it if you don't know how.
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.
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 consultations 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 or 500 kilobytes.
If you are hankering after more technical detail then read this article on Image Resolution tips 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 consultation 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
- Consultation theme - one or more logos
- Consultation theme - full width banner
- Featured consultation image on the consultation hub
- Images within a consultation page
- Images within a question
Site-wide logo and site-wide wallpaper
This is usually set-up by your account manager when your Citizen Space site is first deployed. For more information please see the deployment requirements article.
Consultation theme - one or more logos
Any logos you upload will be displayed at the top of every page of that particular consultation, 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 - e.g. square or rectangle.
- No bigger than 940px 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.
- Any height you like, there are no restrictions - HOWEVER, anything taller than about 400px is likely to seem quite big and will push your consultation 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 below has been achieved by setting the background colour to the same colour as the logo.
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.
Consultation theme - full width banner
This image will be displayed at the top of every page of this particular consultation, 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. If the image is significantly bigger then consider resizing or cropping it. This will help to make an image's file size smaller, which helps pages load quickly.
An example of a good full-width consultation banner
How the good example looks in the previews Citizen Space provides
Example 1 of a bad full-width consultation banner
An image with words should be uploaded as a logo so all the words will be visible all the time.
How bad example 1 looks in the previews Citizen Space provides
Example 2 of a bad full-width consultation banner
Although it's very cute - this image has a strong focal point. This would be better uploaded as a logo.
How bad example 2 looks in the preview Citizen Space provides
Featured consultation image on the consultation hub
Pick an image that:
- Is wider than it is high - e.g. is landscape in orientation
- Is 210 pixels tall by 455 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.
Images within a consultation 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.
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.
Images within a question
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:
- Windows 8 - How to resize an image, step by step picture instructions
- Windows 8 - YouTube video instructions
- Windows 10 - How to resize an image, step by step picture instructions
- Windows 10 - YouTube video instructions
- Mac OS - How to resize an image, step by step picture instructions
- Mac OS - You Tube video instructions
And last but not least www.picresize.com is an online service you can use to resize your images. Follow the instructions on screen to edit your images as needed.