Komprimieren Sie Bilder für Web & WordPress.

Jeder kennt ihn. Jeder hasst ihn. Der Ladebalken ist auf Webseiten meistens unscheinbar. Visuell teilweise gar nicht erkennbar. Warten muss man trotzdem in manchen Fällen. Da wird schnell der langsame Webhoster verantwortlich gemacht. Allerdings kann der Ursprung des Problems auch bei einem oft vernachlässigtem Punkt liegen: Die Bilder für das Web richtig zu komprimieren.

Das nachfolgende Bild von meiner Island-Reise, wurde von der RAW-Datei (40MB) zum anwendungsorientieren JPEG (132KB) komprimiert. Erfahren Sie in diesem Artikel, wie Sie Ihre Bilder genauso effizient komprimieren können.

Contentbild - Musterbeispiel für optimierte Bildkomprimierung

1. Die manuelle Komprimierung

Zwar gibt es automatisierte Plugins die Ihre Bilder generell optimieren, aber manche Schritte führen Sie besser durch die eigene Hand aus. Dafür benötigen Sie ein Bildbearbeitungsprogramm. Ob es sich dabei um die professionelle Software Adobe Photoshop oder die kostenlose Alternative GIMP handelt, ist für die Anwendung hier größtenteils irrelevant. Für den (semi-)professionellen Bereich, kann ich Ihnen den Newcomer Affinity Photo von Serif empfehlen. Der Funktionsumfang von Affinity Photo bietet Ihnen auch das nötige Werkzeug für eine gründliche Bildbearbeitung.

Warum Sie lange Ladezeiten vermeiden sollten?

Zuallererst für Ihren Besucher. Kein Kunde, Leser oder Interessent wartet gerne. Reduzieren Sie deshalb die Dateien und damit die Ladezeit Ihrer Webseite. Sie erhalten zusätzlich weitere Vorteile durch diese Maßnahme. So beeinflussen Sie aktiv Ihr Ranking bei Google, benötigen weniger Speicherplatz Ihres Webhosters und sparen dadurch Kosten. Das klingt alles toll, jetzt stellt sich nur noch die Frage, wie man es am besten umsetzt. Lernen Sie in dieser Tutorial-Reihe die Grundlagen zur eigenen Bildoptimierung für deutsche Privatanwender und Kleinunternehmen.

2. Den richtigen Farbraum wählen.

Nachdem Sie die Datei in Ihrem Bildbearbeitungsprogramm geöffnet haben, untersuchen Sie zunächst den Farbraum. Der Farbraum ist je nach Software unterschiedlich benannt: Farbformat, Farbmodus, Farbraum — die Bezeichnung ist unerheblich. Jedenfalls kann ein anderer Farbraum auf elektronischen Anzeigen zu einer ungewollten Farbdarstellung führen. Deswegen stellen Sie sicher, dass das Farbformat auf sRGB eingestellt ist. Alle elektronischen Anzeigen können mindestens den sRGB-Farbraum (kleinster RGB-Farbraum) korrekt wiedergeben. Zusätzlich stellen Sie die Bitrate auf 8-Bit. Nur wenn das Bild wirklich durch seinen Dynamikumfang überzeugen soll, kann der Bitkanal mit 16-Bit beibehalten werden. Das betrifft allerdings nur Fotografen, die Ihre Bilder bereits in 16-Bit bearbeitet haben. Grundsätzlich steht hier aber die Komprimierung im Vordergrund.

Quick-Tipp: Bilder die Sie direkt von Ihrer Digitalkamera übertragen, benötigen keine Kontrolle des Farbraums. Wenn Sie Ihre Bilder jedoch aus externen Quellen erhalten, sollten Sie den hinterlegten Farbraum überprüfen.

Contentbild - Einstellung des Farbformats in Affinity Photo von Serif, Farbformat RGB (8 Bit)

3. Bilder auf das Endformat zuschneiden.

Ein essentieller Schritt zur Verkleinerung der Dateigröße ist die Reduzierung der Bildgröße. Deswegen skalieren Sie Bilder auf die maximale Breite, die sie auf Ihrer Webseite einnehmen können. Entscheidend dafür ist die maximale Breite des Containers, in dem sich das Bild befindet. Kann sich das Bild maximal auf 1920px-Breite skalieren, wird es auch nur in der maximalen Breite von 1920px benötigt. Falls Sie Hilfe benötigen den richtigen Wert für Ihre Webseite ausfindig zu machen, helfen ich Ihnen gerne weiter. Eine Umstellung auf 72dpi ist für das Web nicht notwendig. Die dpi-Zahl verändert bei Pixelformaten nicht die Dateigröße. Es kommt lediglich auf die richtige Auflösung in Pixeln an. Hier erfahren Sie mehr über den Mythos der 72dpi-Auflösung.

Quick-Tipp: In der Regel werden die Bilder von Themes & Templates bereits in der richtigen Auflösung abgespeichert. Falls Sie ein Theme verwenden, können Sie diese Dateien als Mustervorlagen für die Bildgröße der eigenen Bilddateien verwenden.

