Bilder optimieren

Glauben Sie uns, Sie wollen nicht, dass Google Ihre Website schlecht bewertet. Glücklicherweise können Sie die Dateigrößen Ihrer Bilder reduzieren, um die Leistung Ihrer Website zu verbessern. Ein Problem bei der Formatierung besteht darin, dass Änderungen oft deren Qualität verringern (was wiederum dazu führen kann, dass der Besucher Ihre Website missbilligt). Solange Sie die Bilder nicht unansehnlich machen, ist das keine schlechte Sache. Es gibt einige Tricks und Techniken, mit denen Sie die Dateigröße der Bilder reduzieren und sie dennoch attraktiv bleiben und auf Ihrer Website mit Stolz präsentieren können. Schauen wir uns also an, wie Sie Ihre Bilder formatieren können, ohne sie unangenehm zu machen, und wie Sie die Bilder für das Web und die Performance optimieren können.

Große Bilder verlangsamen Ihre Webseiten, was zu einem nicht optimalen Benutzererlebnis führt. Bei der Optimierung von Bildern wird die Dateigröße entweder mit Hilfe eines Plugins oder eines Scripts verringert, was wiederum die Ladezeit der Seite beschleunigt. Die verlustreiche und verlustfreie Komprimierung sind zwei häufig verwendete Methoden.

Erstens: Warum müssen Sie Ihre Bilder formatieren? Was sind die Vorteile? Es gibt zahlreiche Vorteile, wenn Sie Ihre Bilder für die Performance optimieren. Laut HTTP-Archiv beträgt der Anteil der Bilder am Gesamtgewicht einer Webseite im November 2018 durchschnittlich 21%. Wenn es also um die Optimierung Ihrer WordPress Website geht, sind Bilder nach den Videoinhalten bei weitem der wichtigste Punkt, mit dem Sie beginnen sollten!

Dies ist wichtiger als Scripts und Schriftarten. Außerdem ist ein guter Workflow zur Bildoptimierung eine der einfachsten Sachen, die man implementieren kann, doch viele Website-Betreiber übersehen dies.

Hier ist eine Übersicht über die wichtigsten Vorteile.

• Die Geschwindigkeit beim Laden der Seite wird dadurch verbessert. Wenn das Laden Ihrer Website zu lange dauert, werden Ihre Besucher möglicherweise keine Lust mehr haben zu warten und sich anderweitig orientieren.
• In der Kombination mit einem hervorragenden SEO-WordPress-Plugin wird Ihr SEO verbessert. Ihre Website wird in den Suchmaschinenergebnissen ein höheres Ranking erreichen. Große Dateien verlangsamen Ihre Website und Suchmaschinen finden langsame Websites nicht gut. Außerdem wird Google Ihre Bilder für die Google-Bildersuche wahrscheinlich schneller crawlen und indexieren. Interessiert es Sie, wie viel Prozent Ihres Traffics von der Google-Bildsuche stammt? Sie können ein Google Analytics-Segment verwenden, um den Traffic der Google-Bildsuche zu analysieren.
• Die Erstellung von Backups wird beschleunigt.
• Kleinere Bilddateigrößen benötigen weniger Bandbreite. Netzwerke und Browser werden dies zu schätzen wissen.
• Benötigt weniger Speicherplatz auf Ihrem Server (dies hängt davon ab, wie viele Thumbnails Sie optimieren).

Das primäre Ziel der Formatierung Ihrer Bilder ist es, ein Gleichgewicht zwischen der niedrigsten Dateigröße und einer akzeptablen Qualität zu finden. Es gibt verschiedene Möglichkeiten, diese Optimierungen durchzuführen. Eine der beliebtesten Methoden ist die einfache Komprimierung vor dem Hochladen in in CMS wie z.B. WordPress. Normalerweise kann dies mit einem Programm wie Adobe Photoshop oder Affinity Photo durchgeführt werden. Einige dieser Aufgaben können auch mit Hilfe von Plugins durchgeführt werden, auf die weiter unten näher eingegangen wird.

Die beiden wichtigsten Dinge, die es zu beachten gilt, sind das Dateiformat und die Art der Komprimierung, die verwendet wird. Durch die Wahl der richtigen Kombination von Dateiformat und Komprimierungsart können Sie Ihre Bildgröße bis zum 5-fachen reduzieren. Sie müssen mit jedem Bild oder Dateiformat experimentieren, um zu sehen, was am besten funktioniert.

