Img z srcset i rozmiarami nie ładujący obrazu Oczekiwany

Question

Próbuję zoptymalizować stronę, która składa się z siatki obrazów z punktami przerwania, co powoduje, że używają 1, 2, 3 lub 4 kolumny.

html wygląda następująco:

<img srcset=" image-300x200.jpg 300w, image-original.jpg 600w" sizes=" (min-width: 1px) calc(100vw * (0.94 * 1.000) * 1.00), (min-width: 480px) calc(100vw * (0.94 * 0.905) * 0.50), (min-width: 768px) calc(100vw * (0.94 * 0.850) * 0.33), (min-width: 981px) calc(100vw * (0.94 * 0.835) * 0.25), 280px" alt="E-Books customer service for Dutch Libraries" width="400" height="284">

calc() funkcje mogą wyglądać nieco skomplikowane, ale Przetestowałem je z różnych szerokościach rzutni, a następnie zweryfikowane rozmiar obrazu w przeglądarce i matematyka się kończy.

Dla kompletności, oto co robi:

[viewport width] - [94% container width] - [column gutters]/[nr of columns]

Ale cokolwiek próbuję, Chrome (prawie, yay dla spójności) zawsze wybiera duży obraz nawet, gdy wielkość img na ekranie jest dobrze poniżej 300 pikseli. Sprawdziłem to w narzędziach programisty> inspektor> właściwości> img> currentsrc wskazanych w this answer

Czy ktoś może mi pomóc?

Answer 1

Myślę, że to wymyśliłem. wydaje się, że zapytania o media nie działają zgodnie z oczekiwaniami.

Na przykład z tych zasad:

sizes=" (min-width: 1px) ... (min-width: 480px) ... (min-width: 768px) ... "

można by przypuszczać, że

• Linia nr 1 jest prawdziwe, gdy ekran> 1px szeroki
• Linia nr 2 jest prawdziwe, gdy ekran > 480px, linia nadrzędna # 1
• Wiersz nr 3 jest prawdziwy, gdy ekran ma rozdzielczość> 768px, przesuwa linię nr 1 i nr 2

To nie tak działa, przynajmniej nie w praktyce. Myślę, że przeglądarka szuka reguły, która jest prawdziwa i nazywa ją dniem.

Więc to właśnie idzie:

• Linia nr 1 jest prawdą! Gotowe! Stosowanie reguły! Łatwo!

Kiedy spojrzałem na moich zasadach, a wynik z tej logiki na uwadze, że nagle ma sens, że przeglądarka nalegał na wykorzystaniu największy obraz, ponieważ funkcja calc() używać do pierwszej linii to:

calc(100vw * (0.94 * 1.0) * 1.0) - co jest skomplikowanym sposobem pisania windowWidth * 0.94.

Innymi słowy, przeglądarka zakłada, że ​​obraz ma zawsze 94% szerokości okna i nie stosuje żadnych innych obliczeń uwzględniających punkty przerwania.

Anyway, zmieniając powyższe zasady to:

sizes=" (min-width: 1px) and (max-width: 479px) ... (min-width: 480px) and (max-width: 767px) ... (min-width: 768px) and (max-width: 980px) ... "

zapewnia, że ​​zasada ta ma zastosowanie tylko do pewnego punktu.Za każdym razem, gdy następna linia jest prawdziwa, pozostałe linie nie.

Więc to pojechałem z w końcu:

<img src="image-fallback.jpg" srcset=" image-300x200.jpg 300w, image-480x320.jpg 480w, image-600x400.jpg 600w, image-960x640.jpg 960w, image-1200x800.jpg 1200w" sizes=" (min-width: 1px) and (max-width: 479px) calc( 100vw * (0.94 * 1.000) * 1.00), (min-width: 480px) and (max-width: 767px) calc( 100vw * (0.94 * 0.905) * 0.50), (min-width: 768px) and (max-width: 980px) calc( 100vw * (0.94 * 0.850) * 0.33), (min-width: 981px) and (max-width: 1088px) calc( 100vw * (0.94 * 0.835) * 0.25), (min-width: 1089px) calc(1089px * (0.94 * 0.835) * 0.25), 280px" />

A oto przykład roboczych od powyższego: Image srcset example (working)

Uwaga: raz przeglądarce załadowaniu większy obraz, niechętnie ładuje mniejsze. Do tego służy przycisk "odświeżaj siłę".

Uwaga # 2: Do debugowania dodałem więcej obrazów źródłowych w porównaniu do mojego pierwotnego pytania. Pomyślałem, że łatwiej będzie zachować dwa rozmiary, ale myślę, że nigdy bym tego nie rozgryzł, gdybym nie dodał jeszcze więcej. Kiedy miałem tylko 2 zdjęcia, myślałem, że zawsze wybrał największy. To nieprawda, po prostu nigdy nie wybrał obrazu, którego się spodziewałem;)