Как мы будем верстать, когда экраны станут многопиксельными, а пиксели еле различимыми

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

    Вопрос этот у меня возник не случайно. Есть интересный проект, заказчиками которого являются фанаты Айпадов и Айфонов. Им очень важно, чтобы сайт одинаково хорошо отображался и там и там. То есть ширина экрана плавает от 800 до 2000 пикселей в ширину.


    Что нам делать с картинками в оформлении?


    Да, сейчас все браузеры научились хорошо масштабировать сайты. Нажал Ctrl, покрутил скроллом, и твой сайт в том размере, как тебе удобно. Но если растровую картинку 30 на 80 пикселей увеличить в трое, красоты это не прибавит.

    Мы в нашей рутинной работе верстальщиков уже привыкли к тому, что полностью зависим от пикселей. Мы все считаем в пикселях. Не важно, как мы встраиваем картину: в фоне или тегом Img.

    Я вижу 2 принципиальных решения:

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

    2. Переход на векторную графику в оформлении сайта.


    Используем несколько наборов файлов CSS и картинок


    В общем-то это решение. Определяем некоторые градации, скажем:
    2 048—1 601 пиксель
    1 600—1 281 пиксель
    1 280—1 025 пикселей
    1 024—800 пикселей.

    Возможно еще меньшее разрешение для телефонов.

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

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


    Векторная графика


    Главный недостаток: отсутствие поддержки у IE ниже 9 версии. Но, этот недостаток уходит, мы же говорим о будущем.

    Второй недостаток: фотореалистичные картинки переводить в вектор может быть не лучшим вариантом. Нет, если изначально сайт рисуют в кривых, то проблем нет. А если мы имеем хорошую фотографию, или дизайнер работает исключительно фотошопом, то проблемы серьезные. Программный рендеринг может быть излишним по весу, а ручной излишним по трудозатратам.

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


    Вопросов больше чем ответов


    Я честно признаюсь в том, что сам неуверенно гляжу в будущее. Может проблема вообще надуманная и ни какие доктринальные изменения нас не ждут.

    Буду крайне благодарен любым комментариям.


    Топики на хабре на эту тему


    Прощайте, пиксели
    Зум шрифта и верстка
    Правильная «резина»
    Как сделать один сайт для всех устройств (Responsive Web Design)

    Желание написать этот пост-опрос общественного мнения возникло после:
    Нечёткость значков истомляет нас


    И главный вопрос: а как же пиксель арт?


    Я большой фанат пиксельной графики и требую вернуть нормальное разрешение 320 на 240 на все без исключения мониторы.

    Средняя зарплата в IT

    120 000 ₽/мес.
    Средняя зарплата по всем IT-специализациям на основании 8 924 анкет, за 1-ое пол. 2021 года Узнать свою зарплату
    Реклама
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее

    Комментарии 70

      –1
      Верстка изменится также как изменился дизайн компьютерных игр: как изменился Warcraft 1 -> WOW.
        +44
        PS: мне нравились крупные пиксели, в каждом из них был свой смысл. А сейчас его разорвали на сотник мелких пикселей и он исчез, как вода исчезает в песке.
          +47
          Это же просто хокку, на тему топика:

          Мне нравились крупные пиксели
          В каждом из них был свой смысл
          А сейчас его разорвали
          На сотни мелких осколков
          И он исчезает, как вода на песке
            +3
            У Вас такой талант пропадает :)!
              +6
              Это танка и неправильный, к тому же
            +1
            Вероятно, будет виртуальное разрешение для картинок. Т.е. вместе с width и height будет ppi или типа того. Не для обычных картинок (из браузер и сам растянет) и не для иконок (они таки перейдут в вектор), а для пиксельных фонов и подобного.
          • НЛО прилетело и опубликовало эту надпись здесь
              +2
              Вот-вот тоже не понял автора топика, когда он обозначил проблему, которой вроде как и нет — учитывая: «Media Queries».
                +3
                Согласен. Не вижу проблемы.
                Последние 5-6 заказов были с обязательной поддержкой ipad/iphone (адаптивной версткой).
                Media queries решают задачу без каких-либо особых проблем.
                В добавок для iOS на помощь приходит viewport.
                +9
                Насчёт картинок — можно в вейвлет форматах хранить (тот же JPEG2000) — в зависимости от разрешения браузеры могли бы досчитывать с сервера только необходимую для данного разрешения часть.
                  +1
                  Хм… не подскажите как это должно выглядеть в коде? в теге img что указывать?:)
                    0
                    <%= image_tag 'adapt.jpg' %>
                      0
                      Покопался совсем немного в этих технологиях — jpeg2000 не все браузеры даже открывают. Кроме того, загрузка «необходимой для разрешения части» — тоже как-то не сложилось в практике.

                      В общем, имхо, кроме media queries ничего пока нет)
                  0
                  Можно даже с обычными JPG или PNG. Идея в том, что на стороне сервера автоматически генерируются размеры именно под текущее устройство (или берутся из кеша) — адаптивные изображения.
                  +5
                  Эй, неужели никто не заметил орфографическую ошибку в названии топика? разлечимыми
                    +2
                    Ошибка? А кто будет лечить пиксели?
                    +4
                    Вектор на самом деле тоже не панацея.

                    Вот здесь интересная статейка (на буржуйском). Там наглядная картинка с иконкой принтера в векторе и растре.
                      +1
                      Картинка «ниочем», такой же принтер как и в пнг можно нарисовать в векторе, просто задать ширину линий в пикселях немасштабируемой
                        +1
                        Можно попдробнее? Вы знаете, как у svg картинки задать ширину линий в пикселях?
                          +1
                          Хм, а вот про реализацию я не подумал, прошу прощения. Просто мне показалась такая возможность довольно таки очевидной…
                            +1
                            для векторной графики особо не очевидное решение. да и сам svg крайне незамысловат в своих возмоностях. я это понял, когда переводил векторную картинку из adobe illustrator в svg. пришлось отказаться от многих плюшек и пойти более тернистым путём
                        +2
                        Хороший пример, который наглядно иллюстрирует одну из проблем с вектором. Если бы тупой ресайз работал, то куча дизайнеров иконок остались бы без работы :)
                        +12
                        <sarcasm>
                        Скоро Apple скажет, как нам жить с этим.
                        </sarcasm>
                          +39
                          Меня тут конечно сейчас закидают…

                          Но я бы первым пунктом поставил отмену отсрочки от армии для аспирантов. Для и для студентов ВУЗов тоже бы не помешало…
                            +20
                            Ой…
                            Дико извиняюсь — попутал вкладки
                              +9
                              дайте ссылочку, похоливорим ;)
                            +1
                            ошибся темой
                              +11
                              Шикарно! Сначала, когда прочитал комментарий, решил, что нас почтил вниманием Владимир Вольфович.
                                +2
                                Прошу прощения, но разве Жириновский и ЛДПР выступают не за отмену призыва в мирное время? Ведь в каменте выше идет речь об отмене отсрочки для студентов.
                              +1
                              Главный недостаток: отсутствие поддержки у IE ниже 9 версии.
                              Слушайте, ну VML же, если очень нужен вектор. Кроме того, IE поддерживает отображение разных там WMF и прочих векторных форматов Винды.
                                +1
                                Я считаю, что проблема исчезнет сама собой с исчезновением старых экранов. То есть переход на экраны высокой четкости будет единоразовым и как только мы упремся в некий фактический предел различимости точек, все более-менее устоится и мы продолжим жить как и прежде, и использовать те же самые приемы, только уже в «HD».

                                Но проблема переходного периода налицо, тут не поспоришь.
                                • НЛО прилетело и опубликовало эту надпись здесь
                                    0
                                    пиксель картинки и пиксель устройства вовсе не обязаны совпадать

                                    Вот оно. Не так уж велика проблема, оказывается. Действительно же, размер картинок указать в единицах измерения длины — см/мм (к примеру), а масштабы — в тех же еm/%, что и так практикуется. Я уже не говорю о Media Query, которые упоминались выше.
                                    Единственное, что на мой взгляд могло бы быть затруднительным, это правильная интерпретация количества пикселей в миллиметре конкретного девайса.
                                  –1
                                  Главный недостаток: отсутствие поддержки у IE ниже 9 версии. Но, этот недостаток уходит, мы же говорим о будущем.

                                  Ну да, офисный планктонпользователи IE 6 сейчас начнут стадомрезко переходить на IE 9 и выше
                                    +1
                                    Вы случаем не из Китая пишите?
                                    +6
                                    НУ вообще говоря, я например вчера зашел посмотреть в магазин как работает New ipad. Получил интересную картину:


                                    Т.е. прикидывается он все же разрешением 1024х768. Так что если производители девайсов научаться делать разрешение экранов стандартным, а количество точек на экране увеличивать, то проблем не будет.
                                      +4
                                      Потому что он поинтами оперирует, а в его поинте — 2 пикселя. Но вам это знать ни к чему :)
                                      Как эту проблему решает Apple можно посмотреть на их же сайте www.apple.com/ipad/ — там все картинки нового айпада в двух вариантах, для каждого значения плотности.
                                        +1
                                        Ну скорее в поинте 4 пикселя… А что там надо на сайте увидеть? Вы имеете ввиду, что разные картинки отдаются если разными девайсами заходишь?
                                          +1
                                          1) Поинт — мера длины всё-таки.
                                          2) Да, разные картинки.
                                            +1
                                            Поинт таки или мера площади или zero-dimensional.
                                            Точка не может иметь длину. Она или имеет длину и ширину, либо ни того, ни другого.
                                              +1
                                              Но ширину экрана вы-таки в пикселях или поинтах измеряете.
                                                +3
                                                Следите за руками:
                                                — когда мы обсуждаем точку как меру какой-то размерности — мы говорим, сколько этих самых точек влезает в заданный объект (1280 — ширина экрана, 5Мпикселей размер снимка, пиксели везде пиксели — квадратных пикселей нет!)
                                                — когда мы обсуждаем размер точки — она уже определённо обладает площадью (ибо она нам и важна). Хочется, чтобы не забывали, что точка далеко не всегда квадратная ;)
                                              • НЛО прилетело и опубликовало эту надпись здесь
                                            +1
                                            то есть 1px в CSS это на самом деле 2px реальных на iPad?
                                              +2
                                              На iPad 3 да. И на iPhone 4/4S.
                                                0
                                                Ну и зачем они это сделали?
                                                  +4
                                                  Чтоб владельцы миллионов сайтов не кинулись переписывать свои творения.

                                                  Ну и чтоб текст на экране был четче.
                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                  +1
                                                  Идеально и практически исчерпывающе тему раскрыл PPK вот в этой презентации

                                                  Спасибо! Прямо в точку. Ее бы вынести в топик…
                                                0
                                                Правильно. Скорей всего разрешение в пикселях будет, как это ни странно, отражать физическую величину экрана, или даже визуальные размеры области видимости экрана при смотрении на него с предусмотренного расстояния. Пиксель будет логической единицей (подобно em) относительно этих размеров.

                                                P.S. Насчет растровых картинок: где-то на хабре видел сравнение алгоритмов перевода растра в вектор (на примере Марио вроде). Довольно интересные результаты получаются.
                                                +1
                                                Недостаток: лишние картинки, лишние css файлы, удлиненная по времени верстка. Ну, и вносить изменения тоже в четыре раза дольше.


                                                Можно хранить в репозитории картинки в максимальном разрешении, а при деплоее на сервер скриптом автоматически делать версии в разных разрешениях. Так делают для игр на iPad/iPhone/android, все работает.
                                                  +3
                                                  не панацея, ведь остаётся проблема низкого качества при ресайзе. непопадание в пиксель, замыленые края и тп.
                                                    +1
                                                    Для ретиы картинки ровно в два раза больше, так что проблема с непопаданием в пиксель должна уйти.
                                                  +12
                                                  Мне ещё вот это вспомнилось.

                                                  www.artlebedev.ru/kovodstvo/sections/71/

                                                  Помню, раньше, когда были ещё ЭЛТ-мониторы, выбирал на них не самое высокое разрешение (которое, к тому же, отображалось с мерцающими 60 Гц, а другие были хотя бы с 85), а какое-нибудь ближе к среднему. Чёткость отрисовки точек была одинаковая, только размер точки разный. И причина этому была совершенно простая — мне нравилось, чтобы иконки не уменьшались до крохотных, а были различимыми. И мелкий текст (особенно на картинках). И прочее.

                                                  В общем, я считаю, Лебедев тут пишет совершенно правильную вещь — ну не должно увеличение разрешение приводить к тому, что на экран начинает напихиваться больше элементов, больше текста, область карты большего размера и так далее — если, конечно, физический размер экрана не увеличивается. То есть в идеале нужно добиться того, чтобы большее разрешение создавало более чёткую картинку, а не картинку с более мелкими элементами (теми же самыми, которые раньше были комфортного размера).

                                                  Или взять, например, игру Battle for Wesnoth. Увеличение разрешения приводит к тому, что персонажи становятся еле различимыми — нормально играть на 1920x1080, например, по-моему невозможно. Причём у неё есть zoom, и это было бы неплохое решение, если бы не алгоритм, по которому он работает. От такого режима в такой игре ожидаешь, что пиксельная графика (карта, персонажи) будут отображаться крупными чёткими точками (а текст может быть и не пиксельным — наоборот приятно когда он более чёткий). А на деле этот режим работает со сглаживанием, и получается ужасная размытая картинка (о подобном размытии, правда, в случае с печатью, там тоже писали).
                                                    +2
                                                    Кстати, примечательно, что первая ссылка — лето 2001. Это напоминает историю с ipv6.
                                                    +1
                                                    А что делать с теплыми ламповыми фактурами в бекграунде? Их тоже переводить в вектор? А если оставлять в растре, то на разных экранах масштаб вактуры будет разным."

                                                    А зачем в вектор? В CSS3, кажется, уже придумали инструментарий для создания любого бекграунда. Смысл в топике был бы, если бы технологии оставались такими же как и лет 10 назад, но, к счастью, они не стоят на месте. Все движется и все меняется, верстка в том числе и даже в лучшую сторону, как по мне. В конце концов у нас уже есть canvas, в котором можно отрендерить даже 3д, осталось только ставить костыли для очень старых браузеров и ждать их ухода в мир иной.
                                                      +2
                                                      Все просто. Сейчас все масштабируется без проблем, кроме картинок. Как только все перейдут на высокие разрешения мониторов, например 2560x1600 для 15 дюймов, то и картинки все будут загружать с фотоаппарата в исходном размере, а не делая кроп 800×600. И все будет хорошо. Единственный минус — возрастет нагрузка на каналы связи. Простейший сайт начнет весить не 500 кбайт, а 5 метров. Провайдеры поднимут скорость инета новыми технологиями и все будет хорошо.
                                                        +2
                                                        Пиксельарт? Да никаких проблем! Рисуем разноцветными квадратиками. А редактор потом нам их склеит в двумерные меши и позволит ещё текстурку наложить. Красота :)
                                                        +4
                                                        Топикстартер, эти проблемы уже решили.

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


                                                        1) Media Queries
                                                        2) «Пиксель» сейчас уже не пиксель вовсе: css-live.ru/articles/novye-i-starye-edinicy-izmereniya-kratkij-obzor/
                                                          +2
                                                          Мне тоже кажется, что в будущем все картинки будут высокого разрешения (dpi/ppi), сайты будут того же размера, что и сейчас, но более четкие на высокопиксельных экранах. Исчезнет проблема попадания в пиксели, т.к. это будет уже неактуально (выше про ЭЛТ писали — ведь там не было никакой пиксельной резкости вообще). И все будут счастливы и довольны. Пиксели исчезнут как класс, или как точки на бумажной печати (при печати в 600дпи ведь никто не подгоняет векторные макеты чтобы они попиксельно попадали в 600дпи?)

                                                          Ну вот. А те, у кого экран не 300дпи — будет довольствоваться размытым ресайзом, также как и те, кто сейчас сидит на ЭЛТ мониторе с 1024х768.

                                                          В общем, нужно лишь немного подождать, чтобы все мониторы и девайсы приобрели dpi/ppi выше порога человеческого зрения — и тогда все наши нынешние проблемы с пикселями отпадут сами собой.
                                                            +1
                                                            Я думаю растровая картинка будет изначально избыточной по весу и явас цссом будут подгонять ее под экран девайса, пропускная скорость у провайдеров уже позволяет многое, лишь бы отдача у хостера соответствовала, сам же интерфейс сайтов было бы здорово делать векторным это и быстро и красиво и масштабируемо.
                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                                +1
                                                                На самом деле с помощью JS можно определить все требуемые размеры: экран, вьюпорт и т.д. Выше уже давали ссылку на презентацию, где это перечислено (в конце): quirksmode.org/presentations/Spring2012/viewports_sf.pdf
                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                                  0
                                                                  Мы говорим о будущем. Так что всё гораздо проще. Памяти со временем будет всё больше. Фотоаппараты всё круче. А интернет и браузеры всё быстрее. А посему вполне можно будет выкладывать на сайт фотки размерами… Ну где-то там ~5000x5000. Это про растр. А про вектор — он и в африке вектор.

                                                                  P.S. Вы поверили бы 10 лет назад, что некий Яндекс.Диск даёт бесплатно 10 Гб? это не реклама

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

                                                                  Самое читаемое