Die perfekten Bildgrößen für Deine Website – in 4 Schritten

 

 

Bilder gehören in eine Website, genauso wie Sauce Hollandaise zum Spargel. Sie zeigen,

• wer Du bist,
• lockern die Website auf,
• vermitteln Gefühle und Emotionen und
• bilden ab, was Du anbietest.

 

Kein anderes Medium kann in so kurzer Zeit die Aufmerksamkeit vollends auf sich lenken. Text sind zwar für Google und alle anderen Suchmaschinen wichtig. Allerdings verlangen Texte im Gegensatz zu Bildern dem Leser einen hohen Energieverbrauch ab.

 

Und wo wir gerade beim Thema Energieverbrauch sind. Der Trend, zu immer mehr und immer größeren Bildern ist bei vielen Webseiten zu beobachten. Doch Bilder in zu großer Datei haben einen elementaren Nachteil – sie verbrauchen Energie bzw. Datenvolumen. Das Ergebnis ist eine schlechte Ladezeit Deiner Website.

Oder hast Du Lust, Dir erst mal einen Kaffee zu kochen, während Du darauf wartest, dass eine Seite hochlädt.

In diesem Blogartikel erfährst Du, wie Du Deine Website Bilder behandeln solltest, damit Du alle Vorteile nutzen kannst, sie weiterhin gut aussehen und nicht die Ladezeit Deiner Website beeinträchtigen. Denn, geht nicht, gibt’s nicht!

 

Bilder für Websites richtig erstellen – Die Grundlagen

Für die Bearbeitung Deiner Bilder unterscheidet man folgende Parameter, die alle eine Rolle spielen:

 

• Bildformat = wie das Bild gespeichert wird: JPG, PNG, GIF, SVG
• Bildgröße = Breite und Höhe des Bildes in Pixel, wie beispielsweise 400×300 px
• Dateigröße = Speichergröße in Kilobyte (KB) und Megabyte (MB)

Schritt 1

Das Format Deiner Bilder richtig wählen?

 

Überlege Dir zunächst, wo Du das Bild einsetzen möchtest.

Viele Designer setzen auf JPG. Es ist am geeignetsten, wenn Dir die Farbtreue und die Größe Deines Bildes sehr wichtig ist und komprimieren eher uninteressant.

Das Bildformat PNG wird im Gegenzug eher für Bilder verwendet, bei der die Größe irrelevant ist. PNG können relativ verlustfrei komprimiert werden, weshalb sie oft für Grafiken, Icons und Logos ins Spiel kommen. Dieses Bildformat lässt sich optimal für freigestellte, transparente Hintergründe verwenden.

SVG, ist eine Vektorgrafik, sie gehört zur ersten Wahl, wenn es um Logos oder Grafiken geht. Mit SVG (Scalable Vecor Graphics) lassen sich Bilder ohne Verluste zoomen. Dieses Bildformat ist jedoch nicht ohne Umwege für WordPress geeignet.  Du benötigst dazu einen Umweg mit einem Plugin, wie bspw. WP SVG Images oder SVG Support.

GIF haben Ihr Revival auf einigen Social Media Plattformen wie LinkedIn. Aber auch bei WhatsApp sind es ein gern genutztes Tool. Hierbei werden Deine Bilder und Grafiken animiert und zu Bewegtbildern.

 

 

Schritt 2  

Die richtige Dateigröße für Deine Bilder – wie viel KB darf ein Bild haben?

 

Folgende drei Hinweise zur Dateigröße solltest Du immer im Auge behalten:

Große Bilder, die sich über die volle Breite erstrecken, sollten maximal 130-250 KB groß sein.

Kleine Bilder etwa 50 KB.

Für Icons merke Dir die 10 KB Grenze.

Wenn Du diese Angaben beachtest, bist Du in Sachen Page Speed auf dem richtigen Weg.

 

 

Die Bildgrößen überprüfen

 

Warum sind die Bildgrößen im Web so wichtig?

Eine kleine goldene Regel vorab:

