Welches Format nehme ich für welche Art von Bild?

Könntet ihr euch Webseiten ohne Bilder vorstellen? Ich nicht wirklich. Und so wird es wohl auch den meisten Menschen gehen die Blogs, Foren, Shops oder andere Webseiten besuchen. Ohne Bilder fehlt einfach etwas.

Dennoch sollten Seitenbetreiber schon darauf achten welches Format sie für ihre Bilder nutzen. Gerade in Sachen Ladegeschwindigkeit macht sich das falsche Format eines Bildes negativ bemerkbar. Nutzt man beispielsweise für ein Foto das PNG-Format, wird die Datei riesig groß werden. Besser geeignet ist bei einem Foto in jedem Fall das JPG-Format.

Welches Format nutze ich wann?

JPG solltet ihr immer nutzen wenn es um Bilder oder Fotografien geht die viele Details und Farben beinhalten. Je nach Kompressionsrate kann man bei solchen Bildern eine gute Balance finden zwischen Dateigrösse und Darstellungsqualität.

Das PNG-Format nutzt ihr wenn ihr zum Beispiel Logos, Illustrationen oder Diagrammen auf eure Webseite einstellen möchtet. Ein Vorteil von PNG gegenüber JPG ist, das man auch transparente Bereiche darstellen kann. Dies ist mit dem JPG-Format nicht möglich.

Dafür könnt ihr beim JPG Format zusätzliche Informationen im Bild speichern, die sogenannten Metadaten. Metadaten können zum Beispiel Urheberrechtshinweise, Angaben zum Aufnahmeort/Datum sein.

Auf den folgenden Screenshots könnt ihr sehr schön sehen wie sich die Dateigrösse verhält wenn ich das Titelbild für diesen Beitrag als PNG oder als JPG abspeichern würde. Die PNG Datei wäre fast sieben Mal größer als die JPG Datei!

Speichern als PNG:
speichernpng

Speichern als JPG:
speichernjpg

Fazit

Man kann eine Menge Speicherplatz einsparen und damit seine Seitenladezeit optimieren wenn man das richtige Format bei seinen Bildern wählt. Grundsätzlich könnte man sagen: JPG für Fotos und andere Bilder mit vielen „Bildinformationen“. PNG für Logos und „einfacheren“ Bildern. Probiert einfach aus bei welchem Format ihr die besten Ergebnisse für eure Grafiken erzielt.

Schreibe einen Kommentar

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