Bildgrößen für Webseiten richtig anlegen – die Grundlagen

Bevor ich dir zeige, mit welchen Tools du deine Bilder ganz einfach auf die richtige Größe verkleinern kannst, solltest du die Grundlagen verstehen.

Für die Bearbeitung deiner Bilder unterscheidet man folgende Paramenter, die alle eine Rolle spielen:

• Bildformat = als was wird das Bild abgespeichert: jpeg, png, gif, svg
• Bildgröße: die Breite und Höhe des Bildes in Pixel
• Dateigröße = Speichergröße in KB und MB

Nachfolgend gehe ich im Detail auf die einzelnen Punkte ein.

Welches Format sollten die Bilder im Web haben?

Das richtige Bildformat wählst du nach dem Zweck aus, wofür du es einsetzen möchtest:

JPEG verwendest du am besten für Fotos und wenn Farbtreue wichtig ist. Es hat den Vorteil, dass es sich sehr gut komprimieren lässt, bei gleichzeitig sehr guter Bildqualität. Daher verwenden wir dieses Format für alle Bilder auf der Website, mit Ausnahme von Bildern mit transparenten Hintergründen.

PNG eignet sich am besten für Logos und Grafiken mit transparenten Hintergründen. Es lässt sich ebenfalls komprimieren. Da dabei aber die Farben reduziert werden, eignet es sich vorwiegend nur für freigestellte Bilder mit transparentem Hintergrund. Denn transparente Hintergründe kann man nur im png Format erstellen.

SVG wählen wir oft als Alternative zu freigestellten Logos im PNG Format, da die Qualität besser ist. Jedoch kann man SVG Dateien standarmässig nicht in WordPress hochladen. Hierzu benötigt man noch ein Plugin, wie zB. SVG Support

GIF eignet sich für Animationen, wie animierte Grafiken.

Wie groß sollten Bilder für die Website sein?

Welche Bildgröße die richtige für deine Website ist, kommt darauf an, wo sie genau eingesetzt werden. Lade die Bilder im Idealfall nur so groß hoch, wie du sie tatsächlich benötigst. Wie du die richtigen Größen ermittelst, zeige ich dir jetzt.

Optimale Bildgrößen für Webseiten sind standardmässig:

Vollbreite Bilder (welche die gesamte Bildschirmbreite ausfüllen) sollten 1920px breit sein. Wenn sie zu klein sind, werden sie unscharf. Wenn sie zu groß sind, benötigen sie unnötig Speicher und längere Ladezeiten.

Danach reduziert sich die Breite, je nach Einsatzgebiet noch einmal deutlich. Anbei findest du eine Skizze, die dir Orientierung gibt, wie breit das Bild in Pixel je nach Einsatz sein sollte:

Hier zeige ich dir eine Möglichkeit, die genaue Bildgröße direkt auf deiner Website herauszufinden

Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

Inhalt entsperren Erforderlichen Service akzeptieren und Inhalte entsperren

Die richtige Auflösung für eine gute Bildqualität

Bilder sollten natürlich nicht unscharf oder verzerrt werden. Eine Komprimierung macht nur bis zu einem gewissen Grad Sinn, sodass die Auflösung des Bildes nicht darunter leidet.

Am Besten prüfst du die Qualität des Bildes, indem du es dir in der Größe am Bildschirm anschaust, in der du es auf deine Website einbauen möchtest.

Was, außer Bildern, auf deiner Website noch wichtig ist, findest du in der folgenden Website Checkliste:

In der Praxis: Mit diesen Tools kannst du Bilder fürs Web optimieren und richtig aufbereiten

Fotos, die von der Kamera kommen, sind tausende Pixel groß. Diese müssen immer optimiert werden, bevor du sie auf die Website hochlädst. Dabei gehe ich immer in zwei Schritten vor:

1. Bilder für die Website skalieren
   Das heißt, ich verkleinere es auf die tatsächliche Breite, die das Bild auf der Website benötigst. Welche Breite die Bilder haben sollten, hast du ja gerade vorhin erfahren. 
2. Bilder für die Website komprimieren
   Im zweiten Schritt wird die Dateigröße des Bildes verkleinert, sprich komprimiert. Damit es nur wenige KB an Größe hat. Das ist wichtig, damit das Bild später schnell geladen wird.

Tools zur Bildoptimierung:

Photoshop: https://www.adobe.com/at/products/photoshop

Gimp: https://www.gimp.org/

Iloveimg: https://www.iloveimg.com/de

Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

Inhalt entsperren Erforderlichen Service akzeptieren und Inhalte entsperren

Wie können Bilder für Suchmaschinen optimiert werden?

Benenne Bilder gleich mit einem aussagekräftigen Dateinamen, der den Suchbegriff der Seite enthält, in die du das Bild einbauen möchtest.

Für die Indexierung durch Google spielt der Dateiname eine große Rolle. Sucht ein Nutzer z.B. in der Google Bildersuche nach dem Wort „Katzenkratzbaum“, werden Bilder mit dem Dateinamen “Katzenkratzbaum.jpg” grundsätzlich höher gerankt, als Bilder mit dem ursprünglichen Dateinamen der Kamera.

Nach dem Hochladen der Bilder in die Mediathek der Website, solltest du das Keyword auch noch im Title- und Alt-Tag des Bildes unterbringen.

Google erkennt mittlerweile den Zusammenhang zwischen Inhalt eines Textes und den verwendeten Bildern. Daher solltest du Bilder in den dazu passenden Textpassagen platzieren.

Wenn wir beim Beispiel des Katzenkratzbaums bleiben, sollte das Bild das einen Kratzbaum mit 3 Etagen zeigt, auch im Textabschnitt dort platziert werden, wo erklärt wird, dass der Kratzbaum 3 Etagen hat.

Fazit

Es ist eigentlich ganz einfach, Bilder auf eine maximal notwendige Größe zu reduzieren und anschließend nochmal zu skalieren. Gerade in Hinblick auf schnelle Ladezeiten solltest du nicht darauf verzichten und diesen kleinen Zwischenschritt immer mit einbauen.