Изображения в формате WebP не всегда отображаются на iOS - PullRequest
Новая
       48

Изображения в формате WebP не всегда отображаются на iOS

0 голосов
/ 01 мая 2019

Чтобы ускорить загрузку HTML-страницы, я преобразовал изображения в формат webp и использовал элемент «picture» следующим образом: 

<picture>
    <source data-srcset="images/gallery/urban.webp" type="image/webp">
    <source data-srcset=images/gallery/urban.jpg" type="image/jpeg">
    <img data-src="images/gallery/urban.jpg" alt="Alt Title" style="">
</picture>

На моих тестах в Chrome, IE, Edge и Firefox на рабочем столе это работает нормально. В Chrome, в режиме разработчика, когда я работаю в режиме эмуляции для мобильных устройств, он тоже работает.

Но когда я тестирую на iPhone с iOS 12, не все изображения отображаются. Это происходит как в Safari, так и в Chrome. Несколько больших изображений отображаются в виде серых областей. Я не видел этого раньше во время разработки. Когда я изменяю элемент обратно только на jpg, он отображает ОК: 

<img src="images/gallery/urban.jpg" alt="Alt Title" style="">

Я не уверен, что лучший способ это исправить. Может быть, что-то не так с разметкой. Или, может быть, я должен считать это ошибкой и пытаться обойти ее, заставляя изображения jpg / png, когда операционная система iOS? (с помощью CSS, HTML или Javascript?) Но проблема, кажется, затрагивает только определенные большие изображения. Немного хлопот приходится вручную проверять, чтобы определить, какие изображения должны быть «картинкой», а какие - просто «img».

...