Bild Optimierung

Imagify bietet drei Optimierungsstufen: Standard, Aggressiv und Ultra. Bei diesen Ebenen geht es im Wesentlichen um die Bildqualität. Einer der Nachteile bei der Bildoptimierung besteht darin, dass Sie an Bildqualität verlieren. Es ist nur klein und normalerweise nicht wahrnehmbar, kann aber auffallen, wenn Ihnen eine ultrahohe Bildqualität wichtig ist. Dies ist häufig auf Websites wie Fotografie-, Kunst- oder Schmuckseiten usw. der Fall.

Macht es Degradieren Bilder Viel?

Vieles hängt von der Art der Bilder ab, die Sie verwenden. Beispielsweise werden sie bei der Standardqualität überhaupt nicht beeinträchtigt, während sie bei der Ultra-Qualität etwas verpixelt werden, aber nicht zu stark. Diese Website ist als Beispiel auf höchste Qualität eingestellt. Der Vorteil besteht darin, dass die Bilder im Ultra-Modus viel kleiner sind und daher schneller geladen werden als selbst in der aggressiven Einstellung.

Manche Leute entscheiden sich direkt für die Ultra-Einstellung und merken den Unterschied wirklich. Wenn Sie mit der Optimierung beginnen, Stellen Sie sicher, dass Sie das Kästchen ankreuzen, um die Originale aufzubewahren. Wenn Ihnen die Ultra-Einstellung nicht gefällt, können Sie auf diese Weise auf eine höhere Qualität zurückgreifen.

Im Allgemeinen verschlechtert die aggressive Einstellung die Qualität Ihrer Bilder um etwa 15% auf ein Niveau von 85%. Dies ist für das menschliche Auge nicht wahrnehmbar und die häufigste Einstellung. Wenn die Bildqualität nicht entscheidend ist oder Sie Grafiken im Cartoon-Stil anstelle von Fotos verwenden, entscheiden Sie sich für Ultra. Es ist immer noch völlig akzeptabel. Normalerweise reduzieren Sie mit einer Ultra-Einstellung die Bildgröße um etwa 851 TP3T. Das bedeutet, dass ein 1-MB-Bild nur noch 100–150 Pfund groß wird, was sich enorm auf die Seitenladezeit und die Seitengeschwindigkeitswerte auswirkt.

Kann ich Alles machen Meine Bilder auf einmal?

Ja, das können Sie – sehen Sie sich das Video an, um eine Anleitung zur Funktionsweise von Imagify zu erhalten. Ein Top-Tipp ist, auch Ihren Theme-Ordner in die Optimierungen einzubeziehen. Ihr Theme wird viele Bilder enthalten, von denen einige auf Ihrer Website verwendet werden. Indem Sie Ihre Themenbilder einfügen, können Sie die Anzahl der Bilder, die Sie auf Ihrer Website optimieren können, maximieren.

Um abzuschätzen, wie viele Bilder Sie optimieren müssen, schauen Sie in Ihrer Medienbibliothek nach. Hier erfahren Sie, wie viele Bilder Sie haben. Dann multiplizieren Sie dies mit 4 (im Durchschnitt). Dies liegt daran, dass WordPress mehrere Versionen Ihrer Bilder für responsives Design erstellt (Miniaturansicht, 300 x 300 Pixel usw.). Sie müssen jede Version jedes Bildes optimieren, um alle Vorteile der Bildoptimierung auf allen Geräten nutzen zu können.

Die manuelle Bildoptimierung ist wirklich etwas für Puristen. Ein Vorteil davon ist, dass Sie ein vollständig optimiertes Bild in der richtigen Größe hochladen und daher überhaupt keine Bildoptimierungssoftware ausführen müssen. Außerdem sparen Sie Platz auf dem Server, da dort keine Bilder in voller Größe vorhanden sind. Allerdings ist es ziemlich zeitintensiv, daher würde ich den meisten Leuten empfehlen, einfach Imagify zu verwenden.

Ich habe Die Zeit – Was ist dabei?

Zunächst müssen Sie die Bildabmessungen kennen, die Sie verwenden. Dazu gibt es eine gute Anleitung Bildgrößen und Best Practices auf dieser Seite. Sobald Sie Ihre Bildgrößen kennen, können Sie große Bilder mit jedem Bildsoftware-Tool auf die exakte Größe zuschneiden. Paint.net ist kostenlos und normalerweise gut genug dafür.

Nachdem Sie Ihre Bilder in der richtigen Größe erstellt haben, können Sie diese mit einem Online-Tool optimieren. Eines der besten, das es seit Jahren gibt, ist TinyPNG.com. Sie laden einfach Ihre Bilder hoch und laden dann die viel kleinere Version herunter, die erstellt wird. Zwei Tipps zum Hochladen dieser Bilder auf WordPress:

