So optimieren Sie Bilder für Ihre Website und lassen sie auf allen Geräten funktionieren (Responsive Images für Mobilgeräte, Desktops, Tablets)

Warum Bilder optimieren? Lass mich dich das fragen; Wann haben Sie das letzte Mal eine Website ohne Bilder gesehen?? "noch nie" wäre die richtige Antwort. ��‍♂️ Bilder sind einfach zu wichtig. Und es geht nicht einmal um dieses erschreckende Foto, das Sie mitnehmen können "10 Online-Marketing-Tipps" Post. Bilder sind für mehrere Zwecke nützlich. Denken Sie auch an Layouts, Designelemente, Logos, Profilbilder und natürlich auch an Blogbilder.


Ehrlich gesagt können Sie eine Website im Jahr 2020 nicht haben, ohne mindestens eine Handvoll Bilder darauf zu verwenden. Abgesehen davon sind Bilder für einen Websitebesitzer nicht so einfach herauszufinden. Selbst wenn man die Herausforderungen außer Acht lässt, welche Bilder wo verwendet werden sollen, gibt es auch Probleme bei der Anzeige dieser Bilder aus rein technischer Sicht:

  • So liefern Sie reaktionsschnelle Bilder auf mehreren Geräten?
  • Wie man sie auf all diesen Geräten großartig aussehen lässt?
  • Und vor allem, wie Sie sicherstellen können, dass sie in angemessener Zeit geladen werden?

Dies sind die Fragen, die wir heute beantworten. Hier ist Ihr ultimativer Leitfaden für So optimieren Sie Bilder für Ihre Website und lassen sie auf allen Geräten gut aussehen:

So optimieren Sie Bilder für Ihre Website und lassen sie auf allen Geräten funktionieren

�� Warum auf uns hören??

Bilder waren in letzter Zeit ein wichtiges Thema für uns, und das liegt an einem der neueren Tools in unserer Familie – Optimole.

Optimole ist ein Bildoptimierungsdienst zum Festlegen und Vergessen & Werkzeug. Wir halten es für die beste derartige Lösung im Internet und können es beweisen! Aber das ist ein Gespräch für ein anderes Mal. In beiden Fällen haben wir im Laufe der Jahre viel darüber gelernt, wie Bilder richtig optimiert werden können. Wir möchten heute einen Teil dieses Wissens mit Ihnen teilen.

�� Warum Sie Bilder auf Ihrer Website optimieren sollten

Bilder sehen nicht nur gut aus, sondern verbrauchen auch viel Speicherplatz und Bandbreite. Insbesondere machen Bilder zwischen 30% und 85% der Größe einer Standardwebseite aus.

Geschwindigkeitstest

Das ist riesig – und es ist nicht so, dass das Entfernen von Bildern eine Option ist. Das Beste, was wir stattdessen tun können, ist zu lernen, wie Bilder auf eine Weise optimiert werden, die einfach weniger Speicherplatz beansprucht.

Die Gewinne können enorm sein, insbesondere bei wiederholten Bildern – Bildern, die auf jede einzelne Webseite geladen werden müssen. Dies sind Dinge wie Hintergründe, Designelemente, Logos, Symbole usw. Manchmal kann die Optimierung nur eines Hintergrundbilds dazu führen, dass die Seitengröße um 70% reduziert wird+.

Siehe dieses Beispiel:

Seitengrößenvergleich vor und nach der Optimierung von Bildern

Aber Moment mal, es wird schlimmer! Wenn die allgemeinen Probleme mit der Bildleistung nicht ausreichen, gibt es auch den mobilen Bereich ��, der eine völlig neue Reihe von Herausforderungen mit sich bringt:

Zunächst sollten Sie Ihren Desktop-Besuchern und Ihren mobilen Besuchern wahrscheinlich nicht dieselben Bilder anzeigen. Die Kontexte sind sehr unterschiedlich – dazu gehören die Bildschirmgröße, die Ausrichtung (normalerweise im Hochformat) und sogar die Denkweise der lesenden Person.