Wählen Sie das richtige Dateiformat

Bevor Sie mit der Änderung Ihrer Bilder beginnen, stellen Sie sicher, dass Sie das beste Dateiformat gewählt haben. Es gibt verschiedene Arten von Bilddateien, die Sie verwenden können:

• PNG – erzeugt Bilder höherer Qualität, hat aber auch eine größere Dateigröße. Wurde als verlustfreies Bildformat entwickelt, obwohl es auch verlustbehaftet sein kann.
• JPEG – verwendet verlustbehaftete und verlustfreie Optimierung. Sie können die Qualitätsstufe für ein gutes Gleichgewicht von Qualität und Dateigröße anpassen.
• GIF – verwendet nur 256 Farben. Es ist die beste Wahl für animierte Bilder. Es verwendet nur verlustfreie Kompression.

Es gibt noch einige andere, wie z.B. JPEG XR und WebP, aber sie werden nicht von allen Browsern universell unterstützt. Im Idealfall sollten Sie JPEG oder JPG für Bilder mit vielen Farben und PNG für einfache Bilder verwenden.

Kompressionsqualität vs. Größe

Hier ist ein Beispiel dafür, was passieren kann, wenn man ein Bild zu stark komprimiert. Das erste Beispiel ist die Verwendung einer sehr niedrigen Komprimierungsrate, was zu höchster Qualität (aber größerer Dateigröße) führt. Die zweite ist die Verwendung einer sehr hohen Komprimierungsrate, was zu einem Bild von sehr geringer Qualität (aber kleinerer Dateigröße) führt. Hinweis: Das Originalbild beträgt unverändert 3,74 MB.

Wie Sie sehen können, ist das erste Bild oben 526 KB groß. Das ist ziemlich groß für ein einziges Bild! Im Allgemeinen ist es am besten, wenn Sie die Gesamtgröße einer Webseite unter 1 oder 2 MB halten können. 590 KB wären bereits ein Viertel davon. Das zweite Bild sieht offensichtlich ziemlich schlimm aus, aber es ist nur 39 KB groß. Sie müssen einen Mittelweg zwischen Ihrer Kompressionsrate (Qualität) und der Dateigröße finden.

Verlustbehaftete vs. verlustfreie Optimierung

Es ist auch wichtig zu verstehen, dass es zwei Arten von Komprimierung gibt, die Sie verwenden können, verlustbehaftet und verlustfrei.

Verlustbehaftet (Lossy) – dies ist ein Filter, der einige der Daten eliminiert. Dadurch wird das Bild vermindert, so dass Sie darauf achten müssen, wie stark Sie das Bild reduzieren müssen. Die Dateigröße kann um einen großen Prozentsatz reduziert werden. Sie können Werkzeuge wie Adobe Photoshop, Affinity Photo oder andere Bildbearbeitungsprogramme verwenden, um die Qualitätseinstellungen eines Bildes anzupassen. Das oben genannte Beispiel verwendet eine verlustbehaftete Komprimierung.

Verlustfrei (Lossless) – dies ist ein Filter, der die Daten komprimiert. Dadurch wird die Qualität nicht verringert, aber die Bilder müssen vor dem Rendern unkomprimiert werden. Sie können eine verlustfreie Komprimierung auf Ihrem Desktop mit Werkzeugen wie Photoshop, FileOptimizer oder ImageOptim durchführen.

Am besten experimentieren Sie mit Ihren Komprimierungstechniken, um zu sehen, was für jedes Bild oder Format am besten funktioniert. Wenn Ihre Programme die Option haben, stellen Sie sicher, dass Sie das Bild für das Internet speichern. Dies ist eine Option in vielen Bildbearbeitungsprogrammen und bietet Ihnen die Qualitätsanpassungen, damit Sie eine optimale Komprimierung durchführen können. Sie werden einen Teil der Qualität verlieren, also experimentieren Sie, um die beste Balance zu finden, ohne die Bilder unansehnlich zu machen.

Bildoptimierungs-Tools und -Programme

