Адаптивная загрузка изображений | | | Мы внедрили технологию обработки изображений, которая масштабирует их под размер контейнера на сайте и конвертирует в WebP — формат нового поколения. | | | Адаптивная загрузка изображений уже работает на всех сайтах на Тильде по умолчанию, её не нужно подключать. Мы тестировали функцию несколько месяцев и готовы рассказать подробности. | | | Давайте разберём, какие теперь есть технологии оптимизации доставки изображений посетителям вашего сайта на Тильде. | | | | Lazy Load и CDN | Lazy Load или отложенная загрузка изображений работает на Тильде давно. Когда посетитель заходит на сайт, изображения загружаются последовательно по мере его продвижения по сайту, а не все разом.
CDN или сеть доставки контента — это географически распределенная сеть серверов по всему миру. Она помогает доставлять изображения из ближайшего узла к пользователю. Например, если пользователь из Берлина, он получит изображение из Германии, а не России. | | | | | Поддержка WebP | Тильда автоматически конвертирует все картинки на сайте в WebP — формат, который позволяет сжимать изображение до 35% больше, чем JPEG, без потери качества. Загружать изображения на сайт в новом формате не нужно, система всё сделает за вас. | | | | Большинство современных браузеров, например, Chrome, Opera, Firefox и другие поддерживают WebP. Когда пользователь заходит на сайт, скрипт проверит браузер на поддержку формата и, если он поддерживается, запросит с сервера WebP-изображения. Если не поддерживается — отдаст оригинальное изображение в формате, который был загружен — JPEG или PNG. Со временем мы добавим конвертацию изображений в AVIF-формат, который позволит сделать вес изображений ещё легче. | | | | Адаптивный ресайз изображений | Технология определяет размер браузера и контейнера на макете сайта, затем запрашивает у сервера изображение подходящего размера.
Представьте, что вы загрузили фотографию 1680px по ширине в блок с плиткой из нескольких изображений. На макете сайта размер контейнера 450x300px. Соответственно, посетитель получит не оригинал фотографии, а фотографию, уменьшенную до необходимого размера. | | | | Или предположим, что человек заходит на сайт с мобильного телефона. Чтобы загрузить обложку сайта на устройстве, скрипт запросит у сервера обрезанное под экран изображение с нужным разрешением. | | | Система постоянно анализирует трафик сайта на Тильде. Скрипт заранее готовит изображения под устройства и браузеры, с которых пользователи заходят на сайт чаще всего. Этот принцип более гибкий, чем «ресайз-на-лету»: иногда браузер тратит меньше времени на скачивание оригинального изображения, чем на ресайз и скачивание оптимизированной картинки. | | | | Retina-дисплеи и медленный интернет | Если у посетителя сайта дисплей с высоким количеством точек на дюйм, скрипт это распознает и запросит у сервера картинку высокого разрешения. Таким образом, изображения будут четкими на устройствах с Retina-дисплеем.
Но если у человека медленный интернет, предположим, на даче, система загрузит облегченную версию изображения. Это позволит не снижать общую скорость загрузки сайта. | | | | В некоторых случаях адаптивная загрузка изображений может не работать. Несколько причин, почему это может происходить: 1. Вы отключили Lazy Load в настройках сайта. 2. Вы отключили Lazy Load для элемента в Zero Block. 3. Адаптивное изображение ещё не было подготовлено. Например, вы только что загрузили картинку или впервые заходите с этого устройства или браузера. 4. Ваш браузер не поддерживает webp. Список браузеров, которые поддерживают формат, можно найти по ссылке. 5. Разница в весе между оригиналом и оптимизированным изображением незначительна, поэтому система не будет дополнительно сжимать и обрезать картинку. | | | Адаптивная загрузка изображений — одна из довольно значимых оптимизаций, которую мы внедрили в Тильде. Мы продолжаем работать над ускорением загрузки сайтов, созданных на платформе, следите за обновлениями в блоге в личном кабинете и в социальных сетях | | | Вы получили это письмо, потому что согласились получать ежемесячную рассылку о новостях платформы при регистрации на https://tilda.cc. Если вы больше не хотите получать рассылку, нажмите: UNSUBSCRIBE | | | |