Außerdem, Daten legen nahe dass mobile Designs mit weniger Bildern in Bezug auf Conversions tendenziell eine bessere Leistung erzielen.

Alles in allem gibt es einige Dinge, die wir beachten müssen, wenn wir reaktionsschnelle Bilder auf mehreren Geräten bereitstellen:

  • Optimieren Sie zunächst die Bilder für das jeweilige Gerät
  • Stellen Sie sicher, dass die Bilder auf das maximal akzeptable Maß komprimiert sind, um die schnellsten Ladezeiten zu gewährleisten
  • Zeigen Sie die optimale Anzahl von Bildern unter Berücksichtigung des Geräts und des Bildschirms an

��‍♂️ So optimieren Sie Bilder und liefern sie über alle Gerätetypen hinweg

Damit Ihre Bilder optimal verarbeitet und dann so schnell wie möglich an den Besucher geliefert werden, sind mehrere Komponenten enthalten. In diesem Handbuch werden wir alle durchgehen:

�� Wählen Sie das richtige Format

Beginnen wir mit der uralten Frage: PNG oder JPG?

Die meisten Leute sagen "JPG die ganze Zeit!" Aber das ist nicht wirklich richtig:

PNG gegen JPG

Ja, die meiste Zeit oder zumindest in den gängigsten Szenarien für möglicherweise benötigte Bilder benötigen JPGs weniger Speicherplatz und damit auch weniger Bandbreite.

Aber das Schlüsselwort hier ist "die häufigsten Szenarien." In der Tat, wenn Sie ein komplexes Bild mit vielen Farben und Farbübergängen haben (auch bekannt als viele "Farbinformationen"), dann werden JPGs in der Tat besser. Denken Sie an Standardfotos. Diese funktionieren besser als JPGs.

Wenn Sie jedoch ein etwas einfacheres Bild haben, gewinnt PNG immer.

Betrachten Sie das folgende Beispiel. Hier sind vier Bilder:

Bild-1-aBild 1-a: JPG

Bild-1-bBild 1-b: PNG

Bild-2-aBild 2-a: JPG

Bild-2-bBild 2-b: PNG

  • Bild 1-a ist 312 KB
  • Bild 2-a ist 196 KB groß

Versuchen Sie, die Größe der beiden anderen Bilder zu erraten …

Ihre Antwort:

Falsch!

  • Bild 1-b ist 1,3 MB groß (dies haben Sie wahrscheinlich erraten)
  • Bild 2-b ist 106 KB (warte, was?!)

Wie Sie sehen können, gewinnt PNG für einfache Bilder mit geringen Farbinformationen.

Denken Sie an Dinge wie Screenshots der Benutzeroberfläche, einfache Illustrationen usw..

�� Lektion 1:

Entscheide dich nicht immer für JPG. Sagen Sie anhand des Inhalts voraus, wie groß das Bild sein wird, und verwenden Sie dann den richtigen Bildtyp.

Nun zu einer etwas aktuelleren Frage: SVG? WebP?

SVG und WebP

SVG und WebP sind etwas weniger verbreitete Bildtypen im Web, aber beide sind großartig, solange Sie sie so verwenden, wie sie verwendet werden sollten. Lassen Sie mich klarstellen:

  • SVG ist ein XML-basiertes Vektorbildformat. Der Inhalt des Bildes kann in einer einfachen XML-Datei definiert werden – der gleichen XML-Datei, die Sie für andere grundlegende Datenverarbeitungszwecke verwenden würden. Dies macht SVG zu einem guten Format, solange es sich um ein einfaches Vektorbild handelt.
  • WebP ist ein neues Format von Google. Sie prahlen damit, dass WebP 25-34% kleiner als vergleichbare JPEGs und 26% kleiner als vergleichbare PNGs ist.

Was ist der Haken? Können Sie Bilder optimieren, indem Sie sie alle in SVGs und WebPs umwandeln??

Zuerst, SVG. Verwenden Sie SVG grundsätzlich nur, wenn (ein) Das Bild kann effizient als SVG gespeichert werden (b) wenn es Ihnen nichts ausmacht, dass Leute diese SVG nehmen und ändern.

