Я ненавижу Ретину Да, я ненавижу все эти ваши новомодные супер-экраны в айфонах-айпадах и прочем говне. Они сломали мне интернеты. Теперь эта дрянь в каждом втором андроиде и производители гонятся за все большим и большим количеством Dots Per Inch. Всех этих людей я бы хотел связать от отывать им по кусочку пальца, а когда все пальцы будут надорваны, продолжить процедуру с самого начала, а потом засунуть в машину для разрезания стали на тонкие полоски. Начнем с того, что так уж получилось, что мы используем в нашем мире пиксельные устройства, потому все рано или поздно станет пикселем. Тем самым квадратиком, который многие не хотят видеть. Фактически, эти люди не хотят видеть строительных кирпичиков своей реальности, предпочитая замыленные очки маркетинга. Да, тут будет много абзацев с моей жопной болью, поскольку тема для меня очень болезненная и уже второй абзац я сваливаюсь в свои страдания, вместо технических деталей. Нет, я постараюсь со следующего абзаца все исправить. Так случилось, что из множества вариантов технологий для отображения изображений победила... матрица из маленьких квадратиков, называемых пикселями. В далекие-далекие времена, когда пикселей было мало, то существовало особое исскуство рисования - Пиксель Арт, это когда на малом разрешении экрана рисовались страшные монстры и былинные герои, графика была четкой и яркой, а весила по современным меркам вообще копейки. Время шло и постепенно количество пикселей стало увеличиваться, и если по началу разрешение 640х480х256 рассматривалось как SUPER TRUE HD ULTRA GRAPHICS, которое требовало специальных драйверов и не запускалось абы где, то нынче в таком разрешении даже сайт не посмотреть и новости нормально не почитать. Но почему? А ведь ничто не мешало делать "журналы на дискетах", которые читали на еще более меньших экранах в меньших разрешениях, не говоря уже про забытый текстовый режим. Вроде бы мы идем вперед, пикселей больше, а возможностей меньше? И я не могу сдерживать свою боль и снова сваливаюсь в ностальгию, когда каждый порядочный сайт требовали оптимизировать хотя бы под 800х600 как минимум, а лучше под 640х480, иначе его просто не принимали. Современные веб-обезьяны наверняка посмеются над этими словами, гыгыкая и тыкая в монитор жирным пальцем, но это их особенность, не будем об этом. И если у нас монитор (устройство отбражения) состоит из логических квадратиков, то и отображаемый контент (картинки) скорее всего тоже следует делать из этих же квадратиков! В принципе, векторная графика тоже существовала очень давно, но процесс растеризации был (и остается) очень небыстрым, поверхность кривой может рендериться часами (да, в 3D это обычное дело, а ведь это тоже векторная графика), при этом границы этой кривой как были драными, так и остаются. По антиалиасингу написано много книг и создана куча алгоритмов, но толку от этого почти никакого, идеал где-то очень далеко. Конечно, можно использовать рейтрейсинг фотонами и за несколько часов на топовом железе будет что-то почти без драных краев. В общем, пришли мы к тому, что у нас картинки из квадратиков и устройства для просмотра картинок тоже из квадратиков. Квадратики эвривеа, от них не убежать. А если у нас контент не из квадратиков, то он станет квадратиками (другое в монитор просто не пролезет), но ценой невероятных вычислительных мощностей. Тут конечно надо еще раз свалиться в мою боль, что вычислительных мощностей сейчас СТОЛЬКО, что с типичного домашнего компьютера можно было бы завоевывать целые галактики, но мы не можем этого себе позволить, так как ресурсы брошены на антиалиасинг и прочее говно, в результате даже веб-странички с рецептами по варке макарон нормально без тормозов не почитать. Раньше рецепты читать было проще. И ничего не тормозило. Может быть в будущем нас ждет новый текстовый режим и аппаратный рендеринг? Впрочем, к этому мы еще вернемся. А что будет, если мы добавим немного пикселей? У нас будет место, где мы сможем написать больше текста, посмотреть больше картинок, разместить больше программ, в общем более продуктивно использовать свой компьютер! Правда тут есть один нюанс, со сменой разрешения, размер монитора не изменится (в эту боль я пойду позже), а значит пиксели станут чуточку меньше. Кнопочки на экране станут чуток меньше, а значит по ним будет сложнее попадать. Но все равно, зачастую это удобнее, кнопочек влезает больше, а зрение быстро привыкает к мелкому тексту. Или нет? Как выяснилось, не привыкает. Ну, смену 640х480 на 1024х768 еще можно вытерпеть, а дальше? Дальше у людей начинаются сложности и им хочется "шрифт сделать побольше, я плохо вижу". Я лично не очень понимаю, зачем людям сначала ставить большое разрешение, чтобы потом мучаться и делать шрифт "побольше". Тут можно пуститься в множественные предположения, что возможно человек не хочет видеть тех самых квадратиков, а возможно он просто мудак и выставил настройки по максималочке. Мы этого не знаем и скатываться в философию тут не будем. Проблема тут в том, что "сделать шрифт побольше" - это достаточно сложная задача. Это надо отрендерить все шрифты в разрешении "побольше". Для хранения таких битмапов надо памяти "побольше". Для копирования таких шрифтов на экран, надо процессорного времени "побольше". Да, на каждую выводимую букву, а их много! Да и похуй, ведь у нас и процессорных ресурсов с каждым годом БОЛЬШЕ, МЫ МОЖЕМ СЕБЕ ЭТО ПОЗВОЛИТЬ!!! Впрочем, это только одна из школ растеризации текста. Мелкая лавочка, которая и сломала мои интернеты, считает эту методику неприемлемой и борется на суб-пиксельные смещения, полностью игнорируя пиксельную сетку, только типографика, только хардкор. И вот так вышло, что наращивать размер шрифтов и разрешения теперь оказывается можно практически бесконечно. А еще можно выпускать не только мониторы, но и всякие планшеты и даже телефоны. Даже часы. А разрешение какое? Конечно же 1080p, чтобы смотреть кинчик без конвертации и без потери аспектов. Ну как еще тупому быдлу впарить девайс с функциональностью 10-ти летней давности? Правильно - раздуть пикселей. И рассказать, что теперь шрифты будут НУ ВАЩЕ ГЛАДКИЕ. И вот тут уже, чтобы прочитать текст, надо уже делать его не просто "побольше", а реально неебических размеров текст. Причем не просто "покрутить шрифт в браузере", а где-то на уровне системы, чтобы шрифт везде был большой. Внимательный слушатель наверное уже заметил, что мы как-то обошли стороной картинки. Куда они подевались? Да никуда. Немного цифр: мы нарисовали красивую картинку размером 300х300 пикселей. При разрешении 640х480 она будет занимать половину экрана. При разрешении 1024х768 уже треть горизонтали! При разрешении 1920х1080? Примерно 1/6 по горизонтали. Если же у нас это 1920х1080 находится на мобильном телефоне, с размером экрана 5х3 см, это будет чуть менее 1см. Сможешь ли ты разглядеть, что было нарисовано на моей замечательной картинке, если размер ее менее 1см? И вот тут на сцену нашей драмы выходит такая штука как DPI - Dots Per Inch. Количество пикселей (точек) на дюйм. Теперь у маркетологов есть новая циферка, которую они могут раздувать и доказывать, что именно их девайс нужен всем. А еще эта цифра говорит системе, какого размера должны быть шрифты, картинки, кнопки и прочие элементы. Теперь пользователь знает, что он купил не лоховскую звонилку, а TRUE HD, а система знает, что картинку надо увеличить, а иначе пользователь ничего не увидит. Увеличение картинок в нашем мире делают через ресемплинг - достаточно дорогую операцию, которая требует дополнительного выделения памяти и на выходе выдает интерполированный (размыленный) вариант. Благо, у нас есть пара гигабайт на телефоне, чтобы это разместить в памяти и 4 ядра, чтобы это отблитить на экран. И двойная батарейка, чтобы запитать эти 4 ядра, чтобы быстро-быстро блитить и списочки не тормозили. И вообще, есть OpenGL ES, который позволяет сделать мыльцо аппаратно, правда это сложно и в обычных приложениях такие фишки железа почти никогда не используются. А что делать? Выбор не велик: или картинка в 1см, или мыльцо. Зато настоящий пацанский телефон, а не какая-то лоховская звонилка. Надо отдельно сказать про другую мелкую лавочку из села Редмонт, где делают популярную операционную систему "Окна". Понятие DPI в этой операционной системе было давно, да вот только настолько кривое, что со значениями отличными от 72 (75), постоянно происходят какие-то странные вещи. То менюшка какая отвалится, то кнопка уедет, то курсор на скринкасте будет с зазубринками, то еще произойдет что-то интересное и забавное. Поэтому маркетинг тут просто не работает. Но маркетинг должен работать! Именно поэтому я купил 24" монитор, хотя вертеть головой перед ним крайне неудобно и такой большой размер мне в общем-то не нужен. Причем тут маркетинг? Да при том, что практически все ширпотребные мониторы имеют разрешение 1920х1080, не зависимо, нужно такое разрешение пользователю или нет. Все остальное имеет уже другой ценовой диапазон и шильдик "премиум", даже если это мое любимое 1024х768. Я не готов переплачивать в 5 раз, чтобы купить именно то, что я хочу. И чтобы хоть немного видеть пиксели, от которых избавляются маркетологи, мне пришлось сначала купить огромный монитор, а теперь раздвигать окошки на 1/3 экрана, чтобы не вертеть головой и держать набираемый текст в области зрения. Да, зрение у меня не самое лучшее, потому я не могу поставить монитор в метре от себя. А если бы и мог, то зачем тогда такое раз решение, если бы видел я все равно меньше? Это уже из серии, когда человек покупает плазму, но вешает ее под потолком. Разрешающая способность древней нокии, которая будет в руках, легко побьет эту плазму на потолке. Нетерпеливый читатель спросит: причем тут сломанные интернеты? Сейчас, сейчас! Другая лавочка, которая находится в селе Купертино и тоже делает операционные системы, смеется над неудачами сельчан из села Редмонт и делает свои системы под свои же экраны с просто охренительными разрешениями. И даже точек на дюйм у них столько, что любая баба будет течь от упоминания таких цифр. Бабы таким дают. И мужики тоже. За те деньги, что стоят эти девайсы, особенно в этой сране, я бы сам дал кому угодно. Таким, кто имеет устройства с таким разрешением. К сожалению, именно эти люди зачастую становятся дизайнерами. И именно они делают интернеты. Дальше пойдут технические аспекты говняния интернетов и люди, не имеющие опыта разработки мало что поймут, но могут почувствовать мою эмоциональность и боль, передаваемую сквозь текст. Как выше было замечено, картинки на этих ваших ретинах и ваннаби-ретинах являются мыльным говном. А зачем тогда эти ваши супер-разрешения, только для текста? Впрочем, вот картинка в тему: http://static.fjcdn.com/large/pictures/23/76/2376e4_5374109.jpg Я бы сказал что это хорошая шутка, но шутить ведь нельзя! И вот авторы этой картинки тоже дошутились, что в моду вошли шрифты с иконками. Зато ретина. На самом деле, если уж девайс выдает настоящие пиксели, то можно отобразить и картинку в высоком качестве. Для этого нам нужна картинка в высоком качестве. Благо, в процессе дизайнерства, картинки порой очень большие, это не проблема. Осталось донести ее до пользователя. Как выяснилось, есть несколько способов это сделать. Давайте посмотрим на них: 1. Иногда можно указывать разрешения, в девайс сам подтянет нужное: Что-то такое было на древних нокиях, во времена, когда выпускали приложения под конкретное разрешения экрана или даже под конкретную модель. 2. Можно использовать продвинутые CSS-селекторы: .repeatingPattern { background: url(../images/bgPattern.png) repeat; background-size: 100px 100px; } @media only screen and (-webkit-min-device-pixel-ratio: 2) { .repeatingPattern { background: url(../images/bgPattern@2x.png) repeat; } } В общем-то типичный путь проприетарного расширения: сделать какое-то нечитаемое остальными свойство и использовать его. 3. Можно использовать JS для "улучшения" картинок: if (window.devicePixelRatio == 2) { var images = $("img.hires"); for(var i = 0; i < images.length; i++) { var imageType = images[i].src.substr(-4); var imageName = images[i].src.substr(0, images[i].src.length - 4); imageName += "@2x" + imageType; images[i].src = imageName; } Тут мы сначала грузим обычные картинки, запускается скрипт и просто заменяет ссылки, добавляя к ним волшебное @2x в конец имен. Интернеты нынче быстрые, трафик дешевый. 4. А еще можно не использовать растровую графику и использовать SVG для иконок. Когда-то давно на одном известном сайте всю графику сделали на флеше, вызывая инстанс флеша для каждой иконки. Тормозило? Конечно! Но это тормозило 15 лет назад, а нынче такая техника вполне допустима, у нас же быстрые компьютеры! И наплевать, что рендереры SVG жуткие тормоза по сравнению с флешем. Впрочем, о растеризации векторной графики уже написано выше. 5. Наконец, есть самый простой, элементарный и наиболее очевидный способ: взять реально БОЛЬШУЮ картинку и задать ей в ручном режим нужный размер. К примеру, взять картинку 200х200 пикселей и написать: Это работает примерно следующим образом: сначала начинает загружаться страничка и определяется ее viewport (ну скажем, 320х480 пикселей), зависит это от размера экрана, настроек или от того, как сильно пользователь "щипнул" экран в порыве масштабирования, затем относительно этого вьюпорта расчитывается, сколько же реальных пикселей должен занимать квадратик в 100х100 пикселей, затем грузится картинка в 200х200 реальных пикселей и скейлится уже под подсчитанный размер. Таким образом и верстка не едет, и мыла в 2 раза меньше (конечно, пикселей в 4 раза больше, но интернеты нынче быстрые, память дешевая). Внимательный читатель должен спросить, а что будет, если пользователь имеет НУ ОЧЕНЬ много пикселей на экране? Или, отзумил страничку, что вьюпорт стал меньше? Скажем, вьюпорт 200х пикселей на телефоне с 1920х? Правильно, наша картинка все равно станет мылом, ведь ее надо будет отскейлить до 960х960 пикселей. Разве что мыла будет чуть меньше, чем если бы мы ресайзили честные 100х100. Какой выход? А давайте вообще не ресайзить графику, просто будем задавать width/height у картинок, а устройство пользователя само разберется! Ведь взять картинку 1500х1500 пикселей и поставить себе на аватарку - милое дело, даже если аватарка представляет из себя 16х16 пикселей. Эта проблема общая вообще для всех устройств, даже не затрагивая веба, к примеру в андроиде нужны иконки приложений с размером 512х512 пикселей. Думаю, способов намного больше, люди выпускают даже целые книги о подготовки графики для ретина-дисплеев. Теперь, если отключить CSS на популярных быдлоресурсах вроде швабры, можно видеть лесенки аватарок абсолютно любых цветов и размеров, равно как и иконки интерфейса шириной в 2000 пикселей. Спасибо всем этим людям за то, что я качаю в тысячи раз больше говна и мой компьютер дичайше тормозит при открытии страниц, хотя на компьютере 10-летней давности странички просто летали. Казалось бы, чего волноваться? Ну засрали интернет, ну и что? Он и так засраный был. Просто надо ходить на хорошие сайты, где не срали! Но индустрия уже сдвинулась в сторону этой ретины и в будущем нас ждет: Непонятно когда это грузить

Если нету картинок, то вот вам текст В принципе неплохое решение, только вот я почему-то уверен, что обычной картинки не будет, а если и будет, то реально там будет high-res.jpg и все вернется на круги своя. Почему? Потому что редакторы (люди которые) не будут заморачиваться разными разрешениями и просто всунут картинку "как есть", а разбираться с разными разрешениями в лучшем случае поручат системе управления контентом. Впрочем, это только веб, а есть еще и десктоп, есть и мобильные девайсы. С ростом DPI растут и кнопки, и отступы между элементами, а по факту как 30 лет назад текста на экране было мало, так его и осталось. И как все тормозило в те годы, так и тормозит по сей день, а то и сильнее. Тут должны были быть еще рассуждения о алгоритмах скейлинга кнопок, о такой Gnome и пятках, о пиксельных шрифтах из WinXP и многом другом, но меня обвинили во вниманиеблядства, потому может быть в другой раз, если я когда-нибудь соберусь. Этот же пост я планировал написать около 3х лет.