HTML picture mit srcset und sizes Chaos

Hendoul · Freitag um 18:06

Hi

HTML:

<picture>
    <source srcset="myPic.600x400.jpg 600w" media="(max-width: 620px)" sizes="(max-width: 620px) 600px">
    <source srcset="myPic.300x200.jpg 300w" media="(max-width: 1024px)" sizes="(max-width: 1024px) 300px">
    <source srcset="myPic.300x200.jpg 300w" media="(max-width: 1920px)" sizes="(max-width: 1920px) 300px">
    <img src="myDefaultPicture.450x300.jpg>
</picture>

Ich habe das sizes neu hinzugefügt, weil der https://validator.w3.org/ gemeckert hat:

Error: When the srcset attribute has any image candidate string with a width descriptor, the sizes attribute must also be specified.

Ich konnte allerdings auf MDN etc. gar nirgends finden, dass das wirklich required ist wenn man ein srcset mit der Breitenangabe versieht.

Nichtsdestotrotz habe ich jetzt sizes hinzugefügt. Allerdings ist mir noch nicht ganz klar was das jetzt bringen soll. Geht es nur darum, dass der Browser den Platz im Layout reservieren kann?

Und eigentlich ist der Platz für das Bild auch nicht eine fixe Breite, das variiert je nach Bildschirmgrösse. Also wie sinnvoll ist dann überhaupt die sizes Angabe? Ich kann dort überall 1000px eingeben und es hat scheinbar keinen Einfluss.

Ich habe auch einige Videos angeschaut wie z.B. dieses hier:

Der Blog dazu:
https://blog.webdevsimplified.com/2023-05/responsive-images/

Miximus · Freitag um 18:56

Google?

Ohne die Angabe von sizes, nur mit srcset, würden der Browser ein Bild entsprechend der Fensterbreite aussuchen und die Anzeigegröße im Layout außer Acht lassen. Wenn das Bild nicht gerade zur fensterfüllenden Slideshow gehört, würden hier zu große Bilddateien ausgeliefert. Die mittlere Spalte dieses Layouts ist auf großen Monitoren nur rund 900px breit.
[...]
Für die ungefähr passgenaue Auslieferung der Bilddatei kommt also das Attribut sizes ins Spiel. sizes listet Bedingungen, ähnlich wie Media Queries.

Hendoul · Heute um 13:18

Danke, entweder diese Seite tauchte bei mir nicht auf, oder ich habe nur die üblichen Verdächtigen abgeklappert. Jedenfalls ist das die erste auf der ich lese, dass sizes nur eine 'ungefähre' Angabe ist. Was aber auch nicht ganz zu stimmen scheint.

Aber noch eine andere Frage. Und zwar habe ich jetzt folgenden Code:

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Images Example</title>
</head>
<body>
    <img
        srcset="https://s28164.pcdn.co/files/march-2024-Vida-jaguar-2-600x400.jpg 600w,
                https://petcureoncology.com/wp-content/uploads/shutterstock_259729697-2-300x200.jpg 300w,
                https://www.calliaweb.co.uk/wp-content/uploads/2015/10/450x300.jpg 450w"
        sizes="(max-width: 650px) 600px,
                (max-width: 1280px) 300px,
                (max-width: 2000px) 300px,
                450px"
        src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/450x300.jpg">

    <div id="info"></div>

    <script>
        window.addEventListener('resize', updateText);
        updateText();

        function updateText() {
            const data = document.querySelector('#info');
            data.textContent = `Width: ${window.innerWidth}, Ratio: ${window.devicePixelRatio}`;
        }
    </script>
</body>
</html>

Auf meinem 2560x1440er Monitor mit annähernd gleichem ViewPort wird auf Firefox die 600x400 Variante angezogen, in Chrome die 450x300. Ich meinte Chrome ist korrekt, da kein mediaquery zutrifft nimmt er die 450px Angabe in sizes. Aber warum lädt Firefox nicht auch das 450x300er?

Edit:
Hat sich geklärt. Im Responsive Mode der Developer Tools wird DPI auf 1.0 gesetzt, was dazu führt, dass vermutlich die 450x300 noch als ausreichend erachtet werden. Mein Monitor hat aber 1.5 DPI und wenn man die DEV-Tools schliesst, zieht er das hochauflösendere 600x400 an. Das ist zumindest meine Erklärung für das Phänomen

Suche

HTML picture mit srcset und sizes Chaos

Hendoul

Commander

Miximus

Banned

Hendoul

Commander