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

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

  • автор:

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

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

Какой должен быть размер фото для добавления в галерею?

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

Общие условия загрузки изображений:

  • изображения меньше 1680 px по большей стороне измерения сохраняют оригинальный размер,
  • изображения большого размера при загрузке в Тильду автоматически уменьшаются до 1680 px по большей стороне.
Похожие вопросы
  • Как убрать «Made on Tilda» внизу страницы (в подвале сайта)?
  • Как сделать кликабельным номер телефона?
  • Как загрузить файл на свой сайт?
  • Как передать сайт или страницу на другой аккаунт?
  • Почему не видны изменения после публикации, а в предпросмотре есть?

Этот ответ был вам полезен?

Просмотры: 45133

Сообщить о нарушении прав

Если вы считаете, что пользователь Tilda Publishing нарушает ваши права, отправьте нам сообщение через форму

Как связаться с поддержкой

Для консультаций по функциям платформы используйте форму обратной связи в вашем личном кабинете или напишите на team@tilda.cc

Адаптивная загрузка изображений

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

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

Давайте разберём, какие теперь есть технологии оптимизации доставки изображений посетителям вашего сайта на Тильде:

Lazy Load или отложенная загрузка изображений работает на Тильде давно. Когда посетитель заходит на сайт, изображения загружаются последовательно по мере его продвижения по сайту, а не все разом.

Изображение полностью загружено, потому что находится на экране
Изображение начинает загружаться за 700px до появления на экране
Изображение ещё не начало загружаться
1. Изображение полностью загружено, потому что находится на экране
2. Изображение начинает загружаться за 700px до появления на экране
3. Изображение ещё не начало загружаться

CDN или сеть доставки контента — это географически распределенная сеть серверов по всему миру. Она помогает доставлять изображения из ближайшего узла к пользователю. Например, если пользователь из Берлина, он получит изображение из Германии, а не России.

Поддержка WebP

Тильда автоматически конвертирует все картинки на сайте в WebP — формат, который позволяет сжимать изображение до 35% сильнее, чем JPEG, без потери качества. Загружать изображения на сайт в новом формате не нужно, система всё сделает за вас.

JPEG — 1680х1120px, 166 Kb
WebP — 1680х1120px, 78,6 Kb

Сравнение веса изображений за счёт их оптимизации на примере шаблона. Вес изображений сайта без адаптивной загрузки — 8,9 Mb. Вес изображений с адаптивной загрузкой — 2,8 Mb

После оптимизации общий вес изображений на сайте в 3 раза меньше

Большинство современных браузеров, например, Chrome, Opera, Firefox и другие поддерживают WebP. Когда пользователь заходит на сайт, скрипт проверит браузер на поддержку формата и, если он поддерживается, запросит с сервера WebP-изображения. Если не поддерживается — отдаст оригинальное изображение в формате, который был загружен — JPEG или PNG. Со временем мы добавим конвертацию изображений в AVIF-формат, который позволит сделать вес изображений ещё легче.

Справочник: размеры картинок для 9 социальных сетей

Компания Meta Platforms Inc., владеющая социальными сетями Facebook и Instagram, по решению суда от 21.03.2022 признана экстремистской организацией, ее деятельность на территории России запрещена.

Гайдлайны картинок социальных сетей важно учитывать, потому что картинки меньше рекомендованного размера «растягиваются» и становятся нечеткими, а картинки большего размера могут сжиматься программным способом и тоже выглядеть хуже, чем в оригинале. Если у картинки будут отличные от рекомендованных пропорции, то она может обрезаться в неудачном месте.

Если погружаться в тонкости не хочется совсем, запомните один размер: 1024 x 512 px . В большинстве случаев такая картинка будет отображаться корректно. Либо можно воспользоваться сервисами, которые сделают картинку правильного размера за вас.

Последнее обновление статьи — октябрь 2022 года. Мы стараемся регулярно обновлять статью и делиться актуальными размерами изображений. Если вы обнаружили устаревшую информацию, пожалуйста, сообщите нам.

Далее: таблица с наиболее важными параметрами основных социальных сетей и комментарии с иллюстрациями по каждой сети.

Картинка для поста: 1200 × 630 px
Картинка к внешним ссылкам: 500 × 261 px
Обложка страницы: 820 × 312 px
Картинка для Facebook Stories: 1080 × 1920 px
Фото профиля: 170 × 170 px

Картинка к внешним ссылкам: 510 × 228 px
Обложка сообщества: 1590 × 530 рх
Картинка для записей: 510 × 510 px (или соотношение сторон 3:2 при прямоугольном изображении)
Картинка для Историй Вконтакте: 1080 × 1920 рx
Обложка для Клипов: 1080 × 1920 px
Фото профиля: 200 × 500 px (миниатюра фото — 1:1)

