In den letzten Jahren hat die Marmeladenstapel Methoden zum Erstellen von Websites werden immer beliebter. Leistung, Skalierbarkeit und Sicherheit, es ist leicht zu erkennen, warum es zu einer attraktiven Möglichkeit wird, Websites für Entwickler zu erstellen.

GatsbyJS ist eine statische Site-Generator-Plattform. Es wird von React, einer Front-End-JavaScript-Bibliothek, zum Erstellen von Benutzeroberflächen unterstützt. Und verwendet GraphQL, eine Open-Source-Datenabfrage- und Manipulationssprache, um strukturierte Daten aus anderen Quellen zu ziehen, typischerweise einem Headless-CMS wie Contentful.

Während GatsbyJS und ähnliche Plattformen viel über den Webentwicklungsprozess revolutioniert haben, bleibt eine hartnäckige Herausforderung bestehen: die Bildoptimierung. Selbst die Verwendung eines modernen Front-End-Entwicklungsframeworks wie GatsbyJS ist in der Regel eine zeitintensive und frustrierende Übung.

Für die meisten modernen Websites hilft es nicht viel, wenn Sie mit einer performanten Technologie arbeiten, aber Ihre Bilder nicht optimiert sind. Heutzutage tragen Bilder am meisten zum Seitengewicht bei, und wachsend, und wurden von Google als die bedeutendste Chance für ausgezeichnet verbessernde Leistung.

Vor diesem Hintergrund möchte ich erörtern, wie die Verwendung eines Bild-CDN als Teil Ihres Technologie-Stacks Verbesserungen sowohl in Bezug auf die Website-Leistung als auch auf den gesamten Entwicklungsprozess bringen kann.

Eine schnelle Einführung in Gatsby

GatsbyJS ist so viel mehr als die herkömmlichen statischen Site-Generatoren von früher. Ja, Sie haben weiterhin die Möglichkeit, eine Software-Versionskontrollplattform wie Git zu integrieren sowie Gatsby-Projekte zu erstellen, bereitzustellen und in der Vorschau anzuzeigen. Seine Dienste bestehen jedoch aus einer einheitlichen Cloud-Plattform, die schnelles, skalierbares und sicheres Hosting sowie fachkundigen technischen Support und leistungsstarke Integrationen von Drittanbietern umfasst.

Darüber hinaus ist alles in einer benutzerfreundlichen Entwicklungsplattform verpackt, die viele Ähnlichkeiten mit den beliebtesten CMS des Tages aufweist. Sie können beispielsweise vorgefertigte Website-Vorlagen oder vorkonfigurierte Funktionen (eigentlich Website-Elemente und -Module) nutzen, um den Produktionsprozess zu beschleunigen.

Es bietet auch viele Vorteile für Entwickler, indem es Ihnen ermöglicht, mit führenden Frameworks und Sprachen wie JavaScript, React, WebPack und GraphQL sowie integrierten Funktionen zum Umgang mit Leistung, Entwicklungsiterationen usw. zu arbeiten.

Zum Beispiel tut Gatsby viel, um Ihre Leistung ohne Eingriff zu optimieren. Es verfügt über integriertes Code-Splitting, Prefetching von Ressourcen und Lazy-Loading. Statische Websites sind allgemein dafür bekannt, dass sie von Natur aus leistungsfähig sind, aber Gatsby legt noch einen drauf.

Bietet Gatsby eine integrierte Bildoptimierung?

Gatsby bietet tatsächlich integrierte Bildoptimierungsfunktionen.

Tatsächlich hat es in dieser Hinsicht kürzlich ein Upgrade durchgeführt und das jetzt veraltete Gatsby-Image-Paket durch das brandneue Gatsby-Image-Plugin ersetzt. Dieses Plugin besteht aus zwei Komponenten für statische bzw. dynamische Bilder. Normalerweise würden Sie die dynamische Komponente verwenden, wenn Sie Bilder von einem CMS wie Contentful verarbeiten.

Durch die Installation dieses Plugins können Sie Befehle programmgesteuert in Form von Eigenschaften an das zugrunde liegende Framework übergeben, wie unten gezeigt:

