Das perfekte Bildformat für deine Website

Bilder sind mega wichtig für deine Website oder generell deinen Online-Auftritt. Je hochauflösender die Bilder sind, desto schöner und klarer sind sie. Logisch. Von Fotografen bekommen wir unsere Branding Fotos meistens in großen Dateien, die locker mal 10-15 MB haben können. Pro Foto versteht sich! 

Aber welche Bildgröße brauchst du eigentlich für deine Website? Und wie bekommst du die Fotos kleiner? Tatsächlich bekomme ich diese Frage sehr häufig gestellt, wenn ich eine Website für meine Kundinnen erstelle. Denn viele wissen oft nicht, was das beste Bildformat, oder die beste Bildgröße für ihre Website ist.

Das Bildformat & die Bildgröße

Fangen wir mal vorne an, um erst einmal die Begrifflichkeiten zu klären. 😊

Das Bildformat ist das, als was, also in welchem Format das Bild abgespeichert wird. Meistens haben wir .jpg-Dateien. Es gibt aber auch .png, .svg, oder z. B. .gif – Dateien. 

Die Bildgröße wiederum drückt sich in Pixeln aus. Also die Breite und Höhe deines Bildes.

Welches Bildformat verwende ich für eine Website?

Welches Bildformat du für deine Website verwendest, hängt ganz vom Einsatz bzw. Zweck des Einsatzes ab.

JPEG (Joint Photographic Experts Group) ist wahrscheinlich das Format, welches am häufigsten verwendet wird. Es bietet eine gute Komprimierung, um die Dateigröße zu reduzieren, ohne dabei die Bildqualität stark zu beeinträchtigen. Sie sind also sehr platzsparend. JPEG Dateien eignen sich daher gut, wenn Farbtreue und Details besonders wichtig sind. Wenn allerdings ein transparenter Hintergrund gewünscht ist, dann solltest du ein anderes Format wählen. Das PNG Format.

Ein wichtiger Vorteil des PNG (Portable Network Graphics)-Dateiformats im Vergleich mit JPG ist die Unterstützung von Transparenz. PNG Dateien werden häufig für Logos und Bilder mit transparenten Hintergründen genutzt. PNG Dateien lassen sich zwar auch komprimieren, jedoch wird dabei gleichzeitig auch die Farbe reduziert. Es eignet sich daher überwiegend für freigestellte Bilder und Objekte mit transparentem Hintergrund.

SVG (Scalable Vector Graphics) Dateien sind ähnlich wie PNG Dateien, jedoch ist die Qualität sehr viel besser, da es sich hier um ein vektorbasiertes Format handelt, das sich beliebig in der Größe ändern lässt, ohne dass die Auflösung davon beeinträchtigt wird. Der Nachteil ist, dass sich SVG Dateien nicht ohne weiteres in WordPress hochladen lassen. Hierfür benötigt du dann wiederum ein extra Plugin, wie z. B. Support SVG.

GIF Dateien wieder benutze ich äußerst selten (weil ich einfach nicht drauf stehe). Sie sind jedoch geeignet, wenn du z. B. Animation auf deiner Website haben möchtest. Also animierte Grafiken.

Es ist wichtig, die Dateigröße der Bilder für deine Website zu optimieren, um die Ladezeit deiner Website zu minimieren. Dafür können verschiedene Tools zur Bildkomprimierung verwendet werden, um eine ausgewogene Balance zwischen Dateigröße und Bildqualität zu finden. Zusätzlich zum richtigen Bildformat ist auch die Verwendung der richtigen Auflösung für die Anzeige auf der Website wichtig, um sicherzustellen, dass die Bilder klar und scharf angezeigt werden.

Wie groß dürfen die Bilder für deine Website sein?

Wie groß die Bilder für deine Website sein sollten, hängt davon ab, wo genau du die Bilder einsetzen möchtest. Generell gilt: je mehr Pixel ein Bild hat, desto größer ist die Bilddatei, die auf das Endgerät der Websitebesucher*innen heruntergeladen wird.

Vollbreite Bilder, also Bilder, die über das volle Format des Bildschirms gehen, sollten max. 1920 Pixel (Full HD) breit sein und eine Größe von max. 250 kb haben. Diese Bilder werden oft als Headerbild genutzt. 

Danach reduziert sich die Breite, je nach Einsatzgebiet weiter. Hier ein kleiner Überblick, wie die Bildgrößen aussehen könnten:

Für kleinere Bilder reichen übrigens 50 kB, für Icons im SVG Format sogar 10 kB.

Wahrscheinlich ist das nicht immer 1:1 so umsetzbar. Aber versuche dich, da wo es geht dran zu halten. Die Ladezeit wird es dir danken. Denn die Ladezeit ist ebenfalls ein wichtiger Rankingfaktor bei Google.

Mit welchen Tools du deine Bilder für deine Website komprimieren kannst

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

Es gibt mittlerweile viele kostenlose Tools, mit denen du Bilder verkleinern kannst. Kostenlose Tools für deine Bildkomprimierung sind z. B. Gimp, Canva, oder tinypng (hier darf die Datei allerdings nicht größer als 5 MB sein). Viele Profis nutzen Photoshop, ich selbst nutze Affinity Photo (was ich übrigens sehr empfehle, da es die gleichen Funktionen, jedoch wesentlich günstiger als Adobe ist 😉).

Je größer dein Bild in Pixeln ist, desto stärker kannst du es komprimieren.

Prüfe am besten die Qualität des Bildes, indem du es dir in der Größe am Bildschirm anschaust, in der du es später auf deiner Website einbauen möchtest.

Last but not least: Bilder für Suchmaschinen (SEO) optimieren

Um deine Bilder für die Suchmaschinen wie Google zu optimieren, benennst du sie am besten gleich mit einem aussagekräftigen Namen, der auch das Keyword deiner Seite enthält, auf die du das Bild hochladen möchtest.

Nach dem Hochladen der Bilder in die Mediathek der Website, solltest du das Keyword auch noch im Title- und Alt-Tag des Bildes unterbringen. Der Alt-Text ist eine Beschreibung des Bildinhalts und dient dazu, Suchmaschinen mitzuteilen, was auf dem Bild zu sehen ist.

Übrigens: Title und Alt-Tag dienen nicht nur den Suchmaschinen, sondern auch dem Nutzer. Denn für den Fall, dass die Bilder nicht geladen werden können, wird der Alt-Tag ausgespielt. Beim Mouse Over über ein Bild erscheint häufig ein Textfeld, welches weitere Information einblendet. Hier wird dem User der Title-Tag angezeigt.

Ein Beispiel für Title- und Alt-Tag des Bildes:

Fazit:

Die perfekte Bildgröße fürs Web einzurichten ist kein Hexenwerk, wenn du erst weißt, wie es geht.

Im Grunde genommen musst du nur die Bildmaße, die Bildgröße in KB und das Bildformat beachten. Weitere Tools helfen dir anschließend bei der Komprimierung und Anpassung.

Viel Erfolg beim Optimieren deiner Webseite!

Und wenn du Unterstützung benötigst:

Cookie-Einstellungen
Nach oben scrollen