1. Sie sind hier:
  2. Home
    3. |
  3. TYPO3-Support
    4. |
  4. Suchmaschinenoptimierung
    5. |
  5. Bildoptimierung in TYPO3

Bilder in TYPO3 richtig verwenden

Letzte Änderung:

Der richtige Umgang mit Bildern auf der Website ist auf zwei Gründen wichtig:

  1. Bilder, die schnell laden, nutzen der Benutzerfreundlichkeit und damit auch das Suchmaschinen-Ranking (siehe hierzu unseren Artikel zum Pagespeed) 
  2. Da sich die Bedeutung von Bildern für Maschinen nur schwer erschließt, müssen diese beschrieben werden. Damit wird die Barrierefreiheit unterstützt und das Auffinden in der Google Bildersuche, die bis 20% Anteil an den gesamten Suchanfragen hat.

In diesem Artikel beschreiben wir die notwendigen Maßnahmen zur optimalen Bereitstellung von Bildern mit TYPO3.

Sollten Sie Probleme oder Fragen zu diesem Thema haben steht Ihnen unser Support gerne zur Verfügung.

1. Das richtige Bildformat wählen

Die am häufigsten verwendeten Bildformate sind:

JPG

Das JPG-Format ist das am häufigsten verwendete Format für Fotos, also nicht strukturierte Bilder mit hoher Farbtiefe. JPG's lassen sich sehr gut "webtauglich" komprimieren bieten aber keine Transparenz. 

PNG

Das PNG-Format bietet im Vergleich zum JPG-Format verlustfreie Komprimierung von Bildern. Für die Verwendung im Web eignet sich das Format aber weniger, da die Dateien deutlich größer ist als bei jpg-Bildern. Im Vergleich zu JPG bietet das PNG-Format aber Transparenz.

GIF

GIF-Dateien haben eine maximale Farbtiefe von 256 Farben. D.h. sie eignen sich nicht für Fotos. Dafür sind sie klein, bieten Transparenz und ermöglichen Animationen. Bei der Verwendung als Animation sollten Sie allerdings den Einsatz von Videos in Betracht ziehen.

WEBP

Das von Google entwickelte Format gilt als Nachfolger des jpg-Formats. Es ist besser komprimierbar, flexibler (verlustfrei oder verlustbehaftet), generell kleiner bei gleicher Qualität und bietet Transparenz. Großer Nachteil: Es wird noch immer nicht von allen Browsern unterstützt. Die Abdeckung liegt zur Zeit bei 70-80%. Sie können TYPO3 so einrichten, dass es Bilder in anderen Formaten automatisch in webp konvertiert.

SVG

Im Gegensatz zu den vorangegangenen Formaten handelt es sich hier um Vektorgrafiken. D.h. die Bildpunkte werden nicht als Matrix gespeichert, sondern auf Basis von Formeln berechnet. Der große Vorteil: Sie sind extrem klein und können beliebig verlustfrei vergrößert werden (Skalierbarkeit). Svg's eignen sich allerdings nicht für Fotos. Dafür aber für Infografiken, Logos, Icons usw. Außerdem ermöglichen SVGs Transparenz, Animationen und Interaktionen (z.B. interaktive Karten).

Format Transparenz Skalierbarkeit Qualität Größe Animation
jpg nein nein hoch groß nein
png

ja

 nein sehr hoch sehr groß nein
gif ja nein niedrig klein ja
svg ja ja sehr hoch sehr klein nein

 

Die Frage, welches Format Sie verwenden sollten, hängt also sehr stark vom Verwendungszweck und den Anforderungen an das jeweilige Bild ab.

2. Bild in maximal erforderlichen Dimensionen bereitstellen

Versuchen Sie, Bilder nur in der maximal notwendigen Größe in TYPO3 hochzuladen und einzubinden. Möchten Sie z.B. ein Bild in der Größe von 600px Breite einbinden, laden Sie es auch exakt in der Größe hoch nicht etwas mit 800er oder 900er Breite hoch.

