Image Formats
On this topic page you will learn which image formats can be used in the TYPO3 system of TU Dortmund University and which technical conditions your images should fulfill.
When providing images for the web, there are some basic conditions that should be observed. These include the image format, the image and file size and - if used - color profiles. In the following, we have compiled the most common questions and answers on this complex of topics for you.
Basic framework conditions
In principle, the following image formats can be uploaded in the file list:
GIF, JPG/JPEG, PNG, SVG, WEBP
JPG/JPEG and WEBP: These image formats are best suited for photographs with fine image details.
PNG and GIF: These image formats are particularly suitable for images with clear contours (e.g. line graphics or icons) and transparent backgrounds.
SVG: SVG files have the advantage that they can be scaled without loss. They should be used for website logos in particular. You can find out more about the use and creation of logos on our topic page on logos.
The image size refers to the width and height of the image in pixels. The file size, on the other hand, refers to the amount of storage space that the image occupies in your file storage.
Example, image on the right: The image of the canteen would have a file size of approx. 0.54 MB (540 KB) with an image size of 2000 x 1334 pixels.
Images used in the content area of the websites should have the image format JPG/JPEG or WEBP. The image width should be around 2000 pixels. Under these conditions, the file size should not exceed 1 MB (1000KB).
The image and file size should be corrected by appropriate graphics programs before uploading the images if they deviate noticeably from the above-mentioned key data. It is often sufficient to reduce the image width to 2000 pixels and save the image at a medium to high quality level.
Important: Different image sizes apply to page headers (see "Special image sizes" at the bottom of the page).
An RGB color space should always be used for images on the web. An sRGB color profile is recommended for use in the TU Dortmund University's TYPO3 system. This produces the most consistent results in color reproduction.
The use of different color profiles can lead to fluctuations in the consistency of color reproduction.
The images do not need to be cropped in advance. As soon as an image is integrated into a content element by the editors, corresponding image sections can be defined in TYPO3 using the internal image editor. The original image is retained. You can find out more about this topic on our image editor topic page.
If you create an SVG file for your TYPO3 website, the viewbox attribute must be specified in the SVG tag. Otherwise, the SVG may not be displayed correctly when integrated into the website.
Example:
<svg xmlns="http://www.w3.org/2000/svg" id="logo"<strong> viewBox="0 0 337.65 59.27" preserveAspectRatio="xMinYMin meet">
Special Image Elements
Logos and Favicons
There are special conditions for the use and creation of logos and favicons that you should observe. You can find more information on our topic page on logos and favicons.
Page Header
A minimum image size must be adhered to for page headers, otherwise display errors will occur in some browsers.
The minimum size of the original image must be: width: 2880px, height: min. 1000px.