Je mehr Pixel ein Bild hat, desto größer ist die Bilddatei, die auf das Endgerät der Websitebesucher*innen heruntergeladen wird. Auf sehr vielen Seiten, zum Bsp. in Onlineshops werden jede Menge Fotos benutzt. Es müssen also viele Daten heruntergeladen werden, sodass Website-Bilder in der Größe angepasst werden müssen. Hier gilt die Devise, weniger ist mehr.

Die gängigsten Bildgrößen für die Verwendung auf Websites sind:

 

• 800x600px (Format 4:3)
• 1024x768px (Format 4:3)
• 1280x720px (Format 16:9) HD
• 1920x1080px (Format 16:9) Full-HD

 

Fotos mit einer Breite von 1920 Pixel und mehr, also dem Full-HD Format, solltest Du nur als Headerbild verwenden. Sie werden über die volle Breite des Bildschirms eingesetzt und müssen daher hochauflösend sein. Um die Dateigröße dieser Bilder weiter zu reduzieren, sind diese wie in diesem Artikel beschrieben zu komprimieren.

 

Noch eine Hilfestellung zur Orientierung:

 

• Wenn das Bild nicht vergrößert, angesehen werden soll und neben einem Text steht, empfiehlt sich eine Bildlänge von 200 bis 300 Pixel.
• Soll das Bild durch einen Klick vergrößert werden, solltest Du die Breite zwischen 600 und 2000 Pixel wählen.
• Für ein freistehendes Bild, das über die gesamte Breite der Website dargestellt werden soll, wähle zwischen 600 und 2000 Pixel.

 

 

Schritt 3

Die Bildqualität

 

Denke schon vor dem Hochladen daran, dass Deine Bilder nicht unscharf oder verzerrt sind, denn Bilder besser machen geht meistens nur mit kostenintensiven Produkten. Suche Deine Bilder deshalb sorgfältig aus, damit Du beim Bearbeiten der Bilder für Deine Website keine weiteren Qualitätsverluste einstecken musst.

 

Denn auch wenn Du noch so schön lächelst, hilft es nicht, wenn Deine Hand durch eine Bewegung verschwimmt. Es fällt Deinem Seitenbesucher sofort negativ auf und er wird woanders kaufen.

 

Eine Komprimierung schlechter Bilder macht, wie oben gesagt, diese leider auch nicht besser und auch nur bis zu einem gewissen Grad Sinn. Höchstwahrscheinlich hast Du es schon probiert, bist am Ergebnis gescheitert und deshalb hier auf der Seite gelandet.

 

Wir machen doch alle learning by doing.

Du kannst die Qualität Deiner Bild am besten in der Größe überprüfen, wie Du sie später auf Deine Website einbauen wirst. Also vergrößere oder verkleinere sie so weit wie möglich. Du bekommst dabei das richtige Gespürt für die optimale Bildergröße und wirst es in Zukunft viel leichter haben.

 

Überspringe diesen Schritt nicht, denn Du weißt ja Vorbeugen ist besser als… Ach Du weißt schon.

 

Schritt 4

Nun geht’s ans Optimieren fürs Internet

 

Zur Bildoptimierung eignen sich verschiedene kostenpflichtige und kostenlose Grafikprogramme wie Adobe Photoshop, Canva oder Microsoft Paint. Je nach Deinem Engagement auf den Tools, lassen sich gute bis sehr gute Ergebnisse erzielen.

Am einfachsten und effektivsten ist es, die Auflösung zu reduzieren, also die Anzahl der Pixel, die das Bild horizontal und vertikal hat. Viele Pixel lohnen sich nicht, da die wenigsten Nutzer*innen hochauflösende Bildschirme besitzen und bei Google die Devise Mobile first gilt.

 

 

 

Die Komprimierung der Bilder für Google und Co.

Viele Wege führen nach Rom. So auch bei der Komprimierung Deiner Bilder fürs Web.

Du kannst zwischen folgenden Tools, die sowohl online als auch direkt auf Deinem PC vorhanden sind, wählen.

 

Tools zur Bildoptimierung:

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

Canva: https://www.canva.com/de_de/

MacBook: rechte Maustaste und dann den Reiter komprimieren wählen

Compressjpeg: https://compressjpeg.com/de/

 

Das geht schneller, als Speedy Gonzales laufen kann und verschafft Dir einen Mega Ladevorsprung.

 

 

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 Bildmasse, 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!