Eric Portis begleitet mich, um in die Welt der reaktionsschnellen Bilder einzutauchen.
Wir beginnen bei den Grundlagen. Responsive Bilder sind speziell Bilder in HTML und existieren aufgrund des Wunsches nach besserer Leistung. Bilder sind wahrscheinlich der größte Schuldige am Gesamtgewicht von Websites. Wenn wir vermeiden können, zu viele Pixel über das Netzwerk zu senden, sollten wir dies tun. Schließlich benötigt ein Bildschirm mit einer Breite von nur 720 Pixel kein Bild mit einer Breite von 2000 Pixel, selbst wenn es sich um ein 2x-Display handelt.
Das Problem ist, dass Browser beim Herunterladen von Assets wie Bildern sehr aggressiv sind. Das ist gut, denn deshalb kann das Web so schnell sein wie es ist. Dies bedeutet aber auch, dass wir eine Reihe von Informationen zu unseren Bildern direkt im HTML-Code bereitstellen müssen. Kann ein Browser nicht einfach wissen, wie groß ein Bild ist? Sicher kann es, nachdem es heruntergeladen wurde. Kann ein Browser nicht wissen, wie groß ein Bild auf der Seite angezeigt wird? Sicher kann es, nachdem es das gesamte CSS heruntergeladen und das Layout durchgeführt hat. Die Syntax für reaktionsschnelle Bilder versucht, all dem einen Schritt voraus zu sein, indem diese Informationen direkt in der Syntax bereitgestellt werden. Herauszufinden, dass die Syntax schwierig ist! Es gibt srcset, sizesund das Element, und es gibt eine Menge, um Ihren Geist dort herumzuwickeln.
Es wird noch komplizierter.
Die Syntax, die Sie erstellen müssen, basiert auf mehreren Kopien dieses Bildes, in denen die Syntax erstellt werden soll. Wie machst du sie? Wie viele solltest du machen? Wie groß sollten sie sein?
Glücklicherweise gibt es einige automatisierte Tools, die um reaktionsschnelle Bilder herum auftauchen. WordPress war ein früher Spieler. Standardmäßig erstellt WordPress mehrere Versionen der von Ihnen hochgeladenen Bilder und gibt srcsetSyntax aus. Aber du kannst es viel besser machen. Sie können ein sizesAttribut angeben, das tatsächlich der Funktion Ihres Themas und der Größe dieser Bilder entspricht.
Außerdem verwendet WordPress keine spezielle Intelligenz, um mehrere Kopien der von Ihnen hochgeladenen Bilder zu erstellen. Aber es könnte. Ein Tool wie der Responsive Image Breakpoint Generator verwendet einige Informationen, um herauszufinden, wie viele verschiedene Bilder Sie erstellen können, sodass Sie ein Gleichgewicht zwischen nahezu dem perfekten Bild für den Job und der Notwendigkeit finden, Hunderte oder Tausende von Kopien davon zu erstellen es. Dieses Tool hat eine API!
Es wird noch komplizierter.
Verschiedene Browser unterstützen unterschiedliche Bildformate. Zum Beispiel WebP. Durch die Bereitstellung des richtigen Bildformats für den richtigen Browser können Leistungseinsparungen erzielt werden. Die Syntax für reaktionsschnelle Bilder kann dabei helfen, verkompliziert jedoch die Syntax. Viele Bildformate haben auch einen Qualitätsbegriff. In welcher Qualität speichern Sie diese Mehrfachkopien?
An dieser Stelle ist es ein guter Zeitpunkt, Cloudinary zu erwähnen. Ich habe es gerade in CSS-Tricks integriert und es hilft bei vielen dieser Dinge. Ich sollte erwähnen, dass ich ein zahlender Cloudinary-Kunde bin und dieser Screencast nicht gesponsert wurde, aber Cloudinary hat CSS-Tricks in Form von zwei stark verwandten gesponserten Posts gesponsert:
- Responsive Images in WordPress mit Cloudinary, Teil 1
- Responsive Images in WordPress mit Cloudinary, Teil 2
Kurz gesagt, so funktioniert das jetzt bei CSS-Tricks:
- Ich lade Bilder hoch, wie ich es immer mit WordPress tun würde.
- Anstelle der
srcsetmit WordPress generierten Informationen werden diese von dieser intelligenteren API generiert. - Das Bild wird auch in Cloudinary hochgeladen.
- Wenn WordPress den HTML-Code für die Bilder filtert und ausgibt, werden all diese guten
srcset(und benutzerdefiniertensizes) Daten angewendet. Die URL verweist auf Cloudinary-URLs. - Die Cloudinary-URLs nutzen die Fähigkeit von Cloudinary, sowohl das Format als auch die Qualität automatisch anzupassen (mithilfe ihrer ausgefallenen Technologie), um sicherzustellen, dass die Dinge für den jeweiligen Browser, der das Bild anfordert, so gut wie möglich sind.
- Alte Bilder, die ursprünglich nicht auf Cloudinary hochgeladen wurden, profitieren immer noch von der ganzen Cloudinary-Güte. Sie verfügen nicht über so intelligente
srcsetDaten, verwenden jedoch die URLs zum Abrufen, was bedeutet, dass sie von der automatischen Formatierung und der automatischen Qualität profitieren können (was wahrscheinlich ohnehin ein anständiger Teil der Leistungsverbesserung ist).
Kurz gesagt, ich verwende hier nicht nur reaktionsschnelle Bilder auf CSS-Tricks, um die Leistung zu verbessern, sondern die Cloudinary-Integration verbessert dieses Spiel erheblich.
Ich bin auch froh, dass dies keine harte Abhängigkeit ist. Wenn das Cloudinary-Plugin jemals ausgeschaltet wird, kehrt alles zu normalen WordPress-Bildern zurück.