Размер в пикселях
Не загружайте 5000 пикселей для карточки шириной 400. Большой исходник увеличивает вес и заставляет браузер выполнять лишнюю работу. Для Tilda сама платформа рекомендует сокращать крупные изображения минимум до 1680 пикселей по большей стороне.
Форматы
| Тип | Чаще подходит |
|---|---|
| Фотография | JPEG/WebP |
| Прозрачная графика | PNG/WebP |
| Логотип и простая векторная графика | SVG при корректной подготовке |
Первый экран
Изображение первого экрана часто является крупнейшим элементом страницы и влияет на LCP. Используйте достаточно четкий, но оптимизированный файл. Не делайте фон тяжелее нескольких следующих экранов вместе.
Нужно ли 2x
Для мелких интерфейсных изображений повышенная плотность может быть оправдана. Для огромного фонового фото механическое удвоение размеров часто создает слишком тяжелый файл без заметной выгоды.
Вес
Смотрите на итоговую страницу, а не на жесткую цифру для каждого файла. Десять изображений по 300 КБ могут быть тяжелее одного изображения первого экрана весом 500 КБ. Оптимизируйте общий водопад.
Alt
Alt описывает смысл изображения для доступности и поиска. Не превращайте его в список ключей и не заполняйте декоративные элементы искусственным текстом.
Практика Tilda
Платформа подробно объясняет зависимость веса от пикселей и содержания в инструкции по изображениям.
Контроль после запуска
- определите фактическую ширину изображения в макете;
- отделите фотографии от прозрачной графики;
- проверьте изображение первого экрана как потенциальный LCP-элемент;
- не используйте PNG для обычных фотографий;
- суммируйте вес всех изображений первого экрана;
Оценивайте ресурс по роли и визуальной площади. Главная цель - быстрый первый экран и разумный общий объем страницы при достаточном качестве.
Частый источник проблемы
Универсальное правило вроде каждое изображение до 200 КБ часто приводит к бессмысленным компромиссам. Маленькая иконка в 150 КБ слишком тяжелая, а качественное изображение первого экрана весом 350 КБ может быть вполне оправдано.
Размер файла должен исходить из контейнера на сайте
Фото 6000×4000 пикселей не становится полезнее от того, что показывается в карточке шириной 600 пикселей. Перед загрузкой определите максимальный реальный размер изображения с учетом экранов высокой плотности. Для большинства контентных картинок запас в два раза по ширине уже достаточен.
Формат выбирайте по содержимому: фотографии хорошо сжимаются в WebP/JPEG, графика и прозрачность могут требовать PNG, простые иконки - SVG. Но формат не спасет, если исходник в несколько раз крупнее контейнера.
Контроль качества
Мы проверяем резкость на реальном экране, вес переданного файла и отсутствие заметных артефактов. Особое внимание - первому экрану, потому что его картинка часто становится LCP. Для Tilda дополнительно учитывайте автоматическую адаптивную обработку. Связанные материалы: ручное сжатие, оптимизация изображений на Tilda и медленный первый экран.
Универсального лимита в килобайтах нет
Один и тот же вес воспринимается по-разному для фоновой фотографии, логотипа и миниатюры товара. Ориентируйтесь на размер контейнера, плотность экрана и визуальную значимость изображения. Файл должен быть достаточно четким в реальном блоке без лишнего запаса разрешения.
После публикации откройте Network и сравните фактически загруженный размер с тем, что видит человек. Если миниатюра тянет файл на несколько мегабайт, проблема очевидна независимо от формата.
Как выбирать изображения без универсальных лимитов
Правильное изображение имеет размер, близкий к реальному отображению, подходящий формат и достаточное качество без лишнего веса. Оптимизировать нужно страницу целиком.
