Sei im nächsten Website-CoWorking am 21. März dabei!

Sei im nächsten Website-CoWorking am 21. März dabei!

Frau sitzt vor dem Laptop und wählt Bilder aus.

In 4 einfachen Schritten zur optimalen Bildgröße für deine Website

Kennst du das: Du besuchst eine Website und die lädt einfach ewig? Das liegt nicht (immer) an einer langsamen Internetverbindung, sondern oft wurden die Bilder einfach in der vollen Größe hochgeladen. Und diese Datenmengen musst du dir jetzt runterladen. Das braucht nicht nur Zeit, sondern verursacht leider auch unnötig viel CO₂.

Und damit du das auf deiner Website besser machen kannst, hab ich hier eine Anleitung für dich, der du Schritt für Schritt folgen kannst.

Inhalt

Was ist Bildoptimierung?

Bei der Website-Erstellung hat die Optimierung deiner Bilder vor allem ein Ziel:

Die Verkürzung der Ladezeit deiner Website.

Also wollen wir Maßnahmen treffen, um das zu erreichen. Und dazu sollten wir jedes einzelne Bild in eine Datei packen, die so klein wie möglich ist. Denn je größer eine Bilddatei, umso länger dauert es, bis sie vollständig geladen und deinen Besucher:innen angezeigt wird.

ABER: Zu klein sollte die Datei auch nicht sein, denn das Bild soll dennoch in guter Qualität dargestellt werden.

Warum ist eine kurze Ladezeit überhaupt wichtig für deine Website?

1. Eine kurze Ladezeit hält deine Besucher:innen bei Laune.

Wenn deine Website nach jedem Klick erst lange lädt, steigt die Chance, dass deine Besucher:innen abspringen. Also suchen sie die Antwort auf ihre Frage im nächsten Suchergebnis.

2. Google bevorzugt schnelle Websites.

Sehr wahrscheinlich, dass das mit dem vorigen Punkt in Verbindung steht. Denn Google platziert Websites in seinen Suchergebnissen weiter vorne, wenn Besucher:innen dort mehr Zeit verbringen. Google merkt, dass Nutzer das gefunden haben, wonach sie gesucht haben. Finden sie es nicht, kommen sie schnell wieder zu Google zurück.

Das Ziel einer Suchmaschine und insbesondere von Google ist, den Nutzer:innen immer die bestmöglichen Suchergebnisse zu liefern. Das ist auch der Grund, weshalb ich, wenn ich nach komplexen Themen recherchiere, noch immer auf Google zurückgreife. Denn Google liefert einfach die besseren Ergebnisse. Ansonsten nutze ich gerne Ecosia.

So optimierst du deine Bilder für deine Website:

Ich zeige dir mehrere Möglichkeiten, die es gibt, um die Dateigröße deiner Bilder zu verringern. Die besten Ergebnisse erzielst du, wenn du sie alle kombinierst.

Bild im „richtigen“ Dateiformat abspeichern

Bilder kannst du in verschiedenen Dateiformaten abspeichern. Aber nicht jedes Format ist auch für jedes Bild geeignet. Im Folgenden erkläre ich dir kurz, welches Format du für welche Bilder verwenden solltest:

JPG (manchmal auch JPEG geschrieben)

  • geeignet für Fotos
  • nicht für freigestellte Motive – kann keine Transparenz darstellen
  • Qualität einstellbar – ich empfehle einen Wert zwischen 60 und 80%

Mit Convert images to JPG kannst du eine PNG-Datei nachträglich in eine JPG-Datei umwandeln.

So kannst du in Canva eine JPG-Datei downloaden und die Qualität anpassen
So kannst du in Canva eine Grafik mit transparentem Hintergrund downloaden

PNG

  • geeignet für Logos, Grafiken und freigestellte Motive
  • Transparenz möglich

SVG

  • für Vektorgrafiken wie z.B. Logos & Icons
  • beliebig skalierbar
  • sehr geringe Dateigröße möglich

 WEBP

  • Alternative zu JPG und PNG mit geringerem Speicherbedarf
  • neueres Bildformat – manche Browser und veraltete Browserversionen können das Format nicht anzeigen
  • Plugins wie z.B. WebP Express wandeln Bilder automatisch in WEBP-Dateien um – allerdings sollte gleichzeitig auch noch eins der gängigen Bildformate zur Verfügung gestellt werden

