Отображение сетчатки и не-сетчатки на соответствующие устройства следующим образом:
<picture>
<source srcset="non-retina.jpg, retina.jpg 2x">
<img src="non-retina.jpg">
</picture>
Работает. Но Google Pagespeed Insight сообщает, что он не может сделать это до тех пор, пока CSS не будет загружен, и мы получим штраф за это. Однако только в мобильном режиме - это единственный случай, когда Pagespeed Insights все равно визуализирует изображения Retina.
Наш полный CSS файл находится в нижнем колонтитуле, так как у нас есть встроенный критический CSS-код в голове.
Этот код, однако, работает без каких-либо жалоб от Pagespeed Insights
<picture>
<img src="non-retina.jpg">
</picture>
Что нам не хватает? Есть ли какая-то зависимость, которую браузер должен прочитать правилам стиля, прежде чем знать, какой источник /srcset -image взять?
TestCase:
Вот тестовая страница для него: http://pagespeed-srcset-nopicturefill.slople.com/ ... и здесь его результаты: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fpagespeed-srcset-nopicturefill.slople.com%2F&tab=mobile
