Оптимизация изображений для сайта
Чтобы сайты загружались быстро, нужно оптимизировать изображения: уменьшить ширину или высоту с помощью любого графического редактора (можно использовать бесплатные онлайн-редакторы), а затем в сервисе 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» внизу страницы (в подвале сайта)?
- Как сделать кликабельным номер телефона?
- Как загрузить файл на свой сайт?
- Как передать сайт или страницу на другой аккаунт?
- Почему не видны изменения после публикации, а в предпросмотре есть?
Этот ответ был вам полезен?
Просмотры: 45337
Сообщить о нарушении прав
Если вы считаете, что пользователь Tilda Publishing нарушает ваши права, отправьте нам сообщение через форму
Как связаться с поддержкой
Для консультаций по функциям платформы используйте форму обратной связи в вашем личном кабинете или напишите на team@tilda.cc
Продажа товара с выбором параметров
В Тильде есть два способа добавления товаров — через Каталог товаров и через Контент блока. Добавление параметров в этих способах различается.
Через Каталог товаров можно добавить несколько вариантов товара, добавить необходимые свойства (в том числе фотографии) для всех вариантов и прописать их. Также кроме вариантов можно задать дополнительные опции, которые влияют на цену товара, например, опция подарочной упаковки или дополнительных аксессуаров.
Через Контент блока можно добавить только опции (параметры), которые работают так же как дополнительные опции в Каталоге, но их можно сделать аналогом свойств товара.
Добавление вариантов и опций через Каталог товаров
Посмотрите видеоурок о том, как добавить варианты и опции товаров или прочитайте подробную инструкцию ниже.
Варианты, дополнительные опции, характеристики — для чего они и чем отличаются?
Варианты товара — это уникальные наборы свойств товара, которые отличаются друг от друга. Чтобы сделать уникальный вариант, нужно добавить свойства (например, цвет, размер, и т.д) и создать вариант, указав ему конкретный цвет, размер, цену и любое другое свойство.
Дополнительные опции — это параметры, которые являются общими для всех вариантов товара. Например, каждому варианту можно добавить упаковку или дополнительную услугу. Каждая дополнительная опция может влиять на конечную цену товара
Характеристики — это параметры, которые общие для всего товара и его вариантов, но не влияют на его цену. Например, это может быть страна-производитель товара, материал.
Работа с редактором изображений
Редактор изображений — встроенный инструмент, позволяющий отредактировать загруженное на сайт изображение.
Обработать изображение можно в любом из блоков, где предусмотрено его наличие. Исключением являются блоки из категории «Магазин». Карточки товаров рекомендуется подготовить перед загрузкой на сайт.
Загрузка изображения и активация редактора
Выберите подходящий для вашей страницы блок, перейдите в меню «Контент» этого блока, и затем в разделе с изображением загрузите нужную картинку.
После успешной загрузки рядом с изображением появится иконка карандаша. При клике на нее в всплывающем окне откроется редактор.
Интерфейс редактора
Доступны базовые операции, которые можно произвести с изображениями: изменить размер, отразить по горизонтали и вертикали, обрезать, добавить текст, обработать фильтрами. Также вы можете отменить, вернуть, или полностью сбросить действия над изображением, если что-то пошло не по плану.
Если же вам требуется сложная обработка изображения, то мы рекомендуем воспользоваться специализированными графическими редакторами и после этого загрузить изображение на сайт.
Изменить размер
Вы можете задать собственное разрешение для изображения. Но необходимо учитывать исходный размер картинки. Можно уменьшить картинку без потери качества, но её увеличение уже грозит ухудшением детализации.
Размер можно указать вручную или установить галочку у параметра «Сохранить пропорции», чтобы система автоматически подбирала оптимальное разрешение.
Рекомендованный максимальный размер изображения для загрузки на сайт — 1680×900 пикселей. Подробнее о подготовке изображений перед загрузкой на сайт можно узнать в нашем справочном материале.
Обрезание изображения
Если требуется оставить только часть изображения, для этого можно воспользоваться специальным инструментом.
Вы сможете выделить поле на изображении, которое вы хотите оставить. Чтобы изменения сохранились, нажмите на кнопку «Применить» и затем на кнопку «Сохранить».
Также вы можете использовать готовые пропорции: 1:1, 3:2, 4:3, 5:4, 7:5, 16:9.
Ориентация изображения
В некоторых случаях для идеального сочетания текста и изображения достаточно его отразить по горизонтали или вертикали. Это можно сделать с помощью инструмента «Развернуть».
Поворот изображения
Если вы хотите повернуть изображение на определенный градус, то для этого откройте в редакторе соответствующий пункт.
С помощью ползунка можно задать любое значение от -360 до +360 градусов. Либо использовать шаг в 30 градусов.
Добавление текста
При работе с большинством блоков из нашей библиотеки вы можете добавить текстовый элемент отдельно от изображения. Для этого есть соответствующие поля в меню «Контент».
Но иногда может возникнуть необходимость добавить текст прямо в изображение. В этом случае на помощь придет инструмент «Текст».
После активации инструмента нажмите на любом месте изображения, чтобы появился контейнер с текстом. Контейнеру можно задать подходящий размер и изменить его наклон. Также добавленный текст можно отформатировать: изменить цвет, установить курсив, добавить жирности, или подчеркнуть слово.
Дополнительно можно задать выравнивание текста по центру, левой и правой сторонам.