Изображения WebP не отображаются в сафари, хотя добавлен полифилл - PullRequest
Новая
       81

Изображения WebP не отображаются в сафари, хотя добавлен полифилл

0 голосов
/ 16 марта 2019

Google Insight сказал мне, чтобы конвертировать мои изображения JPG в WebP. Он уменьшил вдвое каждое изображение, но проблема в том, что Safari (вероятно, худший браузер, даже лучше, пожалуйста, не используйте его, чтобы он умер) на Mac не отображает webP.

Я добавил этот скрипт в свое приложение, которое я считаю полифилом, но это не помогло. Также там написано, что для загрузки обоих файлов, но webpjs-0.0.2.swf битая ссылка. Есть ли работающий полифилл?

Большинство изображений служат фоновыми изображениями, часто в виде встроенных стилей. Так, например, этот полифилл не будет работать, потому что поддержка css - это план на будущее.

В свою очередь у этого отсутствует документация по css / inline-style, а также требуется некоторая работа для замены пути в каждом изображении в каждом компоненте.

Если у вас есть Mac и Safari - живая демонстрация

1 Ответ

1 голос
/ 19 марта 2019

I пользовательский модернизатор просто взял из него средство проверки WebP и затем применил следующие подходы:

для изображения HTML: 

<picture>
  <source srcset="img/awesomeWebPImage.webp" type="image/webp">
  <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>

для изображения CSS: 

.no-webp .elementWithBackgroundImage {
  background-image: url("image.jpg");
}

.webp .elementWithBackgroundImage{
  background-image: url("image.webp");
}

для передачи ссылки на изображение в качестве реквизита (в приложении Vue2 или любой другой интерфейсной среде): 

document.querySelector("html").classList[0] === 'webp' ? this.webpEnabled = true : this.webpEnabled = false;
this.webpEnabled ? this.currentImages = this.imagesWebp : this.currentImages = this.imagesJpeg

<some-component :image="currentImages[0]"></some-component>
...