Grafiken und Fotos gehören zur Gestaltung einer attraktiven Webseite dazu. Es ist dabei jedoch wichtig, auf Format und Größe der Bilder zu achten, um die Ladezeit der Seite nicht negativ zu beeinflussen. Welche Bildgröße und welches Format ist ideal für die Webseite und wie kann ich Bilder optimieren? Das erklären wir dir in diesem Beitrag.
Darum ist das Bilder optimieren so wichtig
Grafikelemente oder gestochen scharfe und hochauflösende Fotos sind in Hingucker auf jeder Website. Doch sie haben auch einen Nachteil: je größer die Bilder sind, desto mehr Speicherplatz brauchen sie und umso länger benötigt die Website für den Ladevorgang.
Stark verkleinerte Fotos und Grafiken bringen jedoch häufig einen Qualitätsverlust mit sich.
Daher ist es wichtig einen guten Mittelweg zu finden, sodass die Bilder eine hohe Bildqualität haben, aber dennoch geringen Speicherplatz. Dies bekommt man am besten hin, wenn man die Bilder komprimiert.
Wie werden Fotos komprimiert?
Für die Komprimierung gibt es viele Online-Tools, darunter auch beliebte Freeware-Programme wie IrfanView. Sogar mit der Microsoft-App Paint 3D ist dies unter Windows 10/11 möglich.
Wenn du mit Mac arbeitest, kannst du über die Vorschau/Werkzeuge die Größe anpassen, das Bild neu berechnen lassen und dort die gewünschte Größe im Feld „Auflösung“ eintragen. Zusätzlich nutzte ich gerne das Tool ImageOptim.
Verlustfreie oder verlustbehaftete Komprimierung?
Je nach Bild und Qualität solltest du probieren, ob sich eine verlustfreie oder verlustbehaftete Komprimierung besser eignet.
Wo ist der Unterschied?
- Die verlustbehaftete Varianten eliminiert einige Daten und verschlechtert das Bild, das sich dann jedoch stark verkleinern lässt. Daher wird diese Möglichkeit häufig eingesetzt.
- Die verlustfreie Lösung eliminiert keine Daten, sondern komprimiert sie lediglich.
Eine Bearbeitung ist in beiden Fällen mit verschiedenen gängigen Programmen wie beispielsweise Adobe Photoshop möglich.
Optimale Bildgröße – Wie groß soll ein Bild sein?
Das lässt sich nicht pauschal sagen. Ein Anhaltspunkt ist jedoch, dass die durchschnittliche Dateigröße bei einfachen Bildern (PNG) bei unter 200 KB liegen sollte.
Tipps für die Optimierung von Bildern
- Am besten entfernst du zunächst alle unnötigen Bilddaten (auch Metadaten) und reduzierst außerdem deine Bilder auf eine kleinere Farbpalette.
- Achte darauf, Rasterbilder nur im Einzelfall zu verwenden, wenn sie detailreich sind und eine große Formenvielfalt beinhalten.
- Wenn du mit speziellen Tools arbeitest, speichere die Bilder direkt als „optimiert für das Web“ ab.
- Eine gute Unterstützung bei der Bestückung der Webseite sind übrigens auch Vektorgrafiken.
Welches Format sollte man wählen?
Das Format hängt ganz davon ab, wofür die Bilder verwendet werden sollen und wie hochwertig das Ergebnis am Ende sein soll.
Die gängigsten Formate, zwischen denen du dich entscheiden kannst, sind:
- GIF (animierte Bilder)
- JPG (ideal für Fotografien oder Screenshots, wird von vielen Smartphones als Format genutzt)
- PNG (für detailreiche Bilder und Grafiken in hoher Auflösung, vor allem für Logos geeignet) )
Relativ neu sind WebP, JPEG XR oder SVG, die jedoch noch nicht von jedem Browser unterstützt werden. SVG ist ein gutes verlustfreies Dateiformat, welches sich jedoch nicht immer leicht einbauen lässt. Da SVG sich jedoch auf jede Größe ohne Qualitätsverlust skalieren lässt, ist es für Webseiten eine sehr gute Lösung. Dicht gefolgt von PNG und JPG.
