Als Frontend-Entwickler besteht eine hohe Wahrscheinlichkeit, dass Sie an einem Projekt arbeiten oder arbeiten, bei dem es um das Posten und Anzeigen von Bildern geht. Wenn nicht, dann werden Sie es bald tun. Als wir kürzlich mit der Arbeit an unserem Projekt fertig waren, gerieten wir in Schwierigkeiten, die von den Benutzern bereitgestellten Bilder anzuzeigen.

Wie sich alles auflöste
Das größte Problem bestand darin, mit den Abmessungen umzugehen, insbesondere mit der Höhe gegenüber der Breite der Bilder. Das Einstellen des Bildes auf Objektanpassung: Cover schien die perfekte Lösung zum Auffüllen des Bildcontainers zu sein. Dies brachte jedoch andere Probleme mit sich. Benutzer luden Bilder unterschiedlicher Größe hoch; Einige schuppten, andere schnitten in denselben Behälter. Das Ergebnis solcher Inkonsistenzen war eine nicht so ansprechende Benutzeroberfläche, insbesondere wenn die Profilbilder der Benutzer so zugeschnitten waren, dass sie weniger sichtbar waren.

Die Lösung
Ich beschloss, eine bessere Lösung zu finden. Da ich nachahme, wie Social-Media-Plattformen mit Bild-Uploads umgehen, fand ich es gut, Benutzern die Möglichkeit zu geben, die Bilder vor dem Hochladen zuzuschneiden und in der Vorschau anzuzeigen. Nach ein wenig Recherche habe ich endlich das React-Image-Crop-Paket gefunden. Dieses Paket bietet Benutzern die Möglichkeit, ihre Bilder in Echtzeit zuzuschneiden und löst so einen Teil des Problems.

Beim Testen der Zuschneidefunktion fiel mir auf, dass die Größe des Bildes, mit dem ich arbeitete, 9,5 MB betrug. Da wurde mir klar: Warum nicht das Bild auf der Client-Seite vor dem Hochladen komprimieren? Obwohl das Backend dies ebenfalls übernimmt, spart die Möglichkeit, das Bild einen Schritt früher zu optimieren, Bandbreite und verkürzt die Upload-Zeiten.

Das brachte mich zu einem weiteren praktischen Paket: browser-image-compression. Durch die Kombination mit „react-image-crop“ konnte ich nun Bilder im Handumdrehen zuschneiden und komprimieren, und das mit großer Wirkung.

Kompromisse
Diese Lösung ist nicht ohne Kompromisse. Zunächst müssen Sie Ihrem Projekt zwei weitere Pakete hinzufügen; Außerdem werden Bilder mit einer Größe von weniger als 30 KB aufgrund des Komprimierungsaufwands tatsächlich größer.

Ich habe es auch mit Shadcn-UI-Komponenten und dem React-Dropzone-Paket gestaltet, damit Benutzer ihre Bilder per Mausklick auswählen oder per Drag-and-Drop auswählen können.

Next.js-Bildkomponente verwenden
Für eine noch bessere Leistung kann diese Lösung mit der Image-Komponente von Next.js kombiniert werden, die Bilder automatisch optimiert. Die Next.js-Bildkomponente hilft dabei, Bilder in angemessener Größe bereitzustellen und so die Ladezeiten und die Gesamtleistung zu verbessern. Durch die Integration von Zuschneiden und Komprimieren mit der Leistungsfähigkeit der Bildoptimierung von Next.js können Sie Benutzern ein reibungsloseres und effizienteres Erlebnis bieten.

Demo- und Quellcode
Sie können hier auch eine Live-Demo ausprobieren

Auch hier ist das Quellcode-GitHub-Repository. Bitte markieren Sie, wenn Sie es nützlich finden! Lassen Sie mich wissen, wenn Sie die Verwendung dieser Lösung in Ihrem Projekt in Betracht ziehen.