Als Webentwickler und Softwareentwickler möchten wir den Menschen das geben, was sie wollen. Wenn Sie mit NextJS vertraut sind , sollten Sie mit der fantastischen Bildoptimierungsfunktion vertraut sein, die in der kürzlich veröffentlichten Version 10 enthalten ist. NextJS ist ein Framework, das sowohl im Backend als auch im Frontend von React-Anwendungen verwendet werden kann. Es ist in der Lage, eine Vielzahl von Manipulationen durchzuführen, darunter das Konvertieren von Bildern in ein webfreundliches WebP-Format, das Hochladen von Bildern nach Bedarf des Benutzers und vieles mehr.
Wenn Sie bereits mit NextJS arbeiten, ist dies sehr hilfreich. Was aber, wenn Sie Optimierungsfunktionen, Inline-Design und die Einfachheit einer React-Komponente ohne die mit dem neuen Framework verbundenen Hürden wünschen?
— , . , , ( !) .
, BetterImage
BetterImage ist ein Open Source-Tool, das viele der Optimierungsfunktionen auf einfache und bequeme Weise im React-Format nachahmt. Das Bild wird in optimiertes WebP konvertiert, das 30% kleiner als JPEG ist, ohne die Qualität zu beeinträchtigen. Dies verbessert die Anzeige sowie die SEO-Zugänglichkeit von Google Lighthouse im Vergleich zum Standard-Tag. Die Komponente optimiert auch die CSS-Formatierung, einschließlich der gängigsten sofort einsatzbereiten Manipulationen. Die Komponente übernimmt Eigenschaften, abstrahiert Manipulationen und Importe und ermöglicht so eine stärkere Konzentration auf die Anwendung. BetterImage ist mit klassenbasierten und funktionalen Komponenten kompatibel, sodass Sie es in Ihre Anwendung aufnehmen können, unabhängig davon, mit welchem Aroma Sie Ihre Reaktion bedienen. Backup-Image aktivieren,CSS sowie Höhen- und Breitenabmessungen verhindern, dass die aggregierte Layoutverschiebungsmetrik bei der Bewertung einer Website in Google Lighthouse angewendet wird.
Google Lighthouse-Ergebnisse für Standard-Tag (links) im Vergleich zu BetterImage-Ergebnissen (rechts).
Die Komponente befindet sich noch in der Beta-Phase. Neue Funktionen und NPM-Pakete befinden sich in der Entwicklung. Wenn Sie den Komponentenfall ausprobieren möchten oder Fragen haben, besuchen Sie bitte Github und die Website !
Was steckt unter der Haube von BetterImage?
Leuchtturmtests zeigen, dass die Komponente die Leistung beim Laden von Bildern verbessern kann. Andere Frameworks wie Next.JS bieten großartige Optimierungen. Unser Team möchte dies in React übernehmen, damit keine anderen Frameworks benötigt werden. Wir haben BetterImage erstellt, damit Entwickler Stile direkt in React-Code als Zeichenfolge schreiben können. Das Styling ist optional und darf überhaupt nicht verwendet werden.
BetterImage-Komponente
Was ist unter der Haube? Die Eigenschaften werden an die Komponente übergeben, die dann die Informationen abstrahiert, um das Bild zu bearbeiten. Das Bild selbst muss nicht in die React-Komponente importiert werden, es wird nur der relative Pfad benötigt, und BetterImage importiert das konvertierte Bild dynamisch. BetterImage konvertiert die Quelldatei mithilfe eines externen NPM-Paket-API-Aufrufs in WebP und speichert das konvertierte Image in einem lokalen Ordner. Dadurch wird das Bild nach der ersten Manipulation noch schneller gerendert. Alle anderen Funktionen - immer flexibel - werden nach Bedarf angewendet. Willkommen bei Github und auf der Website , um eine Vorschau der derzeit in der Beta befindlichen Komponente zu erhalten !
Vielen Dank für das Lesen dieser kleinen Bewertung!