Es gibt eine Vielzahl von Tools und Programmen, sowohl Premium- als auch kostenlose, die Sie zur Optimierung Ihrer Bilder verwenden können. Einige geben Ihnen die Hilfsmittel, um Ihre eigenen Optimierungen durchzuführen, und andere erledigen die Arbeit für Sie. Wir persönlich sind große Fans von Affinity Photo, da es kostengünstig ist und Ihnen fast identische Funktionen wie Adobe Photoshop bietet.

Hier sind einige zusätzliche Tools und Programme zum Ausprobieren:

• Adobe Photoshop
• Gimp
• Paint.NET
• GIFsicle
• JPEGtran
• JPEG Mini
• OptiPNG
• pngquant
• ImageOptim
• Trimage
• ImageResize.org

Skalierung von Bildern

In der Vergangenheit war es sehr wichtig, dass Sie Bilder skaliert hochladen und nicht durch CSS die Größe ändern lassen. Dies ist jedoch nicht mehr so wichtig, da WordPress (ab Version 4.4) responsive Bilder (nicht durch CSS verkleinert) unterstützt. Im Grunde erstellt WordPress automatisch mehrere Größen von jedem Bild, das in die Medienbibliothek hochgeladen wird. Indem die verfügbaren Größen eines Bildes in ein srcset-Attribut aufgenommen werden, können die Browser nun die am besten geeignete Größe herunterladen und die anderen ignorieren.

Mit immer mehr HiDPI-Displays heutzutage kann es also gut sein, einen goldenen Mittelweg zu finden. Sagen wir, 2x oder 3x die Spaltengröße oder Div-Größe Ihrer Website, aber immer noch weniger als die Originalgröße. Der Browser zeigt die richtige Größe je nach der Auflösung des Geräts an.

Die WordPress-Medienbibliothek erstellt Miniaturansichten auf der Grundlage Ihrer Einstellungen. Das Original wird jedoch weiterhin beibehalten und nicht verändert. Wenn Sie die Größe Ihrer Bilder ändern und Speicherplatz sparen wollen, indem Sie das Original nicht speichern, können Sie ein kostenloses Plugin wie Imsanity verwenden.

Imsanity erlaubt es Ihnen, ein vernünftiges Limit zu setzen, so dass alle hochgeladenen Bilder auf eine vernünftige Größe beschränkt werden, die immer noch mehr als groß genug für die Bedürfnisse einer typischen Website sind. Imsanity wird unmittelbar nach dem Bild-Upload in WordPress aktiviert, aber noch bevor die Verarbeitung in WordPress erfolgt. WordPress verhält sich also in jeder Hinsicht genau gleich, außer dass es so aussieht, als hätte der Verfasser sein Bild vor dem Hochladen auf eine vernünftige Größe skaliert.

Mit WordPress müssen Sie die Formatierung oder Komprimierung glücklicherweise nicht mehr von Hand vornehmen. Sie können Plugins verwenden, um zumindest einen Teil der Arbeit zu automatisieren. Es gibt verschiedene Plugins, die Ihre Bilddateien automatisch optimieren, wenn Sie sie hochladen. Sie optimieren sogar Bilder, die Sie bereits hochgeladen haben. Dies ist eine praktische Funktion – besonders wenn Sie bereits eine Website mit Bildern haben. Hier ist ein Blick auf einige der besten Plugins zur Formatierung Ihrer Bilder für eine bessere Performance.

Es ist jedoch wichtig, dass Sie sich nicht nur auf die Plugins selbst verlassen. Zum Beispiel sollten Sie keine 2 MB Bilder in Ihre WordPress-Medienbibliothek hochladen. Dies kann dazu führen, dass der Speicherplatz Ihres Web-Hosts sehr schnell aufgebraucht wird. Die beste Methode ist es, die Größe des Bildes vorher schnell in einem Bildbearbeitungsprogramm zu ändern, es dann hochzuladen und eines der folgenden Plugins zu verwenden, um es weiter zu reduzieren.

Imagify Image Optimizer

