Замена изображения Webp

Question

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

В настоящее время у меня есть скрипт, который успешно обнаруживает, если браузер может отображать WebP

(function(){
  var WebP=new Image();
  WebP.onload=WebP.onerror=function(){
    if(WebP.height!=2){
      console.log("You do not have WebP support.");
    } else {
      console.log("You do have WebP support.");
    }
};
  WebP.src='data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
        })();

В случае с поддержкой WebP я попробовал следующий код, но не был неудачным.

// replace .gif with .webp
var allImages = document.body.getElementsByTagName("img");
var length = allImages.length;
var i;
for(i = 0; i < length; i++){
  allImages[i].src.replace("png", "testtest");
  console.log(allImages[i]);
}

При помещении в заголовок консоль правильно показывает все теги изображения, но источник не был изменен с имени файла.

Есть идеи о том, что делается неправильно?

Редактировать: Я обнаружил проблему с тем, почему это не загружало изображения, благодаря Wsanville. Глядя на вкладку «Сеть» в Chrome, однако все еще показывает, что я загружаю как PNG, так и теперь изображение Webp. Как я могу предотвратить загрузку изображения PNG в первую очередь?

Answer 1

А replace функция возвращает строку, это не мутирует это. Вам просто нужно назначить значение обратно:

allImages[i].src = allImages[i].src.replace("old", "new")

Отредактировано для комментариев:Все браузеры будут загружать соответствующий файл в src атрибут изображения. В качестве альтернативы вашего подхода я предлагаю сохранить имя файла в другом атрибуте img ярлык.

Ваши теги изображения могут выглядеть как:

<img alt="" data-png-source="/path/to/image.png" />

Соответствующий JavaScript может установить src атрибут к правильной версии.

var supportsWebP = true; //set this variable properly

for(i = 0; i < length; i++)
{
    var image = allImages[i];
    var pngSource = image.getAttribute('data-png-source');
    image.src = supportsWebP ? pngSource.replace('.png', '.webp') : pngSource;
}

Answer 2

Я знаю, что это очень старый вопрос, но, когда я искал способ заменить изображения WebP на соответствующие JPG, я не нашел много.

С эта почта, Я собрал это вместе, что, кажется, работает через IE 9.

(Это может на самом деле сработать с более старой версией jQuery, но я использую jQuery 2.1.1, которая ломается в IE <= 8, так что я не уверен)

Он проверяет поддержку .WEBP, то если браузер не поддерживает .WEBP, он заменяет все входы на эквивалент .jpg.

$(function() {
  var WebP=new Image();
  WebP.onload=WebP.onerror=function(){
    if(WebP.height!=2){
      $('img[src$=".webp"]').each(function(index,element) {
        element.src = element.src.replace('.webp','.jpg');
      });
    }
  };
  WebP.src='data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
});

Answer 3

Если у вас есть (некоторые) управление сервером, вы можете использовать согласование контента вместо JavaScript. Видеть http://httpd.apache.org/docs/2.2/content-negotiation.html для того, как это делается в Apache.

Answer 4

Вы на самом деле пытаетесь решить вариант классической проблемы с отзывчивым изображением.

Проблема, которая у вас есть при изменении атрибутов изображения SRC, заключается в том, что современный браузер посмотрит вперед и начнет загружать изображения с неправильным расширением. Анкет Вы, вероятно, не хотите загружать изображения, которые не собираетесь использовать.

Хитрость заключается в том, чтобы поместить изображение в нож тег, а затем постепенно усиливает это, изменяя путь, когда вы читаете TextContent тега. В более старых браузерах вам понадобится Простой полифилл Чтобы прочитать содержимое тегов Noscript.

Вы можете просмотреть мою серию на адаптивные изображения и поддержку Webp здесь. Анкет Посмотреть пример здесь Основанный на классическом отзывчивом дизайне Итана Маркотта.