Wie gesagt, SVG ist XML-basiert, was bedeutet, dass das Ändern von SVG-Grafiken sehr einfach ist. Dies ist nicht immer etwas, das Sie möchten – insbesondere, wenn Sie sich mit dem Logo Ihrer Marke oder anderen wichtigen Grafiken befassen.

In den meisten Szenarien sind SVGs kein Format, das Sie sehr häufig verwenden.

Nun zu WebP. Das Format ist großartig und spart in den meisten Fällen tatsächlich viel Speicherplatz, wie versprochen. Schauen Sie sich diese beiden Beispielbilder an:

Beispiel für ein JPG-Bild

Beispiel für ein Webp-Bild

  • Die ursprüngliche JPG-Version ist 204 KB
  • Das WebP ist 58 KB groß

Der Trick ist, dass nicht alle Browser WebP unterstützen. Möglicherweise wird das oben verwendete WebP-Image nicht einmal angezeigt. Zum Zeitpunkt des Schreibens funktioniert WebP in Google Chrome, Firefox, Edge und Opera. Natürlich unterstützen die älteren Versionen das Format nicht.

In der Praxis bedeutet dies, dass das Hinzufügen eines WebP-Bildes nicht so einfach ist wie das Hinzufügen eines JPG oder PNG.

Ich meine, Sie können technisch einen Code wie diesen verwenden:

… aber wenn der Browser des Benutzers das Format nicht unterstützt, wird stattdessen das bekannte Symbol für fehlerhafte Bilder angezeigt.

Um WebP effektiv nutzen zu können, sollten Sie Fallback-Images bereitstellen. Zum Beispiel:

Das bedeutet viel mehr Arbeit. Stellen Sie sich vor, Sie müssen jedes Mal ein solches Tag erstellen, wenn Sie einem Blog-Beitrag oder einer Blog-Seite ein WebP-Bild hinzufügen möchten. Und lassen Sie mich Sie genau dort aufhalten, nein, WordPress unterstützt WebP nicht von Haus aus, sodass Sie dies in der Tat von Hand tun müssen.

Ich empfehle jedoch, diese komplizierte manuelle WebP-Route zu wählen, wenn Sie mit Bildern arbeiten, die auf mehreren Seiten Ihrer Website angezeigt werden, oder mit Bildern, die sehr groß sind und für die Sie jedes Tool benötigen, um diese Größe auf irgendeine Weise zu reduzieren.

Sie können Bilder als WebP in Photoshop speichern oder ein Tool wie verwenden XnConvert (kostenlos).

�� Lektion 2:

Verwenden Sie SVGs überhaupt nicht, wenn Sie Bilder schnell optimieren möchten. Die Zeit, die Sie damit verschwenden, sie zu erstellen, zahlt sich nicht aus (obwohl Sie nicht zustimmen können; hier ist eine gute alternative nehmen). PNGs werden viel schneller zu verwenden sein und nicht viel schlechter in Bezug auf den Speicherplatzverbrauch.

Verwenden Sie WebP, wenn Sie Bilder bearbeiten, die auf mehreren Seiten angezeigt werden, oder Bilder, die groß genug sind. Dies gilt nur, wenn Sie die WebP-Verarbeitung automatisch durchführen können, was mit einigen zusätzlichen Tools möglich ist. Verwenden Sie in einem solchen Fall WebP überall. Wir werden gleich darüber sprechen.

��️ Bilder komprimieren

Bildkomprimierung ist wie Magie. Lass mich dir zeigen:

Dies ist das gleiche JPG-Bild, das nur mit einer anderen Komprimierungsstufe (häufig als Qualitätsstufe bezeichnet) gespeichert wird:

Coon-100%100% Qualität

Coon-95%95% Qualität

Coon-85%85% Qualität

Coon-50%50% Qualität

Wenn Sie wie die meisten Menschen sind, sehen die ersten drei für Sie gleich aus. Der vierte beginnt zu suchen "ein bisschen schlimmer." (Rechtsklick und "Öffne das Bild in einem neuen Tab")

