Фото на сайте поворачивается после загрузки: что проверить

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

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

Одно фото может иметь несколько представлений

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

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

Запишите адреса или внутренние обозначения разрешённых тестовых файлов и условия просмотра. Не ориентируйтесь только на одинаковое имя: под ним могут находиться разные версии. Также не считайте одинаковый внешний вид доказательством совпадения данных. Для приёмки важно связать наблюдение с конкретным представлением и этапом.

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

Ориентация и поворот пикселей — разные действия

MDN описывает свойство image-orientation и использование информации EXIF для соответствующего отображения. Поэтому файл и то, как он выглядит в просмотрщике, стоит рассматривать раздельно. Если один участок учитывает сведения ориентации, а другой обрабатывает изображение иначе, результаты могут различаться. Это нужно проверять на выбранных форматах и средствах проекта.

При нормализации обработчик может привести изображение к ожидаемому положению и согласовать сведения о нём. Например, в документации sharp autoOrient описан как применение EXIF Orientation с последующим удалением этой метки. Поддерживаются и отражённые варианты; другие места хранения ориентации требуют отдельного учёта. Это пример конкретного инструмента, а не утверждение о любой установленной библиотеке.

Не задавайте всей группе файлов ручной поворот по признаку «снято на телефон». В архиве могут быть разные исходные состояния. Исправление, полезное одному изображению, повернёт другое неправильно. Разработчику нужен контрольный набор с известным ожидаемым положением, а не команда изменить весь каталог одинаковым углом.

Порядок обработки входит в требования

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

Для учебного теста возьмите картинку с заметно различимыми верхом, низом и сторонами. Затем проверьте итоговую миниатюру и крупный вариант. Так легче увидеть не только поворот, но и отражение. Один симметричный предмет на однотонном фоне способен скрыть ошибку, хотя число файлов и размеры выглядят ожидаемыми.

Не путайте нормализацию ориентации с художественным поворотом, который выбрал сам пользователь. Если в редакторе есть такое действие, оно должно иметь отдельный смысл. Повторное открытие и сохранение не должно автоматически отменять пользовательское решение или применять его ещё раз без основания. Сценарий редактора требует собственного проверочного примера.

В учебной проверке можно отдельно записать ширину и высоту результата. После поворота на четверть оборота прямоугольник 1600 на 1200 получает другое соотношение сторон. Это геометрический пример, а не характеристика реального снимка. Если следующий этап использует прежние размеры, рамка может оказаться рассчитана для другого положения. Сверяйте размеры того представления, на котором действительно выполняется операция, а не случайно взятые числа из первой загрузки. Достаточно небольшого контролируемого примера без обработки большого архива.

Удаление метаданных не заменяет проверку

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

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

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

Почему стиль страницы не исправляет скачивание

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

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

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

Составьте небольшую матрицу приёмки

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

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

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

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