Addy Osmani über Bilder in HTML
Das bescheidene
<img>-Element hat im Laufe der Jahre einige Superkräfte erhalten. Angesichts seiner zentralen Bedeutung für die Bildoptimierung im Web wollen wir uns ansehen, was es leisten kann und wie es dazu beitragen kann, die Benutzererfahrung und die Core Web Vitals zu verbessern.
Addy übersetzt solche Dinge gut in Instagram-Posts, also werde ich das hier einbetten
Ich würde sagen, diese Dinge sind Grundwissen für jeden HTML-Entwickler1. Bilder beeinflussen die Leistung einer Website. Bilder beeinflussen die Zugänglichkeit einer Website. Bilder beeinflussen die Benutzererfahrung einer Website. Bilder beeinflussen das SEO einer Website. Das sind keine Dinge, die man schleifen lassen kann. Es gibt viel zu wissen, aber das ist der Job.
Ich bin immer noch wirklich neugierig auf diese decoding="async"-Sache. Ich habe einiges gelesen, das darauf hindeutet, dass es am besten ist, dies bei allen Bildern zu aktivieren (obwohl Addy dies nicht vorschlägt, aber auch keine Anleitung gibt). Ich verstehe noch nicht, wie man dieses Attribut am besten einsetzt, aber wenn sich herausstellt, dass es "immer" gilt, sollten wir meiner Meinung nach die Browser dazu drängen, dieses Verhalten zum Standard zu machen, damit wir uns nicht mit dem Attribut herumschlagen müssen.
Ich sehe auch, dass Addy vorschlägt, das Hero-Bild so früh wie möglich zu laden, aber keine weiteren Tricks. Ich bin neugierig, ob dieser Trick, den wir behandelt haben, bei dem das Hero-Bild gar nicht geladen wird (bis zur Interaktion), um CWV zu höheren Werten zu "täuschen", am Ende eine gute oder schlechte Praxis sein wird.
- Ich höre den Begriff "HTML-Entwickler" nicht oft, aber ich mag ihn. Zum Beispiel verwenden die Leute regelmäßig "React-Entwickler", um diejenigen zu beschreiben, die React-Entwicklung betreiben. Wenn du Code schreibst, der am Ende im DOM landet, bist du ein HTML-Entwickler. Du bist für die Erfahrung verantwortlich, die HTML liefert. ⮑
Lazy Loading war ein wichtiges Feature im Tab. Seine Verwendung hat das Website-Design stark beeinflusst.