Как узнать работает ли webp на сайте?

Question

[Роман Тузов]

Есть вот такой код:

<picture>
            <source type="image/webp" srcset="<?php echo get_template_directory_uri() ?>/img/kisspng-triangle-abstract-art-geometric-abstraction-colorful-geometry-5aa334cf275b57.5948162215206453271612.webp">
            <source type="image/jpeg" srcset="<?php echo get_template_directory_uri() ?>/img/kisspng-triangle-abstract-art-geometric-abstraction-colorful-geometry-5aa334cf275b57.5948162215206453271612.png">
            <img src="<?php echo get_template_directory_uri() ?>/img/kisspng-triangle-abstract-art-geometric-abstraction-colorful-geometry-5aa334cf275b57.5948162215206453271612.png" alt="Sunrise Image">
        </picture>

Я попробовал через код элемента удалить тег img, чтобы проверить работает ли webp и оказалось, что webp почему-то не отображается, отображается только картинка из тега img. Пробовал в хроме. Может я что-то не так сделал?

Answer 1

[Alex]

Перечитал вопрос трижды. Так и не понял о чем речь ...
Вы хотите понять какой файл загружается? Откройте отладчик - панель network. И смотрите.
Или
смотрите на свойство currentSrc у элемента img

Answer 2

[Александр Серый]

Предполагаю, Вы (как и я ) закомментировали тэг "img" . Поэтому в браузере вообще ничего не отобразилось. Но можно сделать так

<picture>
     <!-- <source srcset="/img/hero/hero-girl.webp" type="image/webp"> -->
    <img src="/img/hero/hero-girl.webp" alt="" class="img-fluid">
    <!-- <img src="/img/hero/hero-girl.png" alt="" class="img-fluid"> -->
 </picture>

Тоесть в тэг "img" указать картинку с расширением ".webp"
Но это так , чисто для проверки. Удобней все же проверять через F12-> network - не нужно редактировать код "туда-сюда"