Imagify wurde von demselben Team entwickelt, das auch das WP Rocket entwickelt hat, mit dem die meisten von Ihnen wahrscheinlich vertraut sind. Es ist mit WooCommerce, NextGen Gallery und WP Retina kompatibel. Es verfügt auch über eine Massenoptimierungsfunktion und Sie können zwischen drei verschiedenen Komprimierungsstufen wählen: normal, aggressiv und ultra. Es verfügt auch über eine Wiederherstellungsfunktion, so dass Sie, wenn Sie mit der Qualität unzufrieden sind, mit einem Klick die Wiederherstellung und erneute Komprimierung auf einer Stufe durchführen können, die Ihren Bedürfnissen eher entspricht. Es gibt eine kostenlose und eine Premium-Version. Mit einem kostenlosen Account sind Sie auf ein Kontingent von 25 MB Bildmaterial pro Monat beschränkt.

Das Entfernen des ursprünglichen Bildes und die Größenänderung Ihrer größeren Bilder kann ebenfalls mit diesem Plugin durchgeführt werden.

Imagify komprimiert auch Bilder auf den Servern von Drittanbietern, nicht auf Ihren, was für die Leistung sehr wichtig ist. Imagify sollte Ihre WordPress Website nicht verlangsamen.

ShortPixel Image Optimizer

ShortPixel Image Optimizer ist ein kostenloses Plugin, das 100 Bilder pro Monat komprimiert und mehrere Dateitypen, einschließlich PNG-, JPG-, GIF-, WebP- und sogar PDF-Dateien, komprimieren kann. Es kann sowohl verlustbehaftete als auch verlustfreie Bildkomprimierung durchführen. Es wandelt CMYK in RGB um. Es nimmt Ihre Bilder und Miniaturbilder zur Verarbeitung in die Cloud und bringt sie dann zurück auf Ihre Website, um die Originale zu ersetzen. Es erstellt eine Sicherheitskopie der Originaldateien, so dass Sie sie bei Bedarf wieder manuell wiederherstellen können. Es konvertiert Galerie-Dateien in großen Mengen. Es gibt keine Begrenzung der Dateigröße.

Optimole

Optimole ist ein Bildoptimierungs-WordPress-Plugin, das die Größe Ihrer Bilder automatisch reduziert, ohne dass Sie selbst etwas tun müssen. Es hat einen großen Vorteil, wenn es um die Ladegeschwindigkeit Ihrer Website geht, denn es ist vollständig Cloud-basiert und stellt niemals Bilder dar, die größer sind, als sie sein sollten, d.h. es zeigt die perfekte Bildgröße für das Ansichtsfenster und den Browser des Besuchers an.

Darüber hinaus bietet das Plugin ein Lazy Load und einen leistungsfähigen Bildwechsel – es reduziert die Bildqualität, wenn der Besucher eine langsamere Internetverbindung hat – und hebt sich dadurch von der Masse ab. Außerdem erkennt es automatisch den Browser des Benutzers und bedient automatisch WebP ein, wenn es unterstützt wird.

Alle Bilder, die Optimole komprimiert, werden über ein schnelles CDN bereitgestellt. Sie können Optimole kostenlos ausprobieren oder ein Upgrade auf den Premium-Plan in Anspruch nehmen, wenn Sie zusätzliche Bandbreite und Speicherplatz für die Verarbeitung benötigen.

EWWW Image Optimizer Cloud

Die EWWW Image Optimizer Cloud hilft Ihnen, Ihre Bilder zu verkleinern und Ihre Website schneller und mit weniger Aufwand zu realisieren. Ohne Größenbeschränkungen und mit viel Flexibilität können Sie die Standardeinstellungen verwenden oder das Plugin ganz nach Ihren Wünschen anpassen. Alle EWWW IO-Nutzer können den Massenoptimierer verwenden, um ihre vorhandenen Bilder zu komprimieren, oder den Medienbibliothek-Listenmodus verwenden, um bestimmte Bilder zur Komprimierung auszuwählen.

Zusätzliche Ordner können gescannt werden, um sicherzustellen, dass jedes einzelne Bild auf Ihrer Website richtig optimiert ist. Mit EWWW IO können Sie Ihre Bilder sogar in Formate der nächsten Generation wie WebP konvertieren oder das beste Bildformat für ein Bild mit Multiformat-Konvertierungsoptionen finden. Die Bildkomprimierung beginnt bei nur 0,003 $/Bild.

