Optimierung von Bildern fürs Web

Fotos (JPEG)

Fotos sollten in der Regel im JPEG Format angespeichert werden. Für hochauflösende (Retina) Bildschirme sollten Bilder mit vierfacher Auflösung (doppelte Länge und Höhe) abgespeichert werden. Die beste Komprimierung hängt vom Bild selbst und der Auflösung ab.

Komprimierung

Bei Fotos mit niedriger Auflösung sollte die Komprimierung in Photoshop in der Regel auf einen Wert zwischen ca. 55% und 65% eingestellt werden. Bei Retina Grafiken kann die Komprimierung erhöht werden und eine Qualitätseinstellung von ca. 35% bis 55% genutzt werden. Wählen Sie die bestmögliche Komprimierung bei der das Foto noch gut aussieht. Dabei sollten Sie eher eine etwas kleinere Komprimierung in Kauf nehmen, als unschöne Komprimierungsartefakte.

Grafiken (PNG)

Einfache Grafiken können als PNG abgespeichert werden. PNG Dateien werden verlustlos komprimiert und zeigen daher keine Komprimierungsartefakte. Mit dem PNG Grafikformat können Grafiken sehr fest komprimiert werden und daher Bandbreite gespart werden. JPEG Grafiken sollten aufgrund der Komprimierung nicht in PNG Grafiken umgewandelt werden.

Vektorgrafiken (SVG)

Vektorgrafiken sind in der Regel am besten, da diese auf jedem Bildschirm gut aussehen, weniger Speicher benötigen und sehr gut komprimiert werden können. Dieses Format sollte immer mit einem Tool, wie SVGO komprimiert werden.

Erweiterte Komprimierung

Um Grafiken zusätzlich zu komprimieren kann ein verlustloses Komprimierungsprogramm, wie ImageOptim benutzt werden. Besonders bei PNG und GIF Grafiken lohnt sich diese zusätzliche Komprimierung. Je nach Grafik können bis zu 90% oder mehr Speicher eingespart werden.