So erstellen Sie reaktionsschnelle Bilder mit SRCSet

Dieser Artikel, Teil der Webentwicklungsreihe von Microsoft, untersucht reaktionsschnelle Bilder - einen entscheidenden Aspekt beim Erstellen von Websites, die auf verschiedenen Geräten einwandfrei funktionieren. Es ist nicht mehr optional; Es ist eine Notwendigkeit in unserer Welt mit mehreren Geräten.

Key Takeaways:

• Verwenden Sie das Attribut srcset, um verschiedene Bildquellen anzubieten, die für verschiedene Gerätepixelverhältnisse optimiert sind.
• kombinieren Sie srcset mit dem Attribut sizes, um Bildanzeigengrößen relativ zum Ansichtsfenster anzugeben, und führt den Browser, um das beste Bild auszuwählen.
• Nutzen Sie das <picture></picture> -Element für eine verbesserte Flexibilität, aktivieren Sie die Bildauswahl basierend auf den Medienbedingungen (wie CSS -Medienabfragen) und unterstützen Sie verschiedene Bildformate über das Attribut type.
• Fügen Sie immer ein Standardbild ein, das das Attribut src als Fallback für Browser ohne Unterstützung srcset verwendet.
• Testen Sie die Reaktionsfähigkeit und Leistung für gründliche Testen in verschiedenen Geräten und Browsern mithilfe von Tools wie den von Microsoft angebotenen Kompatibilitätsprüfungen und Weberfahrungsoptimierung.

Verständnis reaktionsschnelle Bilder:

Ein reaktionsschnelles Bild passt seine Präsentation an das Betrachtungsgerät an. "Beste Form" bedeutet verschiedene Dinge:

• Anzeigen verschiedener Bildanlagen basierend auf der Bildschirmgröße (z. B. ein anderes Bild für einen 13,5-Zoll-Laptop gegenüber einem 5-Zoll-Telefon).
• Verwenden verschiedener Bilder, die auf der Geräteauflösung basieren (oder Gerätepixelverhältnis-das Verhältnis von Gerätepixeln zu CSS-Pixeln).
• Auswählen eines Bildformats (wie JPEG XR), wenn sie vom Browser unterstützt werden, möglicherweise für eine bessere Komprimierung.

Aktivieren reaktionsschneller Bilder:

Während ältere Skriptmethoden existieren, werden sie aufgrund potenzieller Probleme mit mehreren Downloads oder fehlenden Bildern nicht empfohlen. Der bevorzugte Ansatz verwendet:

1. srcset Attribut
2. sizes Attribut
3. <picture></picture> Element

Das Attribut srcset:

Bevor Sie in die Verwendung srcset verwendet, definieren wir:

Geräte-Pixel-Verhältnis: Dies ist die Anzahl der Gerätepixel pro CSS-Pixel, beeinflusst von:

1. Gerätepixeldichte (physikalische Pixel pro Zoll): Geräte mit höherer Auflösung haben eine höhere Dichte und damit ein höheres Gerätepixelverhältnis auf demselben Zoomebene.
2. Browser-Zoomebene: höhere Zoompegel erhöhen das Gerät-Pixel-Verhältnis für ein bestimmtes Gerät.

Basic srcset Implementierung verwendet den x Deskriptor für das Gerät-Pixel-Verhältnis:

<img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174027748422704.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="How to Build Responsive Images with srcset " />

• 1x: space-needle.jpg für ein Gerätepixelverhältnis von 1.
• 2x: space-needle-2x.jpg für ein Gerätepixelverhältnis von 2.
• 3x: space-needle-hd.jpg für ein Gerätepixelverhältnis von 3.

Das Attribut src dient als Fallback für Browser ohne srcset Unterstützung. Der w Deskriptor gibt die Bildbreite an:

<img  src="/static/imghwm/default1.png"  data-src="images/space-needle.jpg"  class="lazy" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w" alt="So erstellen Sie reaktionsschnelle Bilder mit SRCSet" >

Das Attribut sizes:

Verwenden Sie die Bildgröße basierend auf der Ansichtsfenstergröße das Attribut sizes mit dem w Deskriptor in srcset.

Beispiel 1 (Bild bei der halben Ansichtsfenster):

<img  src="/static/imghwm/default1.png"  data-src="images/space-needle.jpg"  class="lazy"  sizes="50vw" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w" alt="So erstellen Sie reaktionsschnelle Bilder mit SRCSet" >

Beispiel 2 (Reaktionsgröße basierend auf der Ansichtsfensterbreite):

<img  src="/static/imghwm/default1.png"  data-src="images/space-needle.jpg"  class="lazy"  sizes="(max-width: 40em) 100vw, 50vw" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w" alt="So erstellen Sie reaktionsschnelle Bilder mit SRCSet" >

Das <picture></picture> Element:

Das Element <picture></picture> ermöglicht die Bildauswahl basierend auf der gerenderten Größe und den Browserfunktionen. Es enthält <source></source> Elemente mit srcset, sizes, media und type Attributen. An <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174027748575415.png?x-oss-process=image/resize,p_40" class="lazy" alt="How to Build Responsive Images with srcset ">

(Hinweis: Bildquellen und -größen sind veranschaulichend.)

Schlussfolgerung:

Reaktionsschnelle Bilder verbessern die Benutzererfahrung über Geräte hinweg. Implementieren Sie sie für eine optimale Website -Leistung. Weitere Ressourcen und Tools von Microsoft sind für Cross-Browser-Tests und Best Practices für Webentwicklung verfügbar. Es folgt ein detaillierter FAQ

Das obige ist der detaillierte Inhalt vonSo erstellen Sie reaktionsschnelle Bilder mit SRCSet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!