Значение DOM «window.devicePixelRatio» и свойство CSS «device-pixel-ratio» станут переменными величинами

[@Goodkat]

запущен ли сайт на сетчаточном дисплее (retina display)

OMG
Retina display — это маркетинговый термин, его не надо переводить как «сетчаточный», потому что сетчаточный дисплей — это "retinal display".

А статья интересная, спасибо :)

selector {
   background: image-set(url(foo-lowres.png) 1x,
                         url(foo-highres.png) 2x) center;
}

Ещё бы такое для тега <img> сделали.
Изменение devicePixelRatio в зависимости от зума — это правильно. Часто бывает, что растягиваешь картинку чтобы рассмотреть, а там — 128х64. Было бы неплохо, если бы картинка при зуме становилась чётче.

[@Evengard]

… и ещё лучше было бы, если бы веб-серверы сами умели отдавать из фулл-сайз картинки только самое необходимое на текущий момент…

Мечты, мечты…

[@Goodkat]

Progressive JPEG?
Но автоматически — это как?
Это же клиент должен как-то сообщать серверу, в каком качестве он хочет получить картинку. А при зуме — докачивать.
Но если браузер сможет динамически обрабатывать зум и background: image-set, то уже хорошо — можно автоматизировать сжатие картинок и генерацию image-set-ов на замену <img>.

[@Evengard]

Например так:
<img src=«example.com/image.jpg?1x 1x; example.com/image.jpg?2x 2x; example.com/image.jpg?10x 10x» />
И сервер, видя «1x» в GET параметрах отдаёт картинку для обычных дисплеев, «2x» — для retina всяких, «10x» — это значит будущее наступило)

[@Mithgol]

Retina display — это маркетинговый термин, его не надо переводить как «сетчаточный», потому что сетчаточный дисплей — это "retinal display".

В языковом отношении разницы нет, потому что в русском языке (в отличие от английского) существительные не используются в роли прилагательных. Кроме того, в русском языке (по крайней мере, в некоторых словарях, как нетрудно видеть на Gramota.Ru, например) есть слово «ретина» в значении «сетчатка» — следовательно, разница между прилагательными «ретиновый» и «сетчаточный» подобна разнице между «бегемотовый» и «гиппопотамовый».

В итоговом отношении также особенной разницы нет: речь идёт о создании в глазу изображения, по чёткости сопоставимого с пиксельностью самóй сетчатки, просто virtual retinal display достигает этого лазерной проекцией внутрь глаза, тогда как retina display создаёт высокочёткое изображение на реальном наблюдаемом экране.

[@Goodkat]

В итоговом отношении также особенной разницы нет

Собственно, разница в том и состоит, что ретиновый/сетчаточный дисплей создаёт изображение на сетчатке глаза, а Retina display — всего лишь маркетинговое название обычного дисплея с более высокой плотностью пикселей, причём необходимая плотность пикселей определяется «на глаз» в отделе маркетинга фирмы Эпл — по угловому размеру пикселя.

Если следовать вашей логике и логике маркетинга фирмы Эпл, то отодвинув обычный монитор на два метра вы сделаете из него «сетчаточный», так как угловой размер пикселя станет меньше, и разрешение экрана станет сопоставимо с «пиксельностью самóй сетчатки»?

[@zapimir]

Сколько можно этот бред нести про сетчатку? Да Apple даже пишет это название всегда с большой буквы, с какого перепугу прилагательные писать с большой буквы. Тем более, что у других производителей есть дисплеи с аналогичной плотностью, и никто их Retina не называет. С таким же успехом фразу «FaceTime camera» можно переводить, как «лицевременная камера».
Извиняюсь за резковатость, но достало уже.

[@glazs]

Вы его ещё писать правильно научите, ага.

[@lorndesign]

… теперь достаточно пару раз Ctrl-+ на клавиатуре надавить — и с сайта скачается да отобразится изображение удвоенной ширины и удвоенной высоты

