Image sizes
You can find image sizes for use on uio.no here.
Image sizes on uio.no
Article template/ event template
When inserting an image into image field use16:9 format.
- Image at the top of an article: 1000*562 pixels (16:9 format)
- The image will be at the top, under the opening paragraph of the article/ event
- This is the image that will appear in the feeder
Recommended image sizes when adding images to main content:
- Landscape: 690*388 (16:9 format) or 690*517 pixels (4:3 format)
- Portrait: 517*690 pixels
- Square: 690*690 pixels
Recommended image sizes for publications in article templates:
- Portrait: 517*690 pixels
- Square: 690*690 pixels
Recommended image sizes for career interview in article templates:
- In main field: 1000*562 pixels (16:9 format)
- Portrait: 517*690 pixels
- Landscape: 690*388 (16:9 format) or 690*517 pixels (4:3 format)
Dissertation template
- Portrait: 517*690 pixels
Personal presentations
- 300*400 pixels
Research project template
Two options are available for displaying an image on top of the project page:
- A full-width background image that appears behind the title and acronym field.
- An image at regular text width that is displayed below the title, introduction and duration.
For option 1, you should check "Use as background image at the top of the page" in the editor interface.
The recommended size for images used as a header image at the top of the page is 1395x514 pixels (279:103 aspect ratio). On mobile, the image is cropped to a 4:3 aspect ratio, so the main subject should be located near the center of the image.
If the image is to be displayed below the introduction, the recommended size is 1000x562 pixels (16:9 aspect ratio).
Front page template
- in full-width box on front pages: 1200 x 675 pixels (16:9 format)
- in half-width box on front pages:
- Portrait: 560x747 pixels
- Landscape: 560 x 315 pixels (16:9 format)
- in info box: 690x517 pixels (4:3 format)
Fact box/ info box
- instructions and image sizes for fact boxes in articles
- intructions and image sizes for info boxes on front pages
Main front page image for faculty, institute, centre and uio.no
- Main front page image for faculty, institute and center: 1395 x 514 (format 279:103)
- Include the image in the first box on the front page
- On the box that contains the image, enter the code sub-header-box-big in the special settings field ("spesielle innstillinger"). If the image requires white colour on the seal, use sub-header-white-seal as well.
- Separate image for mobile screens: 768 x 576 (format 4:3)
A mobile image is added by pasting in the following code in the editor html view in the same box that contains the main image:
<p class="mobile-image"><img alt="YOUR ALT TEXT" height="576" src="YOUR IMAGE URL" width="768" /></p>
(fill in alt text and the URL of the image you wish to use)
- Top image on the front page of uio.no: 840*473 (format 16:9)
- Include the image in the first box on the front page
- The text displayed next to the picture is entered into the content editor of the same box, on the following format:
<p>See our study offers and find the study programme that suits you.</p>
<p><a class="read-more" href="/english/studies">See all study offers</a></p> - If the image is to be displayed to the right of the text, enter frontpage-uio-{orange/blue/green}-img-right into the special settings field (chose one of the colours listed).
- ???If the image is to be displayed to the left of the text: enter frontpage-uio-{orange/blue/green}-img-left into the special settings field (chose one of the colours listed).
- Separate image for mobile screens: 768 x 576 (format 4:3)
A mobile image is added by pasting in the following code in the editor html view in the box that contains the front image and text:
<p class="mobile-image"><img alt="YOUR ALT TEXT" height="576" src="YOUR IMAGE URL" width="768" /></p>
(fill in alt text and the URL of the image you wish to use). If this code is placed above the text in the editor field, the image will be displayed above the text on mobile devices – and vice versa.
Video sizes
Video in landscape format
Videos on a website must as a main rule have the format of 16:9, also called landscape format. To find out how many pixels the video should have, you can reference the image sizes for 16:9 format. Here are some examples for the most common templates:
Article/event/sub-pages:
- at the top of an article: 1000x562 pixels (16:9 format)
- in the content field: 90x388 pixels (16:9 format)
Front page template/study program front page:
- in full width boxes: 1200x675 pixels (16:9 format)
- in half width boxes: 560x315 pixels (16:9 format)
Video in portrait format
Videos that are made for social media are usually in portrait format. In general it is recommended to make a separate version fin landscape format for the websites.
Sometimes it is still desirable to use a video in a height format on the web. By adding a quote on the side of the video, the display becomes balanced.