Responsive design
Responsive design allows us to show the same image in different formats on our website. No matter what device our website visitors use, they will always see the right image format.
This requires a different approach when it comes to images: one large, sharp image with a sufficiently high pixel density is used to make sure all image components are suitable for the device they are viewed on.
Header images, CTA images and carousels use landscape images. Images in text elements and photo albums can have various aspect ratios (portrait, landscape, panorama or square). Always follow the image instructions to make sure they can be displayed properly.
Only images in JPEG format are allowed on the new website!
MEMO: minimum sizes
- Headers
2000 px wide (W) x 1000 px high (H)
- Images in text elements
1000 px wide or high
- CTA images and carousels
1000 px W x 500 px H
- Photo albums
1000 px W
Header images
The header image is only shown at the top of the homepage of a subsite, and no longer on underlying pages. In addition to an expressive photo, there is room for a title (heading 1) and intro text (subtitle).
When the new site is launched, a header will automatically be generated in the correct format for each subsite. If the original image is not in our possession or if the quality is insufficient, a placeholder standard header image will be shown. The photo can be modified at a later date by our graphics department, or replaced by a design of our own (in line with header guidelines).
Example header on the new site
Formatting
- Image style
Select a high-quality, expressive image without any text or logos. Collages, group photos and logos are not suitable for use as header images. Headers require spontaneous, natural, documentary-style photographs. Abstract or conceptual images are better suited to illustrate text elements, so save them for that purpose.
- Template
Creating header images on the Canva online graphic design platform.
For special graphic designs: contact Nik Römer
When the new site is launched, a header will be generated in the correct format for each subsite.
Technical specifications
- Orientation
Landscape, aspect ratio: 2/1
- Minimum size
2000 px W x 1000 px H
Ideal, maximum size: 4000 px W x 2000 px H
- Upload capacity
Limited to 40 MB
- File format
Always save images as JPEG
- File name
Give your image files an SEO-friendly name: e.g. 'students.jpg', not 'UA123.jpg'. Use only lower case and avoid spaces.
Images in text elements
- Various aspect ratios are possible for images in text elements.
- Photo editing in the editor on the webpage is no longer possible, so any image editing has to be done beforehand.
- Once uploaded into the text element, the photo is scaled at the front end, depending on the device the visitor is using.
- If you want all images to be the same size, you'll have to make sure they're the same size before uploading them.
- Don't use images in tables.
Formatting
- Image style
Select a high-quality, expressive image without any text.
- Template
Formatting images for text elements on the Canva online graphic design platform
Specifications
- Orientation
Portrait, landscape, panorama or square
- Minimum width or height: 1000 px W or H
Maximum width: 6000 px W
Please note:
The image will be scaled up or down depending on the size. - If the image is the same size as the full width of the text column:
full width of the text column - If the image is smaller than the full width of the text column:
the image is automatically centred, with left or right alignment options. - In case of left or right alignment, the image is automatically scaled down to a suitable format.
- Upload capacity
Limited to 40 MB - File format
Always save images as JPEG - File name
Give your image files an SEO-friendly name: e.g. 'students.jpg', not 'UA123.jpg'. Use only lower case and avoid spaces.
Call-to-action images and carousels
For call-to-action images (CTA images) and carousels, we always use images in landscape mode. The larger the number of pixels, the better the result.
The CTA image will be scaled up or down depending on the device and the number. The system always crops the image to a consistent format:
In desktop mode
- 1 CTA image: large, centred
- 2 or 3 consecutive CTA images: shown side by side
- Up to 3 CTA images can be shown side by side; the fourth one will start a new row.
On mobile screens
CTA images are always arranged vertically
Formatting
- Image style
Select an expressive image without any text or logos.
In case of carousel images, there's room to add a separate line of text.
CTA images have several display options and styles.
- Template
Formatting CTA images and carousels on the Canva online graphic design platform
Technical specifications
- Orientation
Landscape, aspect ratio: 2/1
- Minimum size
1000 px W x 500 px H
Ideal, maximum size: 6000 px W x 3000 px H
- Upload capacity
Limited to 40 MB
- File format
Always save images as JPEG
- File name
Give your image files an SEO-friendly name: e.g. 'students.jpg', not 'UA123.jpg'. Use only lower case and avoid spaces.
Photo-albums
Different aspect ratios are allowed in photo albums. Images may be uploaded directly, but always observe the minimum width. Make a selection of your best images.
Specifications
- Orientation
Portrait, landscape, panorama or square
- Minimum width: 1000 px W
Maximum width: 6000 px W
- Upload capacity
Limited to 40 MB
- File format
Always save images as JPEG.
- File name
Give your image files an SEO-friendly name: e.g. 'students.jpg', not 'UA123.jpg'. Use only lower case and avoid spaces.