Korrekte Größen für img srcset in einem Containerelement?

Question

Verwenden des LazySizes-Plugins (https://github.com/aFarkas/lazysizes) Ich versuche ein Raster aus Bildern zu erstellen, jedes mit einer alternativen Version für kleinere Ansichtsfenster. Das Raster (Container) ist ein einfaches auf Spalten/Zeilen basierendes prozentuales Layout.

Ich bin nicht ganz sicher, wie man die Bilder deklariert, ich sehe nur die größeren Versionen. Ich habe mich dafür entschieden, hochauflösende Bilder zu verwenden und sie um 50% mit einer maximalen Breite für den Container zu verkleinern. Hier ist eine Markup-Probe der die Bilder:

<img data-sizes="(min-width: 320px) 100vw, (min-width: 768px) 100vw" 
    data-src="images/grid/image-small.jpg" 
    data-srcset="images/grid/image-small.jpg 720w, images/grid/image-big.jpg 1440w" 
    alt="" class="lazyload" /> 

ich nur einen Breakpoint benötigen, die bei 768px ist. Der verwirrende Teil ist das Datengrößenattribut. Soll ich hier eine andere Größe deklarieren, da die Bilder hochauflösend sind oder sollte ich sie nur die volle Breite haben?

Hinzugefügt: Der generierte Markup ich, wenn das Skript initiiert:

<img data-sizes="(min-width: 320px) 100vw, (min-width: 768px) 1440px" 
    data-src="images/grid/image-small.jpg" 
    data-srcset="images/grid/image-small.jpg720w, images/grid/image-big.jpg 1440w" 
    alt="" class=" lazyloaded" 
    sizes="(min-width: 320px) 100vw, (min-width: 768px) 1440px" 
    srcset="images/grid/image-small.jpg 720w, images/grid/image-big.jpg 1440w" 
    src="images/grid/image-small.jpg"> 

Answer 1

srcset spec Autor hier.

Nun, Ihr aktuelles sizes Attribut ist nutzlos; es gibt nur die gleiche Größe für beide Haltepunkte an, und beide geben nur die Standardgröße an.

Warum versuchen Sie, einen seltsamen Sizing-Hack zu machen? Sie werden gegen das kämpfen, was die versucht zu tun, also was auch immer Sie mit enden, wird hacky sein.

Folgen Sie einfach der Spezifikation: sizes sollte deklarieren, wie groß das Bild auf der Seite sein wird (standardmäßig 100vw bereits, so dass Sie es weglassen können, wenn Sie bereits auf dem Bild die volle Breite planen). Sie können hier MQs verwenden, wenn Sie Responsive Design durchführen und Ihre verschiedenen Layouts das Bild unterschiedlich skalieren müssen. Wenn es jedoch immer dieselbe Größe hat, sollten Sie die Dinge nicht komplizieren.

Dann deklarieren Sie einfach, wie groß Ihr Bild im `srcset ist. Es sieht so aus, als würdest du das schon machen, das ist gut (vorausgesetzt, dass deine Bilder 720 und 1440 Bildpunkte breit sind). Der Browser wählt das gewünschte Bild anhand dieser Informationen aus.

Ich bin mir nicht 100% sicher, wie Sie das Bild verwenden möchten, aber es sieht so aus, als würden Sie die Bilder auf halber Bildschirmbreite anzeigen? In diesem Fall benutzen Sie einfach sizes=50vw und alles wird sich selbst kümmern.

(Ich habe keine Ahnung, wie LazySizes funktioniert, also, wenn es etwas komisches tut, kann ich Ihnen damit nicht helfen.)