Frameworks, die bei der Bildnutzung helfen

Ich habe kürzlich darüber geschrieben, wie schwierig Bilder sind (images are hard) und es entwickelte sich zu einer großen Checkliste mit Dingen, die man beim Platzieren von Bildern auf Websites bedenken und implementieren könnte/sollte.

Ich finde es ermutigend zu sehen, dass Frameworks – diese beliebten Werkzeuge, die wir zum Erstellen von Websites nutzen – zusätzliche Werkzeuge innerhalb von sich anbieten, um diese Checkliste zu bearbeiten und die schwierigen (aber für Computer perfekt geeigneten) Aufgaben der Bildanzeige zu übernehmen.

Einige Beispiele

• eleventy-img
• gatsby-plugin-image
• next/image
• nuxt/image

Ich bin mir nicht sicher, ob ich einem von ihnen in Bezug auf die Benutzerfreundlichkeit Bestnoten geben würde. Es gibt Dinge zu installieren, zu konfigurieren, und es ist wahrscheinlich, dass man sich nur dann damit beschäftigt, wenn man bereits weiß, dass man es tun sollte, und das vorhandene Wissen über Bildleistung einem dabei helfen kann. Das ist kein Versäumnis dieser Frameworks; diese Dinge sind kompliziert und die Zielgruppe sind Entwickler, die, wenn man ehrlich ist, eine gewisse Vorliebe für Kontrolle haben.

Ich muss meinem BFF WordPress hier zustimmen. Man tut buchstäblich nichts und bekommt responsives Bildmaterial direkt aus der Box. Wenn man die Filter nutzen muss, um Dinge zu steuern, kann man das tun, wie man alles andere in WordPress kann: über Hooks. Wenn man sich für Jetpack entscheidet (und ich empfehle es Ihnen wärmstens), schaltet man die (unglaublich, kostenlose) Site Accelerator-Funktion ein, die all diese Bilder nimmt, optimiert, über CDN hostet, lazy-loaded lädt und sie in Formaten wie WebP ausliefert, wenn möglich (ich nehme an, es werden schließlich weitere Next-Gen-Formate hinzukommen). Jetpack ist ein Sponsor, also volle Transparenz hier, aber ich benutze es sehr bewusst, weil die Erfahrung die Bildverarbeitung zu etwas macht, über das ich buchstäblich nicht nachdenken muss.

Ein weiterer interessanter Aspekt von Frameworks, die bei Bildern helfen, ist, dass ein Teil davon aus Googles Engagement entstanden ist. Google nennt es „Aurora“

Seit fast zwei Jahren arbeiten wir mit einigen der beliebtesten Frameworks wie Next.js, Nuxt und Angular zusammen, um die Web-Performance zu verbessern.

Das Projekt macht allerhand, darunter Geldzahlungen zur Finanzierung von Open-Source-Tools und direkte Unterstützung spezifischer Initiativen. Wie eben Bilder

Eine Bildkomponente in Next.js, die Best Practices für das Laden von Bildern verkörpert, gefolgt von einer Zusammenarbeit mit Nuxt an derselben Sache. Die Verwendung dieser Komponente hat zu signifikanten Verbesserungen der Ladezeiten und Layout-Verschiebungen geführt (Beispiel: 57% Reduzierung des Largest Contentful Paint und 100% Reduzierung des Cumulative Layout Shift auf nextjs.org/give).

Cool, oder? Ich finde schon? Was mich daran ein wenig verwirrt, ist, dass es sich bedeutsam anfühlt, wenn Googles Team auftaucht, um zu einem Framework beizutragen. Sie haben sich nicht für Außenseiter-Frameworks entschieden, sicherlich mit Absicht, weil sie wollen, dass ihre Arbeit die meisten Menschen beeinflusst. Also profitieren bereits erfolgreiche Frameworks von Beiträgen der A-Liga. Eine Situation, in der die Reichen noch reicher werden. Ich bin mir nicht sicher, ob das ein großes Problem ist, aber es ist einfach etwas, worüber ich nachdenke.