So viel Speicherplatz benötigt jedes dieser Bilder:

  • 100% Qualität: 969 KB
  • 95%: 439 KB
  • 85%: 186 KB
  • 50%: 102 KB

Riesig, richtig?! Sie können von ~ 1 MB auf ~ 500 KB ohne merklichen Qualitätsverlust wechseln, indem Sie einfach die Komprimierung von 100% auf 95% ändern.

Diese JPG-Komprimierung kann von verschiedenen Tools ziemlich automatisch ausgeführt werden, was eine gute Nachricht ist. Es werden jedoch nicht alle Bilder gleich erstellt, sodass manchmal schlecht aussehende Bilder neben schlecht aussehenden Bildern angezeigt werden, obwohl sie denselben Komprimierungsprozess durchlaufen haben.

Insgesamt können Sie hier einen Sprung machen und die Qualität Ihrer JPGs ziemlich stark herabsetzen. Die Wahrheit ist, dass Ihre Website-Besucher sich nicht überall für gestochen scharfe Bilder interessieren.

Okay, ich sollte klarstellen; Ja, wenn Sie ihnen etwas zeigen möchten – wie ein Bild, das für einen Inhalt von entscheidender Bedeutung ist, z. B. Produktbilder, Hotelzimmerfotos -, sollten diese Bilder klar und deutlich sein.

Aber in anderen Bereichen können Sie etwas entspannter sein. Zum Beispiel müssen Hintergründe nicht 100% scharf sein. Im Allgemeinen können alle Bilder, mit denen der Besucher nicht direkt beschäftigt ist, eine geringere Qualität aufweisen.

Zwei meiner Lieblingswerkzeuge, die Ihnen hier helfen können, sind:

ImageOptim für die Desktop-Komprimierung auf dem Mac. Sie können einfach ein Bild vom Desktop abrufen, per Drag & Drop auf ImageOptim ziehen. Anschließend zaubert das Tool das Quellbild und überschreibt es, wenn Sie fertig sind.

Anschließend können Sie das Bild abrufen und normal auf Ihre Website hochladen.

ImageOptim - ein großartiges Tool zur Optimierung von Bildern auf Ihrem Desktop

Das zweite Werkzeug ist Optimole. Dieses Tool definiert den Umgang mit Bildern auf Websites ziemlich neu. Zum Zweck dieser Diskussion sagen wir einfach, dass es wirklich effektiv ist, wenn Sie Bilder in Ihrer Medienbibliothek optimieren möchten.

optimole - ein großartiges Tool zur Optimierung von Bildern in der Cloud

Nun zu PNGs. Genau wie JPGs können auch PNGs komprimiert werden. Diesmal gibt es jedoch keinen Nachteil in Bezug auf Qualitätsverluste. PNGs können mithilfe verlustfreier Algorithmen effektiv komprimiert werden.

Mit anderen Worten, komprimieren Sie Ihre PNGs immer!

Schauen Sie sich diese drei Bilder an:

kwf-1
kwf-2

kwf-3

Sie sehen gleich aus, aber sie nehmen tatsächlich auf:

  • 346 KB
  • 215 KB
  • 100 KB

Versuchen Sie zu erraten, welches welches ist.

Drei Tools, um Ihre Bilder zu komprimieren und zu verkleinern:

  • ImageOptim nochmal. Bei PNGs nimmt dies jedoch viel Zeit in Anspruch. Wenn Sie also viele davon verarbeiten müssen, möchten Sie sich möglicherweise eine Tasse Kaffee zubereiten, während das Tool funktioniert.
  • ImageAlpha. Viel schneller als ImageOptim. Es ist meine Desktop-Lösung für PNGs.
  • Optimole. Es überrascht nicht, dass Optimole auch die PNG-Komprimierung übernimmt. Alles passiert auf Autopilot.

�� Lektion 3:

Komprimieren Sie Ihre JPGs, um ein akzeptables Qualitätsniveau im Vergleich zum Speicherplatz zu erreichen.

Komprimieren Sie Ihre PNGs immer.

�� Stellen Sie Bilder mit den richtigen Abmessungen bereit

