Какой размер и вес фото нужен сайту: цифры по местам на странице и как сжать на телефоне

Что rillo делает с фото из галереи телефона?

Файл до 10 МБ rillo принимает, поворачивает по метке ориентации и сохраняет как WebP не шире 2400 пикселей, а рядом кладёт копии шириной 480, 960 и 1600 пикселей. Снимок из галереи на 4–8 МБ проходит по весу с запасом, поэтому сжимать его перед загрузкой не нужно.

Возьмём вымышленный пример: домашний кондитер в Саранске снимает торты на телефон и собирает страницу с шестью тортами на заказ. Снимок 4000 × 3000 пикселей — это 12 миллионов точек. rillo сжимает его до 2400 × 1800: обе стороны уменьшаются вместе, пока длинная не уложится в 2400. Вертикальный снимок 3000 × 4000 станет 1800 × 2400.

Копии rillo считает по ширине готового снимка. Копию в 480, 960 или 1600 пикселей он делает, только если снимок шире её. Оригинал в 700 пикселей получит одну копию, 480. Снимок шире 1600 получит все три. Страница из шаблона ставит сам сохранённый снимок, без списка копий, так что телефон и компьютер получают одну и ту же картинку.

Для снимка с телефона rillo отказывает в четырёх случаях. Файл тяжелее 10 МБ. В снимке больше 30 миллионов пикселей. Формат не из тех, что предлагает окно выбора: JPEG, PNG, WebP и AVIF. Или телефон сохранил снимок как HEIC либо HEIF: из этого семейства rillo принимает только AVIF.

Веса в килобайтах, к которому rillo стремится, в коде нет. Ширина ограничена, качество WebP стоит на 85, а сколько весит результат, зависит от самого снимка.

Какие рамки ждут фото в шаблонах rillo?

В шаблонах rillo рамку задаёт пропорция, а не пиксели: фото заполняет её целиком, а всё, что не поместилось, срезается по краям. Исключение одно — «Галерея»: она показывает снимок целиком. Ниже рамки, как они записаны в стилях шаблонов.

Рамки заданы в самих блоках, и пропорцию не поменять: оформление меняет цвета, шрифты и шапку, а не рамки. Если снимок не помещается в рамку, поставьте его в блок, где он встанет целиком, — в «Галерею».

Колонка с блоками на компьютере не шире 976 пикселей, на телефоне это экран без полей по 16 пикселей с каждой стороны. Шире колонки на странице только фон шапки.

Как снять кадр, чтобы рамка его не испортила?

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

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

Кондитер из Саранска снимает трёхъярусный торт. Он высокий, и в слайдере рамка 4:3 срежет верхний ярус. Поэтому высокие торты кондитер ставит в «Галерею»: там снимок встаёт целиком, вертикальный так вертикальный. Для слайдера торт снимают с запасом сверху и снизу.

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

Нужно ли сжимать фото заранее и как это сделать на телефоне?

Для rillo заранее сжимать не нужно, пока файл меньше 10 МБ, в нём не больше 30 миллионов пикселей и он не в HEIC. В остальных случаях помогает редактор в галерее телефона: он обрезает кадр и уменьшает снимок.

1. Откройте в галерее сведения о снимке: пункт у телефонов называется по-разному. Там видны вес и название файла. Если вес больше 10 МБ или расширение .heic, идите дальше. Иначе снимок можно загружать как есть.
2. Обрежьте кадр под рамку из таблицы: 4:3 для слайдера и карточки товара, квадрат для портрета в шапке. Если редактор предлагает готовые пропорции, выберите нужную, если нет — обрежьте от руки.
3. Сохраните результат как новую копию. Оригинал в галерее не трогайте.
4. Если нужен JPEG вместо HEIC, посмотрите, есть ли при сохранении выбор формата или переключатель в настройках камеры. Названия у телефонов разные.
5. Отправляя снимок на компьютер, учтите: «как файл» оставляет вес прежним. Если нужно меньше, отправьте «как фото» и сравните вес полученного файла с оригиналом.

С компьютера проще: снимок уменьшает и пересохраняет в WebP или JPEG страница «Сжать фото». Она работает в браузере и никуда файл не отправляет.

Сильно уменьшать снимок по пикселям тоже не нужно: rillo сам уложит его в 2400 пикселей. Узкий оригинал, например в 700 пикселей, в широкой рамке на компьютере и на экране с высокой плотностью точек выйдет мыльным.

Что Google пишет про вес картинок?

Google называет картинки частой причиной тяжёлых страниц и рекомендует адаптивные изображения. Из его рекомендаций по изображениям: «Рекомендуем решить эту проблему с помощью новейших методов оптимизации и адаптивных изображений». Проблема здесь — вес страницы.

Адаптивные изображения Google описывает через атрибут srcset. Через него можно перечислить несколько версий одного изображения, в первую очередь для экранов разных размеров. Копии в трёх ширинах rillo делает для каждого загруженного фото, но страница из шаблона такого списка не пишет и ставит один сохранённый снимок.

Насколько быстрее станет сайт и что это даст в поиске, Google в этой рекомендации не обещает, и мы не обещаем тоже. Скорость своей страницы проверяйте в PageSpeed Insights: на него Google ссылается там же.

А иконка сайта и картинка для ссылки?

Иконку сайта и картинку для ссылки rillo загружает отдельно от фото страницы и режет по другим правилам. Квадраты для иконки и кадр 1200 × 630 для соцсетей он делает из вашего файла сам.

Из иконки rillo делает три квадрата PNG: 32, 48 и 180 пикселей. Картинку для соцсетей он сжимает до 1200 × 630 пикселей в JPEG, обрезая лишнее. Края могут обрезать мессенджеры. Подсказка в настройках об этом предупреждает. Про выбор иконки подробнее — в статье про favicon для сайта.

Что проверить перед загрузкой?

Перед загрузкой посмотрите на рамки в шаблоне, на вес и расширение файла и на запас вокруг предмета, а после неё откройте сайт на телефоне и на компьютере. Это пять шагов и несколько минут.

1. Откройте шаблон и посмотрите рамки шапки и блоков.
2. Выберите из галереи по одному снимку на каждое место и проверьте, что вокруг предмета есть запас.
3. Посмотрите вес и расширение: больше 10 МБ или .heic — пересохраните.
4. Загрузите снимки в редактор и откройте опубликованный сайт и с телефона, и с компьютера: кадр срезается по-разному.
5. Если нужное срезано, перенесите снимок в «Галерею» или переснимите с запасом. Остальной порядок проверки — в руководстве перед запуском, а примеры страниц с большим числом фото собраны в портфолио.