CYS provides you with a lot of options to give your portal and your questionnaires a look & feel that matches your corporate identity. Images used in the portal are automatically resized depending on which ever device the portal is opened. It is important however to keep in mind the correct dimensions and aspect ratios for the images you want to use in your portal.
Table of contents:
The most important thing to keep in mind when uploading images to your portal is to never upload high-resolution images to your portal just for display purposes. When a respondent opens your questionnaire, it can take a while to load everything, depending on how large your images files are. The larger the file sizes, the longer it takes for a page to load. You should always try to keep the image sizes as low as possible without visual loss of quality.
When talking about image size, we are referring to the image pixel dimensions (width and height in pixels), or the image file size (kB).
For optimal website performance, images should be as large as needed to fill their containers, based on where you want to use them. However, in some instances images need to be a bit larger than is needed to fill their containers. This is to take into account the high-density “retina” screens of modern devices, so your images remain looking crisp and sharp.
JPG has become the de facto standard for images on the Internet. The JPG format is a lossy compressed file format, which means JPG images can be compressed considerably without visual loss of quality. This makes it useful for storing photographs in a small size.
We recommend you use the JPG format for background and header images.
The PNG format is a lossless compression file format, which makes it a common choice for use on the Internet. PNG is a good choice for storing line drawings, text, and iconic graphics at a small file size. A bonus to the PNG format is the option to save the image with a transparent background.
We recommend using the PNG format for logos and icon images.
Compared to JPG and PNG, the SVG format is relatively new. SVG is a vector-based image format which means that no matter how small or how big the image is presented the quality of the image remains the same.
We recommend you use the SVG format for logos and icon images.
- Logos: You can add two logos to your questionnaire that are placed at the top of the screen (left and right). The aspect ratio for both logos is 3:1. They will be presented with a maximum width of 100 px and a maximum height of 34 px. Images that are larger will automatically scale down to the maximum width or height. If you want the logos to remain looking sharp on all devices, we recommend doubling the dimensions of your logo files. The recommended width of the logo image is 200 pixels with a height of 68 pixels. You can also use the SVG format.
- Background image: You have the option to add a background image to your questionnaire. The Media Library of your portal already contains a huge amount of background images to choose from. The dimensions of the background image are 1920 x 1080 pixels (width x height). If you want to upload your own background image, we recommend using the same dimensions. Try to keep the file size below or around 100 kB.
For images that can be used on a question page it is important to remember that the aspect ratio for these images is 1:1 and that we therefore recommend you use square images. For all these images you can also use files in the SVG format. The default sizes per image type are as follows:
- Main question image: Most question pages offer the option to present an image before the question text, as shown in the screenshot below. The image will be presented in 150 x 150 pixels. We recommend using image files with 300 x 300 pixels.
- Root cause answer option: You have the option to add small images to your answer options, that are presented before the answer text, as shown in the example below. The images will be presented in 50 x 50 pixels. The recommended size for these types of images is 100 x 100 pixels.
- Other answer options: Items such as single response, multi response and matrix page question pages have the option to illustrate the answer options as well. The images will be presented in 60 x 60 pixels. The recommended size for these answer option images is 120 x 120 pixels.
Different types of question pages present images differently. For audit type questionnaires, the recommended sizes are as follows:
- Checklist question image: Both the image checklist and conditions checklist present the question text next to a larger image, that functions as a button to submit the answer, as shown in the screenshot below. The image will be presented in 150 x 150 pixels. We recommend using image files with 300 x 300 pixels.
- Tab image: Within checklist question pages, the different questions are grouped together in sections. These sections are presented as tabs at the top of the respondent view. You have the option to add a small image before the tab name as a reference, as shown in the example below. The image will be presented in 40 x 40 pixels. We recommend using images with 80 x 80 pixels.
- Information page image: By default, information pages are empty. You can design them to your liking and add any text or image to them. You can use one of the templates available to help you on the way. The dimensions of the default header image are 1000 x 310 pixels. If you want to upload your own header image, we recommend using the same dimensions or using an image with the same aspect ratio of 3:1. Try to keep the file size below or around 80 kB.
- Logo: You can add a logo to the sidebar of your portal that is placed at the top of the screen. The aspect ratio for the logo is around 2:1. The logo will be presented with a maximum width of 123 px and a maximum height of 65 px. Images that are larger will automatically scale down to the maximum width or height. You can also use files with the SVG format.
- Favicon: The aspect ratio for a favicon is 1:1. The image will be presented in 16 x 16 pixels or 32 x 32 pixels. We recommend using an image file with 50 x 50 pixels in a PNG format.
- Background image (portal): You have the option to add a background image to the sidebar of your portal. The Media Library of your portal already contains a lot of background images to choose from. The dimensions of the background image are 1920 x 1080 pixels. If you want to upload your own background image, we recommend using the same dimensions.
Background images that are added to the sidebar will be centred, which means that if you use an image with the dimension 1920 x 1080 pixels only the middle part will be visible. The rest of the image will be cropped out.
- Background image (dashboard): If you want to use one or more background images in you dashboard you can use the same background images provided in the Media Library or you can upload your own. We recommend keeping the same dimensions as the images already available.