Картинка для твита: 1024 × 512 px
Обложка: 1500 × 500 px
Фото профиля: 400 × 400 px

Квадратная картинка для поста: 1080 × 1080 px
Вертикальная картинка для поста: 1080 x 1350 px
Картинка для Instagram Stories: 1080 × 1920 px
Обложка для IGTV: 1080 × 1920 px
Обложка для Reel: 1080 x 1920 px
Фото профиля: не менее 110 × 110 px

Картинка поверх видео: 1280 × 720 px
Обложка канала: 2048 × 1152 px
Фото профиля: 800 × 800 px
Обложка для Shorts: 1920 x 1080 px

Картинка к внешним ссылкам: 1200 × 627 px
Картинка для поста: 1080 × 1920 px
Обложка: 1584 × 396 px
Фото профиля: 400 × 400 px

Фото профиля или канала: 500 х 500 px
Обложка для поста: 800 × 400 или 800 х 800 px
Картинка для пина: 1000 × 1500 px
Обложка: 800 × 450 px
Фото профиля: 165 × 165 px
Картинка для поста: 1680 × 1680 px
Обложка: 1944 × 600 px
Фото профиля: 190 × 190 px

Размеры изображений в Facebook

Для страниц и сообществ
1. Картинка к постам — 1200 x 630 px

В ленте горизонтальная картинка будет уменьшена до 500 px по ширине. Пропорции сохранятся.

2. Картинка ко внешним ссылкам — 500 × 261 px
При публикации отображается картинка, указанная в метаданных сайта (поле «og:image»).

3. Картинка на обложке страницы в Facebook — 820 х 312 px

4. Картинка на обложке группы — 820 × 312 px

Для рекламы
1. Реклама в ленте Facebook

Соотношение сторон изображения: от 1.91:1 до 4:5
Рекомендуемое разрешение: чем больше, тем лучше

При публикации со ссылкой:
Соотношение сторон изображения: от 1,91:1 до 1:1
Рекомендуемое разрешение: как минимум 1 080 × 1 080 px

2. Баннер в правом столбце Facebook и входящих Messenger
Соотношение сторон изображения: от 16:9 до 1:1
Рекомендуемое разрешение: минимум 1 200 × 1 200 px

3. Картинка для моментальных статей на Facebook, Facebook Marketplace и Рекламных сообщений

Соотношение сторон изображения: от 9:16 до 16:9
Рекомендуемое разрешение: чем больше, тем лучше

При публикации со ссылкой:
Изображения, обрезанные до формата 1:1
Рекомендуемое разрешение: минимум 1 200 × 1 200 px

4. Картинка для сториз в Facebook и Messenger

Соотношение сторон изображения: от 1.91 до 9:16
Рекомендуемое разрешение: 1080 × 1920 px

Facebook рекомендует оставить свободным около 14% изображения (250 px). Не размещайте текст, логотип и другие ключевые элементы изображения в его верхней и нижней части, чтобы их не перекрывало фото профиля или призыв к действию. Например, если ваше изображение имеет разрешение 1080 × 1920 px, убедитесь, что ключевые элементы отображаются в безопасной области 1080 × 1420 px.

5. Параметры оформления кольцевой галереи (карусели) для Facebook и Messenger

Соотношение сторон изображения: 1:1
Рекомендуемое разрешение: 1 080 × 1 080 пикселей

В кольцевую галерею Facebook и Messenger можно добавить от 2 до 10 карточек. Размер изображения — менее 30 МБ.

Рекомендации Facebook по размерам фото профиля и фото обложки личной страницы
Рекомендации Facebook по размерам изображений для обложки группы
Руководство по рекламе на Facebook
Параметры оформления кольцевой галереи

Размеры изображений Вконтакте

Для страниц и сообществ
1. Картинка к внешним ссылкам — 510 × 228 px

Рекомендуется использовать картинки размером не менее 510 × 228 px. В этом случае ссылка будет сопровождаться увеличенной картинкой (510 × 228 px) в сниппете на стене. Если картинка имеет меньший размер (но не менее 160 px по каждой из сторон), или к записи помимо ссылки прикреплены другие вложения, картинка в сниппете будет уменьшенная — 150 × 83 px.

Если на странице есть тег vk:image, то адрес изображения для иллюстрации будет взят из него. Если такого тега нет, проверяется содержимое тегов og:image, twitter:image, image.

2. Обложка сообщества — 1590 × 400 рх

