srcset - Адаптивное изображение загружает неправильный файл

Моя цель - обслуживать разные версии (разрешения / размеры) одного и того же изображения, которое должно занимать 100% ширины области просмотра, поэтому я могу обслуживать версию 800 пикселей для мобильных устройств (или, как правило, устройств с меньшими дисплеями или медленнее. подключений), 1366 пикселей и выше на настольные дисплеи большего размера.

Проблема в том, что я тестирую его с эмулятором устройства Chromium, и некоторые устройства с маленьким экраном загружают версию 1366 пикселей вместо 800 пикселей: iPhone 6/7/8 (ширина 375 пикселей) загружает изображение 800 пикселей, но iPad (768 пикселей) , Nexus 5 (360 пикселей) и iPhoneX (375 пикселей) загружают 1366 пикселей вместо загрузки 800 пикселей.

Я не очень уверен, что правильно понял директиву sizes, вот мой код, src по умолчанию ссылается на версию 2880px только для помощи при тестировании:

<img class="img-fluid" 
    srcset="img/dreamstime_800w_109635242.jpg 800w,
         img/dreamstime_1366w_109635242.jpg 1366w,
         img/dreamstime_2880w_109635242.jpg 2880w"
    sizes="(max-width: 800px) 100vw,
        (max-width: 1366px) 100vw,                      
        2880px 100vw"
    src="img/dreamstime_2880w_109635242.jpg"/>

html css responsive-design responsive-images
person jmng    schedule 29.07.2018    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Это связано с дисплеями сетчатки (и их DPI, я думаю).

Из того, что я слышал, дисплеи Retina выбирают первое изображение, которое в два или три раза превышает ширину их дисплея, в зависимости от их соответствующего дисплея Retina (2x, 3x и т. Д.).

Еще одно простое решение - очистить кеш браузера. Если ваше самое большое и самое плохое изображение уже было кэшировано, Chrome (например) всегда будет загружать это изображение.

person Heiruspecs    schedule 29.07.2018
comment
Проблема действительно связана с разрешением экрана, эта статья хорошо объясняет ее: css-tricks.com/ - person jmng; 01.08.2018

arrow_upward
4
arrow_downward

Атрибут sizes сообщает браузеру, что изображение всегда отображается на всю ширину области просмотра, поэтому вы можете просто заменить его на sizes="100vw".

Таким образом, браузер берет текущую ширину области просмотра, умножает ее на плотность экрана и дает ширину требуемого изображения. Затем он берет ближайшее изображение из списка в srcset.

Вы не можете использовать его для «обслуживания версии 800px для мобильных устройств», потому что большинство мобильных устройств в настоящее время имеют большую плотность, чем настольные устройства, и вы не можете предотвратить это с помощью <img srcset… sizes…>.

Если вы действительно хотите игнорировать плотность экрана (по какой причине?) И:

  • передавать самые маленькие изображения на небольшие устройства,
  • служить средним изображением для средних устройств
  • показывать большие изображения на большие устройства
  • оставить самое большое изображение в качестве запасного

Затем вы должны использовать <picture> с такими медиа-запросами:

html <picture> <source media="(max-width: 800px)" srcset="img/dreamstime_800w_109635242.jpg 800w"> <source media="(max-width: 1366px)" srcset="img/dreamstime_1366w_109635242.jpg 1366w"> <img src="img/dreamstime_2880w_109635242.jpg"> </picture>

person Nicolas Hoizey    schedule 02.08.2018
comment
Я понимаю и согласен с вашим ответом в целом, но вы можете добиться того же, просто используя srcset: css-tricks.com/ - person jmng; 02.08.2018
comment
Это неправда, если вы не удалите, чтобы я мог передать версию 800 пикселей на мобильные устройства в вашем вопросе. - person Nicolas Hoizey; 02.08.2018
comment
Было бы полезно, если бы вы добавили какое-то объяснение помимо того, что это неправда, но я добавил статью, подтверждающую мое предыдущее утверждение, если вы хотите уточнить ... - person jmng; 03.08.2018
comment
Что ж, извините, но я подумал, что мой первый ответ был уже довольно подробным. Если вы используете srcset с несколькими изображениями, браузер выберет то, которое необходимо для заполнения viewportxdensity, поэтому, если вы хотите ограничить 800px область просмотра изображением шириной 800px, вы либо не предоставляете изображение больше этого размера, либо используете <picture>. Если вы используете srcset только с изображениями размером больше 800px и у вас 2ddpx экран с 800px окном просмотра, браузер попытается найти 1600px изображение. - person Nicolas Hoizey; 06.08.2018

arrow_upward
1
arrow_downward

для будущих читателей - мне было трудно понять, почему srcset полностью игнорировал мои попытки. После пары часов разочарования и гнева я пришел к самому очевидному ответу в мире - я работаю над Retina Macbook Pro, и я не запускал плотность пикселей.

Я изменил это на

<img class="<?= $image_class;?>" data-caption="<?php echo $image['alt']; ?>"
data-src="<?php echo $image['sizes']['medium']; ?>"
data-srcset="<?php echo $image['sizes']['medium']; ?> 600w 2x, 
<?php echo $image['sizes']['large']; ?> 1280w 2x"
sizes="(min-width: 150px) 600px, 100vw"
width="150" height="150"
alt="<?php echo $image['alt']; ?>">

и все работало - по крайней мере, я мог понять, что что-то происходит. Уф. С Рождеством всех!

person Fulvio ReddKaa Romanin    schedule 25.12.2018

arrow_upward
1
arrow_downward

Тестируя свои веб-страницы с помощью эмулятора Chrome, я иногда обнаруживал (как и вы), что загружается изображение большего размера, чем необходимо, особенно на небольших мобильных устройствах. Я наконец понял, что это была не моя ошибка, а Chrome вытаскивал из кеша изображение большего размера, если оно там было. Установив флажок в эмуляторе, чтобы отключить кеш во время тестирования, проблема исчезла, и размеры, которые я ожидал увидеть загруженными, были фактически загружены.

person Duns    schedule 19.03.2019