Einbinden von Bildern in TYPO3
In TYPO3 gibt es mehrere Möglichkeiten, Bilder in ein Webdokument einzubinden:
- Einbinden von Bildern mit dem Inhaltselement Text&Media.
- Einbinden von Bildern mit dem Rich Text Editor (RTE).
(Option ab Typo3 Version 10 nicht mehr verfügbar)
Die Methode "Inhaltselment Text & Media" hat ihre Eigenheiten und soll in den nachfolgenden Kapiteln genauer beleuchtet werden.
Probleme mit der Bildqualität?
Warum sind meine Bilder unscharf
Ist das hochgeladene Bild größer als das darzustellende, wird es skaliert. Das Ergebnis überzeugt oft nicht.
Im Detail kommt es auf die Methode an, mit der Sie das Bild in Ihren Inhalt platziert haben.
- Im Rich Text Editor mit "Neues normales Bild"
Haben Sie das Bild im Rich Text Editor als "Neues normales Bild" eingebunden, so wird es in voller Dateigröße an den Webbrowser der Benutzer*in gesendet und im Browser skaliert. Die Ergebnisse sind manchmal nicht zufriedenstellend: Zum einen kann der Aufbau der Seite viel Zeit beanspruchen, weil sehr große Datenmengen transportiert und berechnet werden müssen. Zum anderen kann das skalierte Bild unschön aussehen.
- Mit der Registerkarte "Media" oder im Rich Text Editor mit "Neues Zauberbild"
Haben Sie das Bild auf der Registerkarte "Media" mit der TYPO3-eigenen Methode oder im Rich Text Editor als "Neues Zauberbild" eingebunden, rechnet TYPO3 es vorher klein. Die Ladegeschwindigkeit der Seite wird verbessert, aber manche Betrachter*in ist mit der Bildqualität nicht zufrieden.
Wie kann ich eine bessere Bildqualität erhalten
Sie können das Bild selbst auf die gewünschte Ausgabegröße skalieren.
Dazu benutzen Sie ein Bildbearbeitungs-Programmm, z.B. GIMP (kostenfrei) oder Adobe Photoshop (kostenpflichtig). Die Ergebnisse der Skalierung sind oft besser als in TYPO3.
Darüber hinaus können Sie in einem Bildbearbeitungs-Programm möglicherweise
- den optimalen Skalierungs-Algoritmus für Ihr Bild auswählen, wenn Ihnen verschiedene Algoritmen zur Verfügung stehen.
- die Qualität des Bildes nach der Skalierung verbessern, indem Sie es scharfzeichnen.
Zum Schluss laden Sie das optimierte Bild auf den TYPO3-Server hoch und binden es in Ihr Inhaltselement ein. Rich Text Editor als "Neues Normales Bild". Oder wie gehapt auf der Registerkarte Medien.
Hintergrund
Bilder stellen sehr große Datenmengen dar. Vereinfacht gesagt: Bei einem typischen Web-Bild veerbraucht jedes Pixel so viele Daten wie 3 Buchstaben in einem Text. Deshalb werden in TYPO3 Bilder möglichst datensparend in die Webseite eingebunden. Machen Sie sich bewusst: Ein Bild, das doppelt so breit (und hoch) ist wie nötig, hat 4 mal so viele Pixel wie nötig. (Die Zahl der Pixel steigt im Quadrat zur Kantenlänge.)