Dies ist vielleicht der wichtigste Aspekt des Ganzen "reaktionsschnelle Bilder" Rätsel. Wie wir wissen, gibt es zehn, wenn nicht Hunderte verschiedener Bildschirmgrößen, und wir müssen irgendwie sicherstellen, dass unsere Bilder auf allen großartig aussehen.

Die einfache Lösung? Servieren Sie ein großes Bild… es kann immer verkleinert werden, oder? Technisch gesehen ist das richtig, aber in der Praxis wird dadurch viel Bandbreite verschwendet und Ihre Site wird auf den meisten Geräten sehr langsam geladen.

Eine bessere Lösung besteht darin, alle Bilder auf die richtigen Größen zu skalieren, die von den gängigsten Geräten bevorzugt werden, und sie dann entsprechend bereitzustellen.

Wie zu erwarten, benötigen Sie verschiedene Versionen desselben Bildes, um dies zu erreichen.

Eine Möglichkeit, dies zu tun, besteht darin, mit der Basisbreite Ihres Designs und der größten Bildgröße zu beginnen, die verwendet werden kann, und von dort aus für einige gängige Geräte und Haltepunkte zu verkleinern.

Beispielsweise überschreiten die meisten Websites nicht die Marke von 1100 Pixel für die Breite des Inhaltsblocks. Sie können also davon ausgehen, dass das maximale Bild, das in diesem Fall angezeigt werden kann, ebenfalls eine Breite von 1100 Pixel hat.

Anschließend können Sie Haltepunkte für 800 px und 550 px (allgemeine Werte) erstellen, um Tablet- und mobile Szenarien abzudecken. Dies führt zwar nicht auf allen Geräten zu 100% perfekten Ergebnissen, Sie optimieren jedoch zumindest in angemessenem Umfang und behalten Ihre Bilder unter Kontrolle.

Nachdem Sie dies hinter sich haben, müssen Sie jetzt eine Handvoll verschiedener Versionen jedes Bildes erstellen, das Sie auf Ihrer Site verwenden möchten.

Hier ist ein Beispiel für den Umgang mit dem eigentlichen Anzeigecode:

Die Magie des srcset-Attributs besteht darin, dass der Browser sich die Inhalte ansieht und dann basierend auf dem verwendeten Gerät das beste Bild auswählt.

Eine weitere Anpassung, die Sie oben sehen können, ist das Größenattribut. Dieser teilt dem Browser mit, wie sich das Bild auf bestimmten Bildschirmen verhalten soll. In diesem Szenario beträgt das Bild 1100 Pixel, wenn es in Ansichtsfenstern angezeigt wird, die größer als 1100 Pixel sind, während es auf kleineren Geräten das gesamte Ansichtsfenster einnimmt.

Diese Art von Lösung stellt sicher, dass das Bild nicht einen ganzen 4K-Bildschirm mit einer Breite von 3840 Pixel einnimmt. Es wird jedoch weiterhin den gesamten Bildschirm einnehmen, wenn es auf Mobilgeräten angezeigt wird.

Durch diese effektive Verwendung des Größenattributs können Sie Ihre Bilder wirklich reaktionsschnell machen.

⭐ Pro-Trick: Suchen Sie nach Bildern, deren Abmessungen 10% kleiner sind als erforderlich, und lassen Sie sie dann vom Browser skalieren. Dies spart Ihnen zusätzlichen Platz und zusätzliche Bandbreite. Wenn Sie beispielsweise ein Bild mit einer Größe von 500 × 500 Pixel benötigen, können Sie Ihr Bild auf 450 × 450 Pixel skalieren und dann vom Browser auf 500 skalieren lassen. Dies hängt vom Bild ab, in den meisten Fällen jedoch vom Benutzer wird es nicht bemerken.

�� Lektion 4:

Verwenden Sie die richtigen Bildgrößen für Ihr Design.

Erstellen Sie Haltepunkte.

Erstellen Sie mehrere Versionen desselben Bildes, um die Haltepunkte abzudecken.

Verwenden Sie die Attribute srcset und size, wenn Sie die Bilder anzeigen.

