Почему фото после загрузки лежит на боку

Вы снимаете товар на телефон, поворачиваете аппарат, нажимаете спуск. На экране кадр стоит ровно. В форму загрузки маркетплейса он приезжает лежащим на боку — тот же файл, повёрнутый на четверть оборота.

Телефон при этом не сломался. Картинка вполне может лежать на боку внутри файла — и лежит там с самого момента съёмки. Телефон всё равно показывает её вам правильно. Форма загрузки — нет.

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

Камера сохраняет картинку так, как её увидел сенсор

Сенсор — это жёстко закреплённый в телефоне прямоугольник; он не поворачивается вместе с вами. Снимите вертикальный кадр — камера всё равно запишет горизонтальный кадр, а объект внутри него будет лежать на боку.

Многие камеры не переписывают миллионы пикселей, а вместо этого записывают в метаданные небольшое число, означающее «перед показом поверни это на четверть оборота». Другие поворачивают сами пиксели при сохранении и помечают файл как уже стоящий ровно — поэтому два телефона ведут себя с одним и тем же кадром по-разному. В JPEG это число — тег Exif 274, Orientation, и он умеет описывать не только повороты, но и зеркальные кадры.

Одни программы учитывают флаг, другие его игнорируют

Современные браузеры его читают. У CSS-свойства image-orientation начальное значение — from-image; MDN формулирует прямо: «Информация EXIF, содержащаяся в изображении, используется для соответствующего поворота изображения». Во всех браузерах это работает с апреля 2020 года.

Всё, что браузером не является, тег вполне может игнорировать. Веб-стандарты сошлись на том, чтобы его учитывать, но множество серверных декодеров, генераторов миниатюр и графических библиотек написаны раньше этого схождения и в тег не заглядывают вовсе — и ничто их к этому не обязывает.

Так что вопрос никогда не звучит как «лежит ли моё фото на боку», а звучит как «прочитала ли флаг та программа, которая его показывает». Ваша галерея читает. Генератор миниатюр на маркетплейсе — может и нет.

Поворот в галерее иногда переписывает только флаг

Нажмите кнопку поворота — и результат зависит от приложения. Произойти может две совершенно разные вещи.

• Приложение меняет значение ориентации и не трогает пиксельные данные. Мгновенно, без потерь и незаметно для всего, что игнорирует флаг: ваше фото по-прежнему лежит в файле на боку.
• Приложение перекодирует: декодирует пиксели, поворачивает их и записывает новый файл со сброшенным флагом. Поворот впечатан намертво и переживает что угодно. Для PNG или WebP без потерь это не стоит ничего; для JPEG это обычно стоит одного поколения перекодирования — заплатить один раз стоит, повторять не стоит.

Каким путём пойдёт приложение, по кнопке не понять, и от версии к версии одного и того же приложения это менялось. Не предполагайте ничего; проверяйте результат.

Хуже инструмент, который поворачивает пиксели, но копирует старые метаданные без изменений: флаг всё ещё говорит «поверни», пиксели уже повёрнуты, и учитывающие флаг программы поворачивают фото дважды.

Как понять, в каком состоянии ваш файл

Вглядываясь пристальнее, это не решить — только проверив то, что не является превью.

• Сравните форму с числами. Если фото, которое выглядит вертикальным, в свойствах файла числится более широким, чем высоким, значит пиксели горизонтальные, а работу делает флаг. Некоторые просмотрщики поправляют и эти числа, поэтому расхождение доказывает больше, чем совпадение.
• Прочитайте сам флаг. Браузеры, настольные просмотрщики и миниатюры в файловых менеджерах сегодня почти все учитывают тег, так что согласие между ними не доказывает ничего. Работайте с копией, а не с оригиналом, и откройте её в просмотрщике Exif, чтобы прочитать Orientation напрямую. Любое значение, кроме 1, которое часто показывают как «Normal», означает, что работу делает флаг, а пиксели стоят не ровно.

Разберитесь с ориентацией раньше, чем файла коснётся что-то ещё

remover.bg принимает PNG, JPEG и WebP размером до 25 MB и возвращает новый файл уже без фона. Это сервис для удаления фона, а не фоторедактор: поворот — дело фоторедактора в вашем телефоне или дизайн-редактора, до загрузки.

Порядок здесь важен, потому что вы создаёте новый файл. И PNG, и контейнер WebP умеют где-то хранить Exif — спецификация WebP от Google допускает метаданные «в чанках 'EXIF' или 'XMP '», — но запишет ли их в свой экспорт тот редактор, в котором вы поворачивали, решает он, а не вы. Впечатайте поворот в пиксели — и терять будет уже нечего. Про этот формат рассказывают наши заметки про загрузку и экспорт WebP без конвертации.

Рабочий порядок:

1. Поверните в редакторе и экспортируйте копию, а не нажимайте поворот в галерее.
2. Проверьте значение Orientation у этой экспортированной копии.
3. Загрузите её на удаление фона.
4. Поставьте вырезку на сплошной цвет или на собственную фотографию, добавив тень, если объект должен стоять на поверхности.

Командам, которые прогоняют объёмы пакетами через HTTP API для удаления фона, стоит сначала нормализовать ориентацию в конвейере: один лежащий на боку исходник превращается в одну лежащую на боку вырезку — и так тысячу раз. Ориентация лежит за рамками правил фона в нашем гиде по требованиям Amazon к фото товара, но карточка, лежащая на боку, выглядит небрежно, что бы вы ни сделали правильно во всём остальном.

Привычка, которую стоит завести

Доверяйте файлу, а не превью. Поворачивайте через экспорт и один раз прочитайте Orientation на копии — и тогда фото будет стоять ровно и в браузере, и в генераторе миниатюр, и в очереди печати.