Какого размера фото товаров загружать на тильда

Мы внедрили технологию обработки изображений, которая масштабирует их под размер контейнера на сайте и конвертирует в 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. Разница в весе между оригиналом и оптимизированным изображением незначительна, поэтому система не будет дополнительно сжимать и обрезать картинку.

Адаптивная загрузка изображений — одна из довольно значимых оптимизаций, которую мы внедрили в Тильде. Мы продолжаем работать над ускорением загрузки сайтов, созданных на платформе, следите за обновлениями в блоге в личном кабинете и в социальных сетях

Как добавить товары в интернет-магазин

Чтобы начать использовать Каталог, активируйте его в Настройках сайта → Еще → Подключаемые модули → Каталог товаров → Подключить.

Добавьте на страницу любой блок с карточками товаров, например, ST305N.

Перейдите в Контент блока. В нем вы можете перейти в каталог товаров и выбрать часть каталога, которую нужно показывать в блоке.

Важный момент: Если у вас были добавлены товары старым способом в Контенте блока, то система предложит перенести их управление в Каталог. Это можно сделать одним кликом в Контенте блока.

Настройка списка товаров
Перейдем в Каталог. В нем организован общий список всех товаров, которые есть на сайте.

Нажмите на кнопку «Добавить товар» и заполните его название, описание и загрузите изображения.

Настройка вариантов, характеристик и дополнительных опций товара

Посмотрите видеоурок о том, как добавить варианты и опции товаров или прочитайте подробную инструкцию .

Показ информации о товаре во вкладках

Для того, чтобы разграничить разную информацию о товаре в нескольких вкладках, перейдите в карточку товара в каталоге → раздел «Табы» и добавьте новую вкладку.

Вы можете создать несколько вкладок и выбрать, какую информацию в них показывать.

информация — уникальное описание для этого товара (текст, изображение, видео),
шаблон — описание, которое можно добавить в один товар и потом выбрать его как шаблон в остальных товарах,
текст — подробное описание товара из поля Текст,
характеристики товара — информация о бренде, габаритах и других параметрах из раздела Характеристики.

Не забудьте указать для каждой вкладки название, которое будет показываться как заголовок вкладки.

После настройки вкладок, включите их в настройках блока с товарами → Pop-up → «Табы в карточке товара» и укажите, как их нужно отображать — в виде вкладок или раскрывающихся карточек с текстом.

Готово. Теперь в попапе или на странице с товаром появится дополнительная информация в виде табов или раскрывающихся карточек.

Информация о товаре во вкладках

Отображение вкладок в виде раскрывающихся карточек
Добавление и управление разделами

Каждый товар может принадлежать одному или нескольким разделам. Назначить раздел можно в карточке отдельного товара.

Чтобы управлять разделами, перейдите по ссылке «Разделы каталога» в верхнем меню.

Управляйте разделами, добавляя новые. Разделы нужны для более удобного управления товарами и для того, чтобы выводить только определенные разделы товаров в блоках с карточками магазина.

SEO-настройки товаров в Каталоге

Опубликованные товары показываются в поиске, для каталога автоматически создается отдельный файл /sitemap-store.xml с ссылками на все опубликованные товары. Для того, чтобы убрать товар из поиска, нужно сделать его невидимым в каталоге (выключить в списке товаров в столбце Видимость или в карточке товара).

Читать:

Как переключить язык на самсунге

Вы можете отключить генерацию Sitemap для товаров в настройках каталога → Вкладка «Дополнительно» → убрать галочку «Включить генерацию Sitemap». Там же можно посмотреть ссылку на Sitemap для товаров в каталоге.

Также в карточке каждого товара во вкладке SEO можно добавить SEO-заголовок, описание и ключевые слова для каждого товара.

Бронирование товаров

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

В Тильде установить настройку, что товар будет забронирован, пока его не купят (когда от платежной системы придет уведомление), либо установить срок, за который нужно купить товар. Это можно сделать в Настройках сайта → Платежные системы → Общие настройки платежных систем → Бронировать товар.

SEO-настройки товаров в каталоге

Каждая страница товара в каталоге генерируется со встроенной микроразметкой по формату Schema.org. Это значит, что вся информация о товарах заранее размечена в коде так, чтобы поисковой системе и другим сервисам было максимально легко подтягивать все параметры товара.

Также для всех товаров каталога генерируется отдельный файл по адресу доменсайта/sitemap-store.xml, который можно добавить в вебмастеры Гугла и Яндекса. Подробнее о работе с вебмастерами поисковых систем можно прочитать в нашем гиде по SEO.

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

Чтобы сайты загружались быстро, нужно оптимизировать изображения: уменьшить ширину или высоту с помощью любого графического редактора (можно использовать бесплатные онлайн-редакторы), а затем в сервисе TinyPNG сжать фото.

Чем легче картинка, тем быстрее она загружается. Вес зависит от двух параметров:
1. Величины в пикселях по ширине и высоте (фотография размером 3000х2000 пикселей тяжелее, чем фото 300х200 пикселей)
2. Содержания самой картинки — чем больше на фото мелких деталей и цветов, тем она больше весит.

Правильнее всего сначала изменить размер изображения, а затем удалить избыточную информацию, чтобы дополнительно уменьшить вес.

Каким должен быть размер изображения?

Все изображения большого размера при загрузке на Тильду автоматически уменьшаются до 1680 px по большей стороне. Картинки меньше 1680 px сохраняют оригинальный размер.

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

Перед загрузкой на Тильду фотографии большого размера сократите как минимум до 1680 px по большей стороне.

В идеале нужно загружать изображения такого размера, какими они будут на сайте. Если размер самой фотографии не соответствует размеру изображения в макете, браузер будет его сжимать или растягивать. И то, и другое он делает плохо, поэтому фотография будет нечеткой.

Чтобы узнать размер изображения, добавьте блок на страницу, включите сетку (в настройках любого текстового блока) и посмотрите, сколько колонок занимает фотография. Одна колонка — 60 px, расстояние между колонками — 40 px.

Как максимально уменьшить вес изображения?

Существуют специальные программы, которые сжимают изображения, объединяя схожие цвета. Они делают это достаточно умно — визуально разницы нет, но вес фотографии сокращается значительно — может доходить до 70%.

TinyPNG
Squoosh
Kraken
Compressor
Compressjpeg
ImageOptim (требует установки на Mac)

Пример оптимизации изображения

Рассмотрим на примере фотографии Christoph Bengtsson Lissalde, скачанной с Unsplash, как оптимизируется изображение.

Исходные размеры файла: 4405×2478 px и 3,5 мб.

Загрузим её на Тильду как есть. Фотография обрежется до 1680×945 px, а ее размер станет 1,2 мб.

Откроем исходный файл в Photoshop, поменяем размеры на 1680×945 px, а затем сохраним, то получим 832 кб.

Загрузим фото в TinyPNG. Фотография уменьшилась до 353 кб.