Contenbild - Bilder für Web & Wordpress optimieren - Hauptmerkmale serverbasierte Optimierung: Kostenlose Alternativen, Sicher nach DSGVO, Sehr rechenintensiv - Hauptmerkmale cloudbasierte Optimierung: Technisch bessere Lösung, oft im direkten Vergleich besser, Relativ sicher (Standort Cloud-Server: EU), oftmals kostenpflichtig

4.1 Dateien für Web und Geräte speichern.

Wenn Sie die Datei manuell aus Ihrem Grafikprogramm exportieren, können Sie während dieses Vorgangs die Bildqualität komprimieren. Die Ausgabequalität setzen Sie in diesem Fall auf „Hoch“. Den Wert für die Qualität legen Sie zwischen 65–90% fest. Versuchen Sie die Datei möglichst klein zu bekommen. Achten Sie dabei auf die Ausgabevorschau — falls sie in Ihrer Software verfügbar ist — und verringern Sie die Bildqualität nicht zu stark. Hier ist ein gutes Auge gefragt.

Um diese Anleitung ein wenig kürzer zu halten, gebe ich Ihnen zu diesem Punkt nur folgende, effiziente Faustregel mit: Fotografien speichern Sie als .jpg / .jpeg ab. Grafiken und Bilder mit Schriften oder Transparenzen exportieren Sie als .png. Die Hintergründe dazu, können Sie in meinem Artikel Bildformate und ihre Anwendungsfälle nachlesen.

Contentbild - Exporteinstellungen in der Software Affinity Photo für die Stapelverarbeitung, JPEG Qualität:75%, Bereich: Ganzes Dokument

4.2 Bilder durch Plugins komprimieren.

Alternativ bieten Ihnen Web-Anwendungen und Plugins diesen Komprimierungsvorgang an. Neben der Vereinfachung durch die Automatisierung, müssen aber auch potentielle Nachteile berücksichtigt werden. Das Dilemma besteht darin, dass sich die bekanntesten dieser Dienstleister (Optimizilla, TinyJPG) außerhalb der Grenzen Europas befinden. Nach der EU DSGVO ist somit der Datenschutz durch die Übertragung zu einem internationalen Cloud-Dienst nicht gewährleistet. Weitere Informationen können Sie diesem Fachartikel entnehmen.

In der Praxis sieht der sichere Weg folgendermaßen aus:

  • Sie besitzen sämtliche Rechte an Ihrem Bild: Dann können Sie einen dieser Dienstleister nutzen.
  • Sie haben nicht ausschließlich die Rechte an Ihren Bildern (bspw. Stockbilder, Personenaufnahmen): Dann sollten Sie die Komprimierung manuell durchführen.

5. Eine gute Dateibenennung festlegen.

Im Netz sollten Sie Dateinamen die Sonder- oder Leerzeichen enthalten strikt vermeiden. Die Browser ersetzen Leerzeichen im Dateinamen durch längere Zahlenketten. Dadurch werden Links unnötig lang und unleserlich. Gleichzeitig verschwenden Sie durch schlecht ausgewählte Dateinamen Ihr Potential für die SEO (Search Engine Optimisation).

Eine Bezeichnung „IMG_08.jpg“ — wie sie häufig aus der Kamera kommt — wird niemals gezielt auf Google gesucht. Verwenden Sie stattdessen eine „sprechende“ Dateibezeichnung. Der Aufbau meiner Struktur sieht dabei konkret so aus: „Schreiber-Tobias_Bilder-fuer-Web-und-Wordpress-Optimieren_Beispielbild-2465“. Darin sind Suchbegriffe enthalten, die direkten Bezug auf den Inhalt meiner Webseite und des Artikels nehmen. Die Dateinamen werden nach dem System „Projektname_Seiteninhalt-Seiteninhalt-Seiteninhalt_Bildbezeichnung“ benannt.

Die Bezeichnung wird durch Unter- und Bindestriche zusammengehalten. Diese Zeichen sind unbedenklich im Web. Die Lesbarkeit der gespeicherten Datei bleibt durch die Großschreibung jedes neuen Wortes erhalten. Bei Fotografien wird die Bildnummer, mit der das Foto aus der Kamera gespeichert wurde, am Ende des Dateinamens hinzugefügt. Das hat den Vorteil, dass Ursprungsdateien rückwirkend wieder zugeordnet werden können. Gerne können Sie diese Struktur für sich selbst übernehmen.

Die manuelle Komprimierung vereinfachen.

Die manuelle Komprimierung kann leider einiges an Zeit in Anspruch nehmen. Gerade wenn Sie regelmäßig, mehrere Bilder aufbereiten müssen. Hier ist es besonders interessant, dass man viele Abläufe wie das Zuschneiden auf das Endformat inkl. der Komprimierung automatisieren kann. Wie genau das funktioniert, können Sie in meinem Artikel Affinity Photo – Die Stapelverarbeitung erfahren. Nachdem Sie jetzt wissen wie Sie Ihre Bilder vor dem Upload komprimieren, kommen wir nun zur Optimierung nach dem Upload in WordPress.

Contentbild - Checkliste bei Bilder für das Web & Wordpress: Farbraum kontrollieren, Endformat festlegen, Bilder komprimieren, Gute Dateibenennung festlegen

Nach der Komprimierung kommt die Optimierung der Bilder.

Hier finden Sie den zweiten Teil

Leave a Reply