Bilder sind schwer.

Bilder auf Webseiten zu platzieren ist unglaublich einfach, oder? Tatsächlich, ja, ist es. Man benutzt <img> und verlinkt es zu einer gültigen Quelle im src-Attribut und fertig. Außer, dass es (zählt Finger) 927 Dinge gibt, die man tun kann (und einige, die man wirklich tun sollte), die oft übersehen werden. Mal sehen...

• Stellen Sie sicher, dass Sie für das Bild Text im Satzformat für das alt-Attribut verwenden, der beschreibt, was das Bild zeigt.
• Umschließen Sie es mit einem <figure> und verwenden Sie eine <figcaption>, wenn Sie sichtbaren Text wünschen, der dazu gehört.
• Verwenden Sie ein <picture>-Element mit einer Vielzahl von <source>-Elementen, wenn Sie entweder...
  • unterschiedliche Quellbilder für unterschiedliche Bildschirmgrößen und andere Bedingungen haben möchten.
  • unterschiedlich formatierte Bilder ausliefern möchten, um die Vorteile von Next-Gen-Bildformaten zu nutzen.
• Genug über Bildformate wissen, um Formate wie SVG bei Bedarf verwenden zu können.
• Genug über Ihr Publikum wissen, um standardmäßig das modernste Format verwenden zu können, das Sie haben.
• Verwenden Sie die Attribute srcset und sizes, um unterschiedlich große Bilder auszuliefern und Bandbreite auf verschiedenen Geräten zu sparen. Beachten Sie, dass die Erstellung dieser Bildvariationen zur maximalen Effizienz vom Bild selbst abhängt und nicht von vordefinierten Größen.
• Optimieren Sie das Bild und all seine Variationen. Probieren Sie viele Bildoptimierungssoftware aus, da sie alle unterschiedliche Ergebnisse liefern. Wählen Sie die beste. Stellen Sie sicher, dass die optimierten Versionen nicht versehentlich größer oder von geringerer Qualität als das Original sind, denn das kann passieren.
• Laden Sie die Bilder träge, damit Benutzer Bilder, die sie nicht sehen, nicht herunterladen müssen. Nativ haben wir loading="lazy", aber das ist so wichtig, dass es sich wahrscheinlich lohnt, es mit einem Polyfill zu versehen.
• Stellen Sie sicher, dass Sie width und height Attribute einfügen, damit das Bild den richtigen Platz in einem Layout reserviert, bevor es geladen wird (auch wenn das Bild eine fließende Breite hat).
• Hosten Sie Ihre Bilder auf einem schnellen, cookie-freien, globalen CDN. Wahrscheinlich <link rel="preconnect"> und <link rel="dns-prefetch"> zur CDN-Domäne(n). Aber tun Sie nichts mit CDN im Entwicklungsmodus, nur in Staging oder Produktion. Die kanonische Quelle für Ihre Bilder sollten Ihre eigenen Server sein, damit Sie CDNs nach Bedarf wechseln können.
• Das größte Bild auf der Seite könnte vollständig vorab geladen werden, wie mit <link rel="preload" as="image"> für das bestmögliche LCP.
• Versuchen Sie herauszufinden, wann Sie decoding="async" verwenden sollten (ich habe keine Ahnung).
• Halten Sie Fallback-Styles bereit, falls das Bild nicht geladen wird.
• Ziehen Sie ansprechendere Zustände vor dem Laden oder bei Fehlern für die Bilder in Betracht, wie z. B. kleine, unscharfe Versionen der Bilder.
• Implementieren Sie Performance-Monitoring, um sicherzustellen, dass keine riesigen Bilder durchrutschen und Ihre Performance-Budgets durcheinanderbringen, und um nach defekten Bildfehlern Ausschau zu halten.

Ich bin sicher, ich vergesse einige. Das lässt Sie schwitzen, nicht wahr?

Addy hat vieles davon detaillierter in diesem Smashing Magazine Artikel behandelt und hat ein ganzes Buch zu diesem Thema.

Meiner Meinung nach kann das nicht getan werden. Zumindest nicht alles gleichzeitig, wenn man seine Zeit praktisch einteilen will. Glücklicherweise: Computer. Ich weiß, dass sowohl Eleventy Image als auch gatsby-plugin-image dafür bekannt sind, wie gut sie diese Dinge automatisieren und so viele dieser Best Practices wie möglich liefern.

Eine weitere Realität ist, manchmal nur einige dieser Dinge zu tun, vielleicht die größten Gewinne zu erzielen, während man seine Zeit praktisch einteilt. In Jakes „Half the size of images by optimising for high density displays“ schreibt er

Hier ist die Technik, die ich für die meisten Bilder auf diesem Blog verwende: Ich nehme die maximale Größe, die das Bild in CSS-Pixeln angezeigt werden kann, multipliziere sie mit zwei und kodere sie mit geringerer Qualität, da sie immer mit einer 2x-Dichte oder höher angezeigt wird. Ja. Das ist alles.

Erinnert an Daves 1,5x-Hack von 2013.