Проверяйте фактически полученный файл

Как проверить форматы изображений

DevTools покажет выбранный URL, MIME-тип и переданный вес. Дополните техническую проверку визуальным сравнением, тестом fallback и осмотром desktop/mobile.

Проверка формата, веса и качества изображения в браузере — Расширение URL само по себе не доказывает формат ответа.

Быстрая проверка в браузере

Откройте типовую страницу и DevTools → Network, включите Disable cache и перезагрузите.
Выберите Img. Запишите Request URL, Content-Type, Transferred и Resource Size.
В Elements выберите img, затем выполните $0.currentSrc в Console: это фактически выбранный URL.
Сравните с исходником в реальном размере: текст, лица, градиенты, прозрачность и анимацию.
Повторите на узком экране и убедитесь, что mobile не получает лишний большой файл.

Как оценить результат

Приоритет найденных проблем
Наблюдение	Оценка	Действие
Вариант легче и визуально корректен	Хорошо	Зафиксировать результат
AVIF/WebP есть, но всегда приходит fallback	Средне	Проверить source, type, Accept и кеш
Новый файл тяжелее или заметно хуже	Высоко	Перекодировать или оставить исходник
404, потеря прозрачности или анимации	Критично	Вернуть fallback до исправления

Проверка всей страницы

[...document.images].map(img => ({ currentSrc: img.currentSrc, natural: [img.naturalWidth, img.naturalHeight], rendered: [img.clientWidth, img.clientHeight] }))

Команда находит фактические URL и избыточные естественные размеры. Вес и MIME-тип берите из Network.

Ложные выводы и границы

Расширение может не совпадать с содержимым: смотрите Content-Type.
CDN может выбирать формат по Accept, поэтому браузеры получают разные ответы.
Кеш скрывает изменения; повторяйте измерение без кеша.
Лабораторная оценка экономии не равна реальному выигрышу контрольной страницы.
Формат не проверяет alt, кадрирование, лицензию, LCP-приоритет и адаптивность.

Исправление описано в пошаговой инструкции; внедрение — в составе услуги.