Optimale Bildgrößen für deine Website

Bilder sind ein zentraler Bestandteil deiner Website – sie schaffen eine gewisse Atmosphäre, unterstützen deinen professionellen Markenauftritt und geben deinem Business ein Gesicht, das Vertrauen weckt. Doch oft werden viel zu große Bilddateien hochgeladen, was die Ladezeit deiner Website drastisch verschlechtert, was nicht nur Besucher nervt, sondern auch Google.

Wie schaffst du es also, dass deine Bilder eine gute Qualität haben und trotzdem schnell laden? Keine Sorge! Das ist einfacher als du denkst. In diesem Artikel erfährst du, welche Bildgrößen optimal sind und mit welchen Tools du deine Fotos richtig optimieren kannst.

Lesedauer: ca. 8 Minuten

Grundlagen der optimalen Bilder deiner Website

Bevor du deine Bilder bearbeitest, gibt es einige wichtige Parameter, die du im Auge behalten solltest:

• • Bildformat: In welchem Dateityp wird das Bild gespeichert?
    Zum Beispiel JPEG, PNG, GIF oder SVG.
  • Bildgröße: Die Abmessungen des Bildes, also seine Breite und Höhe in Pixeln.
  • Dateigröße: Wie viel Speicherplatz nimmt das Bild ein?
    Dies wird in Kilobyte (KB) oder Megabyte (MB) gemessen.

Welches Format sollten die Bilder im Web haben?

Die Wahl des richtigen Bildformats hängt immer davon ab, was du damit erreichen möchtest:

• • JPEG/JPG (Joint Photographic Expert Group) ist perfekt für Fotos und Bilder, bei denen Farbtreue eine Rolle spielt. Es lässt sich stark komprimieren, ohne dass die Bildqualität sichtbar leidet – ideal also für die meisten Bilder auf deiner Website, außer für solche mit transparenten Hintergründen.
  • PNG (Portable Networks Graphics) ist dein Format, wenn du Grafiken oder Logos mit transparentem Hintergrund verwendest. Auch wenn PNG komprimierbar ist, kann es dabei zu Farbverlusten kommen. Deswegen nutze es vor allem für Bilder, die freigestellt sind oder Transparenz benötigen.
  • SVG (Scalable Vector Graphics) eignet sich super für Logos oder Grafiken, die gestochen scharf bleiben sollen – egal wie groß sie dargestellt werden. WordPress unterstützt SVG-Dateien allerdings nicht von Haus aus. Dafür brauchst du ein Plugin, wie zum Beispiel „SVG Support“.
  • GIF (Graphics Interchange Format) kommt bei animierten Grafiken ins Spiel – diese kennst du bestimmt als lustige, kurze Animationen, die Aufmerksamkeit erregen.
  • WebP ist das neue Multitalent unter den Bildformaten! Es vereint die Vorteile von JPEG und PNG indem es hervorragende Qualität liefert und gleichzeitig kleine Dateigrößen erzeugt. Besonders für Websites ist das WebP-Format genial, weil es schnell lädt, ohne dass du auf scharfe Bilder verzichten musst. Nachteil davon ist aktuell noch, dass nicht alle Browser das Format von WebP unterstützen. Solltest du den Internet Explorer nutzen, kannst du die Bilder leider nicht ansehen. Alle anderen Browser unterstützen das Format aber mittlerweile. Tools um JPGs in WebP umzuwandeln sind zum Beispiel das Tool CloudConvert https://cloudconvert.com/ oder das Tool Squoosh https://squoosh.app/. Wenn du also sicherstellen willst, dass deine Website nicht nur gut aussieht, sondern auch flott lädt, solltest du dir überlegen, auf WebP zu setzen!

Bildgrößen für Webseiten richtig bestimmen

Die richtige Größe deiner Bilder ist ausschlaggebend für den Erfolg deiner Website. Sie sollten weder zu klein noch zu groß sein.

Bei zu großen Bildern muss dein Browser die Bilder kleiner rechnen, was sich negativ auf die Ladezeit deiner Website auswirkt. Ist das Bild zu klein, wird es meist unscharf oder verpixelt dargestellt. Ebenso schlecht! Auch hier muss das System wieder rechnen um die gewünschte Größe darzustellen.

Was also tun?

Am besten ist, dass man die Bilder gleich in der Größe hochlädt, in der sie auf der Website angezeigt werden sollen. Klingt erstmal logisch oder?

Zunächst ist es einmal wichtig zu definieren, auf welchem Gerät man die Website betrachtet und wie man diese einstellt. Bilder auf Smartphones haben eine andere Größe als vollbreite Bilder auf einem Desktop. Die Auswahl an Bildschirmgrößen ist mittlerweile rießig und wird in Zukunft auch noch weiter zunehmen, (zum Beispiel AR-Brillen).

Wichtig zu wissen: Monitorgröße und Bildschirmauflösung sind nicht das Gleiche. Die Auflösung ist in der Regel viel höher als die Größe und sorgt dafür, dass alles scharf dargestellt wird. Jedes Gerät auf dem deine Website aufgerufen wird, stellt andere Anforderungen an die Darstellung dar. Deshalb ist es entscheidend, dass deine Bilder sowohl auf großen Bildschirmen als auch auf mobilen Geräten wie Tablets und Smartphones perfekt angezeigt werden.

Die optimalen Bildgrößen für verschiedene Geräte variieren je nach Bildschirmauflösung und Anwendungsbereich.

