srceset i sizes nie ładuje właściwej grafiki

Witam,

Chcę wdrożyć na stronie ładowanie zdjęć o alternatywnych wymiarach przez parametry srcset i sizes

Poniżej przykład:

<img src="Photos/kuropatwy-piaskowa-kapiel.jpg" width="860px" 
srcset="Photos/kuropatwy-piaskowa-kapiel.jpg 1200w, 
Photos/min_kuropatwy-piaskowa-kapiel.jpg 200w, 
webkit/kuropatwy-piaskowa-kapiel_w340.jpg 340w,  
webkit/kuropatwy-piaskowa-kapiel_w620.jpg 620w,  
webkit/kuropatwy-piaskowa-kapiel_w860.jpg 860w,  
webkit/kuropatwy-piaskowa-kapiel_w1024.jpg 1024w" 
sizes="(max-width: 440px) 340px, 860px">

I teraz mam taki problem, że na desktopie jest OK i ładuje zgodnie z warunkiem sizes plik "webkit/kuropatwy-piaskowa-kapiel_w860.jpg" ale na urządzeniach mobilnych ładuje się "webkit/kuropatwy-piaskowa-kapiel_w620.jpg"

To jaki obraz został wczytany przez przeglądarkę sprawdzam w chrome devtools (F12) Elements -> Preperties i tam parametr "currentSrc"
Do tej pory na stronie nie było używane srcset ale teraz ma być uzyte. Czyli wygenerowane zostały kopie obrazów w różnych rozmiarach do obrazów istniejących już jakiś czas.

Powyższy kod dotyczy strony bazanty.pl np. https://bazanty.pl/kuropatwy.html więc tam można sprawdzić kod live.

Z góry dziękuję za pomoc i sugestie.

Wszystko działa, OK,
do szerokości "okna" 440px ustawiasz że zdjecie bedzie mieć 340px, wiec przegladarka "szuka" sobie odpowiedniego zdjecia (uwzgledniajac device pixel ratio),
wiec upewnij sie że masz ustawione na 1, bo domyslnie ustawia na 2 i wtedy przegladarka wstawia "wieksze zdjecie" (tak zeby wynik dzielenia zadanej szerokosci zdjecia przez szerokosc okna (tego w media query) byl najblizej pixel ratio))

Dzięki

kozakl napisał(a):

Wszystko działa, OK,
do szerokości "okna" 440px ustawiasz że zdjecie bedzie mieć 340px, wiec przegladarka "szuka" sobie odpowiedniego zdjecia (uwzgledniajac device pixel ratio),
wiec upewnij sie że masz ustawione na 1, bo domyslnie ustawia na 2 i wtedy przegladarka wstawia "wieksze zdjecie" (tak zeby wynik dzielenia zadanej szerokosci zdjecia przez szerokosc okna (tego w media query) byl najblizej pixel ratio))

Dziękuję za informację. Cieszy mnie już pierwsza linijka twojego wpisu :-) Pierwszy raz jednak spotykam się z takim parametrem jak device pixel ratio. Poszukałem juz w google ale nigdzie nie znalazłem informacji wprost jak mogę go u siebie sprawdzić i gdzie się go ustawia. Czy możesz mi to podpowiedzieć?

To ustawia się automatycznie. Sprzęt raportuje swój fizyczny wymiar ekranu i ilość pikseli, i przeglądarka sobie przelicza.

I działanie automatycznie będzie w praktyce najlepsze, bo przecież telefony nie mają w rzeczywistości 360px nawet jak wyświetlają wersję 360px z media query tylko np. 1080. Więc jeżeli po chamsku wymusisz załadowanie obrazka 360px, to wtedy będzie rozciągnięty na fizycznych 1080 pikselach, więc stracisz na wizualnej jakości.

A device pixel ratio możesz sobie symulować przez stworzenie własnego urządzenia w dev toolsach, w trybie emulowania urządzeń mobilnych:

Także zdefiniuj wszystko zgodnie ze standardami i resztą się nie przejmuj.

Super, bardzo dziękuję za pomoc i wyjaśnienia.
Wiele mi to wyjaśnia, bo zastanawiałem się też przy tej okazji, że jak to jest, że zdjęcia na telefonie często wyglądają lepiej niż na dużym ekranie.

Pozdrawiam