Zunächst einmal klingt es albern, aber stellen Sie sicher, dass Sie die neu optimierte Version aus dem Ordner „Downloads“ auf Ihre Website hochladen. Es ist so einfach, das falsche Bild von Ihrem Desktop oder wo auch immer Sie Ihre Bilder speichern, hochzuladen. Zweitens verwenden Sie einen etwas anderen Namen für den neuen Bildtitel. Das liegt am Caching. Ihre WordPress-Installation erkennt die neue Bildgröße möglicherweise längere Zeit nicht, wenn Sie das Bild mit demselben Dateinamen hochladen.

Nachdem Sie dies getan haben, können Sie noch einen Schritt weiter gehen und die neu optimierten Bilder in das WEBP-Format konvertieren. Tun Sie dies, bevor Sie sie hochladen. Gehe zum CloudConvert Webseite. Es folgt genau dem gleichen Prozess wie TinyPNG, außer dass Sie sich für die Konvertierung in WEBP entscheiden. Laden Sie dann die Dateien herunter und laden Sie sie auf Ihren Server hoch.

Die Verwendung von Software wie Imagify ist viel einfacher, aber am Ende haben Sie optimierte Rohbilder hochgeladen, sodass Sie keine Bildkonvertierungstools verwenden oder ständig WEBP-Konvertierungen ausführen müssen.

WEBP ist ein neueres Bildformat, das von Google entwickelt wurde. Die Bilder sind viel kleiner als herkömmliche JPG- und PNG-Formate. Sie sollten sie also verwenden – vorausgesetzt, Ihr Server unterstützt die Konvertierung herkömmlicher Bilder in WEBP.

WEBP entstand tatsächlich im Jahr 2010, wird aber dennoch immer noch als „aufstrebendes“ Format angesehen. Möglicherweise lesen Sie, dass Sie neben den WEBP-Formaten auch die Original-JPG-/PNG-Bilder als Ersatz benötigen, aber die Wahrheit ist, dass Chrome, Firefox, Safari und alle anderen großen Browser dies unterstützen, sodass es jetzt in Ordnung ist, nur WEBP-Versionen zu haben.

Funktioniert mein Server Unterstützung Ihnen?

Imagify verfügt über eine automatische Einstellung, um es auf Ihrem Server zu aktivieren. Die meisten Bildoptimierer, die in WEBP konvertieren, tun dies. Es prüft und teilt Ihnen mit, ob Ihr Server keine WEBP-Bilder bereitstellt. Grundsätzlich muss WordPress Ihre Bilddateien auf eine von zwei Arten neu schreiben, damit es funktioniert. Einige Server erlauben es, andere nicht:

Der beste Weg ist über Bild-Tags. Dies ist ein HTML5-Befehl, der das ersetzen wird Teil zu a Etikett. Es ist ziemlich einfach, aber nicht alle Server unterstützen es. Die zweite Möglichkeit besteht darin, die Dateien über die .htaccess-Datei neu zu schreiben. Dies ist nicht die bevorzugte Vorgehensweise, da dadurch die Serveranforderungen beim Laden der Seite erhöht werden. Es ist jedoch immer noch von Vorteil, WEBP zu verwenden, wenn Sie dies auf diese Weise tun müssen.

Kinta ist NGINX und ist bereits für WEBP eingerichtet, falls Sie ein nicht kompatibles Server-Setup haben.

Imagify ist ein automatisierter Prozess, der sehr schnell ist. Die benötigte Zeit hängt wirklich von den Bildgrößen ab, die Sie verwenden. Die Optimierung eines normalen Bildes mit weniger als 1 MB dauert einige Sekunden.

Denken Sie daran, die Anzahl der in Ihrer Medienbibliothek angezeigten Bilder mit 4 zu multiplizieren, damit alle Responsive-Größen optimiert werden können. Angenommen, Sie haben 100 Bilder, 400 werden optimiert. Multiplizieren Sie das mit einem Durchschnitt von jeweils etwa 5 Sekunden und Sie bekommen die Idee. Die Fertigstellung wird etwas mehr als eine halbe Stunde dauern.

Größere Bilder können länger dauern und die Fertigstellung von Geschäften kann sehr lange dauern. Wenn Sie beispielsweise über 10.000 Bilder in der Medienbibliothek verfügen, müssen Sie 40.000 responsive Bilder optimieren. Multiplizieren Sie das jeweils mit 5 Sekunden und Sie haben 2/3 Tage Zeit, um Ihre Bilder zu optimieren.

Allerdings verfügt eine durchschnittliche Website nicht annähernd über diese Menge an Bildern, sodass der Vorgang innerhalb einer Stunde oder so abgeschlossen sein sollte.

Sie haben also alle Ihre Bilder gemacht. Löschen Sie noch einmal alle Ihre Caches und führen Sie einen Pagespeed-Test durch. Sie werden jetzt feststellen, dass Ihre Website viel schneller lädt – insbesondere auf Mobilgeräten.

Wenn Sie mit Ihren Bildern zufrieden sind, fahren Sie mit dem nächsten Schritt fort. Der nächste Teil des Optimierungsprozesses ist der WP-Rocket-Caching-Bereich, der Ihre Punktzahlen noch weiter steigern wird.