Wie Sie sehen können, ist dies ein ziemlich umfangreiches Toolkit, mit dem Entwickler Bilder auf vielfältige Weise verarbeiten können. Die verschiedenen Optionen können verwendet werden, um Bilder für die Leistung zu transformieren, zu stylen und zu optimieren sowie Bilder auf verschiedene Weise dynamisch verhalten zu lassen.

Im Hinblick auf die Leistungsoptimierung gibt es ein paar Optionen, die besonders interessant sind:

• Faules Laden: Verzögert das Laden von Off-Screen-Bildern, bis sie in die Ansicht gescrollt werden.
• Breite Höhe: Passen Sie die Bildabmessungen entsprechend ihrer Verwendung an.
• Platzhalter: Verwenden Sie beim verzögerten Laden oder während ein Bild im Hintergrund geladen wird, einen Platzhalter. Dies kann dazu beitragen, Leistungseinbußen für wichtige Web-Vitals wie Cumulative Layout Shift (CLS).
• Format: Unterschiedliche Formate haben von Natur aus eine effizientere Codierung. GatsbyJS unterstützt WebP und AVIF, zwei der leistungsstärksten Bildformate der nächsten Generation.
• Qualität: Wenden Sie eine festgelegte Qualitätskomprimierung zwischen 0 und 100 auf das Bild an.
• Pixeldichte: Eine geringere Pixeldichte spart Bilddaten und kann je nach Bildschirmgröße und PPI (Pixel per Inch) optimiert werden.
• Haltepunkte: Breakpoints sind wichtig, um sicherzustellen, dass Sie eine Version eines Bildes bereitstellen, dessen Größe für einen bestimmten Schwellenwert von Bildschirmgrößen geeignet ist, insbesondere, dass Sie kleinere Bilder für kleinere Bildschirmgrößen wie Tablets oder Mobiltelefone bereitstellen. Dies wird als responsive Syntax bezeichnet.

Alles in allem bietet Gatsby Entwicklern also ein ausgereiftes und ausgeklügeltes Framework, um Bildinhalte zu verarbeiten und zu optimieren. Die einzige wichtige fehlende Funktion, die fehlt, ist eine Art eingebaute Unterstützung für Client-Hinweise.

Allerdings gibt es einen großen Haken: All dies muss manuell implementiert werden. Während GatsbyJS Standardeinstellungen für einige Bildeigenschaften verwendet, bietet es keine integrierte Intelligenz, um automatisch und dynamisch optimierte Bilder zu verarbeiten und bereitzustellen, die auf das zugreifende Gerät zugeschnitten sind.

Wenn Sie eine ideale Bildoptimierungslösung erstellen möchten, müssen Ihre Entwickler zunächst Geräteerkennungsfunktionen implementieren. Sie müssen dann die Logik entwickeln, um Optimierungsvorgänge basierend auf dem spezifischen Gerät, das auf Ihre Web-App zugreift, dynamisch auszuwählen.

Schließlich muss dieser Code ständig geändert und aktualisiert werden. Es kommen ständig neue Geräte mit unterschiedlichen Eigenschaften heraus. Darüber hinaus entwickeln sich die Standards hinsichtlich Leistung und Bildoptimierung ständig weiter. Selbst wesentliche Änderungen, Ergänzungen oder Aktualisierungen Ihrer eigenen Bild-Assets können dazu führen, dass Ihre Implementierung überarbeitet werden muss. Ganz zu schweigen von der Zeit, die es braucht, um einfach über die neuesten Informationen und Trends auf dem Laufenden zu bleiben und sicherzustellen, dass die Entwicklung entsprechend durchgeführt wird.

Ein weiteres Problem besteht darin, dass Sie Ihre Implementierung kontinuierlich testen und verfeinern müssen. Ohne die Hilfe einer intelligenten Optimierungs-Engine müssen Sie „erspüren“, wie sich Ihre Einstellungen auf die visuelle Qualität Ihrer Bilder auswirken, und Ihren Ansatz kontinuierlich optimieren, um die richtigen Ergebnisse zu erzielen.

Dies wird Ihre Entwicklungsarbeitslast kurz- und langfristig erheblich erhöhen.

Gatsby gibt auch zu, dass diese Techniken ziemlich CPU-intensiv sind. In diesem Fall möchten Sie vielleicht Bilder voroptimieren. Dies muss jedoch auch manuell im Code implementiert werden und ist darüber hinaus noch weniger dynamisch und flexibel.

