У WebP есть такой нюанс - не все браузеры его поддерживают. К примеру, iOS Safari, обычный Safari, IE - не поддерживают WebP.
https://caniuse.com/#feat=webp Поэтому надо хранить всегда как минимум две версии каждой картинки. Webp (для браузеров с поддержкой WebP) и исходную карти И отдавать нужную версию в зависимости от браузера. А исходную картинку надо при этом еще и оптимизировать/сжимать - чтобы даже для браузеров без поддержки WebP картинки отдавались оптимизированными (более легкими по весу) - это еще третья! версия файла. У сервиса optipic я недавно заметил новый функционал, в который это все уже заложено в коробку.
https://optipic.io/ru/cdn/ Можно даже подключить все так, чтобы урлы картинок не менялись (они остаются точно такими же и выглядят как внутренние url на моем сайте). Но на самом деле они подгружаются через их систему с автоматическим сжатием, конвертацией в webp и распознаванием поддержки webp. Получается совсем все просто и красиво, да и недорого))