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

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

  • автор:

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

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

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

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

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

Просмотры: 45732

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

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

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

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

Работа с обложкой

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

Как правильно подобрать фоновое изображение: размеры, формат, пропорции
Настройка заголовка, подзаголовка и остального текста
Как сделать узкую обложку, которая занимает не всю высоту первого экрана

Как сделать цветной фильтр для фона, залить обложку сплошным цветом или сделать переход на следующий блок

Настройка видео, которое будет отображаться на фоне или при клике на кнопку Play
Как сделать так, чтобы обложка хорошо смотрелась на мобильных устройствах
Настройка приема данных сразу на первом экране
Добавление таймеров обратного отсчета до определенного времени и даты
Как конвертировать обложку и доработать в редакторе Zero Block

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

Существует несколько вещей, которые нужно знать, чтобы правильно работать с обложками и фоновыми изображениями и видео.

Видимая часть браузера

В интернете, в отличие от печатной продукции, нет фиксированного размера видимой области браузера. У всех разные экраны и разные пропорции. Причем даже в разных браузерах видимая область тоже разная. Например, видимую область может уменьшать панель закладок. Изображение в обложке кадрируется таким образом, чтобы всегда показаться на экране пользователя без полей.

Изображение для фона обложки загружается в Контенте блока → Фоновое изображение.

Чтобы изображение выглядело хорошо, мы составили рекомендации по оптимальным параметрам фонового изображения.

Оптимальный размер изображения для фона:

Формат: jpg
Размер по ширине: 1680 px
Кол-во точек на дюйм: 72 dpi
Цветовая модель: RGB
Степень сжатия: 10

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

Справочная статья об оптимизации изображений для сайта

Перед тем, как начать выбор изображения, прочитайте нашу статью «Как сделать обложку» в Tilda Education. Она содержит советы по созданию своей обложки и ссылки на сервисы, в которых можно найти удачное изображение.

Текст — это самая важная часть обложки, так как это первое сообщение, которое увидит посетитель сайта. Для донесения сообщения и расстановки акцентов в обложках есть заголовок, подзаголовок, описание и надзаголовок.

Наполнить обложки текстом можно двумя способами: с помощью панели «Контент» блока и при клике на текст на странице редактирования страницы.

Редактирование текста при клике на блок
Редактирование текста в Контенте блока

Форматировать текст можно как с помощью панели сверху, так и изменив размер, цвет или другие параметры текста в Настройках блока → Типографика.

Форматирование текста с помощью верхней панели

Изменения форматирования в настройках блока

Чтобы сделать классную обложку, читайте статью «Как сделать обложку» с практическими примерами сочетания текста и фонового изображения и статью «Как сделать продающий оффер (УТП) для сайта» для того, чтобы ваша обложка помогла привлечь внимание в первые 10 секунд.

Изменение высоты обложки

Узкая обложка — это обложка по высоте не 100%, а около 60 или 70%. В этом случае у обложки скорее утилитарная, чем имиджевая функция, ведь акцент смещается на информацию, которая следует за ней.

Для создания таких обложек в настройках блока есть параметр «В ысота ». Задавать высоту можно либо в пикселях (например, 400px), либо в процентах от высоты экрана (vh, 1vh равен 1% области просмотра экрана). Задавать высоту в vh предпочтительнее.

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

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

Обрезание изображения

Если требуется оставить только часть изображения, для этого можно воспользоваться специальным инструментом.

Вы сможете выделить поле на изображении, которое вы хотите оставить. Чтобы изменения сохранились, нажмите на кнопку «Применить» и затем на кнопку «Сохранить».

Также вы можете использовать готовые пропорции: 1:1, 3:2, 4:3, 5:4, 7:5, 16:9.

Ориентация изображения

В некоторых случаях для идеального сочетания текста и изображения достаточно его отразить по горизонтали или вертикали. Это можно сделать с помощью инструмента «Развернуть».

Поворот изображения

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

С помощью ползунка можно задать любое значение от -360 до +360 градусов. Либо использовать шаг в 30 градусов.

Добавление текста

При работе с большинством блоков из нашей библиотеки вы можете добавить текстовый элемент отдельно от изображения. Для этого есть соответствующие поля в меню «Контент».

Но иногда может возникнуть необходимость добавить текст прямо в изображение. В этом случае на помощь придет инструмент «Текст».

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

Дополнительно можно задать выравнивание текста по центру, левой и правой сторонам.

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

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