Aber was wäre, wenn es eine bessere Möglichkeit gäbe, Ihre Bildressourcen zu optimieren und gleichzeitig alle Vorteile einer Plattform wie Gatsby zu nutzen? Die Lösung, die ich gleich vorschlagen werde, hilft bei der Lösung einer Reihe von Schlüsselproblemen, die sich aus der Verwendung von Gatsby (und allen anderen Entwicklungs-Frameworks) für den Großteil Ihrer Bildoptimierung ergeben:

• Reduzieren Sie kurz- und langfristig die Auswirkungen der Optimierung von Bildern auf den Entwicklungs- und Designprozess.
• Befreien Sie Ihre Entwickler von zusätzlicher Last und Verantwortung und gewinnen Sie Zeit und Ressourcen für die Arbeit an den Hauptaspekten Ihrer Web-App.
• Verbessern Sie die Fähigkeit Ihrer Web-App, Bild-Assets für jeden einzelnen Besucher dynamisch und intelligent zu optimieren.
• All dies bei gleichzeitig nahtloser Integration mit GatsbyJS sowie Ihrem CMS (in den meisten Fällen).

Einführung einer besseren Methode zur Optimierung von Bild-Assets: ImageEngine

Kurz gesagt, ImageEngine ist eine intelligente, gerätebewusstes Image-CDN.

ImageEngine funktioniert wie jedes andere CDN (Content Delivery Network) wie Fastly, Akamai oder Cloudflare. Es ist jedoch darauf spezialisiert, Bildinhalte speziell zu optimieren und bereitzustellen. 

Wie seine Gegenstücke geben Sie ImageEngine den Ort an, an dem Ihre Bilddateien gespeichert sind, es zieht sie auf seine eigenen Bildoptimierungsserver und generiert dann optimierte Varianten von Bildern und stellt sie Ihren Website-Besuchern bereit.

Dabei ist ImageEngine darauf ausgelegt, die Bildnutzlast zu verringern, optimierte Bilder liefern auf jedes einzelne Gerät zugeschnitten und liefern Bilder von Edge-Knoten auf allen Geräten globales CDN. 

Grundsätzlich sammeln Image-CDNs Informationen über das zugreifende Gerät, indem sie die ACCEPT Header. Ein typisches ACCEPT Header sieht so aus (für Chrome):

image/avif,image/webp,image/apng,image/*,*/*;q=0.8

Wie Sie sehen können, stellt dies dem CDN nur die akzeptierten Bildformate und die empfohlene Qualitätskomprimierung zur Verfügung.

Fortgeschrittenere CDNs, einschließlich ImageEngine, können auch Client-Hinweise für detailliertere Datenpunkte wie DPR (Gerätepixelverhältnis) und Viewport-Breite nutzen. Dies ermöglicht ein höheres Maß an intelligenter Entscheidungsfindung, um Bildressourcen effektiver zu optimieren und gleichzeitig die visuelle Qualität zu erhalten.

ImageEngine geht jedoch noch einen Schritt weiter, indem es das einzige Mainstream-Image-CDN ist, das über eine integrierte WURFL-Geräteerkennung verfügt. Dadurch kann ImageEngine weitere Informationen über das Gerät lesen, z. B. Betriebssystem, Auflösung und PPI (Pixel pro Zoll).

Durch die Verwendung von KI- und maschinellen Lernalgorithmen bedeuten diese zusätzlichen Daten, dass ImageEngine über eine praktisch beispiellose Entscheidungskraft verfügt. Ohne manuellen Eingriff kann ImageEngine alle folgenden Bildoptimierungsvorgänge automatisch durchführen:

• Passen Sie die Größe Ihrer Bilder an die Bildschirmgröße des Geräts an, ohne dass eine responsive Syntax erforderlich ist.
• Komprimieren Sie die Bildqualität intelligent, um die Nutzlast zu reduzieren unter Beibehaltung der visuellen Qualität, wobei Metriken wie die Structural Similarity Index Method (SSIM) verwendet werden.
• Konvertieren Sie Bilder in das optimalste, Kodierungsformate der nächsten Generation. Zusätzlich zu WebP und AVIF unterstützt ImagEngine auch JPEG 2000 (Safari), JPEG XR (Internet Explorer & Edge) und MP4 (für aGIFs).

