SRCSET und Gr??en sind wichtige Eigenschaften für die Implementierung reaktionsschneller Bilder. 1. Srcset wird verwendet, um Bilder mit unterschiedlichen Aufl?sungen oder Gr??en bereitzustellen. Der Browser w?hlt das am besten geeignete Bild gem?? der Pixeldichte und der Ansichtsfenstergr??e des Ger?ts aus. 2. Gr??en geben dem Browser die erwartete Gr??e des Bildes unter verschiedenen Bildschirmbreiten mit und hilft dem Browser, die entsprechende Gr??e aus dem SRCSet auszuw?hlen. 3. Bei der Verwendung sollte es vernünftigerweise mehrere Ger?teanforderungen abdecken, die Pixeldichte-Deskriptor (X) und Medienabfragen kombinieren und Tools verwenden, um mehr Gr??e und Markierungen zu generieren, um nur Srcset, Missbrauchsgr??en als CSS zu schreiben oder das Src von Fallback zu ignorieren.

Bei der Erstellung reaktionsschneller Websites war die Anpassung von Bildern immer eine Herausforderung. Das Auftreten der beiden Attribute von srcset und sizes besteht darin, uns dabei zu helfen, Bilder von geeigneten Gr??en auf verschiedenen Ger?ten anzuzeigen, die nicht nur den Anzeigeeffekt sicherstellen, sondern auch die Ladegeschwindigkeit verbessert. Sie werden nicht als Ersatz für <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175364178558412.jpeg" class="lazy" alt="Verst?ndnis von 'srcset' und 'Gr??en' für reaktionsschnelle Bilder" > -Tags verwendet, sondern sind wichtige Tools, um ihre Reaktionsf?higkeit zu verbessern.

Was ist srcset ?

Der Zweck von srcset ist es, dem Browser mitzuteilen, welche alternativen Bilder in verschiedenen Aufl?sungen oder Gr??en für das aktuelle Bild verfügbar sind. Der Browser w?hlt die am besten geeignete Basis der Pixeldichte und der Ansichtsfenstergr??e des Ger?ts aus.

Sie k?nnen auf diese Weise schreiben:

 <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175364178735345.jpeg"  class="lazy"  
  src = "image.jpg" 
  Srcset = "Image-320w.jpg 320W, Image-480w.jpg 480W, Image-800W.jpg 800W"
  Alt = "Ein reaktionsschnelles Bild"
>

In der obigen Schreibmethode folgt jedes Bild von seiner Breite (in w ). Der Browser bestimmt basierend auf der aktuellen Ansichtsfensterbreite und kombiniert mit dem sizes .

Wie arbeiten sizes zusammen?

Der Zweck der sizes ist es, dem Browser zu sagen: "Mit unterschiedlichen Bildschirmbreiten wird dieses Bild angezeigt." Anstatt die CSS -Attribute zu steuern, die die tats?chliche Anzeigegr??e des Bildes steuern, hilft es dem Browser, das am besten geeignete Bild im srcset auszuw?hlen.

Zum Beispiel:

 <img 
  src = "image.jpg"
  Srcset = "Image-320w.jpg 320W, Image-480w.jpg 480W, Image-800W.jpg 800W"
  Gr??en = "(max. Width: 600px) 100VW, 50VW"
  Alt = "Responsive Bildbeispiel"
>

Dieser Code bedeutet:

• Wenn die Bildschirmbreite kleiner oder gleich 600 PX betr?gt, belegt das Bild die gesamte Ansichtsfensterbreite (100 VW).
• Andernfalls ist die Bildbreite die H?lfte des Ansichtsfensters (50VW)

Mit diesen Informationen kann der Browser die Breite des Bildes sch?tzen, die basierend auf der aktuellen Ansichtsfenstergr??e angezeigt werden soll, und dann die am besten geeignete Bildgr??e aus srcset zum Laden ausw?hlen.

Wie benutze ich diese beiden Attribute gut?

1. Die Bildgr??e sollte vernünftigerweise verschiedene Ger?te abdecken

Bereiten Sie nicht nur ein oder zwei Gr??en vor. Eine übliche Praxis besteht darin, 3 bis 4 Bildversionen unterschiedlicher Breiten wie 320px, 640px, 800px und 1024px zu generieren, die im Grunde die Anforderungen von Mobiltelefonen auf Desktop decken k?nnen.

2. Ignorieren Sie nicht die Pixeldichte (x Deskriptoren)

Zus?tzlich zur Verwendung w zur Beschreibung der Bildbreite k?nnen Sie auch x verwenden, um die Pixeldichte darzustellen, z. B.:

 <img 
  src = "image.jpg"
  srcset = "image-1x.jpg 1x, Image-2x.jpg 2x"
  Alt = "High DPI -Bild"
>

Dies gilt für Bilder von festen Gr??en wie Symbolen oder Logos. Hochaufl?sende Bildschirme w?hlen automatisch Bilder mit h?herer Dichte aus.

3. Verwenden Sie die entsprechende Medienabfrage in sizes

Die Medienabfrage in sizes sollte so nah wie m?glich an Ihrer CSS -Layout -Logik liegen. Wenn beispielsweise die Breite des Bildbeh?lters unter verschiedenen Bildschirmen in CSS festgelegt ist, sollten sizes diese Einstellungen widerspiegeln.

4. Tools helfen bei der Erzeugung von Bildern und Tags

Das manuelle Vorbereiten von Bildern mehrerer Gr??en ist ineffizient und kann automatisch mit Tools erzeugt werden, wie z. B. Imagemagick, Wolken- oder Build-Tool-Plug-Ins (wie den Bildlader von WebPack) für die Batch-Verarbeitung.

Einige h?ufige Missverst?ndnisse

• Schreiben Sie nur srcset , aber keine sizes : Auf diese Weise kann der Browser nicht beurteilen, wie gro? das Bild angezeigt werden sollte. Es kann nur auf Raten beruhen und Bilder von unangemessenen Gr??en leicht laden.
• Verwenden Sie sizes als CSS : Es ist nur eine Aufforderung, den Browser zu helfen, Entscheidungen zu treffen, und steuert die Anzeigegr??e des Bildes nicht wirklich.
• Ignorieren Sie die Rolle von src : src ist Fallback. Wenn der Browser srcset nicht unterstützt, wird src verwendet.

Im Allgemeinen k?nnen die Kombination von srcset und sizes erm?glicht, dass Bilder auf verschiedenen Ger?ten klar angezeigt werden, ohne die Bandbreite zu verschwenden. Obwohl es zu Beginn ein bisschen kompliziert ist, k?nnen Sie, wie Sie ihre jeweiligen Funktionen und Koordinationsmethoden verstehen, leicht reaktionsschnelle Bildbelastungen erreichen. Grunds?tzlich ist das.

Das obige ist der detaillierte Inhalt vonVerst?ndnis von 'srcset' und 'Gr??en' für reaktionsschnelle Bilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!