Как правильно оптимизировать картинки под размеры экранов и кроссбраузерность

Всем доброго времени суток, на днях стал смотрел анализ сайта через гугл, а он стал ругаться мол картинки слишком много весят особенно для мобильной версии. Что я с ними сделал: сжал при помощи caesium(примерно процентов на 5-20 они похудели), после чего перевел в формат webp(тоже какой-то вес сбросили) и вроде как для desktopa они оптимизированы, да только не все браузеры этот формат читают (например Firefox). Попробовал написать код вроде "читай jpg, если не читается webp", но это сильно сказывается на производительности сайта. Для мобильной версии стал расписывать менять размеры картинок через @media, но гугл всё равно ругается, что мобильная версия долго грузится.
Из этого возникает 2 вопроса:
1) В каком формате лучше закидывать картинки ?
2) Как решить проблему с адаптацией картинок под разные устройства?
Если вдруг поможет, то вот ссылка на сайт: https://xn--8-btbv4b.xn--p1ai/