А я до сих пор знаю людей, которые могут случайно такие комбинации нажимать и у них дома платный ограниченный траффик… (

[@izelenyuk]

Для таких людей на большинстве сайтов разница между замыленной картинкой и четкой вроде бы как не важна. По идее пользователю вообще нельзя навязывать увеличенный трафик (в настройках профиля, если сайт с авторизацией, делать опцию «Хочу четкую графику» и если матрица позволяет — отдавать ему повышенное разрешение, а по дефолту обычное).

[@amarao]

Таким людям надо перестать кормить мегабайты JS'а, CSS'а и вернуть в волшебный мир 64к страничек на HTML4.01 c гифовыми распорками в табличках.

[@amarao]

В html 3.2 были table? Я не помню, в какой версии они были добавлены.

[@izelenyuk]

Собственно хранить комплект картинок удвоенного размера еще куда ни шло, но при таком подходе ведь понадобятся и 3x и 4x… ИМХО веб еще к такому не готов. Для крупных сайтов это будет означать стремительное пожирание диска на сервере только для копий картинок. Поэтому, как мне кажется, пока можно было бы пренебречь зумом и оставить лишь 2x копии изображений под Retina.
Но возникает вопрос, как при таком подходе достоверно убедиться в том, что пользователь пришел с ретиной?

[@amarao]

Большая картинка плюс ресайз, плюс автоматический кеш ресайза.

[@izelenyuk]

т.е. без вариантов, хочешь не хочешь, качай лишние мегабайты?

[@l0cal]

Он имеет ввиду отсутствие больших сложностей с созданием множества вариантов картинок

[@amarao]

Не хочешь, не качай. Никто же не запрещает заходить, например, на habrahabr.ru, у которого заглавная страница в сумме 928кб.

[@macik_spb]

У меня 653кб, видимо треть трафика это реклама.

Интересно, админы хабра ведут статистику относительно того, какой процент пользователей использует AdBlock и его аналоги, что бы резать рекламу? Было бы интересно взглянуть (касается не только Хабра).

[@tick]

По-моему, давно уже есть потребность в новом формате хранения мультимедиа.
Типа прогрессивного джепега, но с докачкой.

Сначала скачал N Кб для версии х1.
Потом, если надо, докачал кусок, содержащий улучшение до версии х2.
Первый и второй куски не содержат информации, которая бы повторялась.
И так далее.

Этот принцип можно применить как к видео, так и к аудио.
Главное, продумать, как хранить — в одном файле или в разных, и встроить поддержку в проигрывающий софт.

В идеале хотелось бы видеть поддержку на уровне ФС.

[@izelenyuk]

учитывая сколько времени обучался ИЕ кушать корректно прозрачные png, к появлению нового формата мы будем голограммы в мозгу проецировать…
А вообще согласен. Напрашиваются многослойные форматы данных, когда понимание файла перестает быть традиционным. В идеале ФС воспринимала бы туже картинку как папку, каждый файл внутри это слой, каждый следующий содержит дополнительный набор пикселей по сравнению с предыдущим. Вроде бы описать это не сложно…

[@zapimir]

В увеличившемся количестве запросов к серверу тоже могут быть проблемы. Лучше уж в заголовок HTTP запроса вставлять какие картинки хочешь, и пусть сразу выдаются нужные.

[@bolk]

Мицгол, спасибо вам за статьи, они всегда интересные, но хотел бы написать и своё «фу». Вы очень много внимания уделяете переводу терминов, но одновременно пишите «Peter-Paul Koch», «Android» и «Galaxy Nexus». За этим стоит какая-то логика?

[@Mithgol]

Вотъ когда мнѣ доведётся записывать блогозаписи цѣликомъ Имперскою Рѣчью, тогда Вы въ нихъ увидите «Петропавелъ Кохъ», «Андроидъ» и «Гэлэкси Нэксусъ». Тогда, но врядъ ли ранѣе. Довольно покамѣстъ и того, что въ косвенномъ падежѣ я и сейчасъ ужъ пишу объ «Андроидѣ» и о «Нэксусѣ» кириллицею.