Wenn Sie ein Bild größer bereitstellen als es erforderlich ist, können je nach TYPO3 Konfiguration zwei nicht gewünschte Effekte entstehen:

  1. TYPO3 formatiert das Bild vor der Auslieferung an den Browser automatisch (so dass die Übertragungsgröße optimiert wird) und cached es(damit der Vorgang nicht bei jedem Aufruf wiederholt werden muss). Diese Methode kostet aber Serverzeit (wenn Cache geleert wurde), führt zu sehr unschönen Bild-URLs(z.B. "csm_pagespeed_wacon_f2a074099f.jpg") mit begrenzter Gültigkeit (schlecht für die Bildindizierung bei Google) und "müllt" Ihren Webspace unnötig zu.
  2. TYPO3 liefert das Bild in der Originalgröße aus. Dies führt zu unnötiger Ladezeit, was die User Experience verschlechtert (siehe Pagespeed-Optimierung) und damit das Suchmaschinen-Ranking gefährdet.

So erkennen Sie, ob Ihr Bild die richtigen Dimensionen hat

  1. Öffnen Sie die Seite mit dem Chrome-Browser
  2. Gehen Sie mit der Maus auf das Bild, klicken Sie die rechte Maustaste und wählen Sie "Untersuchen"
  3. Gehen Sie mit der Maus aus den Bild-URL("src-Attribut")
Bild-Dimensionen mit den Chrome Entwicklertools
Überprüfen der Bildmaße mit den Chrome Entwicklertools

Rendered vs. Intrinsic Bildmaße

Wenn das vom Server geladene Bild größere Ausmaße hat als erforderlich (weil es z.B. laut HTML/CSS-Code kleiner angezeigt werden soll), werden zwei Werte angezeigt. Die sog. Rendered size gibt die Bildmaße des angezeigten Bildes an während die Intrinsic size die tatsächlichen Bildmaße angibt.

Das sollten Sie möglichst vermeiden und immer nur die Bilder in den Ausmaßen bereitstellen wie sie angezeigt werden sollen:

rendered vs. intrinsic size
rendered(angezeigte) vs. intrinsic Bildmaße

HINWEIS: Der hier gemachte Vergleich ist dann nicht so einfach, wenn Sie z.B. eine Vergrößern-Funktion per on-Click anbieten. Viele Lösungen laden schon das größere Bild mit dem Seitenaufruf, weshalb der Browser dann auch dessen intrinsic-Eigenschaft ausgibt.

3. JPEGs und PNGs web-optimieren

Optimieren Sie Ihre Fotos so weit wie möglich. Die meisten Bilder haben eine druckreife Qualität. Für die Darstellung im Browser ist das aber nicht erforderlich. Hier reicht als "Meßlatte" das menschliche Auge. Man nennt diese Bilder dann auch "weboptimiert". Diverse kostenlose Tools wie irfanview  (PlugIn auch installieren!) oder gimp bieten die Möglichkeit zu einer solchen Optimierung. Ein nützliches Online-Tool ist TinyPNG, mit dem sowohl PNGs als auch JPGs komprimiert werden können.

4. Responsive Images verwenden

Binden Sie Bilder immer responsive ein, d.h. ein Bild sollte immer nur in der für das Display erforderlichen Größe ausgeliefert werden. Bilder für mobile Geräte also in der Regel viel kleiner als für Desktop-Geräte.

TYPO3 ist in der Lage, Bilder für unterschiedliche Auflösungen automatisch zu skalieren. Wie das funktioniert zeigen wir hier.

5. Bilder beschreiben

Die Bildbeschreibung ist in TYPO3 standardmäßig in drei Feldern möglich:

Mit Alternativtexten erleichtern Sie Maschinen, den Inhalt des Bildes zu verstehen. Google nutzt diese Informationen zur Bildinterpretation und zum Verständnis der ganzen Seite. Der Alternativtext spielt also sowohl für die normale Suche als auch für die Bildersuche eine wichtige Rolle.

