Bildformate
Auf dieser Themenseite erfahren Sie, welche Bildformate im TYPO3-System der TU Dortmund genutzt werden können und welche technischen Rahmenbedingungen Ihre Bilder erfüllen sollten.
Bei der Bereitstellung von Bildern für das Web gibt es einige Rahmenbedingungen, die man beachten sollte. Dazu zählen unter anderem das Bildformat, die Bild- und Dateigröße und - sofern genutzt - Farbprofile. Im Folgenden haben wir die gängigsten Fragen und Antworten zu diesem Themenkomplex für Sie zusammengestellt.
Grundlegende Rahmenbedingungen
Grundsätzlich können folgende Bildformate in der Dateiliste hochgeladen werden:
GIF, JPG/JPEG, PNG, SVG, WEBP
JPG/JPEG und WEBP: Diese Bildformate eignen sich am besten für Fotografien mit feinen Bilddetails.
PNG und GIF: Diese Bildformate eignen sich besonders für Bilder mit klaren Konturen (z. B. Strichgrafiken oder Icons) und transparenten Hintergründen.
SVG: SVG Dateien haben den Vorteil, dass diese verlustfrei skaliert werden können. Vor allem bei Webseiten-Logos sollten diese zum Einsatz kommen. Mehr zum Einsatz und zur Erstellung von Logos erfahren Sie auf unserer Themenseite zu Logos.
Die Bildgröße bezieht sich auf die Breite und Höhe des Bildes in Pixeln. Die Dateigröße bezieht sich hingegen auf die Menge an Speicherplatz, die das Bild in Ihrem Dateispeicher belegt.
Beispiel, Bild rechts: Das Bild von der Mensa hätte bei einer Bildgröße von 2000 x 1334 Pixeln eine Dateigröße von ca. 0.54 MB (540 KB).
Bilder, die im Inhaltsbereich der Websites genutzt werden, sollten das Bildformat JPG/JPEG oder WEBP besitzen. Die Bildbreite sollte bei etwa 2000 Pixeln liegen. Die Dateigröße sollte unter diesen Rahmenbedingungen keinesfalls mehr als 1 MB (1000KB) betragen.
Bild- und Dateigröße sollten vor dem Upload der Bilder durch entsprechende Grafikprogramme korrigiert werden, wenn diese merklich von den oben genannten Eckdaten abweichen. Oftmals reicht es schon, die Bildbreite auf 2000 Pixel zu reduzieren und das Bild bei mittlerer bis hoher Qualitätsstufe abzuspeichern.
Wichtig: Für Seitenheader gelten abweichende Bildgrößen (siehe Punkt "besondere Bildgrößen" unten auf der Seite).
Für Bilder im Web sollte grundsätzlich ein RGB-Farbraum genutzt werden. Für die Nutzung im TYPO3-System der TU Dortmund wird ein sRGB-Farbprofil empfohlen. Dieses erzeugt die konsistentesten Ergebnisse in der Farbwiedergabe.
Bei der Nutzung von abweichenden Farbprofilen kann es zu Schwankungen in der Konsistenz der Farbwiedergabe kommen.
Die Bilder müssen nicht vorab beschnitten werden. Sobald ein Bild von den Redakteur*innen in einem Inhaltselement eingebunden wird, können mit dem internen Bildeditor entsprechende Bildausschnitte in TYPO3 definiert werden. Dabei bleibt das Originalbild bestehen. Mehr zu diesem Thema erfahren Sie auf unserer Themenseite zum Bildeditor.
Wenn Sie eine SVG Datei für Ihren TYPO3 Auftritt erstellen, muss im SVG-Tag das viewbox-Attribut mit angegeben werden. Ansonsten kann es sein, dass das SVG bei der Einbindung in der Website nicht korrekt dargestellt wird.
Beispiel:
<svg xmlns="http://www.w3.org/2000/svg" id="logo" viewBox="0 0 337.65 59.27" preserveAspectRatio="xMinYMin meet">
Besondere Bildelemente
Logos und Favicons
Für den Einsatz und die Erstellung von Logos und Favicons gibt es gesonderte Rahmenbedingungen, die Sie beachten sollten. Weitere Informationen finden Sie auf unserer Themenseite zu Logos und Favicons.
Seitenheader
Bei den Seitenheader muss eine Mindestbildgröße eingehalten werden, da es ansonsten zu Darstellungsfehlern in manchen Browsern kommt.
Die Mindestgröße des Originalbildes muss betragen:
Breite: 2880px, Höhe: min. 1000px
Animierte GIFs
Der Einsatz animierter GIFs ist auf den Websites der TU Dortmund nicht vorgesehen und wird daher nicht vollumfänglich unterstützt.
SVG-Dateien
Bei der Einbindung von SVG-Dateien ist zu beachten, dass das SVG-Tag ein viewbox-Attribut erhält. Ohne viewbox-Attribut werden SVG-Dateien nicht korrekt skaliert.