Diese Einstellungen passen auch gut zu den integrierten Funktionen von GatsbyJS. So können Sie Breakpoints, Lazy-Loading und Bildplatzhalter nativ implementieren, die kein Fachwissen oder intelligente Entscheidungsfindung mit Gatsby erfordern. Dann können Sie ImageEngine die fortgeschritteneren und intelligenteren Vorgänge überlassen, wie Qualitätskomprimierung, Bildformatierung und Größenänderung.

Das Beste daran ist, dass ImageEngine all dies automatisch erledigt, was es zu einer vollständig automatischen Bildoptimierungslösung macht. ImageEngine passt seinen Ansatz im Laufe der Zeit automatisch an, wenn sich die digitale Bildlandschaft und die Standards ändern, und befreit Sie von dieser Sorge.

Tatsächlich empfiehlt ImageEngine die Verwendung von Standardeinstellungen, um in den meisten Situationen die besten Ergebnisse zu erzielen.

Darüber hinaus ist diese Logik in die Edge-Server von ImageEngine integriert. Erstens bedeutet dies bei über 20 globalen PoPs, dass die Bilder so nah wie möglich am Endbenutzer verarbeitet und bereitgestellt werden. Dies bedeutet auch, dass der Großteil der Verarbeitung serverseitig erfolgt. Mit Ausnahme der Installation des ImageEngine-Gatsby-Plug-ins gibt es praktisch keinen Verarbeitungsaufwand beim Build oder zur Laufzeit.

Diese Art der dynamischen, intelligenten Entscheidungsfindung wird kurz- und mittelfristig an Bedeutung gewinnen. Dank der jährlich wachsenden Zahl und Vielfalt der Geräte wird es immer schwieriger, die Bildoptimierung so zu implementieren, dass sie für jedes Gerät geeignet ist.

Aus diesem Grund kann Ihnen ImageEngine in einer sich ständig weiterentwickelnden Mobile-First-Zukunft den entscheidenden Vorteil verschaffen. Einfach ausgedrückt: ImageEngine trägt dazu bei, Ihre Gatsby-Web-App zukunftssicher zu machen.

So integrieren Sie ImageEngine mit Gatsby: Eine Kurzanleitung

Die Integration von ImageEngine in GatsbyJS ist trivial, wenn Sie Erfahrung mit der Installation anderer Plugins von Drittanbietern haben. Die Schritte unterscheiden sich jedoch etwas, je nachdem, welches Backend-CMS Sie mit GatsbyJS verwenden und wo Sie Ihre Bild-Assets speichern.

Sie können es beispielsweise zusammen mit WordPress, Drupal, Contentful und einer Reihe anderer beliebter CMS verwenden.

Normalerweise würde Ihr Stack ungefähr so ​​​​aussehen:

• Ein CMS wie Contentful, um Ihren „Bereich“ zu hosten, in dem Sie Ihre Assets verwalten und strukturierte Daten erstellen. Ihre Bilder werden hochgeladen und in Ihrem Bereich gespeichert.
• Eine Versionierungsplattform wie Github, um Ihren Code zu hosten und Ihre Versionen und Branches zu verwalten.
• GatsbyJS zum Hosten Ihres Arbeitsbereichs, in dem Sie das Front-End Ihrer Website erstellen, bereitstellen und hosten.

Als erstes müssen Sie also eine Website oder ein Projekt mit GatsbyJS einrichten und mit Ihrem CMS verknüpfen.

Als Nächstes installieren Sie das ImageEngine-Plugin für GatsbyJS:

npm install @imageengine/gatsby-plugin-imageengine

Außerdem müssen Sie über ImageEngine eine Lieferadresse für Ihre Bilder erstellen. Sie können eine erhalten, indem Sie sich hier für die 30-tägige Testversion anmelden. Das Einzige, was Sie tun müssen, ist, ImageEngine die Host-Ursprungs-URL bereitzustellen. Für Contentful ist es images.ctfassets.net und für Sanity.io ist es cdn.sanity.io.

ImageEngine stellt Ihnen dann eine Lieferadresse zur Verfügung, normalerweise im Format von {random_string}.cdn.imgeng.in.