�� Optimieren Sie Bilder für Retina- und HiDPI-Bildschirme

Das andere Ende des Bilddimensionsspektrums befasst sich mit HiDPI-freundlichen Bildern.

Die Geschichte ist, dass Desktop-Bildschirme immer größer werden und ihre Pixel immer dichter gepackt werden. Es ist heutzutage nicht ungewöhnlich, eine zu haben 4K Bildschirm in einem 15-Zoll-Laptop verpackt. Die 4K-Auflösung beträgt 3840 × 2160 px, daher muss jedes dieser Pixel wirklich winzig sein.

Dies schafft Probleme für Websites. Wenn Ihre Site als 1100 px breit definiert wäre, würde sie unter normalen Bedingungen nur ungefähr 25% der verfügbaren Bildschirmfläche eines 4K-Bildschirms beanspruchen. Das ist nicht optimal. Zum Glück funktionieren die Dinge nicht so.

Um das Problem zu vermeiden, verhalten sich diese hochauflösenden Bildschirme so, als wären sie halb so groß (ich vereinfache sie zu stark, höre mich aber an). Anstatt dass Ihre 1100 Pixel große Website einen kleinen Teil eines HiDPI-Bildschirms einnimmt, wird sie auf das Doppelte skaliert, nimmt 2200 Pixel ein und füllt den Bildschirm viel besser aus.

Dieser Prozess ermöglicht es, dass Bildschirme immer schärfer werden, ohne dass dabei alles winzig aussieht.

Diese Praxis ist jedoch nicht ohne Fehler. Hauptsächlich sind Ihre Bilder sehr erfolgreich. Text lässt sich leicht skalieren, ohne an Qualität zu verlieren. Schriftarten sind immun gegen Skalierung. Bilder sind nicht. Als direktes Ergebnis wird jedes Bild, das nicht für HiDPI-Bildschirme bereit ist, stark unscharf angezeigt!

Um dies zu beheben, müssen Sie für jedes Zoomverhältnis skalierte Bilder liefern. Hier ist ein einfacher Code:

(Wenn der Browser srcset nicht unterstützt, wird der Standard-src verwendet.)

Nun, wenn ich sage "skalierte Bilder," Ich meine eigentlich, dass Sie am anderen Ende beginnen sollten. Beginnen Sie mit einem großen Bild (beschriften Sie es 3x), verkleinern Sie es dann und verkleinern Sie es (auf 2x). Machen Sie es schließlich 1x und verwenden Sie es als Standardbild.

�� Lektion 5:

Stellen Sie sicher, dass Ihre Logos, Branding-Bilder und alle in Ihren Posts und Seiten verwendeten Bilder für HiDPI-Bildschirme bereit sind.

⌛ Verschieben Sie das Laden von Bildern

Das ist im Prinzip einfach; Alle Bilder, die sich über der Falte befinden, sollten sofort geladen werden (beim Laden der Seite). Alles andere kann für später und sogar verschoben werden "faul geladen."

Lazy Loading ist das Laden von Bildern bei Bedarf. Das heißt, Bilder werden nur einen Sekundenbruchteil geladen, bevor der Benutzer sie benötigt – nicht früher, nicht später. Und das "nicht früher, nicht später" Teil ist hier der Schlüssel.

Im Idealfall sollte das Bild geladen werden, bevor es in das Ansichtsfenster gescrollt wird. Das heißt, der Benutzer sollte keinen Platzhalter sehen müssen, bevor das Bild angezeigt wird. In diesem Fall können sie das Bild scrollen, ohne dass es rechtzeitig geladen werden kann – keine gute Möglichkeit, Bilder zu optimieren.

Trotzdem ist das verzögerte Laden auf WordPress-Sites einfach. Sie können mit JavaScript / jQuery faul laden und den Code dafür sogar selbst schreiben, wenn Sie möchten. Alternativ können Sie ein Plugin wie bekommen a3 Lazy Load, oder du kannst verwenden Optimole, welches ein faules Lademodul enthält.

�� Lektion 6:

Lazy laden Bilder, die unter der Falte sind.

