Готов ли ваш сайт к Retina?

    Ответ на вопрос, скорее всего, будет отрицательным. И на это есть масса причин. Использование чего либо вроде retina.js в какой то мере облегчает процесс, но можно попробовать и более альтернативный способ.

    Как вы обычно сохраняете графику для сайта? Скорее всего делаете .jpg один к одному и сохраняете его с уровнем качества где то в районе 80%. Попробуйте сделать несколько иначе. Сохраните картинку в два раза большего размера чем требуется и сохраните с уровнем качества 20%. Объем изображения скорее всего станет даже меньшей, а результат, вероятно, удивит.

    P.S. Возможно это самый короткий туториал на хабре и я ни в коем случае не призываю поступать именно так, но это один из тех простых ответов на сложный вопрос.

    UPD. Спасибо IIIEB4YK за ссылку в комментарии.
    Share post

    Comments 102

      0
      Разве устройства с ретиной не сами масштабируют графику и шрифты?
        +1
        В том то и дело что они масштабируют графику в сторону увеличения, потому картинки становятся блеклыми и слегка размытыми.
          0
          Вряд ли более блеклыми и размытыми чем при 20% качестве…
            +1
            Не скажите, вот не поленился:
            вариант 512 по ширине, качество 75, размер 62кб
            вариант 1024 по ширине, качество 20, размер 44кб
              +1
              Второй вариант однозначно лучше.
                +8
                но оба поганые.
          +6
          Вот статья со сравнением изображений при разных подходах: blog.netvlies.nl/design-interactie/retina-revolution (наверное, пару изображений оттуда не мешало бы добавить и в статью здесь).
            +1
            Спасибо за ссылку! Если вы не против, то добавлю в текст.
              0
              Я очень даже за :)
              К слову, это не совсем оригинал, вот он: blog.netvlies.nl/design-interactie/retina-revolutie-follow-up
                0
                Уф-фф, вру. Первый — оригинал, а второй — продолжение, просто на нидерландском (оттого я решил, что первый — это перевод с купюрами).
                0
                На ретине там прекрасно видно как всё пережато кроме последних вариантов. Особенно текст нечёткий.
            +1
            Тут возникает другой вопрос. Насколько красиво будут выглядеть отмасштабированные картинки не на ретине. То бишь делаем 600х400, а в теге img прописываем 300х200. Артефакты масштабирования не появятся?
              0
              Современные браузеры нормально масштабируют (особенно на ступенчатые масштабы).
              Если использовать уменьшение до 50% или 25% — проблем не будет.
                +1
                За 25% я бы не стал ручаться. Помоему честную билинейную интерполяцию при уменьшении сейчас не делает никто. Все берут не больше 2-х ближайших пикселей. Соответственно при 25% 3/4 пикселей потеряется.
                  0
                  Про «не больше 2-х ближайших пикселей» — это достоверная информация или догадки?
                  +1
                  Firefox не сглаживает
                    0
                    developer.mozilla.org/en-US/docs/CSS/Image-rendering
                    Там внизу есть примеры картинок, в FF уменьшеные картинки не гладкие, даже есть указывать максимальное качество в стилях
                      0
                      Хотя при качестве изображения 20%… Может даже будет и нормально смотреться
                        0
                        Так баг должны будут в 18-ой версии браузера закрыть (если не ошибаюсь). Там примеров куча и в ночных версиях и им подобных все смотрится вполне красиво.
                          0
                          Надеюсь таки в 18-м
                  –3
                  Всё проще (хотя с какой стороны посмотреть) — нужно делать два изображения: для не-ретины подгружается изображение в стандартном размере (ничего не масштабируется), для ретины — в двойном («масштабируется» из виртуальных пикселей в реальные)
                    +2
                    А вы точно статью прочли?
                  +4
                  Действительно, «более альтернативный способ.»…
                    0
                    А на retina с такими изображениями точно не будет преобразований? Не получится так, что при рендеринге изображения 600x300 сначала сожмется до 300x150, а потом будет увеличено до 600x300?
                      +1
                      Нет не будет. Retina ни чего не сжимает, но за то при таком подходе ей ни чего не надо итерполировать.
                      +1
                      80% jpeg? Я, обычно, сохраняю не ниже 90%, чаще всего — 95%. При 80% артефакты же ужасные будут.
                        0
                        Да ладно, я всегда сохраняю в качестве 51% — никто еще не жаловался.
                          +3
                          Можете минусы воспринимать как жалобы )
                            +1
                            В принципе, я и правда не понимаю, почему так негодуют 4 человека. Сохранять жипег в качестве больше 60% для мобильных устройств я считаю неразумным. 4G интернет есть пока далеко не у всех. У меня и 3G работает через пень-колоду по праздникам (оператор — Билайн). Юзер все равно не увидит артефактов на небольшом экране планшетника или телефона. Тогда зачем, спрашивается, на заставлять пользователя грузить лишние килобайты? Ради наших эстетических чувств?
                              +2
                              P.S. Да и для десктопов качество 80% и выше нужно очень редко (особенно в оформительских элементах). Вот картинка с качеством 51%. Чем она плоха?
                                0
                                Очень интересная шкала сжатия у вашего редактора.

                                JPEG 51 в Paint.NET
                                JPEG 51 в GIMP (оптимизированная, прогрессивная)
                                JPEG 51 в GIMP со сглаживаением 0,4 (оптимизированная, прогрессивная)
                                • UFO just landed and posted this here
                                    0
                                    1) Не так уж давно я пробовал тестовый предрелизный CS6. Там такого быть не могло.
                                    2) Да, но при такой большой разнице эффект накопления артефактов роли играть не должен.
                                    • UFO just landed and posted this here
                                –1
                                Вообще да, ради эстетических чувств. Представьте, для некоторых людей это важно.
                            +7
                            Это какая программа при 80 дает ужасные артефакты?
                            В ФШ, на мой вкус, обычно оптимально 70-80% (хотя бывают и исключения — в обе стороны).
                              0
                              Да любая. Или они ужасные на мой вкус, я не знаю. Но такие картинки всегда заставляют меня морщиться.
                                +2
                                Не-не, «любая» — это не ответ. В разных программах шкалы jpeg-сжатия очень сильно не совпадают.
                                Чем именно пользуетесь конкретно вы?
                                  0
                                  Вполне ответ. Везде плохо. Пробовал Фотошоп, Пэйинт.НЕТ, Пиксельматор (МакОС), ГИМП, что-то ещё.
                                    0
                                    Я знаю, что шкалы разные. Это уж все известно, наверное.
                                    +1
                                    В гимпе 95% примерно как 80% в Фотошопе — у них алгоритмы разные. Я обычно меньше 80 по Фотошопу не сохраняю, для маленьких актуально и больше. Насчёт артефактов в целом совершенно верно.
                                  0
                                  Я еще давно опытным путем установил, что самое лучше значение размера и качества это сжатие ровно 85%, на процент меньше, и качество сильно снижается, а меньшее сжатие на качество не сильно влияет, но размер увеличивается.
                                • UFO just landed and posted this here
                                    +2
                                    Думаю первоисточник достаточно проблематично уже определить. В англоязычном сегменте этот способ достаточно часто встречается и давно, русскоязычном к сожалению не встречал. Специально предварительно просмотрел хабр и ни чего подобного не встретил. Подумал возможно кому то окажется полезным.
                                    • UFO just landed and posted this here
                                      +4
                                      Я не придумал этот способ, просто рассказал о нём.

                                      Видео с Технофорума: www.youtube.com/watch?v=n0Vy9cYES-4
                                      Сама презентация: pepelsbey.net/pres/clear-and-sharp/
                                        +1
                                        Увы, даже у Вадима в докладе прекрасно видны артефакты на пережатом изображении (ср. с исходным), что с ретиной, что без.
                                        +3
                                        Возможно это самый короткий туториал на хабре
                                        Такой короткий, что я не понял зачем в нём кат.
                                          +2
                                          чтобы интригу сохранить, так переходов больше.
                                            0
                                            Кат убрал ))
                                            +3
                                            Пробовал, но получается не ахти. Масштабирование в разных браузерах разное, но везде заведомо хуже графического редактора.
                                              0
                                              Что бы верстка не «поплыла» необходимо в тэге IMG явно указать размеры. То есть если следовать этому способы при наличии картинки 200х200 в IMG необходимо указать 100х100.
                                                0
                                                Хорошо если масштабирование кратное, да и даже в этом случае браузеры бывает «замыливают» картинку, а точность иногда нужна допиксельная.
                                              0
                                              Действительно работает!
                                              Масштабирование не супер-идеальное, но вполне приемлемое, и при этом без лишних телодвижений.
                                              Дешево и сердито, как говорится.
                                                +4
                                                на реальных фото JPG 30% получим дивную постеризацию на небе, на лице, на любых более-менее равномерных градиентах и никакое масштабирование не спасет.
                                                В примерах по ссылке очень специально подобраны картинки для сравнения. Во-первых большие области одного цвета, во вторых диапазон цветов заужен, толи специально, толи от неграмотности автора или фотографа.
                                                  0
                                                  Все столько пишут про эту ретину, про совместимость сайтов, аж тошнит уже.
                                                  А кто-нибудь знает нормальный способ выяснить, как ваш сайт отображается на ретине, не тратя, как минимум, 2500$ на покупку макбука?
                                                    0
                                                    Способа, вероятно, нет, потому что для этого нужно как-то сэмулировать то, как будет работать браузер (а браузеры разные и графику масштабируют тоже по-разному) на ретине (то есть, чтобы графика 1:1, а текст 1:2). Может быть, кто-то придумает способ сделать это, тогда можно будет поставить монитор подальше и увидеть то, что вы увидите на дисплее с ретиной. То есто это должна быть настройка браузера, включающия этот механизм. Она, вероятно, у браузеров, где-то есть, но пока её никто не нашёл.
                                                      0
                                                      Поставить масштаб страницы 200% — не?
                                                        0
                                                        Нет, нельзя. При масштабировании даже вёрстка будет другая. Как браузер захочет отмасштабировать картинки, тоже непонятно. Масштаб — это другой случай.
                                                          0
                                                          > вёрстка будет другая
                                                          Вот у вас страничка 1024 в ширину. Делаете ширину окна 2048 и масштаб 200%. Не хватает монитора для удвоения? Открываете web-инспектор, смотрите ширину body, прописываете ему явно style=«width: xxxpx;». Так верстка такая же будет?

                                                          > Как браузер захочет отмасштабировать картинки, тоже непонятно.
                                                          А как он может захотеть? Что именно вас пугает?
                                                            +1
                                                            Наглядный пример
                                                            Видите вот это подчёркивание под ссылкой? Почему оно шириной в один пиксель? Какая была бы его ширина, если бы мы отмасштабировали страничку как картинку? Какая была бы его ширина, если бы это был скриншот с ретины?
                                                              0
                                                              Похоже вы правы, по крайней мере в эмуляторе айпада эта полоса в два физических пикселя:


                                                              Но другой вопрос, а важно ли это. На удвоенном масштабе можно увидеть мыльные картинки, а подчеркивание не слишком влияет на восприятие страницы.
                                                                0
                                                                Ну да, можно посмотреть и примерно увидеть, как оно будет выглядеть. Или отдельную картинку смасштабировать. Но это немного не то: я говорил о том, что хочется посмотреть полный сайт, грубо говоря в браузере включить UseRetinaMode, а он бы уже увеличивал картинки, шрифты, прочее — абсолютно так, как он делает, когда запущен на ретина-дисплее, без лишних телодвижений, догадок о размере шрифтов, границ итд. Имхо только это нормальный безгеморройный способ проверки.
                                                                  0
                                                                  Попробовал вот еще что: gist.github.com/3191869
                                                                  Но это жесть конечно, на такое разрешение переключаться. После этого все окна едут.
                                                      0
                                                      iPad, сейчас вполне реально найти знакомого у которого он есть и взять на денек.
                                                        +1
                                                        crbug.com/163327

                                                        Написал на багтрекер Хрома.
                                                        +1
                                                        В каждом предложении: «Скорее всего», «Вероятно», «Наверное», «Может быть»…
                                                          +8
                                                          вот живой пример, на овечках :) постеризация в левом верхнем углу совершенно неудовлетворительная. хотя на остальной картинке не так заметно.
                                                          image
                                                          +1
                                                          С фотками ладно, сойдет и так, а что делать с графическими элементами интерфейса: полосочками, фончиками, иконочками, кнопочками и прочая попиксельная мелочевка? такой вариант уже на них не прокатит…
                                                            +1
                                                            Всё в SVG.
                                                              0
                                                              Я как дизайнер отдавая картинку для веба в растре, знаю, как будет выглядеть она во всех браузерах, а вот за svg не уверен, даже программы векторные один и тот же svg могут открыть по разному, если там не тупо квадратик с кружочком. Ну и попадание в пиксели при рендеринге svg в браузере, тоже не даст никто 100% гарантии.

                                                              Ещё в 7-8 году предрекали революцию svg в вебе, но чето не видно её… проще уж полосочки и кнопочки на css зафигачить, останутся только иконки, но тут придется опять же под ретину весь сайт переделывать…
                                                                –2
                                                                > даже программы векторные один и тот же svg могут открыть по разному

                                                                Я скажу по секрету, что даже шрифты на разных системах рисуются различно. Их что, что-бы удовлетворить желание дизайнера, который хочет точного соответствия пиксела к пикселу, тоже делать растровыми (сохранять в png и вставлять картинкой)?
                                                                  +1
                                                                  не путайте теплое с мягким :)
                                                                  шрифты на разных системах и отображение на одной системе в разных браузерах, две большие разницы.
                                                                    +1
                                                                    > шрифты на разных системах и отображение на одной системе в разных браузерах, две большие разницы.

                                                                    У меня Safari на Win отрисовывает шрифты по фирменному алгоритму Apple, Firefox версий 4 — ~8 использовал аппаратное ускорения, в результате шрифты были замыленными, и смотрелись отлично от их-же аналогов на той-же системе, IE8 тоже использовал отличные от системных настройки сглаживания. А Chrome и Opera в таком не замечены.

                                                                    И это все не мешает мне читать текст, написанный этими шрифтами. Как и возможные различия на разных системах/интернет-обозревателях в отрисовке SVG графики не будут мешать ее восприятию пользователем.
                                                                      0
                                                                      Когда у вас отрисовывается по другому весь массив текста, то это одно. А когда из-за различий рендера уедет край менюшки, будет выглядеть некрасиво.
                                                                        0
                                                                        Хотя я и не изучал вопрос досконально, но как может уехать край вообще? Единственное возможное различие, насколько я понимаю — как будет сглажено изображение. Если я не прав — поправьте.
                                                                    –4
                                                                    лучше скажите когда будет революция svg?
                                                                    вот ajax это революция, а svg в вебе это как костыль здоровому…
                                                                    +1
                                                                    Я как дизайнер отдавая картинку для веба в растре, знаю, как будет выглядеть она во всех браузерах…
                                                                    Даже на 120% масштаба? Довольно частое явление: слабое зрение, большой экран, ноуты с большим разрешением экрана и т.д.
                                                                      –2
                                                                      очень частое явление…
                                                                      у вас есть статистика? или для вас лично частое?
                                                                        0
                                                                        Я часто даю такую рекомендацию людям со слабым зрением. Уже многим приотрыл двери к различным методам изменения масштаба в браузерах и других обыденных программах, а так же по настройкам dpi для шрифтов и других экранных элементов в ОС.
                                                                  –1
                                                                  SVG.

                                                                  added:
                                                                  // Меня опередили ;(
                                                                  +2
                                                                  На самом деле я думаю, пока не стоит сильно рыпаться совершать много резких телодвижений. На данный момент дисплеев с двойной плотностью еще немного, Win8 насколько я помню в настольном режиме масштабирует все далеко не идеально (следовательно, под системы с Win пока наплыва таких дисплеев не ожидается), на iГаджетах дисплей не большой, да и многую графику, типа элементов интерфейса или иконок можно безболезненно делать в svg, оставляя только фотографии «неретинальными».

                                                                  Основная-же причина в том, что стандарты для таких дисплеев только разрабатываются. Есть (-webkit-)image-set, есть @media с min-device-pixel-ratio, тут тоже описано много разных колдунств типа image-rendering (как масштабировать изображение при его несоответствии реальному размеру, если я правильно понял). Одним словом, пусть доделают нормально технологии, а потом мы их будем использовать.
                                                                    +2
                                                                    Плохой пример по вашей ссылке. Все изображения не такие «сложные» в нём. Попробовал, как вы и сказали .jpg, уровень качества 20 % справа, в два раза больше, чем слева. Вы хотите сказать, это приемлемо? Разумеется, открывал я это на ретине. Изображение чуть лучше ввиду того, что она меньше гораздо, но все равно видны ужасные артефакты на градиентах.
                                                                      +1
                                                                      Меня сейчас конечно закидают тухлыми помидорами, но есть ли смысл адаптировать сайт под ретина?
                                                                      У кого нибудь есть дельная статистика что на сайт заходят 20% пользователей с ретина, а еще и уходят по причине что картинки плывут на сайте плывут?

                                                                      Статья была про 20% трафика рунета приходится на трафик мобильных устройств. Вот только на соц сети и почтовые ресурсы приходится скорее всего 19%, на остальные ресурсы остается 1%,
                                                                      Стоит ли игра свеч все эти оптимизации?

                                                                        +2
                                                                        Лично я начал адаптировать из-за того, что на собственном сайте просмотр картинок начал вызывать тошноту… Подумал, что кроме меня кто-то еще может зайти с ретиной и пожалел людей.
                                                                        А найти собственное оправдание для того, чтобы что-нибудь не делать можно всегда.
                                                                          +2
                                                                          Думаю это самая распространенная причина поддержки ресурсом @2Х-графики — покупка владельцем сайта девайса с ретина-экраном :)
                                                                            0
                                                                            Аналогично, после покупки макбука с ретиной стараюсь прикручивать поддержку на все свои сайты )
                                                                              0
                                                                              Фанатизм тоже излишен. Я считаю, что наибольшее внимание этому вопросу надо уделять там, где пользователи сами генерируют контент. В дизайне большая часть должна решаться через css, остаются иконки, которые пользователям не так важны. А вот загружаемые фотографии каждый жаждет увидеть во вменяемом качестве. Учитывая, что большинство пользователей не задумываясь грузит 4-6 мб фотки (как с мыльницы скопировали на хард, так и вставляется по соц. сетям), подобный контент можно без проблем серверными скриптами подготовить к отображению на сайте.

                                                                              Поэтому до появления явно отточенной технологии работы с @2x не считаю необходимым внедрять временные костыли по всем проектам.
                                                                            0
                                                                            Судя по нашей статистике, больше чем пользователей IE6 ;-). Сложно сказать точно, похоже, что никто не замерял именно этот параметр, но, основываясь на нашей статистике, я бы оценил, что как минимум 1% посетителей пользуется устройствами (в основном планшетами) с повышенной плотностью пикселей — достаточно, чтобы задуматься о поддержке.
                                                                              0
                                                                              P.S. Телефоны в этой оценке я не беру в расчёт — им актуальнее вообще отдельный дизайн. Но на некоторых сайтах доля телефонов ещё больше (показательна статистика vk например), и, думаю, не меньше половины из них имеет высокое разрешение.
                                                                                0
                                                                                Вы уверены, что люди с дорогими смартами сидят вконтактике через браузер?
                                                                                  +1
                                                                                  Да. Статистика Оперы Мини показывает, что даже через неё сидят.
                                                                          • UFO just landed and posted this here
                                                                              +2
                                                                              Похоже, что image-rendering: -webkit-optimize-contrast; вполне помогает.
                                                                                0
                                                                                Аналогичный вопрос про современные телевизоры, невозможно в старые игры играть без слез, даже через компонент :(
                                                                                  0
                                                                                  Скорее вопрос, почему браузеры, поддерживающие ретину, не умеют загружать для нее увеличенные изображения?
                                                                                    0
                                                                                    Потому что так выглядит нередко ещё хуже, особенно на фотографиях. Браузер не знает фотография это или нет. Впрочем и без фотографий бывает плохо: например Яндекс.Карты. С размытим плохо, без — ещё хуже.
                                                                                    • UFO just landed and posted this here
                                                                                    +3
                                                                                    Высокая детализация ретины как раз нужна для того, чтобы рассмотреть в подробностях артефакты сжатия jpeg 20%.
                                                                                      0
                                                                                      Я не понимаю, объясните как можно было сделать такой экран, который лучше по качеству, на на котором всё хуже видно?

                                                                                      Комментарий не ради троллинга и разжигания холивара, просто не понятно, зачем такая технология вообще нужна? Почему нельзя масштабировать попиксельно например?
                                                                                        –1
                                                                                        Пусть меня закидают помидорами, но мне кажется, что это такой пиписькомер. У мониторов это время отклика, у фотоаппаратов это разрешение матрицы, у планшетов — плотность пикселей. Надо же как-то юзеру объяснять почему твой товар лучше чем у других.
                                                                                        0
                                                                                        Можете закидать меня помидорами, но я не смог добиться того, что показано на картинках по ссылкам.

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

                                                                                        ИМХО метод применим, но только в каких-то узких границах: нужно либо подбирать специально изображения без ровных плашек и градиентов, либо все-таки смириться с увеличением размера файла.

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