Images & Videos
Are you looking for image material for your new website or would you like to know what guidelines generally apply to the display of photos and graphics on the University of Vienna website? We have compiled all the essential information here and offer an overview of various options for finding suitable images. Certain specifications and requirements for digital accessibility also apply to the integration of videos (e.g., u:stream, YouTube, Vimeo, Phaidra), which we have summarized for you here.
How to use images correctly
The various content elements display images, graphics, and videos in very different sizes depending on the type of element. In order to prepare such content in the best possible way for the structure of your website, we have summarized the most important elements and the corresponding recommendations for the appropriate pixel dimensions of images:
- Header main pages: 2000 pixels wide x 1500 pixels high (mobile display 4:3, desktop 16:7)
- Header content pages: 2000 pixels wide (11:4 in all resolutions) – for content elements,
- facts & figures, teaser banners: 2000 pixels wide
- Text & media, gallery & slider, teaser, contact box: 1200 pixels wide
- Highlight banner: Sample template (pdf) with exact pixel dimensions and examples
Notes: We recommend 16:9 as the standard format (e.g., 1600 x 900 pixels or 1920 x 1080 pixels). If a larger image is uploaded, you can use the integrated TYPO3 photo editor to select a section of the image for the website. A main page header image should be uploaded with a minimum size of 2000 x 1500 pixels, as the mobile version uses the 4:3 format.
Once you have compiled new image material (or other files such as videos or documents) for your website, we recommend that you always upload it first to the file list in the backend. There you have the option of creating your own folder structure to ensure the best possible clarity and retrievability of the files. Once you have uploaded the files to the folder of your choice, please be sure to immediately enter the metadata for the corresponding file in all languages used on the site:
- Alternative text, if it is not purely decorative (important for digital accessibility!)
- Description (appears directly below the image or when you click to enlarge it)
- Copyright (creates the copyright icon in the lower right corner of the image)
Notes: The metadata entered in the file list is automatically transferred wherever an image/video/document is displayed on a website. However, if desired, it can also be manually overwritten on individual pages to ensure maximum flexibility.
For photos from the media library, the copyright notice is stored separately for each image.
Please note that the images may only be used for editorial purposes and in connection with the University of Vienna. In addition, the copyright notice must be placed in the file list in the Copyright field and must be assignable to the image. The standard format for copyright notices is the name of the photographer, e.g., “Ian Ehm.”
The copyright symbol appears automatically on the website as soon as the copyright field is filled in.
Image material from other organizational units or press photos
Please note: Simply stating the copyright does not constitute approval for the unrestricted use of an image.
If you receive image material from other organizational units or external sources (e.g. press photos, photos from events, etc.), please ensure that the supplying source confirms in writing that:
- the necessary rights of use are available,
- the images may be used for our purposes (e.g., website, social media, print), and
- the correct copyright designation has been provided.
In the new TYPO3 version 12, it is no longer necessary to crop images in a separate program (e.g., Photoshop) first.
For all content elements with an image function, there is now the option of simple image editing directly in the backend in the area where the image file is selected.
Simply click on the “Open Editor” button. A new window will appear with a view of the image and a legend in the upper right corner of the editing area. Here you can select the format (16:9, 3:2, 4:3, 1:1, or Free) and, if necessary, undo your changes using the “Reset” button. You can also manually crop image areas by using the mouse pointer to shorten or shrink the relevant areas.
How to find new image material
Since February 2023, the media library has been available to all employees of the University of Vienna. On this online platform, they can log in using their u:account and search for image material from almost 2,000 image photos, more than 300 icons, and 30 videos in the categories of study, locations, and research, and download it in various formats.
Please also refer to the user manual for help navigating the database and information on image rights. There you will find important information on sorting, searching, filtering, and permitted uses. The media library will be gradually expanded with new image material.
If you would like to hire a photographer to take pictures for your website, please write to mediathek(at)univie.ac.at. We will be happy to provide you with the relevant contact details.
Please note that the costs for the photo shoot will be borne by the commissioning organization!
How to use videos correctly
- Format:
.mp4(H.264 codec, AAC audio – even though audio is usually disabled). - Resolution:
- Desktop: 1920 × 840 px (≈ 16:7)
- Mobile: 1080 × 810 px (≈ 4:3)
- Max. length: 15–20 seconds (loopable)
- File size: < 5 MB (optimized so that loading time and performance are not affected).
- Compression: Export optimized for the web
- Please consider digital accessibility:
- No sound (or sound disabled by default).
- No rapid flickering or strobe effects.
With the content element UniWien Streaming, you can embed a u:stream link in your website.
Links from YouTube, Vimeo, or Phaidra can also be integrated in this way.
Please note the specifications of the respective platform.
For reasons of digital accessibility, videos should be provided with subtitles and a short description of the content whenever possible.
Links from YouTube or Vimeo can be integrated using the Video Teaser content element.
For data protection reasons, the video is played using a 2-click solution:
- The first click loads the YouTube/Vimeo embed.
- The second click starts the video.