�� Liefern Sie Bilder über ein CDN

Ein Content Delivery Network ist wie ein Cheat-Code für die Geschwindigkeit der Website. Sie betrügen, weil Sie Ihre Website nicht so schnell machen, wie Sie jemand anderem sagen, dass er die Last übernehmen und die Daten der Website für Sie an den Besucher liefern soll.

�� Wir haben hier ausführlicher über CDNs gesprochen.

Die TL; DR besteht darin, dass CDNs ein Netzwerk von Servern nutzen, die alle eine Kopie Ihrer Site enthalten, und diese dann vom nächstgelegenen verfügbaren Standort an den Besucher liefern. Dies ist immer schneller als die Lieferung von Ihrem Hauptserver.

Bild-CDNs funktionieren fast genauso, aber sie konzentrieren sich nur auf Bilder, wie Sie es erraten haben.

Meistens ist der Vorgang aus Ihrer Sicht nahtlos. Alle Bilder auf Ihrer Website werden durch ihre von CDN gehosteten Versionen ersetzt (was bedeutet, dass sich die Bild-URLs ändern)..

  • Jetpack hat ein beliebtes Image-CDN eingebaut. Sie können es kostenlos verwenden, was großartig ist. Die Hauptbeschränkung besteht darin, dass es nur mit den Bildern in Ihren Posts, Seiten und Ihren vorgestellten Bildern funktioniert. Es funktioniert nicht für Bilder, aus denen Ihr Design besteht (Teile des Themas, des Layouts usw.). Das sind die Bilder, die wirklich etwas CDN-ing gebrauchen könnten.
  • Optimole hat ein eingebautes CDN als Teil der Hauptbildoptimierungsfunktion. Dieser ist nicht nur auf Ihre Beiträge und Seiten beschränkt.

�� Lektion 7:

Verbinden Sie Ihre Site mit einem Image-CDN (Jetpack oder Optimole) oder einem allgemeinen CDN (JetN oder Optimole)MaxCDN / StackPath).

�� Stellen Sie Benutzern bei langsamen Verbindungen kleinere Bilder zur Verfügung

Bei der Entscheidung, welche Art von Bild der Benutzer sehen soll, spielt nicht nur die Bildschirmgröße eine Rolle. Noch wichtiger ist wahrscheinlich, dass sie bei einer langsamen Internetverbindung nicht 10 Sekunden auf das Laden eines Bildes warten möchten.

In diesen Szenarien ist es viel besser, die Qualität Ihrer Bilder im Austausch für die Ladezeit herabzustufen. Benutzer mit langsameren Verbindungen werden es zu schätzen wissen, dass sie die Bilder überhaupt sehen können.

Sie können dies mithilfe der Netzwerkinformations-API erreichen. Hier ist ein cooles Tutorial wie alles funktioniert, wenn Sie es von Hand implementieren möchten.

Wenn Sie es vorziehen, erneut mit dem Autopiloten zu arbeiten, Optimole!

�� Lektion 8:

Stellen Sie Benutzern mit langsameren Internetverbindungen kleinere und komprimiertere Bilder zur Verfügung.

�� Werkzeuge Werkzeuge Werkzeuge!

Nebenbei habe ich eine Reihe von Tools erwähnt, mit denen Sie die Bildbereitstellung Ihrer Website effektiver gestalten können. Hier ist eine Zusammenfassung davon:

  • Optimole – Mit dieser Option können Sie Bilder automatisch optimieren, komprimieren, die richtige Bildgröße für das Ansichtsfenster des Besuchers auswählen, Bilder über ein CDN bereitstellen, Bilder verzögert laden und mit langsameren Verbindungsgeschwindigkeiten arbeiten.
  • ImageOptim und ImageAlpha – Desktop-Bildkomprimierung auf dem Mac durchführen. Sie können verwenden TinyPNG auf Win. Tun Sie dies, bevor Sie Bilder auf Ihre Site hochladen.
  • XnConvert – Mit dieser Option können Sie Bilder in WebP konvertieren.
  • a3 Lazy Load Plugin – faul alle Bilder laden.
  • Jetpack Plugin – kommt mit einem kostenlosen Image-CDN.
  • MaxCDN / StackPath – ein allgemeines CDN, das sich um Ihre gesamte Website kümmert, nicht nur um Bilder.

