Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 127
Ставите определение браузера, показываете картинку:
И никаких проблем с айпадами. :)
И никаких проблем с айпадами. :)
Глядя на все эти костыли, становится понятно, что современные браузеры не готовы с подобному разрешению графики
Да, retina-экраны — это тот же «волшебный пендель» в адрес индустрии, подобный гугловскому Хрому.
Еще полезно использовать
А можно поподробнее что значит «retina-экран»? Впервые этот термин слышу.
Ну не совсем с учетверенной.
Скорее так: дисплей, плотность пикселей которого достаточна, чтобы с расстояния обычного использования дисплея глаз пользователя не мог различить отдельные пиксели.
Собственно поэтому экраны у iPhone4/4S и нового iPad имеют разную плотность пикселей. 326 и 264 ppi соответственно.
Скорее так: дисплей, плотность пикселей которого достаточна, чтобы с расстояния обычного использования дисплея глаз пользователя не мог различить отдельные пиксели.
Собственно поэтому экраны у iPhone4/4S и нового iPad имеют разную плотность пикселей. 326 и 264 ppi соответственно.
А кто говорит, что причина выбора конкретного PPI одна?
Ясен пень решения с конкретными цифрами принимаются после кучи обсуждений, многократного обсасывания всех нюансов и выбора наиболее разумного компромисса.
Т.е. сначала выбираем минимально необходимое PPI, а дальше ровняем его по ближайшим значениям вверх разными техническими аспектами.
Все логично.
Ясен пень решения с конкретными цифрами принимаются после кучи обсуждений, многократного обсасывания всех нюансов и выбора наиболее разумного компромисса.
Т.е. сначала выбираем минимально необходимое PPI, а дальше ровняем его по ближайшим значениям вверх разными техническими аспектами.
Все логично.
Извиняюсь, это хабр или детский сад? Или может мьсе вышел из тюрьмы и забыл об Apple и поиске Google?
Видимо этот термин известен только среди фанатов Apple. Потому что гугл ведет только на фанатские сайты об айфонах, понятное дело без технических подробностей, а в википедии вообще утверждают, что retina — это сетчатка глаза.
Зашел на top.mail.ru, посмотрел статистику сайтов mail.ru, риа новости, эхо-мск — браузеров мобильных устройств
Странно, сообщение обрезалось. Короче, на русских сайтах доля ipad ничтожно.
Читали эту статью?
company.yandex.ru/researches/figures/2012/yandex_on_ipad_2012.xml
company.yandex.ru/researches/figures/2012/yandex_on_ipad_2012.xml
Ух ты, не смог освоить фраз в гугле «retina экран wikipedia». И при этом хабр называется высокотехничным интеллектуальным сайтом, а тупые вопросы от незнающих гугл плюсуются?
Ели кратко то исплеи с повышеной плотностью элементов, если посмотреть на такой экран с помочью увеличительного стекла(до разумного предела увеличивать), то увидите только увеличеное изображение, а не пиксели как в обычных экранах.
интересно, на сколько в процентном соотношении, в среднем, прибавят в весе приложения под разрешение нового айпада.
Статья абсолютно безграмотная. Начать стоило бы с того, что такое pixel-ratio, и какие костыли придумала Эппл для рендеринга страниц на своих чудо-экранах. А вы даете советы (скопипастенные откуда-то?), ничего не объясняя. Какая от них вообще польза? Как понять, какой лучше?
Почему люди не хотят думать, а только занимаются тупым копипастом?
Теперь по поводу способов.
1) ставя на фон SVG-картинку, надо учесть: а) неподдержку SVG в ИЕ б) кривую поддержку и баги рендеринга SVG в разных браузерах в) тормознутость SVG в некоторых браузерах (например, в Опере прокрутка может перестать быть плавной). Таким образом, это можно использовать только для iPad/iPhone (т.е. детектить их скриптом ДО загрузки всей страницы (чтобы не грузить png) и добавлять для них класс на body).
Минусы: надо рисовать картинки в векторе + не забывать делать растровые копии для каждой. По идее, png надо бы создавать из SVG каким-то скриптом, только вот каким? Слишком сложно.
2) Нормальный способ (лучший из представленных, имхо). Единственное, надо делать все картинки в 2 разрешениях, но это проще автоматизировать.
3) Плохой способ, так как браузер сначала начнет грузить старые картинки, потом только менять на новые, т.е. потребление трафика лишнее. Плюс, скрипт не замент картинки при загрузке через AJAX.
4) Требует радикальных усложнений серверного кода (все переписывать будете?), не подходит.
Вот и возникает вопрос, а стоит ли оно того, ради айпадов делать столько работы? Я сильно сомневаюсь. Если у вас не большинство пользователей сидит с телефонов, по моему, он того не стоит.
Ну и еще хочется добавить, что печально, что Эппл вместо придуманного лет 10 назад (ок, он не работает в реальности, но тем не менее) способа с поддержкой множества разрешений в CSS2.1, относительных размеров в em и прочего, приделывает нестандартные костыли.
Почему люди не хотят думать, а только занимаются тупым копипастом?
Теперь по поводу способов.
1) ставя на фон SVG-картинку, надо учесть: а) неподдержку SVG в ИЕ б) кривую поддержку и баги рендеринга SVG в разных браузерах в) тормознутость SVG в некоторых браузерах (например, в Опере прокрутка может перестать быть плавной). Таким образом, это можно использовать только для iPad/iPhone (т.е. детектить их скриптом ДО загрузки всей страницы (чтобы не грузить png) и добавлять для них класс на body).
Минусы: надо рисовать картинки в векторе + не забывать делать растровые копии для каждой. По идее, png надо бы создавать из SVG каким-то скриптом, только вот каким? Слишком сложно.
2) Нормальный способ (лучший из представленных, имхо). Единственное, надо делать все картинки в 2 разрешениях, но это проще автоматизировать.
3) Плохой способ, так как браузер сначала начнет грузить старые картинки, потом только менять на новые, т.е. потребление трафика лишнее. Плюс, скрипт не замент картинки при загрузке через AJAX.
4) Требует радикальных усложнений серверного кода (все переписывать будете?), не подходит.
Вот и возникает вопрос, а стоит ли оно того, ради айпадов делать столько работы? Я сильно сомневаюсь. Если у вас не большинство пользователей сидит с телефонов, по моему, он того не стоит.
Ну и еще хочется добавить, что печально, что Эппл вместо придуманного лет 10 назад (ок, он не работает в реальности, но тем не менее) способа с поддержкой множества разрешений в CSS2.1, относительных размеров в em и прочего, приделывает нестандартные костыли.
Все верно, я лишь описал способы, как их применять решит каждый сам. Проблемы существуют, но не делать ничего — конечно проще. Адаптация под высокую плотность подразумевает усложненную работу с графикой.
По поводу ковертации — svg можно конвертировать в png например через imagemagick, на сколько я помню. Сам не проверял, но в первую очередь посмотрел бы туда.
А на счет того стоит или нет — каждый опять же решит сам. Обычно не требуется сильно много усилий чтобы привести средний сайт в порядок. В любом случае лучше начать раньше чем позже.
По поводу ковертации — svg можно конвертировать в png например через imagemagick, на сколько я помню. Сам не проверял, но в первую очередь посмотрел бы туда.
А на счет того стоит или нет — каждый опять же решит сам. Обычно не требуется сильно много усилий чтобы привести средний сайт в порядок. В любом случае лучше начать раньше чем позже.
эмм… 4-ый делается одним nginx редиректящим в разные папки =/
> Вот и возникает вопрос, а стоит ли оно того, ради айпадов делать столько работы?
До отчета Аппла за 2011 я бы тоже счел этот вопрос спорным.
До отчета Аппла за 2011 я бы тоже счел этот вопрос спорным.
«И наконец ссылка на демо, разницу заметят только владельцы устройств с Retina экраном...»
Не только… На обычном ipad при зуме, отлично видна разница, а именно:
Метод 1 супер
Метод 4 нормально
Метод 2 и 3 разницы нет, обе стороны яблока с квадратиками.
Не только… На обычном ipad при зуме, отлично видна разница, а именно:
Метод 1 супер
Метод 4 нормально
Метод 2 и 3 разницы нет, обе стороны яблока с квадратиками.
Retina = геморрой для миллионов вэб-дизайнеров :)
Retina = благо для десятков миллионов пользователей.
Такими экраны и должны быть на данном этапе развития технологии.
Меня гораздо меньше волнует колличество ядер в процессоре, а вот после работы с такм дисплеем, на другие смотреть нехочется. И это не понты. Любой, кто пробовал, со мной согласится. Уверен с ipad будет также. А далее очередь ноутов и десктопных мониторов. Уверен, уже в этом году мы о них узнаем.
Такими экраны и должны быть на данном этапе развития технологии.
Меня гораздо меньше волнует колличество ядер в процессоре, а вот после работы с такм дисплеем, на другие смотреть нехочется. И это не понты. Любой, кто пробовал, со мной согласится. Уверен с ipad будет также. А далее очередь ноутов и десктопных мониторов. Уверен, уже в этом году мы о них узнаем.
пока я вижу плюс только для шрифтов, что они намного красивее становятся, а картинки должны оставаться такого же размера как и были относительно физического размера экрана, т.е. придется делать линию не 1 пиксель а два, иначе на ретине её не разглядишь, ту же рамку в поле набора коммента на хабре :)
Может я не допонимаю чего-то, но если будут такие мониторы и экраны ноутов, то переделывать придется ВСЁ.
Может я не допонимаю чего-то, но если будут такие мониторы и экраны ноутов, то переделывать придется ВСЁ.
«делать линию не 1 пиксель а два, иначе на ретине её не разглядишь»
Не совсем так, дело в том, что если на iphone 4 узнать размер окна, то он окажется 320 на 460 (20 писелей на информационную панель сверху), а не 640x920.
Т.е все само перерисовывается в два раза больше.
В итоге если, мы хотим иконку 12x12px сделать должного качества, мы должны
нарисовать её 24x24px, а размеры её поставить 12x12 (либо background-size: 50% 50%).
Не совсем так, дело в том, что если на iphone 4 узнать размер окна, то он окажется 320 на 460 (20 писелей на информационную панель сверху), а не 640x920.
Т.е все само перерисовывается в два раза больше.
В итоге если, мы хотим иконку 12x12px сделать должного качества, мы должны
нарисовать её 24x24px, а размеры её поставить 12x12 (либо background-size: 50% 50%).
Я тоже не понимал прелести Retina, пока не попробовал iPhone 4 после iPhone 3G S. Очень удивился и понял что это то, что мне нужно. Тут только практика Вам все объяснит в течение 20 минут и пары приложений, которые поддерживают Retina.
Примерно так и думала нокия и другие, пока не появился йфон. И вы видите что произошло. Такаяже ситуация будет и здесь. Имея возможность сделать лучше, и не делать… Невозможно оправдать вашими доводами. И вы в этом сами убедитесь.
Пс разришения для фильмов расчитано на огромные тв панели… И здесь ваше сравнение не уместно.
Пс разришения для фильмов расчитано на огромные тв панели… И здесь ваше сравнение не уместно.
Насчет сайтов вы очень сильно заблуждаетесь, на Retin-е визуально сайт будет занимать СТОЛЬКО ЖЕ места, сколько на обычном, просто будут четче шрифты и (о чем собственно данная статья, изображения, если вебмастер постарался)
Побуду на минуту кэпом, но если никто не будет внедрять технологии пока не наступит время — оно никогда не наступит.
Сравните любой сайт на третьем и четвёртом айфоне. Пропорции у них будут одинаковые, магия, не иначе.
Apple делает очень важное дело — отучает народ мыслить пикселами.
Мне не для кино, я для текста, для работы предпочту большой дисплей о трёхстах dpi.
Мне не для кино, я для текста, для работы предпочту большой дисплей о трёхстах dpi.
И именно такое разрешение выбрано, потому как уже существуют инструменты в SDK, для поддержки двойных разрешений.
Да, эппл походу постоянно этим занимается
В остатке получается, что Apple выступает в роли первопроходца, внедряющего технологии, время котрых ещё не настало.
Да, эппл походу постоянно этим занимается
И, более того, на весь iPad влезет всего 2-3 таких фильма.
Вот тут утверждают обратное — благодаря поддержке новых профилей и уровней размер файлов в среднем увеличился менее чем в полтора раза.
Я не думаю что всякие Intel HD 3000 и прочие нижнего уровня видеокарты потянут Retina экраны
Я думаю этой технологии еще 3-5 лет наступать
Я думаю этой технологии еще 3-5 лет наступать
Ипадик с арм-процем и кастрированным гпу тянет, а амд и интел с нвидией потянут только через пять лет?
Может быть, пора ставить на «большие» компы эппловский гпу, а нвидию с амд закрыть? :)
Просто производителей всё устраивало, никто не хотел придумывать что-то новое, ведь пипл и так хавает.
А я уже лет восемь недоумеваю, почему мегагерцы и гигабайты растут и растут, а разрешение экрана застряло на уровне прошлого тысячелетия.
Я рад, что Эппл в очередной раз отвесил волшебного пендюля индустрии, и жду ноутбук или монитор с ретина-экраном.
Может быть, пора ставить на «большие» компы эппловский гпу, а нвидию с амд закрыть? :)
Просто производителей всё устраивало, никто не хотел придумывать что-то новое, ведь пипл и так хавает.
А я уже лет восемь недоумеваю, почему мегагерцы и гигабайты растут и растут, а разрешение экрана застряло на уровне прошлого тысячелетия.
Я рад, что Эппл в очередной раз отвесил волшебного пендюля индустрии, и жду ноутбук или монитор с ретина-экраном.
Появятся всякие HD 4000.
Если вы не будете 3D игры запускать, то потянут.
Если вы не будете 3D игры запускать, то потянут.
AMD Vision с их встроенным в процессор графическим ядром рулит. И любое HD тянет, и в игры поиграть позволяет.
не щупал, но охотно верю, вот бы мой HD 3000 не грелся бы так сильно (производительности хватает)
Самому стало интересно по поводу температуры :) Сейчас при помощи GPU-Z загрузил встроенное в AMD X3 A6-3500 графическое ядро Radeon 6530D на все 100%, при этом температура GPU составила 19-20*C, с редкими пиками до 21*C.
Я себе приобретал железо в жестких бюджетных рамках, но не пожалел денег на хорошую память, так что результаты превысили все мои ожидания :)
Я себе приобретал железо в жестких бюджетных рамках, но не пожалел денег на хорошую память, так что результаты превысили все мои ожидания :)
Я не думаю что всякие Intel HD 3000
Вы спецификации читали?
Вы спецификации читали?
Как будто экраны с таким разрешением только появились, они были и 10 лет назад (например 2560 х 1600). Тут только увеличили плотность на дюйм.
Пиксель — это пиксель. Проблема состоит в том, что мобильные браузеры делают масштабирование страницы как им вздумается. Разумеется, от этого страдает графика.
в CSS пиксель никогда пикселем небыл.
www.w3.org/Style/Examples/007/units
Единица px является особой единицей CSS. Она не связана с текущим шрифтом, а также не связана с абсолютными единицами. Единица px определяется как небольшая, но видимая, и такая, что горизонтальная линия шириной 1px может быть отображена с острыми краями (без сглаживания). Что является четким, малым и видимым зависит от устройства и как оно используется: или вы держите его близко к глазам, как мобильный телефон, на расстоянии вытянутой руки, как монитор компьютера, или где-то посередине, как книга? Единица px таким образом не определена как величина постоянной длины, а как нечто, что зависит от типа устройства и его типичного использования.
Единица px является особой единицей CSS. Она не связана с текущим шрифтом, а также не связана с абсолютными единицами. Единица px определяется как небольшая, но видимая, и такая, что горизонтальная линия шириной 1px может быть отображена с острыми краями (без сглаживания). Что является четким, малым и видимым зависит от устройства и как оно используется: или вы держите его близко к глазам, как мобильный телефон, на расстоянии вытянутой руки, как монитор компьютера, или где-то посередине, как книга? Единица px таким образом не определена как величина постоянной длины, а как нечто, что зависит от типа устройства и его типичного использования.
Я конечно понял что вы хотели сказать. Но если пиксель физический не соответствует пикселю браузерному, то это какой-то нечестный браузер.
Для дизайнеров не геморрой, для технологов пока что геморрой
Геморрой разработчиков пользователей не волнует
Что такое Retina экран и чем он круче моего ЖК-монитора 1024x768 пикселей?
В четыре раза плотнее, учитывая размеры вашего монитора
Пост от odeessamarin, он не может фотки вкладывать, с кармой проблема )
Как говорится лучше раз увидеть…
Вот не поленился и сфоткал )
Это iPad 2 без ретина
Это iPhone 4 с ретина
Как говорится лучше раз увидеть…
Вот не поленился и сфоткал )
Это iPad 2 без ретина
Это iPhone 4 с ретина
Спасибо )
Фото в режиме макро, с одинакового расстояния.
Пиксели в iPad хорошо разлечимы и не вооруженным глазом. В случае с ретина, они практически на глаз невидимы.
Пиксели в iPad хорошо разлечимы и не вооруженным глазом. В случае с ретина, они практически на глаз невидимы.
ник юзера и дату нужно читать с микроскопом на iphone4 :)
это страница хабра на весь экран iphone… без зума. Так что вам пропорции примерно понятны ))) И тот факт что можно читать с микроскопом говорит о многом. Иначе без ретина, на ник бы пришлось пару пикселей в высоту ))) где даже микроскоп бесполезен. Думая идея понятна.
я сравниваю пропорции размера основного текста и ника, а зумить так страницу чтобы прочитать одну строчку, это простите ппц …
должно быть всё проще…
должно быть всё проще…
и я надеюсь, что кто-нибудь придумает как такие разрешение использовать с текущими интерфейсами всего :)
для полноты картины не хватает линейки на обеих снимках в качестве арбитра. Иначе сложно оценить… вернусь с базара, поднимут карму, перефоткаю как надо для экспертной оценки )))
интересно посмотреть :)
Вот, как обещал… с базара пришел, карма в плюсе (спасибо)… смотрим фото )
iPhone 4 — ретина
iPad 2 — не ретина
iPhone 4 — ретина
iPad 2 — не ретина
iPhone 4 — ретина
iPad 2 — не ретина
iPhone 4 — ретина
iPad 2 — не ретина
здесь как и в первых фотках, подрезал, чтоб мм совпадали, для наглядного сравнения
ретина
не ретина
ретина
не ретина
в общем получается в 2 раза уменьшается всё…
Точнее, в 2 раза четче все. И дальнейшее увелечение плотности особо не изменит качество, т.к. по мнению Apple, наш глаз этого уже не заметит. По этому и кличут «ретина». Интересно, что в анoнсированном iPad 3, плотность пикселей будет меньше чем в iPhone, т.е. хуже йфона. Возможно что при близком рассмотрении будут заметны. Но начинает играть значение рабочая дисстанция. Поэтому назвали так же ретина. Вот тут немного…
Стоит подумать и про современные андроиды, которые около ретины, и по факту с такими же проблемами.
Если бы браузер мог нормально вычислить размер изображения исходя из его разрешающей способности (например, 96 dpi), проблемы бы просто не существовало. В типографских системах это применяется далеко и широко.
Размер шрифта все давно умеют нормально пересчитывать, может стоит и для растровых изображений это делать «на лету» под конкретный дисплей и его реальный размер. Если дальше идею развить, то можно будет задавать размеры картинок на сайте в сантиметрах, а браузер сам пересчитает это в пикселы конкретного экрана.
Размер шрифта все давно умеют нормально пересчитывать, может стоит и для растровых изображений это делать «на лету» под конкретный дисплей и его реальный размер. Если дальше идею развить, то можно будет задавать размеры картинок на сайте в сантиметрах, а браузер сам пересчитает это в пикселы конкретного экрана.
Расскажите, плиз, как будет выглядеть простейшая, неоптимизированная ни подо что страница на третьем айпаде по сравнению со вторым?
1) Текст останется прежнего физического размера, но более читаемый?
2) Картинка уменьшится в 4 раза по площади в сантиметрах? Или останется прежних физических размеров?
< img src=... > Text Text
1) Текст останется прежнего физического размера, но более читаемый?
2) Картинка уменьшится в 4 раза по площади в сантиметрах? Или останется прежних физических размеров?
Очень актуальный (в свете выхода the new iPad) пост. Спасибо!
Ну будут неадаптированные картинки выглядеть так же, как на прошлом поколении iPad'ов (разве что за вычитом заметных границ пикселей) ну и что. То же самое с видео и фотографиями. Большинство людей разницы не заметит, если, конечно, вы работе с планшетом не держите его прямо под носом. А вот текст четкий — это действительно достоинство. Можно будет комфортно читать не только электронные книги (epub, fb2), но и отсканированные книги в pdf и djvu без увеличения. Лично для меня это решающий фактор в пользу нового iPad'а.
Но планшет с полноценной Windows 8 все равно выглядит заманчивее :3
Но планшет с полноценной Windows 8 все равно выглядит заманчивее :3
>>> Ну будут неадаптированные картинки выглядеть так же, как на прошлом поколении iPad'ов (разве что за вычитом заметных границ пикселей) ну и что.
На фоне этого факта особенно странно звучит заявление автора статьи:
>>> На иконки не хочется смотреть, на кнопки не хочется нажимать, а от картинок вообще хочется… закрыть сайт.
Всего несколько лет назад про *точно такие же* говорили, что хотелось.
На фоне этого факта особенно странно звучит заявление автора статьи:
>>> На иконки не хочется смотреть, на кнопки не хочется нажимать, а от картинок вообще хочется… закрыть сайт.
Всего несколько лет назад про *точно такие же* говорили, что хотелось.
Итак, для ретиновых дисплеев полезны вдвое уменьшенные изображения (например, картинка 32×32 пиксела с заданными width=16 и height=16), а андроидные браузеры, напротив, такие изображения погано и незрелищно уменьшают в два раза на своих неретиновых дисплеях?
Впору задуматься о возрождении стародавней моды на те форматы графических файлов, которые допускают одновременное хранение нескольких вариантов изображения в нескольких размерах, отличающихся в несколько раз. Правда ведь, было бы необыкновенно полезно: <img src="someicon.ico" width="16" height="16">…
Впору задуматься о возрождении стародавней моды на те форматы графических файлов, которые допускают одновременное хранение нескольких вариантов изображения в нескольких размерах, отличающихся в несколько раз. Правда ведь, было бы необыкновенно полезно: <img src="someicon.ico" width="16" height="16">…
Кроме того, всё вышеизложенное подводит нас к досаде от того наблюдаемого обстоятельства, что Хабрахабр игнорирует height и width в иллюстрациях. Блогозаписи на Хабрахабре не поддадутся ретинизации поэтому.
Я считаю, что пока Apple не добавит поддержку управления рендерингом для разных DPI, как это сделано в других браузерах, на их ретину надо забить. Во благо будущего веб-технологий. Сайты iOS-only напоминают мне времена IE-only. Будет поддержка target-density, тогда и будет welcome to the club.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Адаптируем графику под Retina экран