In diesem Beitrag erfahren Sie, wie Sie durch die richtige Wahl von Dateiformaten, Bildgrößen, Bildformaten und Dateinamen die Performance und Barrierefreiheit Ihrer Website verbessern können. Wir erläutern, welche Formate sich am besten eignen, wie Sie die Bildgröße und -benennung optimieren und warum Alt-Tags wichtig für SEO und Zugänglichkeit sind. Mit diesen Tipps vermeiden Sie unnötige Nacharbeiten und sorgen für eine schnell ladende, benutzerfreundliche Website.
Inhalt
Welches Dateiformat eignet sich am besten für welchen Zweck?
JPG/JPEG
Fotos werden in der Regel als JPG/JPEG gespeichert, da dieses Format ein guter Kompromiss zwischen Qualität und Dateigröße ist. Reduzieren Sie die Qualität beim Speichern auf 82-85 %, um die Datenmenge zu verringern, damit Ihre Website schneller lädt und ressourcenschonender ist.
PNG
Grafiken oder Bilder ohne Hintergrund (wie freigestellte Fotos) werden meist im PNG-Format gespeichert. Dieses Format hat jedoch oft eine größere Dateigröße, was zu längeren Ladezeiten Ihrer Website führen kann. Zudem ist aus Gründen der Nachhaltigkeit auf eine möglichst geringe Datenmenge zu achten, um Ressourcen und Energie zu sparen.
SVG
Dateien, die auf Vektoren oder Pfaden basieren, wie beispielsweise Logos oder Grafiken, lassen sich als SVG-Dateien in WordPress nutzen. Der Vorteil von Vektor-Dateien besteht darin, dass sie ohne Qualitätsverlust beliebig skaliert werden können. Für pixelbasierte Fotos ist es jedoch nicht ratsam, sie als SVG-Dateien zu speichern.
Beachten Sie: Fotos können aufgrund ihrer hohen Komplexität nicht in Vektoren umgewandelt werden. Es hat daher keinen Nutzen, ein pixelbasiertes Foto als SVG-Datei zu speichern. Die Fotos werden in diesem Format lediglich eingebettet, aber nicht in Vektorgrafiken konvertiert.
Empfohlene Bildgrößen: Optimale Dimensionen für eine hochwertige Darstellung auf Ihrer Website
Wir empfehlen, Bilder je nach Ausrichtung mit einer maximalen Länge von 2500px auf der längsten Seite zu verwenden. Damit Ihre pixelbasierten Dateien optimal dargestellt werden, sollten die Bilder eine Mindestbreite oder -höhe von 1500px auf der kürzesten Seite haben. So verhindern Sie zu kleine oder verpixelte ‘Briefmarken’-Darstellungen.
Optimale Bildformate für Ihre Website: Hochformat, Querformat und quadratische Optionen
Zunächst sollten Sie zwischen Hoch- und Querformat unterscheiden, wobei auch das quadratische Format (1:1) zu berücksichtigen ist. Im Web ist jedoch das Querformat häufiger anzutreffen, typischerweise in den Formaten 16:9, 4:3 oder 3:2.
Um es sich einfacher zu machen, sollten Sie sich auf Ihrer Website auf maximal zwei Bildformate festlegen. Notieren Sie sich die jeweiligen Bildbreiten und -höhen, um bei einem späteren Austausch der Bilder Zeit zu sparen.
- Beispiel für 4:3 = 2500x1875px (Breite x Höhe)
- Beispiel für 16:9 = 2500x1405px (Breite x Höhe)
Zu guter Letzt – die Dateibenennung
Ein einmaliger Aufwand ist besser als dreimaliges Nacharbeiten
Machen Sie sich das (Web-)Leben nicht unnötig schwer. Geben Sie Ihren Dateien klare und ordentliche Namen – die Zeiten von Bindestrichen und Unterstrichen sind vorbei. Willkommen im Jahr 2024!
Benennen Sie Ihre Bilder so, wie Sie auch normale Texte schreiben würden: mit Leerzeichen, Groß- und Kleinschreibung, Umlauten und vor allem verständlich und aussagekräftig! WordPress konvertiert die Dateinamen in eine webtaugliche Variante und übernimmt den Dateinamen automatisch in den Title-Tag.
WordPress konvertiert Dateinamen automatisch in eine webgerechte Form und übernimmt diese als Bildtitel (Title-Tag). Mit den richtigen SEO-Tools wird aus dem Bildtitel automatisch ein Alternativtext für das Alt-Tag generiert.
Das Alt-Tag ist unerlässlich für die Barrierefreiheit Ihrer Website und hat auch einen positiven Einfluss auf die Suchmaschinenoptimierung, vorausgesetzt, es enthält einen sinnvollen Text – Beschreibung des Motivs – statt einer generischen Bezeichnung wie ‘IMG-0724683’. Ab dem kommenden Jahr wird ein neues Gesetz zur Barrierefreiheit wirksam, das neue Anforderungen mit sich bringt. Mehr dazu erfahren Sie in diesem Beitrag über die To-dos im Zuge der Barrierefreiheit.
Hier ein Beispiel für die Verwendung all des Gelernten
Informationen zum Bild:
- Dateiformat: JPG mit 82% Qualität
- Bildgröße: 1500px in der Breite
- Bildformat: 3:2 (Querformat)
- Dateiname bei Upload: Kleinstes Schwein der Welt sitzt auf einem Daumen
Fazit
Durch die sorgfältige Vorbereitung von Bildern und Grafiken vor dem Upload und der Einbindung in Ihre Website sparen Sie nicht nur Zeit und Mühe, sondern verbessern auch die Ladegeschwindigkeit, Suchmaschinenoptimierung und Barrierefreiheit Ihrer Website.