Werkzeuge zur Optimierung von Bildern

�� Weiterführende Literatur:

  • Imagify vs WP Smush vs ShortPixel vs Optimole: Welches ist am besten für die Optimierung von WordPress-Bildern? Kopf-an-Kopf-Vergleich
  • Kostenlose Bilder für Blogs – wie man sie bekommt & Verwenden Sie sie effektiv (Warnung! Nicht offensichtliche Ratschläge, datengestützt)
  • 11 Möglichkeiten, um die Leistung von WordPress zu beschleunigen
  • Website-Geschwindigkeitsoptimierung: Wie es 2019 geht
  • Schnellstes WordPress-Hosting – Leitfaden für Anfänger, um eines zu finden

��‍♂️ TL; DR:

Hier ist eine Zusammenfassung aller oben genannten Einzelstunden:

Lektion 1:

Entscheide dich nicht immer für JPG. Sagen Sie anhand des Inhalts voraus, wie groß das Bild sein wird, und verwenden Sie dann den richtigen Bildtyp.

Lektion 2:

Verwenden Sie SVGs überhaupt nicht, wenn Sie Bilder schnell optimieren möchten. Die Zeit, die Sie damit verschwenden, sie zu erstellen, zahlt sich nicht aus (obwohl Sie nicht zustimmen können). PNGs werden viel schneller zu verwenden sein und nicht viel schlechter in Bezug auf den Speicherplatzverbrauch.

Verwenden Sie WebP, wenn Sie Bilder bearbeiten, die auf mehreren Seiten angezeigt werden, oder Bilder, die groß genug sind. Dies gilt nur, wenn Sie die WebP-Verarbeitung automatisch durchführen können, was mit einigen zusätzlichen Tools möglich ist. Verwenden Sie in einem solchen Fall WebP überall. Wir werden gleich darüber sprechen.

Lektion 3:

Komprimieren Sie Ihre JPGs, um ein akzeptables Qualitätsniveau im Vergleich zum Speicherplatz zu erreichen.

Komprimieren Sie Ihre PNGs immer.

Lektion 4:

Verwenden Sie die richtigen Bildgrößen für Ihr Design.

Erstellen Sie Haltepunkte.

Erstellen Sie mehrere Versionen desselben Bildes, um die Haltepunkte abzudecken.

Verwenden Sie die Attribute srcset und size, wenn Sie die Bilder anzeigen.

Lektion 5:

Stellen Sie sicher, dass Ihre Logos, Branding-Bilder und alle in Ihren Posts und Seiten verwendeten Bilder für HiDPI-Bildschirme bereit sind.

Lektion 6:

Lazy laden Bilder, die unter der Falte sind.

Lektion 7:

Verbinden Sie Ihre Site mit einem Image-CDN (Jetpack oder Optimole) oder einem allgemeinen CDN (JetN oder Optimole)MaxCDN / StackPath).

Lektion 8:

Stellen Sie Benutzern mit langsameren Internetverbindungen kleinere und komprimiertere Bilder zur Verfügung.

Lassen Sie mich wissen, was Sie von der ganzen Herausforderung halten, Bilder für das Web so weit wie möglich zu optimieren. Was machen Sie mit Ihren Bildern, damit sie schneller geladen werden? Teilen Sie in den Kommentaren.

Vergessen Sie nicht, an unserem Crashkurs teilzunehmen, um Ihre WordPress-Site zu beschleunigen. Mit einigen einfachen Korrekturen können Sie Ihre Ladezeit sogar um 50-80% reduzieren:

Layout, Präsentation und Bearbeitung von Karol K..

* Dieser Beitrag enthält Affiliate-Links. Wenn Sie also auf einen der Produktlinks klicken und dann das Produkt kaufen, erhalten wir eine geringe Gebühr. Keine Sorge, Sie zahlen trotzdem den Standardbetrag, sodass Sie keine Kosten haben.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map