В мобильной версии и приложениях отображается не полная версия обложки, а только её часть размером 1196 × 400 рх.

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

3. Картинка для обложки статьи — 510 × 286 pх

4. Картинка для витрины товаров — 1000 × 1000 px

5. Картинка для историй Вконтакте — 1080 × 1920 рx
6. Обложка для Клипов — 1080 × 1920 рx

Для рекламы
1. Картинка для кольцевой галереи (карусели)

Карусель Вконтакте — это рекламная запись с несколькими карточками (от 3 до 10), куда можно добавить цены, название и короткое описание, а также прикрепить изображение и кнопку.

Рекомендуемое разрешение для изображений: не менее 400 × 400 px.

2. Картинка для записи с кнопкой

Рекламная запись с кнопкой призыва к действию. Изображение отображается в виде сниппета.

Рекомендуемое разрешение: 537 × 240 px.

3. Картинка для универсальных записей

Универсальная рекламная запись Вконтакте имеет вид публикации. Рекомендуется использовать разрешение изображений для записи — 510 × 510 px или соотношение сторон 3:2 при прямоугольном изображении.

Если универсальная запись со сниппетом, то изображение в сниппете рядом с кнопкой должно быть не менее 537 × 240px.

4. Картинка для рекламных объявлений в левой части сайта

Рекомендации зависят от формата рекламного объявления. Для изображения с текстом используются картинки размером 145 × 85 px, для «большого изображения» требуется разрешение 145 × 165 px. Для продвижения сообществ используется логотип (по умолчанию) или любое другое изображение размером 145 × 145 px. Продвижение приложений происходит с помощью квадратного изображения (по умолчанию логотип приложения) или любой другой картинки с рекомендуемым разрешением 145 × 145 px.

5. Картинка для рекламы сайта

Минимальный размер изображения для логотипа 256 × 256 px. Минимальный размер изображения для сниппета — 1080 × 607 px с допустимым соотношением сторон строго 16:9. Максимальный вес изображения 5 МБ.

6. Картинка для рекламы в историях

В одно объявление можно загрузить до 3 историй с фото или видео. Загружаемые изображения должны быть вертикальными. ВКонтакте требует соотношение сторон изображения — 9:16, разрешение картинок не менее 720 × 1280 px.

Старайтесь размещать контент и текстовые надписи ближе к центральной части (при размере фотографий 1080 × 1920 рекомендуемые отступы сверху и снизу — по 200 px).

Рекомендации ВКонтакте по размерам изображений
ВКонтакте для бизнеса: размеры для оформления сообщества
Требования к рекламе во ВКонтакте
Оформление внешних ссылок
Технические требования к форматам рекламы

Размеры изображений в Twitter

1. Картинка к твитам — 1024 x 512 px

В ленте горизонтальная картинка будет уменьшена до 506 px по ширине. Пропорции сохранятся.

Вертикальное изображение уменьшается до 506 px по ширине и обрезается до прямоугольника.

2. Картинка на обложку — 1500 x 500 px

3. Картинка для Twitter Cards

Twitter Cards позволяют расширить возможности поста в Twitter. Например, с помощью Summary Card with Large Image к твиту можно прикрепить большую картинку, которую пользователи смогут полностью рассмотреть. Необходимое соотношение сторон изображения — 2:1, разрешение — до 4096 × 4096 px (не менее 300 × 157 px). Размер — менее 5 МБ.

Картинка для Summary Card (твит с расширенным описанием, но небольшим изображением) должна иметь разрешение от 144 × 144 px до 4096 × 4096 px и соотношение сторон 1:1. Размер — менее 5 МБ.

3. Реклама в Twitter для российских пользователей недоступна

Пользователи из России не могут пользоваться сервисом «Реклама в Твиттере». При попытке зайти в сервис система предупредит, что учетная запись не может участвовать в рекламной программе.

Рекомендации Twitter по размерам изображений
Twitter для разработчика: использование Twitter Cards

Размеры изображений в Instagram

Для профиля
1. Картинка для поста

До недавнего времени лучшим размером фотографий для загрузки в Instagram был 1080 × 1080 px. В веб-версии квадратные фотографии отображаются размером примерно 600 × 600 px.

Однако в 2022 году Instagram стал тестировать новую версию ленты и отдавать предпочтение вертикальным изображениям с соотношением сторон 4:5. Советуем загрузить картинку с разрешением 1080 x 1350 px, в приложении она отобразится размером 480 × 600 px.

Для горизонтальных изображений рекомендуемое соотношение сторон — 1.91:1. Чтобы сохранить качество изображения, также используйте высоту не менее 1080 px.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *