Пользователь
0,0
рейтинг
10 марта 2012 в 11:28

Разработка → Адаптируем графику под Retina экран

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

Однако, совсем недавно Apple дала нам iPad 3 небольшую фору, для того, чтобы привести дела впорядок. iPad'ом уже пользуются вполне себе полноценно, поэтому сайты должны выглядеть на нем ничуть не хуже, чем на ноутбуке или стационарном компьютере. И я считаю, что iPad 3 — это лишь первый шаг к полноценному внедрению Retina экранов в те же ноутбуки, а за ними и в стационарные мониторы. Apple уже готовит свою OS для Retina, у Windows 8 скорее всего с этим тоже проблем не будет, с их новым подходом в дизайне интерфейсов.


Теперь, когда вы тут, перейдем непосредственно к самим методам адаптации графики под экраны с высокой плотностью пикселей.

Метод 1. Использование SVG


.selector { background: url(../path_to_png/apple.png) no-repeat; }
html.svg .selector { background-image: url(../path_to_svg/apple.svg); }

Идеально подходит для логотипов, иконок, а также любой векторной графики.

Это метод дает самый качественный результат, т.к. графика будет выглядеть одинаково четко при любом приближении. Однако SVG — это векторный формат, и ваша графика должна быть соответственно в векторе. Чтобы подготовить SVG файл можно воспользоваться Adobe Illustrator, или другим аналогом (Inkscape, CorelDRAW).

Дальше все очень просто. Достаточно указать путь до SVG файла в CSS свойстве background-image. Однако есть браузеры, которые не поддерживают SVG. В этом случае я рекомендую использовать Modernizr, в составе шаблона HTML5 Boilerplate, это позволит определять непосредственно поддерживаемые функции, а не версии браузеров.

 

Метод 2. CSS Media Query и свойство background-size


.selector { background: url(../path_to_png/apple.png) no-repeat; }
  
@media (-webkit-min-device-pixel-ratio: 2) {
  .selector { background-image: url(../path_to_png/apple@2x.png); background-size: cover; }
}

С помощью селектора «min-device-pixel-ratio» определяются устройства с плотностью пикселей 2 и выше, для них подключается картинка в 2 раза больше, а свойство «background-size: cover» сообщает браузеру, что имеющуюся эту картинку необходимо отмасштабировать до размеров блока сохранив пропорции. Почитать о свойстве «background-size» и о значениях, которые оно может принимать

 

Метод 3. Замена src у картинок


jQuery( document ).ready(function(){
  if( 'devicePixelRatio' in window && window.devicePixelRatio == 2 ){
    var img_to_replace = jQuery( 'img.replace-2x' ).get();
 
    for (var i=0,l=img_to_replace.length; i<l; i++) {
      var src = img_to_replace[i].src;
      src = src.replace(/\.(png|jpg|gif)+$/i, '@2x.$1');
      img_to_replace[i].src = src;
    };
  }
});

В HTML коде прописываем тегу <img> необходимый класс, ширину или высоту, чтобы увеличенная картинка не испортила дизайн.
<img src="../path_to_png/apple.png"
     width="200" height="200"
     class="replace-2x" />

Этот метод использует свойство window.devicePixelRatio для определения экрана с увеличенной плотностью, находит все картинки, которые необходимо адаптировать и заменяет их src на аналогичный, но с дополнением в «@2x». Если не хочется каждой картинке писать класс, то довольно просто модифицировать код выше, чтобы он находил любые картинки. На мой взгляд данный метод не самый лучший и я бы использовал его с особой осторожностью.

 

Метод 4. Cookies и решение не сервере


(function(){
  if( document.cookie.indexOf('device_pixel_ratio') == -1
      && 'devicePixelRatio' in window
      && window.devicePixelRatio == 2 ){
        
    document.cookie = 'device_pixel_ratio=' + window.devicePixelRatio + ';';
    window.location.reload();
  }
})();

