Website-Tipp Bildoptimierung

21.04.2021

Mit diesen Tipps kannst du die Datenmenge auf deiner Website schön gering halten und auch die Chancen erhöhen, über Suchmaschinen besser gefunden zu werden.

Heute gebe ich euch meine Tipps für die Bildoptimierung auf Webseiten mit.

Deine Website sollte eine schnelle Ladezeit haben und Bilder machen einen großen Teil davon aus, ob Foto, Illustrationen, Logos oder Icons. Mit diesen Tipps kannst du die Datenmenge auf deiner Website schön gering halten und auch die Chancen erhöhen, über Suchmaschinen besser gefunden zu werden.

Dateiformat

grüner Haken

JPEG, SVG, WEBP
Die besten Formate fürs Web sind JPG, SVG oder WebP. Achte darauf, dass du eins von den Formaten benutzt. SVG sind besonders gut geeignet für Icons oder Logos. WebP sind nochmal wesentlich kleiner und auch von Google sehr empfohlen. Leider haben alte Browser immer noch ab und zu Probleme, dieses Format darzustellen.

Orangenes Kreuz

PNG
PNG ist natürlich nicht verboten, aber man sollte sie möglichst nur dann benutzen, wenn das Bild einen transparenten Hintergrund besitzt. Zudem haben sie eine größere Datenmenge als bspw. JPG.

Bildgröße

Grüner Haken

600 - max. 2000 px
600px – 2000px sollten ein guter Anhaltspunkt sein, immer angemessen zu der Stelle, an der das Bild platziert wird. Bei Headerbildern, die ja eher eine etwas größere Pixelzahl haben können, würde ich etwa 2000px empfehlen. In einem zweispaltigen Abschnitt, in dem sich ein Bild und ein Text befinden, würde ich 600px für das Bild wählen.

Orangenes Kreuz

3000 px
Achte darauf, dass die Bilder nicht allzu riesig sind. Stockbilder z.B. sind im Original immer super groß und sollten vorher auch verkleinert werden. Beachte aber: Je kleiner das Bild, desto kleiner auch die Datei. Bilder mit mehr Pixeln sind natürlich schöner. Man muss also einen Kompromiss finden.

Dateigröße

Grüner Haken

Max. 150 - 200 KB
Auch die Änderung der Dateigröße kann beim Heraus speichern einiges ausmachen. Ich schaue immer, dass meine Bilder maximal 150 - 200 KB groß sind. Die optimale Dateigröße liegt hier meiner Ansicht nach zwischen 1 KB und 150 KB. Bei Headerbildern, darf es natürlich auch bis zu 200 KB hoch gehen.

Orangenes Kreuz

200 KB
Alles, was darüber hinausgeht, erhöht das Volumen der Website stark und sorgt für längere Ladezeiten. Vor allem auf einer Seite, auf der mehrere Bilder zu sehen sind, kann man sich ja ausrechnen, wie viel größer die Seite dadurch werden kann.

Qualität

Grüner Haken

70 % - 95 %
Achte darauf, dass die Bilder nicht zu viel an Qualität verlieren, da sonst unschöne Artefakte durch zu starke Komprimierung entstehen können. 70 – 95 % ist da ein guter Richtwert.

Orangenes Kreuz

100 %
Qualität und Dateigröße stehen im Verhältnis zueinander. Je weiter man die Qualität des Bildes verringert, desto geringer wird die Dateigröße.

Ich hoffe diese Tipps konnten dir dabei weiterhelfen. Wenn du noch Fragen hast, melde dich gerne bei mir!

Sind deine Fotos denn schon optimiert?