Mit der Premium-Komprimierungs-API können Sie die Komprimierung ohne Qualitätseinbußen auf eine ganz neue Ebene bringen, die die PDF-Komprimierung freischaltet und bequeme 30-Tage-Bildsicherungen umfasst. Das ExactDN-Feature, das ab 9 $/Monat erhältlich ist, bietet automatische Komprimierung (ohne serverseitige Komprimierung), automatische Größenanpassung und alle Vorteile eines CDN für schnellere Ergebnisse und noch mehr Leistung bei jeder Endgerätegröße.

Optimus Image Optimizer

Der Optimus WordPress Image Optimizer verwendet eine verlustfreie Komprimierung, um Ihre Bilder zu optimieren. Verlustfrei bedeutet, dass Sie keine Qualitätsverluste feststellen. Es unterstützt WooCoomerce und Multi-Website und verfügt über eine nette Massenoptimierungsfunktion für diejenigen, die bereits über große vorhandene Medienbibliotheken verfügen. Er ist auch mit dem WP Retina WordPress-Plugin kompatibel. Es gibt eine kostenlose und eine Premium-Version. In der Premium-Version zahlen Sie einmal pro Jahr und können eine unbegrenzte Anzahl von Bildern komprimieren. In Kombination mit dem Cache Enabler-Plugin können Sie auch in WebP-Bilder nutzen, ein neues leichtgewichtiges Bildformat von Google.

WP Smush

WP Smush hat sowohl eine kostenlose als auch eine Premium-Version. Es reduziert die in den Bildern enthaltenen Informationen, um die Größe ohne Qualitätsverlust zu verringern. Es scannt die Bilder ein und verkleinert sie, während Sie sie auf Ihre Website hochladen. Es scannt auch Bilder, die Sie bereits hochgeladen haben, und verkleinert diese ebenfalls. Es wird bis zu 50 Dateien auf einmal verkleinern. Sie können auch manuell verkleinern, wenn Sie möchten. Es werden JPEG-, GIF- und PNG-Bildtypen verkleinert. Die Dateigrößen sind auf 1MB begrenzt.

• Es ist mit einigen der beliebtesten Medienbibliothek-Plugins wie WP All Import und WPML kompatibel.
• Die gesamte Bildoptimierung erfolgt mit verlustfreien Kompressionstechniken, wodurch die Bildqualität hoch bleibt.
• Es spielt keine Rolle, in welchem Verzeichnis Sie Ihre Bilder speichern. Smush findet sie und komprimiert sie.
• Smush hat eine Option, automatisch die Breite und Höhe für alle Bilder zu bestimmen, so dass alle Ihre Bilder auf identische Proportionen skaliert werden.

Compress JPEG & PNG images von TinyPNG

TinyPNG nutzt die Dienste TinyJPG und TinyPNG (mit dem kostenlosen Account können Sie etwa 100 Bilder pro Monat komprimieren), um Ihre JPG- und PNG-Bilder zu optimieren. Es komprimiert automatisch neue Bilder und komprimiert Ihre vorhandenen Bilder in großen Mengen. Es wandelt CMYK in RBG um, um Platz zu sparen. JPEG-Bilder werden um bis zu 60% und PNG-Bilder um bis zu 80% komprimiert, ohne dass ein sichtbarer Verlust an Bildqualität entsteht. Es gibt keine Begrenzung der Dateigröße.

ImageRecycle pdf & image compression

Das ImageRecyle-Plugin ist ein automatischer Bild- und PDF-Optimierer. Dieses Plugin konzentriert sich nicht nur auf die Bildkomprimierung, sondern auch auf PDFs. Eine wirklich praktische Funktion ist die Möglichkeit, die Mindestdateigröße für die Komprimierung festzulegen. Wenn Sie z.B. Bilder mit einer Größe von 80 KB haben, können Sie diese automatisch von der Komprimierung ausschließen lassen. Dadurch wird sichergestellt, dass Bilder und Dateien nie zu stark komprimiert werden. Dazu gehören auch die Stapeloptimierung und die automatische Größenanpassung von Bildern. Hinweis: Sie haben eine kostenlose 15-Tage-Testversion, aber dies ist ein Premium-Service, und die Bilder werden über den Server hochgeladen und komprimiert. Es wird nicht pro Monat berechnet, sondern nach der Gesamtzahl der komprimierten Bilder, beginnend bei 10 Dollar für 10.000.