Sie verwenden diese Lieferadresse, um das ImageEngine-Plug-in in Ihrem zu konfigurieren gatsby-config.js Datei. Dabei geben Sie die Quelle (zB Contentful) sowie die Lieferadresse der ImageEngine an. Beispiele dafür finden Sie in der Dokumentation hier.

Beachten Sie, dass das ImageEngine-Plugin integrierte Unterstützung für Contentful und Sanity.io als Asset-Quellen bietet. Sie können das Plugin auch so konfigurieren, dass lokal gespeicherte Bilder oder aus einer anderen benutzerdefinierten Quelle abgerufen werden.

Sobald das erledigt ist, kann die Entwicklung beginnen!

Grundsätzlich erstellt Gatsby Graphql-Knoten für die in Ihrem CMS erstellten Elemente (z. B. ContentfulAsset, allSanityImageAsset, etc.). ImageEngine erstellt dann einen untergeordneten Knoten von childImageEngineAsset für jeden zutreffenden Elementknoten.

Anschließend verwenden Sie GraphQL-Abfragen im Code für Ihre Gatsby-Seiten, um die Eigenschaften der Bildvarianten anzugeben, die Sie bereitstellen möchten. Sie können beispielsweise ein Bild mit 500 ✕ 300 Pixel im WebP-Format anzeigen, indem Sie die folgende Abfrage verwenden:

gatsbyImageData(width: 500, height: 300, format: jpg)

Noch einmal, Sie sollten sich auf die Dokumentation für eine gründlichere Behandlung beziehen. Hier finden Sie Anleitungen zur Integration von ImageEngine mit Inhaltlich, Gesundheit.iound alle anderen Gatsby-Projekt.

Für einen kompetenten Gatsby-Benutzer dauert die Integration von ImageEngine nur wenige Minuten. Und die laufende Wartung wird minimal sein. Wenn Sie wissen, wie man GraphQL verwendet, ist die vertraute Syntax zum Senden von Anweisungen und Erstellen bestimmter Bildvarianten nahezu mühelos und sollte ungefähr die gleiche Zeit in Anspruch nehmen wie die manuelle Optimierung von Bildern mit Standard-Gatsby-React.

Zusammenfassung

Bei den meisten Webprojekten kann ImageEngine die Bildnutzlast um bis zu 80 % reduzieren. Diese Zahl kann steigen, wenn Sie besonders hochauflösende Bilder haben.

Sie können jedoch wirklich das Beste aus Ihrer Bildoptimierung herausholen, indem Sie die besten Teile eines statischen Frontend-Entwicklungsframeworks wie Gatsby und eines Bild-CDN wie ImageEngine kombinieren. Insbesondere können Sie beide verwenden, um Google anzusprechen Kern Web Vitals:

• Die dynamische, intelligente Laufzeitoptimierung von ImageEngine optimiert Nutzlasten, um LCP, SI, FCP und andere datengrößenbezogene Metriken zu verbessern.
• Mit Gatsby können Sie für CLS und FID optimieren, indem Sie Best Practices verwenden und Lazy Loading und Bildplatzhalter nativ implementieren.

ImageEngine bietet eine Tool zum Testen der Bildgeschwindigkeit Hier können Sie schnell Ihre aktuelle Leistung bewerten und die Auswirkungen von ImageEngine auf wichtige Kennzahlen sehen. Selbst für ein einfaches GatsbyJS-Projekt können die Ergebnisse im Demo-Tool beeindruckend sein. Wenn Sie diese Prozentsätze für eine größere Website mit vielen Bildern extrapolieren, könnte die Kombination von Gatsby mit ImageEngine dramatische Auswirkungen auf die Leistung und das Benutzererlebnis Ihrer Webanwendung haben. Darüber hinaus werden Ihre Entwickler es Ihnen danken, dass Sie ihnen die herausfordernde und zeitraubende Aufgabe der manuellen Bildoptimierung ersparen.

• Coinsmart. Europas beste Bitcoin- und Krypto-Börse.
• Platoblockkette. Web3-Metaverse-Intelligenz. Wissen verstärkt. DEN FREIEN ZUGANG.
• CryptoHawk. Altcoin-Radar. Kostenlose Testphase.
• Quelle: https://css-tricks.com/superior-image-optimization-an-ideal-solution-using-gatsby-imageengine/