"Ein Bild sagt mehr als 1000 Worte" und gibt User:innen den ersten Eindruck von deiner Website. Damit du sichergehst, dass dieser Eindruck ein positiver ist, musst du ein paar Dinge bedenken. Wir erklären dir in diesem Blogbeitrag, worauf du in Bezug auf Bildgrößen auf Websites achten musst.
Wozu brauche ich das?
Wahrscheinlich arbeitest du schon mit Bildern und fügst sie regelmäßig in deine Beiträge ein. Das ist auch gut und wichtig, denn Fotos und andere visuelle Elemente machen deine Website nicht nur visuell ansprechender, sie sind auch für die Search Engine Optimierung (SEO) wichtig. So sorgst du auch dafür, dass dein Content von Suchmaschinen besser gereiht wird.
Es reicht aber nicht, einfach nur wild Fotos und andere Medien einzubauen. Du musst unbedingt auch auf Bildgröße, Pixelanzahl, Dateigröße und Qualität achten.
Aber keine Angst, du bist nicht alleine: Wir geben dir Tipps, für die Optimierung deiner Bilder auf deiner Website.
Unterschiedliche Bildtypen erfordern spezifische Größen und Formate, um die Ladezeit der Webseite nicht zu beeinträchtigen und gleichzeitig auf allen Geräten scharf und ansprechend dargestellt zu werden.
Hier ein Überblick über die typischen Bildgrößen für verschiedene Verwendungszwecke:
Header-Bilder und Slider: Das sind große Bilder, die als Banner oder Hintergrund im Header-Bereich verwendet werden, also ganz oben auf der Website. Sie sollten mindestens eine Breite von 1920 Pixel haben, idealerweise im Format 1920x1080 Pixel. So sind sie auch auf großen Bildschirmen scharf und ansprechend.
Thumbnails und Beitragsbilder: Diese kleineren Bilder, die Artikel oder bestimmte Abschnitte auf der Webseite hervorheben, sind häufig 300x300 Pixel oder 400x300 Pixel groß. Sie sollten sich gut ins Layout einfügen und auf verschiedenen Bildschirmen ansprechend aussehen.
Seitenverhältnisse
Ein weiterer wichtiger Aspekt sind die Seitenverhältnisse deiner Bilder. Diese beschreiben das Bildformat in Breite und Höhe.
Bedenke hier, dass die Darstellung immer für alle Geräte optimiert sein soll. Wenn jemand deine Website auf seinem Laptop aufruft, soll es ebenso gut aussehen wie auf Smartphone-Displays.
Vermeide es daher, besonders breite oder besonders hohe Bilder auf deiner Website. Am Smartphone kann es mit einem zu hohen oder breiten Format sonst passieren, dass User:innen entweder sehr lange scrollen müssen oder gar nicht erst das ganze Bild dargestellt bekommen.
Hier sind einige gängige Seitenverhältnisse:
- 16:9: Diese breiten Verhältnisse eignen sich besonders gut für Header-Bilder auf deiner Website, da sie eine professionelle, filmähnliche Optik erzeugen.
- 4:3: Typische Seitenverhältnisse für Blogbilder oder kleinere Banner, die (annähernd) quadratischer sein dürfen.
- Quadratische Bilder (1:1): Ideal für Produktfotos oder Profilbilder, da sie sowohl mobil als auch auf größeren Bildschirmen gut zur Geltung kommen.
Die Anpassung an unterschiedliche Gerätetypen ist ebenfalls entscheidend, besonders für Webseiten, die mobil und auf Desktops verwendet werden. Responsive Bilder ermöglichen es, automatisch die am besten passende Bildgröße und das richtige Seitenverhältnis zu verwenden.
Dateigröße
Neben der Abmessung deiner Bildformate solltest du auch unbedingt auf die Dateigröße der Bilder achten, die du auf deine Website stellst. Das ist vor allem für die Ladezeit und die Bildqualität wichtig.
Wenn deine Datei zu groß ist, wird es sehr lange dauern, sie zu laden. Vor allem, wenn jemand eine schlechte Internetverbindung hat, wird das Bild vielleicht erst gar nicht geladen oder es dauert so lange, dass die Person die Geduld verliert und deine Seite verlässt. Und das wollen wir nicht!
Umgekehrt, wenn deine Datei zu klein ist, wird die Bildqualität darunter leiden und es wird alles verpixelt. Eine Dateigröße von 100 bis 200 KB ist in der Regel ideal für die meisten Bilder auf Webseiten, wobei es natürlich auf die jeweilige Verwendung ankommt.
Hier ein Überblick über mögliche Zwecke mit entsprechendes Bildgröße auf einer Website:
- Kleine Bilder oder Thumbnails (z. B. Icons, Profilbilder, kleine Grafiken): 20–70 KB sind ausreichend, da sie größtenteils nicht in voller Größe angezeigt werden.
- Mittlere Bilder (z. B. Produktfotos, Blog-Bilder): 70–150 KB reichen aus, wenn das Bild auf eine mittlere Größe (z. B. 400–800 Pixel Breite) optimiert ist.
- Große Bilder und Hintergründe (z. B. Header oder Fullscreen-Backgrounds): 150–300 KB sind oft gut.
Optimierungstipps für die Dateigröße:
- Kompressions-Tools wie TinyPNG, Squoosh (von Google), oder ImageOptim können die Dateigröße reduzieren, ohne merklichen Qualitätsverlust.
- Bildabmessungen anpassen: Nur die tatsächlich benötigte Größe verwenden; wenn ein Bild maximal 600 Pixel breit angezeigt wird, sollte es auch so gespeichert werden.
Mit diesen Methoden findest du die „goldene Mitte“ für deine Website: ein optimiertes Bild, das auf die Abmessungen zugeschnitten und komprimiert ist, um eine Balance zwischen Qualität und Ladezeit der Website sicherzustellen.
Nachdem du die Einstellungen zu Bildgröße, Seitenverhältnisse und Dateigröße deiner Website Bilder optimiert hast, ist es als nächsten Schritt wichtig, das ideale Bildformat zu wählen.
Das ideale Dateiformat für Bilder hängt von der Art des Bildes und dessen Verwendung auf der Website ab.
Hier ist eine Übersicht der gängigsten Formate:
1. JPG-Bild
- Ideal für: Fotos und Bilder mit vielen Farben und Details.
- Vorteile: Gute Komprimierung bei kleinen Dateigrößen, unterstützt Millionen von Farben.
- Nachteile: Komprimierung kann zu Qualitätsverlust führen, keine Transparenz möglich.
- Empfohlene Verwendung: Fotos, Thumbnails und Bilder in Newslettern und Blogs.
2. PNG-Format
- Ideal für: Grafiken, Logos und Bilder mit Transparenzen.
- Vorteile: Verlustfreie Komprimierung, unterstützt Transparenz und eine hohe Detailgenauigkeit.
- Nachteile: Größere Dateigrößen im Vergleich zu JPEG.
- Empfohlene Verwendung: Logos, Icons, Bilder mit Text und wenn Transparenz erforderlich ist.
3. PDF-Format
- Ideal für: Dokumente zum Download, Formulare, eBooks und druckbare Materialien.
- Vorteile: Hohe Layout-Treue, plattformunabhängig, gut für komplexe Dokumente mit Text und Grafiken, ideal für Druckqualität.
- Nachteile: nicht immer optimal für mobile Endgeräte, Inhalte werden nicht so gut für SEO indexiert
- Empfohlene Verwendung: Inhalte, die Nutzer:innen herunterladen oder drucken sollen und bei denen das Layout erhalten bleiben muss, wie Berichte, Anleitungen oder Broschüren.
Ob du JPG, PNG oder PDF verwendest, hängt also vor allem davon ab, was der Zweck deines Bildes ist.
Unterschied zwischen Hintergrundbild und Bild
Es ist außerdem wichtig zu unterscheiden, ob ein Bild als dekorativer Hintergrund oder als eingebettetes Bild verwendet wird. Diese Unterscheidung beeinflusst das Design und die Funktionalität:
Hintergrundbilder: Hintergrundbilder sind dekorative Elemente, die den Gesamteindruck der Website verbessern sollen. Sie sind großflächig und als background-image eingefügt. Meistens wird hierbei kein spezifischer Inhalt vermittelt. Das Bild dient eher als visuelle Untermalung und eventuell, um ein Gefühl für deinen Website Stil zu geben.
Eingebettete Bilder: Eingebettete Bilder wie Produktfotos, Teamfotos oder Infografiken haben eine inhaltliche Bedeutung und sollen klar und detailliert sichtbar sein. Sie werden als img-Element eingefügt und können einen Alt-Text enthalten, der die inhaltliche Bedeutung beschreibt.
Alternativtexte (Alt-Texte) für Barrierefreiheit und SEO
Alt-Texte sind kurze Beschreibungen, die den Inhalt eines Bildes beschreiben und für Menschen mit Sehbehinderungen wichtig sind, die mit Screenreadern arbeiten, die ihnen die besuchte Website vorlesen.
Der Screenreader liest den Alt-Text vor und vermittelt so die Bedeutung des Bildes. Gleichzeitig sind Alt-Texte für die Suchmaschinenoptimierung (SEO) relevant, da Suchmaschinen den Alt-Text verwenden, um Bildinhalte einzuordnen.
Wann sollten Alt-Texte verwendet werden?
Sinnvolle Alt-Texte: Für alle relevanten Bilder, die Inhalte vermitteln, wie Produktfotos, Infografiken oder Porträts, sollte ein aussagekräftiger Alt-Text verwendet werden. So können sehbehinderte Menschen und Suchmaschinen den Bildinhalt auf der Website erkennen.
Keine Alt-Texte für dekorative Elemente: Hintergrundbilder und dekorative Bilder, die keine wesentlichen Informationen enthalten, brauchen keine Alt-Texte. Hier kann alt="" verwendet werden, um dem Screenreader zu signalisieren, dass das Bild keinen Inhalt hat.
Wenn du mehr über Alternativtexte im Web erfahren willst: Wir haben dazu einen ausführlichen Blogbeitrag geschrieben.
Auf los geht’s los
Die Wahl der richtigen Bildgröße auf einer Website, das passende Seitenverhältnis und gezielte Alt-Texte sind essentiell für eine professionelle und benutzerfreundliche Website mit idealer Ladegeschwindigkeit. Durch die Umsetzung der Tipps in diesem Beitrag sorgst du für eine bessere Usability und förderst gleichzeitig die Sichtbarkeit in Suchmaschinen.
Wenn du Hilfe bei der Umsetzung möchtest, stehen wir dir gerne mit Rat und Tat zur Seite!
