SRCSET ist ein Attribut des <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175181916625665.jpeg" class="lazy" alt="Wie hilft das SRCSet -Attribut bei reaktionsschnellen Bildern in HTML?" > -Tag in HTML, das zum Definieren mehrerer Bildquellen verwendet wird, sodass der Browser das am besten geeignete Bild basierend auf der Bildschirmgr??e und -aufl?sung des Ger?ts ausw?hlen kann. 1. Es verbessert die Seitenladegeschwindigkeit und die Benutzererfahrung und vermieden unn?tige gro?e Bilddownloads oder verschwommene Anzeigen. 2. Verwenden Sie den W -Deskriptor, um die Bildbreite in Kombination mit dem Gr??enattribut anzugeben, der Browser kann das beste Bild gem?? der Layoutbreite ausw?hlen. 3. Ein Pixeldichtedeskriptor wie 2x kann verwendet werden, um ein klareres Bild für hochaufl?sende Bildschirme bereitzustellen. 4. In der tats?chlichen Verwendung sollte SRC als Fallback aufgenommen werden und sicherstellen, dass die Bildgr??e genau und gut optimiert ist. Cross-Ger?tetests sollten durchgeführt werden, um die Wirkung sicherzustellen.

Das srcset -Attribut in HTML hilft bei reaktionsschnellen Bildern, indem der Browser die am besten geeignete Bildquelle basierend auf der Bildschirmgr??e und -aufl?sung des Ger?ts ausw?hlen kann. Dies bedeutet, dass Sie kleinere Bilder für mobile und gr??ere und gr??ere, h?herwertige, ohne zus?tzliche JavaScript oder komplizierte Logik für Desktops bedienen k?nnen.

Was ist SRCSET und warum es benutzt?

Das srcset -Attribut wird in einem <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175181916625665.jpeg" class="lazy" alt="Wie hilft das SRCSet -Attribut bei reaktionsschnellen Bildern in HTML?" > -Tag verwendet, um mehrere Bildquellen zu definieren, aus denen der Browser ausw?hlen kann. Es ist besonders nützlich, wenn Sie reaktionsschnelle Websites entwerfen, auf denen Bilder über verschiedene Ger?te hinweg gut skalieren müssen.

Hier ist ein grundlegendes Beispiel:

 <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175181917211151.jpeg"  class="lazy"  src = "bild-small.jpg" 
     srcset = "bild-small.jpg 480w, bildmedium.jpg 800w, bildlarge.jpg 1200w"
     Alt = "ein reaktionsschnelles Bild">

In diesem Fall:

• Der Browser w?hlt eines der Bilder ab, abh?ngig von der Breite des Ger?ts.
• Der w -Deskriptor teilt dem Browser die Breite jedes Bildes in Pixeln mit.

Durch die Verwendung srcset verbessert die Seitenlastgeschwindigkeit und die Benutzererfahrung, indem Benutzer feststellen, dass Benutzer für ihre Bildschirme entsprechend dimensioniert werden.

Wie entscheidet der Browser, welches Bild zu verwenden ist?

Standardm??ig schaut der Browser die Bildschirmbreite an und w?hlt die beste Anpassung aus der srcset -Liste basierend auf dem Breite des Bildes ( w ) und der aktuellen Layout -Breite (wie durch das Attribut sizes definiert, mehr dazu unten).

Sie k?nnen auch Pixeldichtedeskriptoren wie 2x für hoch-dpi-Anzeigen wie Retina-Bildschirme hinzufügen:

 <img src = "bild-normal.jpg"
     srcset = "bild-normal.jpg 1x, Bild-retina.jpg 2x"
     ALT = "High DPI -Bildbeispiel">

Hier entlang:

• Ger?te mit Standardbildschirmen erhalten das normale Bild.
• Hochaufl?sende Anzeigen erhalten die sch?rfere Version.

Ohne srcset würden Browser immer das gleiche Bild herunterladen, unabh?ngig von den Bildschirmfunktionen, was zu unn?tig gro?en Downloads oder verschwommenen Grafiken führen k?nnte.

Kombination von SRCSet mit Gr??en

Um srcset noch leistungsf?higer zu machen, kombinieren Sie es mit dem sizes . sizes teilt dem Browser mit, wie gro? das Bild auf der Seite unter verschiedenen Ansichtsfenster mit Medienabfragen angezeigt wird.

Hier ist ein vollst?ndiges Beispiel:

 <img src = "bild-small.jpg"
     srcset = "bild-small.jpg 480w,
             Bildmedium.jpg 800W,
             Bild-large.jpg 1200w "
     Gr??en = "(max. Width: 600px) 100VW,
            (Max-Breite: 900px) 50VW,
            33VW "
     Alt = "Responsive Bild mit Gr??en">

Was passiert hier:

• Auf Bildschirmen, die schmaler als 600px sind, nimmt das Bild die volle Breite ( 100vw ) auf, sodass der Browser das kleinste Bild w?hlt.
• Zwischen 601px und 900px ist das Bild die halbe Bildschirmbreite ( 50vw ), sodass ein mittelgro?es Bild ideal ist.
• über 900px nimmt das Bild etwa ein Drittel des Bildschirms ( 33vw ) auf, sodass das gr??te Bild ausgew?hlt ist.

Dies gibt dem Browser genügend Kontext, um kluge Entscheidungen darüber zu treffen, welches Bild nicht nur auf der Bildschirmgr??e basiert, sondern auch basierend darauf, wie das Bild tats?chlich angelegt wird.

Ein paar Dinge, die man beachten sollte

• Fügen Sie immer ein src -Attribut hinzu - es wirkt als Fallback, wenn srcset nicht unterstützt wird.
• Verwenden Sie die richtigen Bildabmessungen - stellen Sie sicher, dass die w -Werte mit der tats?chlichen Pixelbreite jedes Bildes übereinstimmen.
• Optimieren Sie Ihre Bilder - selbst mit srcset k?nnen übergro?e oder nicht optimierte Bilder die Leistung immer noch beeintr?chtigen.
• Testen Sie über Ger?te hinweg - Verwenden Sie Browser -Entwickler -Tools, um verschiedene Bildschirmgr??en zu simulieren, und sehen Sie, welches Bild geladen wird.

Es mag ein bisschen eingerichtet werden, aber sobald Sie es richtig gemacht haben, macht srcset die Handhabung von Reaktionsbildern viel einfacher und effizienter.

Grunds?tzlich ist das.

Das obige ist der detaillierte Inhalt vonWie hilft das SRCSet -Attribut bei reaktionsschnellen Bildern in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!