• Desktop/ Laptop 1920/1280×1200 Pixel
• Tablet: 800×1280 Pixel
• Mobil: 414×896 Pixel

Wie viel Platz hast du nun auf deiner Website für deine Bilder?

Aber woher weißt du jetzt wie groß ein Bild sein sollte? Dazu musst du zunächst wissen, wo das Bild angezeigt werden soll und wie viel “Platz” dafür zur Verfügung steht.

Bilder, die die gesamte Bildschirmbreite ausfüllen sollen, sollten idealerweise eine Breite von etwa 1920 px haben, um eine scharfe Darstellung zu gewährleisten. Kleinere Bilder wirken unscharf. Je nach Anzahl der Spalten oder der Aufteilung auf der Seite kann die erforderliche Breite der Bilder variieren, wie im gezeigten Beispiel. (Dies dient lediglich als Richtwert)

Die vollbreiten Bilder die für die Desktopversion genutzt werden, machen in der mobilen Ansicht oft wenig Sinn, da aufgrund der geringen Bildschirmbreite wichtige Details verloren gehen können. Stattdessen empfiehlt es sich, ein separates Bild speziell für die mobile Darstellung zu wählen, das über oder unter dem Header-Text platziert wird.

Die richtige Dateigröße für deine Bilder

Wie viel KB sollte nun ein Bild haben?

• Große Bilder: maximal 130 – 250 KB
• Kleine Bilder: ca. 50 KB
• Icons & Logos: max. 10 KB (diese müssen super schnell geladen werden)

Dies ist aber nur ein grober Richtwert, der leider nicht immer möglich einzuhalten ist. Versuche dennoch deine Bilder ungefähr auf diese Größen zu bringen.

Tools um Bilder zu bearbeiten und zu komprimieren

Professionelle Bilder von Fotografen haben meist rießige Dateigrößen mit viel höhere KB, meist sogar MB. Um dein Bild nun trotzdem mit so wenig Qualitätsverlust wie möglich darzustellen und in der richtigen Größe auf deine Website zu bekommen, ist es notwendig diese zu komprimieren.

Hierfür gibt es verschiedene Tools:

Canva: Ein vielseitiges Design-Tool, mit dem du schnell und einfach Bilder bearbeiten kannst. Canva bietet eine Funktion, um den Hintergrund von Bildern zu entfernen, und eignet sich gut für einfache Bildbearbeitungen und Designs.

TinyPNG / TinyJPG: Diese kostenlosen Online-Tools komprimieren PNG- und JPEG-Dateien effizient, ohne die Bildqualität zu beeinträchtigen. Sie sind perfekt, um Bilder fürs Web zu optimieren und Ladezeiten zu reduzieren.

Imagify: Ein leistungsstarkes Tool zur Bildkomprimierung, das bis zu 20 MB pro Monat kostenlos anbietet. Für größere Mengen gibt es kostenpflichtige Abos. Es ist eine gute Wahl für WordPress-Nutzer, da es sich leicht integrieren lässt.

Photoshop: Ein Profi-Tool zur Bildbearbeitung, das umfassende Funktionen für Retuschen, Bildoptimierungen und Komprimierung bietet. Besonders nützlich für fortgeschrittene Nutzer, die volle Kontrolle über Bildqualität und Dateigröße benötigen.

Gimp: Eine kostenlose und quelloffene Alternative zu Photoshop. Es bietet viele der gleichen Funktionen, darunter Bildkomprimierung und das Entfernen von Hintergründen, ist aber kostenlos verfügbar.

iLoveIMG: Ein einfaches Online-Tool zum Bearbeiten und Komprimieren von Bildern. Neben der Komprimierung kannst du auch Bilder zuschneiden, skalieren oder in verschiedene Formate umwandeln.

Squoosh: Ein von Google entwickeltes Open-Source-Tool, das dir erlaubt, Bilder in verschiedenen Formaten zu komprimieren und deren Qualität in Echtzeit zu vergleichen. Sehr benutzerfreundlich und effizient für Web-Bilder.

Alle diese Tools helfen dir dabei, die Dateigröße deiner Bilder zu reduzieren und sie für die optimale Web-Darstellung vorzubereiten!

Bilder für Suchmaschinen optimieren!

Um Bilder für Suchmaschinen zu optimieren, gibt es ein paar wichtige Schritte, die du beachten solltest. Verwende zunächst aussagekräftige Dateinamen, die beschreiben, was im Bild zu sehen ist, anstatt allgemeine Begriffe wie „IMG1234.jpg“. Nutze wenn möglich auch deine Keywords. Füge zudem Alt-Texte hinzu, die den Inhalt des Bildes prägnant beschreiben, da Suchmaschinen diesen Text nutzen, um den Kontext des Bildes zu verstehen. Auch das Komprimieren der Bilder für schnelle Ladezeiten ist essenziell, da Google die Seitenperformance bewertet. Verwende außerdem strukturierte Daten und setze Bildunterschriften, um das Verständnis für den Content zu erhöhen.

Google erkennt den Zusammenhang zwischen dem Textinhalt und den verwendeten Bildern, was sich direkt auf dein Ranking auswirken kann. Gleichzeitig spielt auch Barrierefreiheit eine wichtige Rolle.

Pro Tipp: Überprüfe die Ladezeit-Optimierung bei Google, um herauszufinden, welche Bilder die größten Probleme verursachen!

Fazit