Screenreader nutzen den Alternativtext zur Beschreibung des Bildes für Menschen mit Sehbehinderung. Benutzer mit sehr schlechter Internetverbindung erhalten den Text ggf. anstatt des Bildes angezeigt.

Der Titel eines Bildes wird für den sogenannten Tooltipp benutzt. Dabei handelt es sich um einen kurzen Text, der erscheint, wenn man mit der Maus über das Bild fährt.

Die Bildunterschrift ist der sichtbare Text unter dem Bild. Dieser Text wird von Suchmaschinen besonders hoch gewertet, da er auch dem Besucher angezeigt wird und somit schwer zu missbrauchen ist.

Nutzen Sie alle drei Felder um ein Bild und den Inhalt Ihrer Seite zu beschrieben. Verwenden Sie dabei - in angemessener Anzahl - auch für die Seite und für die Bildersuche wichtige Suchbegriffe.

 

6. Dateinamen und -struktur

Verwenden Sie für Datei- und Ordnernamen grundsätzlich nur Kleinbuchstaben, Ziffern und Bindestriche. Auf keinen Fall aber Umlaute, Leer- und Sonderzeichen.

Der Dateiname sollte möglichst ein geeignetes Keyword enthalten.

Über den Menüpunkt "Dateiliste" haben Sie die Möglichkeit, Ordner anzulegen, die dann als Pfadnamen in der URL wiedergegeben werden. Auf diese Weise können Sie eine Struktur bilden und Ordnern ebenfalls keywordrelevante Bezeichnungen geben.

Die URL eines Produktbildes könnte dann idealerweise so aussehen:

www.meinedomain.de/produkte/aquarien/zubehoer/filter/mein-produktfiler.jpg

Das macht natürlich nur Sinn, wenn Sie ausreichend viele Kategorien und Produkte anbieten. Generell gilt: Je kürzer eine URL, desto besser.

Verzeichnisstruktur im TYPO3-Backend anlegen
Unter "Dateiliste" im TYPO3 Backend eine geeignete Ordnerstruktur anlegen.

7. Lazy Loading einsetzen

Lazy Loading ist eine Technik, die Bilder einer Seite erst dann läd, wenn im Display angezeigt werden müssen. Dadurch wird die Ladezeit von Seiten beträchtlich verkürzt.

TYPO3 unterstützt ab Version 10 das HTML-Attribut "loading" des img-Tags (siehe hierzu: Was ist neu in TYPO3 v10?). 

8. Bilder Sitemap anlegen

Eine Bilder-Sitemap ist - vereinfacht gesprochen - eine Auflistung von auf einer Website verfügbaren Bild-URLs in Form einer XML-Datei. Sie hilft Suchmaschinen dabei, die Bild-Struktur der Website zu erkennen und erhöht die Wahrscheinlichkeit, dass Bilder in den Suchindex aufgenommen werden.

Unser favorisiertes Tool zur Erstellung von Sitemaps ist ScreamingFrog, dass in der kostenlosen Variante 500 URLs in einer Sitemap aufnehmen kann.

Bilder-Sitemap generieren, hochladen und einreichen

Zur Bereitstellung einer Bilder-Sitemap mit TYPO3 gehen Sie wie folgt vor:

  1. Öffnen Sie ScreamingFrog  und führen Sie ein Crawling durch.
  2. Wählen Sie unter Sitemap den Punkt "Image Sitemap" und speichern Sie die Datei unter einem geeigneten Namen (z.B. bilder-sitemap.xml) ab.
  3. Loggen Sie sich in Ihr TYPO3-Backend ein. Gehen Sie auf Dateiliste und laden Sie die Datei am besten direkt unter "fileadmin" hoch.
  4. Loggen Sie sich in der Google Search Console ein und geben Sie unter "Sitemaps -> Neue Sitemap hinzufügen" den Pfad- und Dateinamen der hochgeladenen XML-Datei ein
Bilder Sitemap in TYPO3 bereit stellen