Используя JavaScript, этот метод позволяет один раз установить куку и перезагрузить страницу. Далее на основе этой куки сервер может принять решение сразу выдать адаптированную картинку для экранов с увеличенной плотностью.

 
И наконец ссылка на демо, разницу заметят только владельцы устройств с Retina экраном.
 

Напоследок


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

Буду рад услышать от вас о проблемах, с которыми вы сталкивались при адаптации под Retina экраны и решения, которые я упустил.
Egor Khmelev @hmelyoff
карма
6,0
рейтинг 0,0

Похожие публикации

Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (127)

  • +76
    Ставите определение браузера, показываете картинку:


    И никаких проблем с айпадами. :)
  • +6
    Глядя на все эти костыли, становится понятно, что современные браузеры не готовы с подобному разрешению графики
  • +9
    Да, retina-экраны — это тот же «волшебный пендель» в адрес индустрии, подобный гугловскому Хрому.
    • +8
      Просто для повышения уровня образованности — а чем именно Хром так пнул индустрию?
      • +1
        V8?
      • –2
        Производительность на 2 порядка.
        • +1
          прям в 100 раз?
  • 0
    Еще полезно использовать
    • +4
      Еще полезно использовать <meta name=«viewport»>
      • +3
        вьюпорт вообще обязательно использовать, чтоб мобильные браузеры адекватно отображали страницы
  • +2
    А можно поподробнее что значит «retina-экран»? Впервые этот термин слышу.
    • +7
      Экран с учетверенной плотностью пикселей. При этом картинка становится не меньше, а четче. Шрифты и прочее векторное добро выглядят лучше сами по себе, а про растровую графику как раз и написана эта статья.
      • +1
        Ну не совсем с учетверенной.
        Скорее так: дисплей, плотность пикселей которого достаточна, чтобы с расстояния обычного использования дисплея глаз пользователя не мог различить отдельные пиксели.
        Собственно поэтому экраны у iPhone4/4S и нового iPad имеют разную плотность пикселей. 326 и 264 ppi соответственно.
        • 0
          В общем случае Вы правы, сейчас пока есть только учетверенные. Хотя учетверенность это опять же относительно все…
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            А кто говорит, что причина выбора конкретного PPI одна?
            Ясен пень решения с конкретными цифрами принимаются после кучи обсуждений, многократного обсасывания всех нюансов и выбора наиболее разумного компромисса.
            Т.е. сначала выбираем минимально необходимое PPI, а дальше ровняем его по ближайшим значениям вверх разными техническими аспектами.
            Все логично.
    • –34
      Извиняюсь, это хабр или детский сад? Или может мьсе вышел из тюрьмы и забыл об Apple и поиске Google?
      • +17
        Видимо этот термин известен только среди фанатов Apple. Потому что гугл ведет только на фанатские сайты об айфонах, понятное дело без технических подробностей, а в википедии вообще утверждают, что retina — это сетчатка глаза.
        • НЛО прилетело и опубликовало эту надпись здесь
        • НЛО прилетело и опубликовало эту надпись здесь
          • +1
            Зашел на top.mail.ru, посмотрел статистику сайтов mail.ru, риа новости, эхо-мск — браузеров мобильных устройств
            • +4
              Странно, сообщение обрезалось. Короче, на русских сайтах доля ipad ничтожно.
              • НЛО прилетело и опубликовало эту надпись здесь
            • +4
        • –1
          Ух ты, не смог освоить фраз в гугле «retina экран wikipedia». И при этом хабр называется высокотехничным интеллектуальным сайтом, а тупые вопросы от незнающих гугл плюсуются?
    • 0
      Ели кратко то исплеи с повышеной плотностью элементов, если посмотреть на такой экран с помочью увеличительного стекла(до разумного предела увеличивать), то увидите только увеличеное изображение, а не пиксели как в обычных экранах.
      • 0
        Что-то изменяется качественно, какиие-то механизмы антиалиазинга, или только физически увеличена плотность элементов?
        • 0
          При большой плотности пикселей на дюйм, антиалиасинг уже не нужен будет.
        • +3
          image

          Физически увеличена плотность. Антиалиазинг больше не нужен.
          • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              Кстати, ответил не подумавши ) На ретине, судя по всему, речь идет об субпиксельном сглаживании.
              • НЛО прилетело и опубликовало эту надпись здесь
    • 0
  • 0
    интересно, на сколько в процентном соотношении, в среднем, прибавят в весе приложения под разрешение нового айпада.
    • 0
      Ни на сколько. Практически у всех универсальных аппликух лэйауты векторные с выхода iphone 4
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          С тех пор, как появилась ретина, у всех приложений 2 набора графики
    • +1
      17,5%
      • 0
        Не на 17,5%, а в среднем 17,5%.
  • +29
    Статья абсолютно безграмотная. Начать стоило бы с того, что такое pixel-ratio, и какие костыли придумала Эппл для рендеринга страниц на своих чудо-экранах. А вы даете советы (скопипастенные откуда-то?), ничего не объясняя. Какая от них вообще польза? Как понять, какой лучше?

    Почему люди не хотят думать, а только занимаются тупым копипастом?

    Теперь по поводу способов.

    1) ставя на фон SVG-картинку, надо учесть: а) неподдержку SVG в ИЕ б) кривую поддержку и баги рендеринга SVG в разных браузерах в) тормознутость SVG в некоторых браузерах (например, в Опере прокрутка может перестать быть плавной). Таким образом, это можно использовать только для iPad/iPhone (т.е. детектить их скриптом ДО загрузки всей страницы (чтобы не грузить png) и добавлять для них класс на body).

    Минусы: надо рисовать картинки в векторе + не забывать делать растровые копии для каждой. По идее, png надо бы создавать из SVG каким-то скриптом, только вот каким? Слишком сложно.

    2) Нормальный способ (лучший из представленных, имхо). Единственное, надо делать все картинки в 2 разрешениях, но это проще автоматизировать.

    3) Плохой способ, так как браузер сначала начнет грузить старые картинки, потом только менять на новые, т.е. потребление трафика лишнее. Плюс, скрипт не замент картинки при загрузке через AJAX.

    4) Требует радикальных усложнений серверного кода (все переписывать будете?), не подходит.

    Вот и возникает вопрос, а стоит ли оно того, ради айпадов делать столько работы? Я сильно сомневаюсь. Если у вас не большинство пользователей сидит с телефонов, по моему, он того не стоит.

    Ну и еще хочется добавить, что печально, что Эппл вместо придуманного лет 10 назад (ок, он не работает в реальности, но тем не менее) способа с поддержкой множества разрешений в CSS2.1, относительных размеров в em и прочего, приделывает нестандартные костыли.
    • –1
      Все верно, я лишь описал способы, как их применять решит каждый сам. Проблемы существуют, но не делать ничего — конечно проще. Адаптация под высокую плотность подразумевает усложненную работу с графикой.

      По поводу ковертации — svg можно конвертировать в png например через imagemagick, на сколько я помню. Сам не проверял, но в первую очередь посмотрел бы туда.

      А на счет того стоит или нет — каждый опять же решит сам. Обычно не требуется сильно много усилий чтобы привести средний сайт в порядок. В любом случае лучше начать раньше чем позже.
      • 0
        Лучше всего получается через Batik, но он на яве.
    • 0
      эмм… 4-ый делается одним nginx редиректящим в разные папки =/
      • +1
        Вероятно самый правильный.
    • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      > Вот и возникает вопрос, а стоит ли оно того, ради айпадов делать столько работы?

      До отчета Аппла за 2011 я бы тоже счел этот вопрос спорным.
  • +1
    «И наконец ссылка на демо, разницу заметят только владельцы устройств с Retina экраном...»

    Не только… На обычном ipad при зуме, отлично видна разница, а именно:
    Метод 1 супер
    Метод 4 нормально
    Метод 2 и 3 разницы нет, обе стороны яблока с квадратиками.
    • 0
      Да даже в Хроме на PC если масштаб увеличить разница видна.
  • –5
    Retina = геморрой для миллионов вэб-дизайнеров :)
    • +18
      Retina = благо для десятков миллионов пользователей.
      Такими экраны и должны быть на данном этапе развития технологии.
      Меня гораздо меньше волнует колличество ядер в процессоре, а вот после работы с такм дисплеем, на другие смотреть нехочется. И это не понты. Любой, кто пробовал, со мной согласится. Уверен с ipad будет также. А далее очередь ноутов и десктопных мониторов. Уверен, уже в этом году мы о них узнаем.
      • 0
        пока я вижу плюс только для шрифтов, что они намного красивее становятся, а картинки должны оставаться такого же размера как и были относительно физического размера экрана, т.е. придется делать линию не 1 пиксель а два, иначе на ретине её не разглядишь, ту же рамку в поле набора коммента на хабре :)

        Может я не допонимаю чего-то, но если будут такие мониторы и экраны ноутов, то переделывать придется ВСЁ.
        • 0
          «делать линию не 1 пиксель а два, иначе на ретине её не разглядишь»

          Не совсем так, дело в том, что если на iphone 4 узнать размер окна, то он окажется 320 на 460 (20 писелей на информационную панель сверху), а не 640x920.
          Т.е все само перерисовывается в два раза больше.

          В итоге если, мы хотим иконку 12x12px сделать должного качества, мы должны
          нарисовать её 24x24px, а размеры её поставить 12x12 (либо background-size: 50% 50%).

          • –1
            ну так я и говорю с массовым появлением дисплеев таких, гемор будет для вэбдизайнеров нужно и для старых делать и для новых :)
        • 0
          Я тоже не понимал прелести Retina, пока не попробовал iPhone 4 после iPhone 3G S. Очень удивился и понял что это то, что мне нужно. Тут только практика Вам все объяснит в течение 20 минут и пары приложений, которые поддерживают Retina.
      • НЛО прилетело и опубликовало эту надпись здесь
        • +12
          Примерно так и думала нокия и другие, пока не появился йфон. И вы видите что произошло. Такаяже ситуация будет и здесь. Имея возможность сделать лучше, и не делать… Невозможно оправдать вашими доводами. И вы в этом сами убедитесь.

          Пс разришения для фильмов расчитано на огромные тв панели… И здесь ваше сравнение не уместно.
        • +4
          Насчет сайтов вы очень сильно заблуждаетесь, на Retin-е визуально сайт будет занимать СТОЛЬКО ЖЕ места, сколько на обычном, просто будут четче шрифты и (о чем собственно данная статья, изображения, если вебмастер постарался)
        • +9
          Побуду на минуту кэпом, но если никто не будет внедрять технологии пока не наступит время — оно никогда не наступит.
        • +4
          Сравните любой сайт на третьем и четвёртом айфоне. Пропорции у них будут одинаковые, магия, не иначе.
        • +10
          Apple делает очень важное дело — отучает народ мыслить пикселами.

          Мне не для кино, я для текста, для работы предпочту большой дисплей о трёхстах dpi.
        • +2
          И именно такое разрешение выбрано, потому как уже существуют инструменты в SDK, для поддержки двойных разрешений.
          В остатке получается, что Apple выступает в роли первопроходца, внедряющего технологии, время котрых ещё не настало.

          Да, эппл походу постоянно этим занимается
        • 0
          И, более того, на весь iPad влезет всего 2-3 таких фильма.


          Вот тут утверждают обратное — благодаря поддержке новых профилей и уровней размер файлов в среднем увеличился менее чем в полтора раза.
      • –2
        Я не думаю что всякие Intel HD 3000 и прочие нижнего уровня видеокарты потянут Retina экраны
        Я думаю этой технологии еще 3-5 лет наступать
        • +14
          Ипадик с арм-процем и кастрированным гпу тянет, а амд и интел с нвидией потянут только через пять лет?
          Может быть, пора ставить на «большие» компы эппловский гпу, а нвидию с амд закрыть? :)

          Просто производителей всё устраивало, никто не хотел придумывать что-то новое, ведь пипл и так хавает.

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

          Я рад, что Эппл в очередной раз отвесил волшебного пендюля индустрии, и жду ноутбук или монитор с ретина-экраном.
          • 0
            Ну я и думаю что через 3-5 лет это настанет.
            А не массовая миграция на Retina течении года.
        • +1
          Появятся всякие HD 4000.
          Если вы не будете 3D игры запускать, то потянут.
          • 0
            AMD Vision с их встроенным в процессор графическим ядром рулит. И любое HD тянет, и в игры поиграть позволяет.
            • 0
              не щупал, но охотно верю, вот бы мой HD 3000 не грелся бы так сильно (производительности хватает)
              • 0
                Самому стало интересно по поводу температуры :) Сейчас при помощи GPU-Z загрузил встроенное в AMD X3 A6-3500 графическое ядро Radeon 6530D на все 100%, при этом температура GPU составила 19-20*C, с редкими пиками до 21*C.
                Я себе приобретал железо в жестких бюджетных рамках, но не пожалел денег на хорошую память, так что результаты превысили все мои ожидания :)
                • 0
                  Запустите Crysis 2 на средних (если имеется в наличии), разрешение мейнстримное 1366x760. У меня нагревался до 80, при потолке в 75, и я принял волевое решение удалить крайзис.
                  • 0
                    Уже не надо, на глаз видно что граф. ядро по мощнее будет у вас.
                • 0
                  У вас какая температура в комнате при этом?
                  • 0
                    К сожалению градусника в квартире не имею. Температура комнатная, немного прохладная. :)
                    Для сравнения — южный мост на ощупь горячий и показывает +33*C, а радиатор процессора холодный, и только во время игр становится едва различимо теплее.
        • 0
          Я не думаю что всякие Intel HD 3000
          Вы спецификации читали?
          • 0
            Я вижу как HD3000 с трудом тянет 13" Macbook Pro + 24" 1920x1200 экран. ( визуальные эффекты в Leo подтормаживают ). А ведь там количество суммарно меньше чем у iPad нового.

            Страшно представить, что будет на 24" retina в каком-нибудь OpenGL приложении.
            • 0
              Ну до 24 с ретиной и 4000+ пикселями по горизонтали еще дожить надо.
              При втором мониторе к air (2011) 1920х1080 проблем с интерфейсом не испытываю, так что странно.
        • 0
          Как будто экраны с таким разрешением только появились, они были и 10 лет назад (например 2560 х 1600). Тут только увеличили плотность на дюйм.
          • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              Пиксель — это пиксель. Проблема состоит в том, что мобильные браузеры делают масштабирование страницы как им вздумается. Разумеется, от этого страдает графика.
              • +1
                в CSS пиксель никогда пикселем небыл.
                • 0
                  www.w3.org/Style/Examples/007/units

                  Единица px является особой единицей CSS. Она не связана с текущим шрифтом, а также не связана с абсолютными единицами. Единица px определяется как небольшая, но видимая, и такая, что горизонтальная линия шириной 1px может быть отображена с острыми краями (без сглаживания). Что является четким, малым и видимым зависит от устройства и как оно используется: или вы держите его близко к глазам, как мобильный телефон, на расстоянии вытянутой руки, как монитор компьютера, или где-то посередине, как книга? Единица px таким образом не определена как величина постоянной длины, а как нечто, что зависит от типа устройства и его типичного использования.
                  • НЛО прилетело и опубликовало эту надпись здесь
                    • 0
                      Т.е. как я понял политику Apple в отношении своих экрана и браузера, они считают их «higher resolution devices», то есть такими, как принтеры?
                      image
                      • НЛО прилетело и опубликовало эту надпись здесь
                • +1
                  Я конечно понял что вы хотели сказать. Но если пиксель физический не соответствует пикселю браузерному, то это какой-то нечестный браузер.
                  • НЛО прилетело и опубликовало эту надпись здесь
    • +2
      Для дизайнеров не геморрой, для технологов пока что геморрой
    • +3
      Геморрой разработчиков пользователей не волнует
  • –9
    Что такое Retina экран и чем он круче моего ЖК-монитора 1024x768 пикселей?
    • +3
      В четыре раза плотнее, учитывая размеры вашего монитора
    • +6
      Пост от odeessamarin, он не может фотки вкладывать, с кармой проблема )

      Как говорится лучше раз увидеть…
      Вот не поленился и сфоткал )

      Это iPad 2 без ретина


      Это iPhone 4 с ретина
      • +3
        Спасибо )
      • +2
        Фото в режиме макро, с одинакового расстояния.
        Пиксели в iPad хорошо разлечимы и не вооруженным глазом. В случае с ретина, они практически на глаз невидимы.
      • +4
        ник юзера и дату нужно читать с микроскопом на iphone4 :)
        • +1
          это страница хабра на весь экран iphone… без зума. Так что вам пропорции примерно понятны ))) И тот факт что можно читать с микроскопом говорит о многом. Иначе без ретина, на ник бы пришлось пару пикселей в высоту ))) где даже микроскоп бесполезен. Думая идея понятна.
          • +2
            я сравниваю пропорции размера основного текста и ника, а зумить так страницу чтобы прочитать одну строчку, это простите ппц …

            должно быть всё проще…
            • 0
              и я надеюсь, что кто-нибудь придумает как такие разрешение использовать с текущими интерфейсами всего :)
              • НЛО прилетело и опубликовало эту надпись здесь
                • 0
                  да я не про это, всё не переверстаешь ведь :) должен быть другой выход
            • 0
              для полноты картины не хватает линейки на обеих снимках в качестве арбитра. Иначе сложно оценить… вернусь с базара, поднимут карму, перефоткаю как надо для экспертной оценки )))
              • 0
                интересно посмотреть :)
                • +6
                  Вот, как обещал… с базара пришел, карма в плюсе (спасибо)… смотрим фото )

                  iPhone 4 — ретина


                  iPad 2 — не ретина


                  iPhone 4 — ретина


                  iPad 2 — не ретина


                  • 0
                    здесь как и в первых фотках, подрезал, чтоб мм совпадали, для наглядного сравнения

                    ретина


                    не ретина
                  • 0
                    в общем получается в 2 раза уменьшается всё…
                    • НЛО прилетело и опубликовало эту надпись здесь
                    • 0
                      Точнее, в 2 раза четче все. И дальнейшее увелечение плотности особо не изменит качество, т.к. по мнению Apple, наш глаз этого уже не заметит. По этому и кличут «ретина». Интересно, что в анoнсированном iPad 3, плотность пикселей будет меньше чем в iPhone, т.е. хуже йфона. Возможно что при близком рассмотрении будут заметны. Но начинает играть значение рабочая дисстанция. Поэтому назвали так же ретина. Вот тут немного…

                      image

                      image
                      • +1
                        И да, если увеличить резрешение моего бука в два раза, т.е. с 1440х900 до 2880х1800, то это как раз вписывается в определение на первой картинке. И предположу, что так Apple и сделает уже в этом году. Так что и статья в тему, и обсуждение.
                      • НЛО прилетело и опубликовало эту надпись здесь
        • НЛО прилетело и опубликовало эту надпись здесь
  • +1
    Стоит подумать и про современные андроиды, которые около ретины, и по факту с такими же проблемами.
    • 0
      Да, и к сожалению, карежит андроид картинки при масштабировании.

      Есть иконка 12x12px кружок простой, для ретино-подобных дисплеев выставляем
      background-size: 50% 50%

      На айфоне все красиво, на андроиде слегка кривой круг(.
  • 0
    Если бы браузер мог нормально вычислить размер изображения исходя из его разрешающей способности (например, 96 dpi), проблемы бы просто не существовало. В типографских системах это применяется далеко и широко.

    Размер шрифта все давно умеют нормально пересчитывать, может стоит и для растровых изображений это делать «на лету» под конкретный дисплей и его реальный размер. Если дальше идею развить, то можно будет задавать размеры картинок на сайте в сантиметрах, а браузер сам пересчитает это в пикселы конкретного экрана.
    • +1
      Задавать размер в сантиметрах и миллиметрах можно давно. Вопрос за адекватностью браузеров. Как будет время обязательно устрою тест.
      • НЛО прилетело и опубликовало эту надпись здесь
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Ничего себе «чуть» — площадь картинки и трафик, соответственно, увеличиваются в 4 раза.
      • НЛО прилетело и опубликовало эту надпись здесь
  • +1
    Расскажите, плиз, как будет выглядеть простейшая, неоптимизированная ни подо что страница на третьем айпаде по сравнению со вторым?

    < img src=... > Text Text


    1) Текст останется прежнего физического размера, но более читаемый?
    2) Картинка уменьшится в 4 раза по площади в сантиметрах? Или останется прежних физических размеров?
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Спасибо. А существует вобще у веб-девелопера возможность подсунуть «ретинообразному» веб-киту картинку учетверённой площади в пикселях, чтобы использовать плюсы ретины, а не так чтобы один пиксель растягивался на четыре?
        • +1
          background-size: 50% 50%
          На андроидах может картинка корежиться немного, не очень там хорошо что-то масштабируются они(.
          Ну либо, если это у вас картинка 12x12px, просто рисуете её 24x24px, а размер прописываете её прежний 12x12px.
  • 0
    Очень актуальный (в свете выхода the new iPad) пост. Спасибо!
  • 0
    Ну будут неадаптированные картинки выглядеть так же, как на прошлом поколении iPad'ов (разве что за вычитом заметных границ пикселей) ну и что. То же самое с видео и фотографиями. Большинство людей разницы не заметит, если, конечно, вы работе с планшетом не держите его прямо под носом. А вот текст четкий — это действительно достоинство. Можно будет комфортно читать не только электронные книги (epub, fb2), но и отсканированные книги в pdf и djvu без увеличения. Лично для меня это решающий фактор в пользу нового iPad'а.

    Но планшет с полноценной Windows 8 все равно выглядит заманчивее :3
    • 0
      >>> Ну будут неадаптированные картинки выглядеть так же, как на прошлом поколении iPad'ов (разве что за вычитом заметных границ пикселей) ну и что.
      На фоне этого факта особенно странно звучит заявление автора статьи:
      >>> На иконки не хочется смотреть, на кнопки не хочется нажимать, а от картинок вообще хочется… закрыть сайт.
      Всего несколько лет назад про *точно такие же* говорили, что хотелось.
  • 0
    Итак, для ретиновых дисплеев полезны вдвое уменьшенные изображения (например, картинка 32×32 пиксела с заданными width=16 и height=16), а андроидные браузеры, напротив, такие изображения погано и незрелищно уменьшают в два раза на своих неретиновых дисплеях?

    Впору задуматься о возрождении стародавней моды на те форматы графических файлов, которые допускают одновременное хранение нескольких вариантов изображения в нескольких размерах, отличающихся в несколько раз. Правда ведь, было бы необыкновенно полезно: <img src="someicon.ico" width="16" height="16">
  • 0
    Кроме того, всё вышеизложенное подводит нас к досаде от того наблюдаемого обстоятельства, что Хабрахабр игнорирует height и width в иллюстрациях. Блогозаписи на Хабрахабре не поддадутся ретинизации поэтому.
  • +2
    Я считаю, что пока Apple не добавит поддержку управления рендерингом для разных DPI, как это сделано в других браузерах, на их ретину надо забить. Во благо будущего веб-технологий. Сайты iOS-only напоминают мне времена IE-only. Будет поддержка target-density, тогда и будет welcome to the club.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.