Tipp: Guide für Bildkomprimierung
Lesezeit: 5 Minuten
Bei Projekten, in denen wir bei der Inhaltserstellung beteiligt sind, werden die durch uns in den Designphasen hinzugefügten Bilder und Videos vor dem Online-Gang kontrolliert und komprimiert. Aber was passiert wenn das Projekt abgeschlossen ist und die Content-Befüllung nun in der eigenen Hand liegt?
Besuche uns auf LinkedIn.
Du willst keine Neuigkeiten verpassen? Folge uns doch einfach auf LinkedIn!
LinkedIn ProfilAnmeldung zu dem medani-Newsletter
Bildkomprimierung
Für die Geschwindigkeit einer Webseite spielt die korrekte Komprimierung der angezeigten Bilder & Videos eine wichtige Rolle. Der Webseiteninhalt muss im Voraus von der Seite geladen werden. Große Dateien verlangsamen den Prozess und können unter anderem das SEO-Ranking Ihrer Webseite beeinflussen. Aus diesem Grund ist es wichtig, dass man Dateien sorgfältig komprimiert, um sie nur mit dem maximal notwendigen Speicherverbrauch zu laden. Da wir Sie bei Ihrer Inhaltseinpflege nicht immer begleiten können, ist es wichtig, dass Sie Bilder, die Sie selbst hochladen, in der Bildkompression selbst optimieren.
Bilder
Allgemein gilt es darauf zu achten die richtigen Bilddimensionen zu nutzen. Das bedeutet: Wenn ein Bild in der Webseite nur sehr klein verwendet wird, dann ist es nicht nötig das Bild größer einzuspielen als es tatsächlich ausgegeben wird. Beispiel: Ein Bild erscheint nur klein im Dropdown-Menü der Navigation. Es ist in diesem Fall nicht ratsam das Bild größer hochzuladen als man es wirklich benötigt. Allein durch die Anpassung der richtigen Größe kann man bereits viel von der Dateigröße einsparen. Wird ein Bild also zum Beispiel in der Größe 250px mal 140px ausgegeben, spielt man es auch in exakt dieser Pixeldimension in das System und nicht größer.
JPG
Das Bildformat JPG verwendet man, wenn man Fotos mit vielen Details und großflächig verwendete flache Farben verwenden möchte. Generell ist JPG aktuell in punkto Datenmenge das am besten komprimierbare Format und sollte in den allermeisten Fällen verwendet werden. Man muss jedoch dennoch beachten, dass man die Bilder vor dem Upload in die Webseite komprimiert. Um das Bild kleinstmöglich zu komprimieren, sollte es schon vor dem Upload in einem Bildbearbeitungsprogramm für das WEB vorkomprimiert werden. Wenn Sie die Möglichkeiten haben dies in Adobe Photoshop oder einem anderen Bildbearbeitungsprogramm durchzuführen, kann man dort die Qualität während des Exports einstellen („Für Web speichern“). Wählen Sie eine Kompressionsrate, die gerade noch ein sehr gutes Aussehen ermöglicht. Der Wert variiert in der Regel zwischen 40 und 70% je nach Bildbeschaffenheit. Es empfiehlt sich auch die Option “progressiv speichern” zu wählen.
Wenn Sie kein Bildbearbeitungsprogramm haben, können Sie die Bilder auf der Seite tinypng.com unkompliziert und aktuell kostenlos komprimieren lassen. Dazu muss man diese nur auf tinypng.com hochladen. Sie werden dann komprimiert und sind kurze Zeit später wieder zum Herunterladen bereit. Danach kann man sie für die Webseite benutzen. Das Vorkomprimieren in einem Bildbearbeitungsprogramm und die nachfolgende Bearbeitung in tinypng bringt die größten Erfolge!
PNG
Nur wenn Sie transparente Bilder in Ihre Webseite einfügen wollen, ist das benötigte Dateiformat PNG. PNG’s haben – im Gegensatz zu JPGs – eine größere Datenmenge. Jedoch haben sie im Format png-24 auch die Möglichkeit einen transparenten Hintergrund darzustellen. Dies wird oft bei ausgeschnittenen Bildern oder Logos benötigt. Auch hier sollte darauf geachtet werden die Dateien von der Größe so gering wie möglich zu halten, ohne dass sie optisch darunter leiden. Auch bei einem PNG sollten Sie die Bilder durch die Komprimierung laufen lassen, oder die Bilder selbst komprimieren. Auch hier ist das Tool tinypng anwendbar.
SVG
Dieses Format ist das beste Format für Vektorgrafiken, das heißt für Grafiken, die in Pfade und nicht in PIXEL aufgelöst sind (z.B. Illustrationen). Es ist ein Format, das bei jeder Skalierungsgröße seine Qualität behält und generell wenig Speichergröße benötigt. Logos und Icons werden idealerweise als SVG-Bilder auf die Webseite hochgeladen. Leider können noch nicht alle gängigen Website- und Webshop-Templates mit dem Format SVG umgehen. Dieses muss oft zusätzlich implementiert werden. Sollte das bei Ihnen der Fall sein, greifen Sie auf das Format png für transparente Bilder oder jpg für nicht transparente Bilder zurück.