Как оптимизировать загрузку картинок на большом лендинге с портфолио?

Question

[xanzik312]

Работаю с cms WordPress.
У меня есть большой лендинг портфолио с большим количеством картинок.
Я начал его натяжку на CMS, и оставил секцию с работами на последок, до его добавление скорость было даже очень неплохой. Использую WebP + LazyLoad.

В секции с работами у меня картинки больших размеров (есть даже под 30 мб), заказчик попросил сделать качество картинок максимально на сколько это можно качественым и быстрым.
У кого есть опыт с большими лендингами дайте совет как можно увеличить скорость.

Сейчас я думаю максимально понизить размер картинок, большенство из них сделать в формате JPG + WebP.
Есть идея сделать копию картинок в плохом качестве и добавить для нее размытость (что то такое есть в телеге), и использовать ее как предзагрузочную картинку в LazyLoad.

Comments

[xanzik312]

И если это не нарушает правил, могу скинуть ссылку на сам сайт.

Answer 1

[Sanes]

Для одной страницы не нужен Wordpress. Наверняка в конструкторе страниц мышкой накидали. А они не оптимальные из-за универсальности. Как минимум найти легкий шаблон и отказаться от конструкторов.

Comments

[Kvason]

автор вопроса уточнил что он натягивает верстку, никаких конструкторов здесь нет, только оптимизация картинок

[Sanes]

Kvason, выше задницы не прыгнешь. Тридцать метров картинок, это идиотизм.

[Kvason]

Sanes, в любом случае это дело заказчика

Answer 2

[cloww07]

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