[Перевод] HTML5 Адаптивные изображения



    Адаптивные изображения одна из проблем Responsive Web Design. Возможно вы начали использовать high-res изображения для дисплеев с высоким разрешением и уменьшать их размер для устройств с меньшим разрешением дисплея, что попросту съедает трафик без какой либо пользы для владельцев устройств с дисплеями с небольшим разрешением. Или все так же используете изображения невысокого разрешения, которые ужасно смотрятся на больших экранах и дисплеях с высоким разрешением. Для решения этой проблемы было создано множество хаков.

    Я был расстроен тем фактом что до сих пор нет спецификации адаптивных изображений. В ноябре 2011-го я предложил тег picture. Данный элемент использует механизм тега video в паре с Media Queries:

    <picture alt="angry pirate">
       <source src=hires.png media="min-width:800px">
       <source src=midres.png media="min-width:480px">
       <source src=lores.png>
       <!-- для браузеров не поддерживающих тег -->
       <img src=midres.png alt="angry pirate">
    </picture>
    


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

    Тем не менее, в январе, редактор HTML5, Ян Хиксон (Ian Hickson), написал:

    Зачем делать это для тега img? Обычно элемент img используется для изображений в контенте, который вам не нужно делать адаптивным.


    Позже Эдвард О'Коннор (Edward O'Connor) из Apple предложил другой метод, использовать атрибут srcset для элемента img. Это дополняет аналогичное предложение нового CSS свойства image-set, которое уже добавлено в WebKit:

    <img src="foo-lores.jpg"
    srcset="foo-hires.jpg 2x, foo-superduperhires.jpg 6.5x"
    alt="decent alt text for foo.">


    Значения «2х» и «6.5х» сообщают браузеру относительное разрешение; foo-hires.jpg в 2 раза больше оригинального изображения, а foo-superduperhires.jpg в 6.5 раз. Через пару дней это предложение было добавлено в спецификацию.

    Между предложенным элементом picture и атрибутом srcset есть два основных различия. Самым очевидным является то, что атрибут srcset используется в элементе img, который изначально предназначен для изображений. И это замечательно.

    Второе различие в том, что использование атрибута srcset не предусматривает Media Queries. Хотя с помощью Media Queries возможно устанавливать параметры для любого разрешения, ориентации устройтсва, dpi, глубины цвета и соотношения сторон. С другой стороны, задавать Media Queries для каждого варианта изображения может привести к увеличению кода в несколько раз.

    О'Коннор писал:

    Почему я предлагаю коэффициент масштабирования, а не Media Queries? Media Queries работают за счет данных User Agent'а, мы же обсуждаем взаимоотношения между разными вариантами изображений. Так же, User Agent должен иметь возможность свободно выбирать вариант изображения которое лучше всего подходит для текущего состояния, учитывая не только параметры заданные с помощью Media Queries, но и размеры заданные элементу img с помощью CSS, а может даже и текущую величину масштабирования страницы.


    Мне нравится идея дать возможность браузеру выбирать наиболее подходящий вариант изображения базируясь на таких данных как скорость приема информации, задержка, ppi, ориентация устройства и т.д. Идея в том, чтобы освободить разработчика от необходимости описывать условия при которых должен задействоваться тот или иной вариант изображения. Нужно указать лишь данные о изображении, размер и плотность, а браузер уже сам решит что лучше использовать в данной ситуации.

    Предложенный атрибут srcset имеет два недостатка. Первый очень субъективный, но многие со мной согласятся: спецификация, какой она является сейчас имеет ужасный синтаксис:

    <img src="face-600-200-at-1.jpeg" alt=""
    srcset="face-600-200-at-1.jpeg 600w 200h 1x,
    face-600-200-at-2.jpeg 600w 200h 2x,
    face-icon.png 200w 200h">


    Конечно же это может быть и должно быть исправлено. Дело не только в эстетике кода. Если синтаксис слишком запутан, то он будет использоваться не верно.

    Вторая проблем состоит в том, что разработчики не желают лишится возможности управления процессом. Это вопрос потери доносимого смысла визуального контента (читайте абзац «Do I care about art direction?») и многие убеждены что Apple не подумали об этом. Хотя сторонники srcset придерживаются противоположного мнения.

    Источник: HTML5 adaptive images: end of round one

    Полезные ссылки:
    Немного о холиваре между разработчиками
    Which responsive images solution should you use?
    Share post

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 57

      0
      Можно предложить ещё два варианта:
      — вынести в css, и использовать там media queries;
      — использовать формат изображений, которые в начале файла содержат менее детализированное изображение, а при догрузке — более, и оставлять решение по поводу достаточности неполной загрузки на совести браузера.
        0
        Для второго, кстати, есть поддержка в PNG, так называемый Adam7.
        • UFO just landed and posted this here
          +13
          В дальнейшем для создания переводов рекомендую прибегать к гиперссылке http://habrahabr.ru/topic/add/translation/, тем обеспечивается специальное оформление (особый значок у заголовка блогозаписи, имя автора и гиперссылка на первоисточник в хвосте блогозаписи).
            +2
            К отминусовавшим мой комментарий просьба: выскажите возражения, огласите пункты несогласия с моей рекомендацией.
              +1
              Спасибо. В следующий раз обязательно воспользуюсь.
              +1
              По существу я согласен со сторонниками srcset: если для каждого варианта сочинять media query, то легко можно задолбаться — пускай уж лучше браузер решает дело автоматически.

              Брюс Лоусон (Bruce Lawson) также прав в своём мнении о синтаксисе srcset: можно и нужно улучшить написание.
                0
                Насчет «пускай лучше браузер сам решает» — не согласен.
                То есть, конечно, какое-то разумное его поведение по умолчанию приветствуется.
                Но и возможность при необходимости рулить вручную должна быть обязательно.
                  0
                  пускай уж лучше браузер решает дело автоматически.
                  И каждый браузер будет решать, что лучше для себя.
                  Именно так, когда-то вели себя некоторые браузеры и из-за этого верстальщики сейчас мучаются.
                    0
                    Нет, почему же. Автоматически, но по стандарту.
                      0
                      Вы забыли в кавычки обернуть «по стандарту». А так, если по стандарту, то всё ок.
                        0
                        Ну я и имею в виду, что в стандарте должно быть чётко прописано, как браузер должен автоматически обрабатывать эту ситуацию.
                    0
                    Использование media query осложняется ещё тем, что текст страницы (а значит и значение атрибута srcset скрипт может генерировать на лету, а вот генерируемый скриптом на лету css — это то, чего хотелось бы избежать.

                      0
                      Дать возможность браузеру выбирать изображение основываясь на скорости интернета и ряде других показателей на самом деле очень хорошая идея. Но и лишать человека возможности задавать некие пределы и исключения не есть хорошо. Мне нравится вариант с тегом picture т.к. код в нем легко читаем, в то же время использование родного тега img кажется более приемлемым вариантом. Возможно стоит использовать идею атрибута srcset, но в рамках структуры тега picture.
                      +1
                      Почитал комментарии к первоисточнику.

                      Там ад.

                      Оказывается, в WhatWG ещё не решили окончательно, что такое «600w 200h 2x» вообще должно означать.

                      Одна версия: «600w 200h» означает размер картинки (600×200).

                      Другая версия: «600w 200h» означает, что картинка предназначается для устройств, на которых viewport (видимая часть вебостраницы) меньше шестисот пикселов по ширине и меньше двухсот пикселов по высоте.

                      Одна версия: «2x» означает, что размер картинки можно считать удвоенным.

                      Другая версия: «2x» означает, что картинка предназначается для устройств с удвоенным размером виртуального пиксела по сравнению с физическим (то есть для сетчаточных дисплеев нового iPhone и нового iPad).
                        +2
                        Опять затыкают дыры в логике, вместо того, чтобы сесть и нормально на будущее продумать все. Ретины, кретины, и бета-каротины, какая разница какой именно дисплей? Разрешение не может быть основой для выбора типа изображений. Нужен кардинально другой подход, например тот же ppi гораздо больше расскажет про необходимый размер картинки.
                        • UFO just landed and posted this here
                            0
                            Его нигде не нужно брать, с ним нужно работать на уровне UA. Можно его передавать в заголовках HTTP запросов, можно добавлять в строку User Agent'а, можно вообще не заморачиваться, и пусть браузер сам из системы вытаскивает данные и применяет нужное условие.

                            Тут еще одна мысль возникла, что строка UA не стандартизировани ни капли, каждый строчит то, что хочет. А не помешало бы.
                            • UFO just landed and posted this here
                                0
                                Это не сложно исправить. Производителей мобильных OS не так много (именно там танцы с разрешениями актуальны)
                                • UFO just landed and posted this here
                                    0
                                    Все равно не вижу проблемы. Производителей ОС можно пересчитать по пальцам.
                                    • UFO just landed and posted this here
                                        0
                                        Производителям мониторов добавить одно значение в список возвращаемых не проблема. Главное — политическая воля
                        • UFO just landed and posted this here
                          +4
                          Переосмысление атрибута lowsrc.
                            0
                            Не буду говорить на счёт остального, но у подхода с srcset есть одно преимущество в сравнении с media-queries — браузер точно знает, какая картинка самая большая по размеру и при желании пользователя сохранить изображение на компьютер сохранит его именно в лучшем качестве.
                              0
                              Это не преимущество, это возможный побочный эффект, не более.
                                +1
                                Почему вдруг не преимущество? Тут обсуждают как сделать так, чтобы на редких ретина-дисплеях изображение смотрелось получше, а я говорю о том, что абсолютно все пользователи смогут сохранять на компьютер изображения в высоком качестве вместо низкого
                                  0
                                  Мне почему-то кажется, что проблема не столько в картинках которые вставлены в текст, а проблема в картинках которые используются как эелементы дизайна. А их сохранять не надо.
                                  Если моё мнение не правильное, то прошу прощения.
                                  • UFO just landed and posted this here
                                      +1
                                      Да, здесь перевод явно получше будет.
                                      • UFO just landed and posted this here
                                    0
                                    Неее, это плюшки!)
                                    0
                                    Вообще, браузер, наверное, будет предлагать выбор, какое именно изображение сохранять.
                                      0
                                      Можно и так. Главное, что будет возможность сохранить изображение в хорошем размере и качестве.
                                    0
                                    Сам я, наверное, предпочёл бы вариант, аналогичный реализованному в теге video:
                                      +3
                                      Извините, случайно отправилось.

                                      <img src="" width="" height="" alt="">
                                      	<source src="" viewport="800px landscape">
                                      	<source src="" viewport="480px portrait">
                                      	<source src="" viewport="320px landscape">
                                      </img>
                                      


                                      Вот такой вариант. На атрибуте viewport, впрочем, не настаиваю. Но какой-то атрибут, управляющий загрузкой нужного изображения — должен быть.
                                      • UFO just landed and posted this here
                                          +3
                                          Я вообще не понимаю, зачем пользователя заставлять качать определённое изображение. Он сидит на iPad15 с размером пикселя 5х, но сейчас на Луне, а там только 7g интернет, который медленный. Пусть он качает изображение низкого качества. А я сижу на старом ноутбуке с хорошим инетом и хочу при увеличении масштаба видеть хорошее качество. Так дайте мне большую картинку несмотря на плохой ноут.
                                          • UFO just landed and posted this here
                                              0
                                              Только вот смысла в ней не особо много. Всегда должна быть возможность вручную управлять размером контента.
                                              • UFO just landed and posted this here
                                                  0
                                                  Это надуманная проблема. На какой процент эта возможность улучшит юзабилити? На ничтожно малый. Зато проблем пользователю добавит неслабо. Запустил торренты, загрузил канал. Браузер решил, что скорость низкая, начал грузить картинки в рвотнорефлексном качестве. Пользователя вырвало на клавиатуру и он или закрыл страницу, дабы не видеть этот ужас, или вручную придется перегружать картинки в более высоком качестве, или отключать режим «умной загрузки». Как результат, эта фича будет отключена насовсем. Хотели как лучше, а получилось как всегда
                                                  • UFO just landed and posted this here
                                                      0
                                                      С развитием tab'ов в браузерах «пялиться в белый экран» становится все менее актуальной проблемой, ибо загрузка контента почти всегда идет на фоне.
                                                      • UFO just landed and posted this here
                                                          0
                                                          Лично у меня кнопка Back припорошена пылью. Я все ссылки открываю в новом табе
                                                          • UFO just landed and posted this here
                                            • UFO just landed and posted this here
                                              0
                                              А, про это свойство img я не подумал. Ну да. Впрочем, в оригинале предлагается picture с похожей структурой. Просто мне не нравится идея плодить теги. Их и так море, и большинство из них не используется.
                                              • UFO just landed and posted this here
                                            0
                                            Ребят, я немного не в теме, но начал интересоваться.

                                            Подскажите пожалуйста, а это для статических размеров?

                                            Ну к примеру, открыли мы изображение на ПК с разрешением 1280 — размер изображения 120 px (к примеру). Открыли на другом ПК с разрешением 1024 — 100 px (к примеру). Открыли на телефоне — 30 px.

                                            А если мы будем менять ширину (размер) окна — будет ли автоматически динамически меняться размер изображений / размера шрифта и тд?

                                            Видел библиотеку одну, но она жутко тормозная. Клиент вешает достаточно сильно.
                                              0
                                              В простой адаптивной вёрстке, если менять размер окна браузера, то при достижении размеров, указанных в media query картинка будет заменяться. То есть, открыли в 1280 — картинка 120px, начали уменьшать — она не меняется (конечно, может меняться в размерах блок, в который положена картинка, но при этом сама картинка остаётся той же). Уменьшили до 1024 — картинка резко сменилась на ту, которая 100px, начали ещё уменьшать, до телефонных (предположим, 480px), картинка заменилась на ту, что 30px. И наоборот, открыли в мелком разрешении, начали увеличивать, картинка будет меняться на ту, что побольше. Загрузка нужной картинки (по крайней мере, мои эксперименты с браузерами так показывают) происходит тогда, когда окно становится нужного размера. То есть, если размер не менять, не нужные картинки не подгружаются.
                                                0
                                                То есть по сути — перескакивает. В ходе экспериментов выявлены небольшие поддормаживания в эти моменты. После появления в кэше становится, естественно лучше.

                                                Немного поясню.
                                                Не так давно стояла задача сделать динамическое изменение, поэтому смотрели в эту сторону, но в итоге пришли к JS коду, который пересчитывал.

                                                Грубо и плохо, но другого элегантного решения (не дискретного, а полноценного) найти не удалось.

                                                Если подскажете — буду признателен.
                                                  0
                                                  SVG не пробовали?
                                                    0
                                                    Нет. SVG не пробовал, но там задача чуть шире — в том числе масштабируется и текст.

                                            Only users with full accounts can post comments. Log in, please.