Как оптимизировать фото на сайте?

Question

[Нікіта]

Есть сайт, в этом блоке изображения. Они довольно долго загружаются. Есть ли какие-то сервисы либо ручной способ ускорить загрузку этих фото?
Я сжимал эти фото через один онлайн-сервис, они стали в раза два, три меньше по весу, но заметного результата это не дало.
Когда долистываешь до этого блока, начинаются заметные лаги, как это пофиксить?

Answer 1

[Кирилл Ларин]

Сконвертировать их в WEBP, и также подключить CDN.

17 мегабайт очень много

Comments

[Нікіта]

WebP уже поддерживается во всех браузерах?

[Кирилл Ларин]

Нікіта,
Edge версии 18+, начиная с 2018 года
Firefox версии 65+, начиная с 2019 года
Chrome версии 32+, начиная с 2014 года
Opera версии 19+, начиная с 2014 года
Safari iOS, iPad Os версии 14+, начиная с 2020 года
Opera Mini, все версии
Android Browser версии 4.2+, начиная с 2013 года
Opera Mobile, все версии

Кроме мамонта Internet Explorer любых версий

Answer 2

[Сергей Арсентьев]

Да, проблема не в Webp и не в lazyload (хотя они лишними не будут), а в том, что нельзя грузить большие картинки в сетке в мелком масштабе, логика должна быть другая: изначально подгружаются и отображаются мелкие картинки (типа 370х280 px) - а при клике уже загружается большая фотка полноразмерная.
В wordpress это делается в два клика, ну а тут видимо придется вручную нашлепать мелких превьюшек.

Answer 3

[Пума Тайланд]

Так нахрена вы фотки такого размера туда вставили
Сделайте актуальный размер и будет в десять раз быстрее