Verwendung von Bildelementen bei bekannten Bildgrößen

Question

Ich möchte, dass meine responsive Webseite die Bilder in der richtigen Größe lädt. Im Moment habe ich eine HTML-Vorlage, die wie folgt aussieht:

<picture> 
    <source media="(min-width: 950px)" srcset="{{ .Cover.Large }}"> 
    <source media="(min-width: 600px)" srcset="{{ .Cover.Medium }}"> 
    <source media="(min-width: 300px)" srcset="{{ .Cover.Small }}"> 
    <source media="(min-width: 150px)" srcset="{{ .Cover.Xsmall }}"> 
<img src="{{ .Cover.Medium }}" alt="{{ .Title }} poster"> 
    </picture> 

Large = 950x400 Medium = 600x252 Klein = 300x126 Xmall = 150x63

Nun ich denke, diese min-Breite ist nicht zur Arbeit gehen sehr gut, wenn die Bilder in einer Reihe oder gebogen sind. Ist es nicht das Beste, die Abmessungen des Bildes zu definieren und den Browser die am besten geeignete Quelle herunterladen zu lassen?

https://html.spec.whatwg.org/multipage/embedded-content.html#valid-source-size-list

Was ist der sauberste Weg, dies zu tun? Verwirrend ist in meinem eigenen reaktions Experimenten wird die Größe immer geladen:

• Picture element
• Img srcset

Answer 1

Das ist, was ich wollte, 4 Bilder über einen Bildschirm gebogen, die mit mehreren Interpretationen des JPG gesichert werden um Client-Bandbreite zu sparen. Beachten Sie, dass dem Code ein src = -Attribut fehlt, um es gültig zu machen.

body { 
 
    display: flex; 
 
    align-items: flex-start; 
 
} 
 
picture { 
 
    margin: 1em; 
 
}

<picture> 
 
<img 
 
srcset="https://placeholdit.imgix.net/~text?txtsize=89&txt=XSmall&w=150&h=63 150w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Small&w=300&h=126 300w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Medium&w=600&h=252 600w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Large&w=950&h=400 950w" sizes="calc(25vw - 2em)"> 
 
</picture> 
 
<picture> 
 
<img 
 
srcset="https://placeholdit.imgix.net/~text?txtsize=89&txt=XSmall&w=150&h=63 150w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Small&w=300&h=126 300w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Medium&w=600&h=252 600w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Large&w=950&h=400 950w" sizes="calc(25vw - 2em)"> 
 
</picture> 
 
<picture> 
 
<img 
 
srcset="https://placeholdit.imgix.net/~text?txtsize=89&txt=XSmall&w=150&h=63 150w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Small&w=300&h=126 300w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Medium&w=600&h=252 600w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Large&w=950&h=400 950w" sizes="calc(25vw - 2em)"> 
 
</picture> 
 
<picture> 
 
<img 
 
srcset="https://placeholdit.imgix.net/~text?txtsize=89&txt=XSmall&w=150&h=63 150w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Small&w=300&h=126 300w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Medium&w=600&h=252 600w, https://placeholdit.imgix.net/~text?txtsize=89&txt=Large&w=950&h=400 950w" sizes="calc(25vw - 2em)"> 
 
</picture>

So lernte ich mehrere Dinge:

• How to flex images
• picture.img ist in Ordnung, Sie nicht die source element
• gelernt verwenden müssen über vw die Breite der Ansichtsportgröße, die wie ein Prozentsatz des Bildschirms ist, aber Sie müssen absolute Werte bei der Berechnung der Ränder, z. calc(25vw - 2em). 25vw = 1/4 Bildschirm mit den Bildrändern 1em + 1em jeder Seite
• dieses Zeug ist wirklich kompliziert, dieses Beispiel nicht einmal use break points, die ich vorschlagen würde, vermeiden Sie für Ihre Vernunft!

Es macht genau das, was ich will. Es lädt das Bild mit der passenden Größe und Bandbreite. Wenn die Größe verringert wird, lädt es kein kleineres Bild, das ich möchte. Und wenn es skaliert, holt es ein größeres Bild mit höherer Auflösung, das ich möchte, um irgendwelche hässlichen Artefakte zu vermeiden.

Ergebnis: Effiziente Übertragung von mehreren JPG Wiedergaben

Answer 2

Zunächst einmal verwenden Sie das gleiche Bild für jedes Szenario aber nur in verschiedenen Größen? Wenn ja, können Sie wahrscheinlich nur das srcset Attribut anstelle des <picture> Elements verwenden.

Das Element <picture> wird verwendet, wenn Sie eine auf der Kunstrichtung basierende Auswahl benötigen, z. B. wenn Sie eine Weitwinkelaufnahme für den großen Bildschirm und ein Hochformat auf einem schmalen Bildschirm verwenden. Die Sache mit dem Element <picture> ist, dass es in Situationen verwendet wird, in denen ein bestimmtes Bild an einem bestimmten Haltepunkt angezeigt werden soll. Daher gibt es bei der Verwendung des Elements <picture> keine Unklarheit hinsichtlich der Bildauswahl.

Welche Links zu meiner ursprünglichen Frage, verwenden Sie das gleiche Bild für jede Bildschirmbreite, aber einfach in verschiedenen Größen? Wenn ja, würde Ihnen ein normales img-Element mit dem Attribut srcset viel besser dienen.

Für Bilder mit Fluidbreite wird srcset mit dem Deskriptor w und sizes Attribut verwendet. Das Attribut sizes enthält zwei Werte. Die erste ist eine Medienkondition. Der zweite Wert ist der source-size-Wert, der die Breite des Bildes bei der jeweiligen Medienbedingung bestimmt. Im Folgenden finden Sie ein Beispiel für die srcset Syntax:

<img srcset="uswnt-480.jpg 480w, 
      uswnt-640.jpg 640w, 
      uswnt-960.jpg 960w, 
      uswnt-1280.jpg 1280w" 
    sizes="(max-width: 400px) 100vw, 
      (max-width: 960px) 75vw, 
      640px" 
    src="uswnt-640.jpg" alt="USWNT World Cup victory"> 

Hier habe ich den Browser sage, dass für Ansichtsfenster auf 400 Pixel Breite auf, um das Bild zu 100% des Darstellungsbreite machen. Bei Darstellungsfeldbreiten von bis zu 960 Pixel machen Sie das Bild zu 75% der Darstellungsfeldbreite. Und für alles über 960 Pixel, machen Sie das Bild 640 Pixel. Der Browser verwendet die Informationen von srcset und sizes, um das Bild zu liefern, das den angegebenen Bedingungen am besten entspricht.

Vollständige Offenlegung: Ich habe eine Menge von dieser aus einem Artikel hob ich zu diesem Thema zuvor schrieb