Мы внедрили технологию обработки изображений, которая масштабирует их под размер контейнера на сайте и конвертирует в WebP — формат нового поколения.
Адаптивная загрузка изображений уже работает на всех сайтах на Тильде по умолчанию, её не нужно подключать. Мы тестировали функцию несколько месяцев и готовы рассказать подробности.
Давайте разберём, какие теперь есть технологии оптимизации доставки изображений посетителям вашего сайта на Тильде:
Lazy Load
Lazy Load или отложенная загрузка изображений работает на Тильде давно. Когда посетитель заходит на сайт, изображения загружаются последовательно по мере его продвижения по сайту, а не все разом.
Изображение полностью загружено, потому что находится на экране
Изображение начинает загружаться за 700px до появления на экране
Изображение ещё не начало загружаться
CDN
CDN или сеть доставки контента — это географически распределенная сеть серверов по всему миру. Она помогает доставлять изображения из ближайшего узла к пользователю. Например, если пользователь из Берлина, он получит изображение из Германии, а не России.
NEW
Поддержка WebP
Тильда автоматически конвертирует все картинки на сайте в WebP — формат, который позволяет сжимать изображение до 35% сильнее, чем JPEG, без потери качества. Загружать изображения на сайт в новом формате не нужно, система всё сделает за вас.
JPEG — 1680х1120px, 166 Kb
WebP — 1680х1120px, 78,6 Kb
8,9 Mb
2,8 Mb
Сравнение веса изображений за счёт их оптимизации на примере шаблона. Вес изображений сайта без адаптивной загрузки — 8,9 Mb. Вес изображений с адаптивной загрузкой — 2,8 Mb
После оптимизации общий вес изображений на сайте в 3 раза меньше
Большинство современных браузеров, например, Chrome, Opera, Firefox и другие поддерживают WebP. Когда пользователь заходит на сайт, скрипт проверит браузер на поддержку формата и, если он поддерживается, запросит с сервера WebP-изображения. Если не поддерживается — отдаст оригинальное изображение в формате, который был загружен — JPEG или PNG. Со временем мы добавим конвертацию изображений в AVIF-формат, который позволит сделать вес изображений ещё легче.
NEW
Адаптивный ресайз изображений
Технология определяет размер браузера и контейнера на макете сайта, затем запрашивает у сервера изображение подходящего размера.
Представьте, что вы загрузили фотографию 1680px по ширине в блок с плиткой из нескольких изображений. На макете сайта размер контейнера 450×300px. Соответственно, посетитель получит не оригинал фотографии, а фотографию, уменьшенную до необходимого размера.
Представьте, что вы загрузили фотографию 1680px по ширине в блок с плиткой из нескольких изображений. На макете сайта размер контейнера 450×300px. Соответственно, посетитель получит не оригинал фотографии, а фотографию, уменьшенную до необходимого размера.
JPEG — 1680x1119px, 252 Kb
WebP— 450x300px, 23,5 Kb
Или предположим, что человек заходит на сайт с мобильного телефона. Чтобы загрузить обложку сайта на устройстве, скрипт запросит у сервера обрезанное под экран изображение с нужным разрешением.
JPEG —1680x1120px, 372 Kb
WebP — 560x1120px, 103 Kb
Система постоянно анализирует трафик сайта на Тильде. Скрипт заранее готовит изображения под устройства и браузеры, с которых пользователи заходят на сайт чаще всего. Этот принцип более гибкий, чем «ресайз-на-лету»: иногда браузер тратит меньше времени на скачивание оригинального изображения, чем на ресайз и скачивание оптимизированной картинки.
NEW
Retina-дисплеи и медленный интернет
Если у посетителя сайта дисплей с высоким количеством точек на дюйм, скрипт это распознает и запросит у сервера картинку высокого разрешения. Таким образом, изображения будут четкими на устройствах с Retina-дисплеем.
Но если у человека медленный интернет, предположим, на даче, система загрузит облегченную версию изображения. Это позволит не снижать быстродействие сайта.
Но если у человека медленный интернет, предположим, на даче, система загрузит облегченную версию изображения. Это позволит не снижать быстродействие сайта.
В некоторых случаях адаптивная загрузка изображений может не работать. Несколько причин, почему это может происходить:
1
Вы отключили Lazy Load в настройках сайта.
2
Вы отключили Lazy Load для элемента в Zero Block.
3
Адаптивное изображение ещё не было подготовлено. Например, вы только что загрузили картинку или впервые заходите с этого устройства или браузера.
4
Ваш браузер не поддерживает WebP. Список браузеров, которые поддерживают формат, можно найти по ссылке.
5
Разница в весе между оригиналом и оптимизированным изображением незначительна, поэтому система не будет дополнительно сжимать и обрезать картинку.
Адаптивная загрузка изображений — одна из довольно значимых оптимизаций, которую мы внедрили в Тильде. Мы продолжаем работать над ускорением загрузки сайтов, созданных на платформе, следите за обновлениями в блоге в личном кабинете и в социальных сетях.
Создайте быстрый и удобный сайт на Тильде
Не пропускайте наши новости, следите за нами в социальных сетях и Телеграме
