Перевернутые картинки на Safari (iphone, ipad)

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

Суть заключалась в том, что на устройствах iphone и ipad в браузере Saffari картинки отображались вот так:

 

Перевернутая картинка в браузере safari iphone

iphone safari перевернутое изображение

Перевернутая картинка в браузере safari iipad

ipad safari перевернутое изображение

Но на моих 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 - перевернутое изображение

Exif — перевернутое изображение

Вот вам картинка с Exif- ориентацией для примера, сохраняйте и играйте:

Картинка вверх ногами

Картинка на самом деле вверх ногами

 

 

 

 

 

 

 

 

 

 

На этом моя мистическая история по перевернутым изображениям в html закончилась. Я успешно отредактировал все изображения и загрузил на сайт…

Всем спасибо и до скорой встречи!

Желаю всем разработчикам меньше тратить время на решение таких задач и просвещаться ещё больше в нашей с Вами информационной сфере!

Кстати вот сайт, кому интересно:

http://brewsuccess.ru/

 

 

Размещено в Блог, Веб-разработка, Лайфхаки.