Bild zuschneiden

Wenn du dein Bild zuschneidest, entfernst du gleichzeitig Bildinformationen. Das macht sich auch in der Dateigröße deiner Bilder bemerkbar.

Deine Bilder schneidest du am besten direkt auf deinem Computer mit einem Bildbearbeitungsprogramm zu. Ein solches ist normalerweise vorinstalliert. Ansonsten kannst du das Tool Crop IMAGE verwenden.

Du solltest dein Bild allerdings nur zuschneiden, wenn du schon genau weißt, welchen Bildausschnitt du auf deiner Website darstellen willst. Oder, wenn du zum Beispiel aus einem Bild im Querformat ein Hochformat-Bild machen willst.

Bildmaße anpassen

Die Größe eines Bildes wird in Pixel angegeben. Je nach Kamera und deren Einstellung erhältst du Fotos, die über 3000 Pixel breit sind. So riesige Fotos brauchst du auf deiner Website nicht und solltest du auch nicht verwenden. Denn zu große Bilder benötigen unnötigen Speicherplatz.

Veränderung der Dateigröße bei Anpassung der Bildgröße - vorher 6 MB nachher nur noch 1,5 MB

Das heißt, du solltest die Pixelanzahl deiner Bilder verringern. Das machst du entweder mit deinem Standard-Bildbearbeitungs-Programm oder mit Resize IMAGE.

Bilder, die über die gesamte Seite gehen, wie zum Beispiel Header- oder Hintergrundbilder sollten eine Breite von 1920 Pixel haben.

Wenn Bilder zu groß sind, erhöht sich die Ladezeit unnötig. Wenn sie aber zu klein sind, werden sie unscharf dargestellt.

Alle Bilder, die du nicht über die gesamte Seitenbreite darstellen willst, solltest du auch in die entsprechende Größe bringen.

In der Grafik findest du eine Übersicht, welche Pixelbreite deine Bilder auf deiner Website haben sollten.

Übersicht über die Bildgrößen, je nachdem wie viel Platz es auf der Website einnimmt

Bild komprimieren

Nachdem du dein Bild ins richtige Format gebracht, zugeschnitten und die Bildmaße angepasst hast, komprimierst du es noch. Dabei wird die Datengröße deiner Bilder durch einen speziellen Algorithmus reduziert oder verdichtet, ohne großen Einfluss auf die Qualität zu nehmen.

Dazu kannst du Online-Tools, wie zum Beispiel Compress IMAGE verwenden. Durch diesen Schritt wird die Dateigröße oft noch um 40-60 % reduziert.

Bist du schon zum nächsten
Website-CoWorking angemeldet?

Kostenlose Tools für die Bildoptimierung

vorinstalliertes Foto-Programm am PC

GIMP (kostenlose Photoshop-Alternative)

Tools von iloveimg.com

Zusatztipp, um deine Website noch schneller zu machen:

Bilder nachladen mit Lazy Loading

Stell dir vor, du besuchst eine lange Webseite mit vielen Bildern. Anstatt alle Bilder gleichzeitig herunterzuladen, sobald du die Seite öffnest, werden nur die Bilder geladen, die du siehst, während du die Seite nach unten scrollst. Wenn du weiter nach unten scrollst, werden die Bilder, die im sichtbaren Bereich auftauchen, nachgeladen.

Das ist Lazy Loading.

Diese Technik verbessert die Geschwindigkeit deiner Website, weil die Seite während einem Besuch nach und nach geladen wird und nicht alles auf einmal bereitstehen muss. Und wie du oben schon erfahren hast, verringert eine schnellere Ladezeit, das Risiko, dass Besucher*innen deine Website vorzeitig verlassen.

Zudem reduziert sich auch das notwendige Datenvolumen, weil eben nur die Inhalte geladen werden, die tatsächlich benötigt werden. Wenn du nicht bis nach unten scrollst, dann werden auch die Bilder am Ende der Website nicht geladen.

Das ist zum einen vorteilhaft für Benutzer:innen mit begrenztem Datenvolumen oder wenn die Internetverbindung schlecht ist. Zum anderen ist es auch gut für die Umwelt. Denn jeder Website-Besuch verursacht CO₂. Je mehr Daten bei einem Besuch geladen werden, umso höher der CO₂-Verbrauch.

Für dieses sogenannte „Lazy Loading“ gibt es Plugins, über die sich diese Technik ganz einfach einbinden lässt. Zum Beispiel das Plugin Lazy Load.

Nochmal kurz zusammengefasst:

Es ist wichtig, dass du deine Website-Bilder optimierst, bevor du sie hochlädst. Das spart Speicherplatz auf deiner Website und sorgt für eine kürzere Ladezeit.

Wenn du den Vorgang einige Male gemacht hast, wirst du auch nicht mehr lange darüber nachdenken müssen. Und bis es so weit ist, hab ich hier eine kleine Checkliste für dich:

Deine Checkliste zum Kopieren

Checkliste für die Bildoptimierung:
1. Bild als JPG (Fotos) oder PNG (Grafiken) abspeichern
2. Bild zu schneiden
3. Bildmaße anpassen (siehe Grafik)
4. Bild komprimieren (z.B. https://www.iloveimg.com/compress-image)

Häufige Fragen zum Thema »Bildoptimierung«:

Hier habe ich Antworten auf Fragen, die rund ums Thema »Bildoptimierung« häufig gestellt werden.

Welches Format für Website-Bilder?

Je nachdem, ob es sich um ein Foto, eine Grafik oder ein Logo handelt, solltest du ein anderes Dateiformat wählen. Für Fotos ist JPG am besten geeignet. Grafiken kannst du sowohl als JPG oder PNG abspeichern. Wenn deine Grafik auch einen transparenten Bereich hat, dann auf jeden Fall PNG. Für Logos & Icons eignet sich SVG am besten.

Was ist eine gute Auflösung für Website-Bilder?

Das kommt darauf an, wie groß du die Bilder auf deiner Website darstellen willst. Willst du ein Bild über die gesamte Seitenbreite anzeigen lassen, dann sollte das Bild 1.920 Pixel breit sein. In der Grafik im Beitrag erhältst du einen Überblick über weitere Auflösungen.

Wie viel KB sollte ein Bild maximal haben?

Große Bilder, die über die gesamte Seitenbreite reichen, sollten nicht größer sein, als 200 KB. Kleinere Bilder sollten nicht mehr als 80 KB Speicherplatz einnehmen. Umso kleiner die Dateigröße, umso besser. Aber nur, wenn die Qualität auch ausreicht, um scharf dargestellt werden zu können.

Teile diesen Beitrag!

Suche

zum Newsletter anmelden

Teile diesen Beitrag!

Hi, ich bin Anita.

Webdesignerin & Websitetrainerin für Frauen, die Veränderung auf dieser Welt bewirken wollen. 

Wünscht du dir eine Website, die deine Besucher:innen schon beim ersten Klick erkennen lässt, wofür du stehst? Gleichzeitig willst du dich nicht abhängig machen, sondern jederzeit selbst Änderungen an deiner Website vornehmen können?

Auf meinem Blog dreht sich alles darum, wie du deine Website erstellst, bearbeitest und optimierst. Schreib mir gerne, wenn du dir einen Beitrag zu einem bestimmten Thema wünscht.

aktuelle Beiträge

2 Responses

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Melde dich hier zum Website-CoWorking an!

Melde dich zum Website-CoWorking an!

0 € - nur deine E-Mail-Adresse

Du bist mit deiner Anmeldung zu nichts verpflichtet und kannst dich natürlich jederzeit wieder abmelden.

Website-Checkliste für eine gute & sichere Website für 0 €

Die Website-Checkliste ist dein Kompass auf dem Weg zu einer WordPress-Website, mit der du deinen Besucher*innen in Erinnerung bleibst.