Дело было так, обратился ко мне заказчик с неизвестной мне до сих пор проблемой, с которой я столкнулся в первый раз.
Суть заключалась в том, что на устройствах iphone и ipad в браузере Saffari картинки отображались вот так:
Но на моих windows и android устройствах всё было нормально:
Грешил на кэш браузера у клиента, на загруженные недописанные стили, а точнее какой-нибудь стиль ccs: rotate. Но ни одного упоминания rotate в css-файлах я не нашел. После чистки кэша у заказчика проблема осталась…
Мистические перевернутые картинки
Единственное, что помогло понять проблему, находилось на этом сайте:
https://wtf.dirty.ru/pereviornutoe-izobrazhenie-422450/
Вкратце:
Добрый вечер!
Я тут давеча опубликовал пост, по которому, если пройдёте вы увидите ненормально перевёрнутую фотографию.
Если же вы зайдёте по ссылке с iOS версии Safari, вы увидите, что всё нормально, и фотография повёрнута нормально. Скриншоты опубликую в комментариях.
Собственно возникает противоречие — с iOS нормально, а с других браузеров не очень.
Дабы прояснить ситуацию хочу сообщить, что публиковал пост с iPad, и загружал только что сфотографированную вертикально ориентированную фотографию. Предварительный просмотр показал что всё хоккей.
И ответ:
В exif смотрит вам проклятый сафари и поворачивает. В реальности ваша картинка на боку, любой просмотрщик, не читающий теги, покажет.
Итак, аббревиатура exif была прочитала мною в первый раз.
EXIF (Exchangeable Image File Format) — стандарт, позволяющий добавлять к изображениям и прочим медиафайлам дополнительную информацию (метаданные), комментирующую этот файл, описывающий условия и способы его получения, авторство и т. п. Получил широкое распространение в связи с появлением цифровых фотокамер. Информация, записанная в этом формате, может использоваться как пользователем, так и различными устройствами, например, принтером. Стандарт EXIF является чрезвычайно гибким (например, позволяет сохранить полученные с приёмника GPS координаты места съёмки) и допускает широкое развитие — как правило, фотоаппараты добавляют к файлу информацию, специфичную только для данной конкретной камеры. Правильно интерпретировать такую информацию могут только программы от изготовителя фотоаппарата.
Про то, что есть специальные теги/атрибуты у музыкальных файлов(Жанр, автор, год, альбом) и у фотографий(GPS, Время), я знал, но никогда не задумывался о том, что фотографии (JPEG) — могут содержать ориентацию фотографии в зависимости от того, как мы с Вами держим телефон…
Гарантии, что предметы на изображении всегда будут повернуты так, как мы их видим – нет. Достаточно повернуть камеру смартфона на любой угол – и вот вам изображение, которое особо нигде не используешь. Но хочется, чтобы дома и люди стояли на земле, а птицы летели по небу. На помощь приходить EXIF – формат, позволяющий добавлять дополнительную информацию к изображениям.
Ещё одно подтверждение того, что программисты и сис. админы должны разбираться во всём, что происходит в сфере компьютеров и портативных устройств.
Открыв само изображение в новой вкладке браузера, я был крайне удивлен:
EXIF orientation или исправляем перевернутые изображения.
Сохранив картинку на рабочий стол, дефекта опять не наблюдалось… Открыв пункт «Изменить в GIMP», он тут же спросил меня, а не хочу ли я перевернуть данное изображение…
Вот вам картинка с Exif- ориентацией для примера, сохраняйте и играйте:
На этом моя мистическая история по перевернутым изображениям в html закончилась. Я успешно отредактировал все изображения и загрузил на сайт…
Всем спасибо и до скорой встречи!
Желаю всем разработчикам меньше тратить время на решение таких задач и просвещаться ещё больше в нашей с Вами информационной сфере!
Кстати вот сайт, кому интересно: