Оптимизация изображений для сайтов на Tilda

Как сохранить качество на больших экранах и иметь показатель Performance в Lighthouse — 90+. Избегаем битых пикселей в Autoscale и ускоряем скорость загрузки страницы.

Минимум действий с максимальным результатом без особых заморочек.

ㅤ

Основную часть ресурсов забирают на себя картинки и видео. 900 kb, загрузятся за 3 секунды, а вот 27 mb за 30 секунд. Внимание пользователя — ценный ресурс. Его лучше не тратить на храмое появление контента на сайте.

Лучше всего использовать jpeg. Для элементов с прозрачным фоном можно оставить и png, но он тяжелее на 30%.

Использовать изображение 4к для плашки 500х500 тоже смысла особого не имеет. Для сохранения хорошего качества хватит увеличить итоговое расширение объекта в 1,5-2 раза. Этого хватит, чтобы не шакалить картинку на 2к и 4к экранах.

ㅤ

Файл может весить в разы меньше, но не потерять в качестве. Его можно сжать в одном из сервисов, мы используем Squoosh.

Просто закидываем картинку и вуаля! — на выходе получаем -87% веса изображения. Для работы с Tilda MozJPEG хватит с головой.

ㅤ

В идеале использовать хостинг и загружать файлы для сайта туда. Beget и reg.ru передают информацию с минимальными задержками.

Также можно использовать Dropbox. Проще получить ссылку на изображение, которую вставляем в шейп или галерею.

ㅤ

Выключить Lazy Load. Данная настройка начинает шакалить картинку, появляются битые пиксели. Особенно это видно при Autoscale, на больших мониторах и медленном интернете.

Теперь файл весит совсем немного, не хранится на серверах Tilda. Как итог нет необходимости принудительно снижать качество для улучшения скорости загрузки.

ㅤ

В результате сайт быстро грузится из-за небольшого веса контента и выглядит хорошо на всех экранах и браузерах.

Сайт с видео и изображениями, оценка 97 в Lighthouse — наш промежуточный сайт компани, пока верстается основной.

Телеграмм канальчик про дизайн, развитие агентства и жизнь