Как стать автором
Обновить

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

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

JPEG 51 в Paint.NET
JPEG 51 в GIMP (оптимизированная, прогрессивная)
JPEG 51 в GIMP со сглаживаением 0,4 (оптимизированная, прогрессивная)
НЛО прилетело и опубликовало эту надпись здесь
1) Не так уж давно я пробовал тестовый предрелизный CS6. Там такого быть не могло.
2) Да, но при такой большой разнице эффект накопления артефактов роли играть не должен.
НЛО прилетело и опубликовало эту надпись здесь
Вообще да, ради эстетических чувств. Представьте, для некоторых людей это важно.
Это какая программа при 80 дает ужасные артефакты?
В ФШ, на мой вкус, обычно оптимально 70-80% (хотя бывают и исключения — в обе стороны).
Да любая. Или они ужасные на мой вкус, я не знаю. Но такие картинки всегда заставляют меня морщиться.
Не-не, «любая» — это не ответ. В разных программах шкалы jpeg-сжатия очень сильно не совпадают.
Чем именно пользуетесь конкретно вы?
Вполне ответ. Везде плохо. Пробовал Фотошоп, Пэйинт.НЕТ, Пиксельматор (МакОС), ГИМП, что-то ещё.
Я знаю, что шкалы разные. Это уж все известно, наверное.
НЛО прилетело и опубликовало эту надпись здесь
Я еще давно опытным путем установил, что самое лучше значение размера и качества это сжатие ровно 85%, на процент меньше, и качество сильно снижается, а меньшее сжатие на качество не сильно влияет, но размер увеличивается.
НЛО прилетело и опубликовало эту надпись здесь
Думаю первоисточник достаточно проблематично уже определить. В англоязычном сегменте этот способ достаточно часто встречается и давно, русскоязычном к сожалению не встречал. Специально предварительно просмотрел хабр и ни чего подобного не встретил. Подумал возможно кому то окажется полезным.
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Возможно это самый короткий туториал на хабре
Такой короткий, что я не понял зачем в нём кат.
чтобы интригу сохранить, так переходов больше.
Кат убрал ))
Пробовал, но получается не ахти. Масштабирование в разных браузерах разное, но везде заведомо хуже графического редактора.
Что бы верстка не «поплыла» необходимо в тэге IMG явно указать размеры. То есть если следовать этому способы при наличии картинки 200х200 в IMG необходимо указать 100х100.
Хорошо если масштабирование кратное, да и даже в этом случае браузеры бывает «замыливают» картинку, а точность иногда нужна допиксельная.
Действительно работает!
Масштабирование не супер-идеальное, но вполне приемлемое, и при этом без лишних телодвижений.
Дешево и сердито, как говорится.
на реальных фото JPG 30% получим дивную постеризацию на небе, на лице, на любых более-менее равномерных градиентах и никакое масштабирование не спасет.
В примерах по ссылке очень специально подобраны картинки для сравнения. Во-первых большие области одного цвета, во вторых диапазон цветов заужен, толи специально, толи от неграмотности автора или фотографа.
Все столько пишут про эту ретину, про совместимость сайтов, аж тошнит уже.
А кто-нибудь знает нормальный способ выяснить, как ваш сайт отображается на ретине, не тратя, как минимум, 2500$ на покупку макбука?
Способа, вероятно, нет, потому что для этого нужно как-то сэмулировать то, как будет работать браузер (а браузеры разные и графику масштабируют тоже по-разному) на ретине (то есть, чтобы графика 1:1, а текст 1:2). Может быть, кто-то придумает способ сделать это, тогда можно будет поставить монитор подальше и увидеть то, что вы увидите на дисплее с ретиной. То есто это должна быть настройка браузера, включающия этот механизм. Она, вероятно, у браузеров, где-то есть, но пока её никто не нашёл.
Поставить масштаб страницы 200% — не?
Нет, нельзя. При масштабировании даже вёрстка будет другая. Как браузер захочет отмасштабировать картинки, тоже непонятно. Масштаб — это другой случай.
> вёрстка будет другая
Вот у вас страничка 1024 в ширину. Делаете ширину окна 2048 и масштаб 200%. Не хватает монитора для удвоения? Открываете web-инспектор, смотрите ширину body, прописываете ему явно style=«width: xxxpx;». Так верстка такая же будет?

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


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

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

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

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

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

И это все не мешает мне читать текст, написанный этими шрифтами. Как и возможные различия на разных системах/интернет-обозревателях в отрисовке SVG графики не будут мешать ее восприятию пользователем.
Когда у вас отрисовывается по другому весь массив текста, то это одно. А когда из-за различий рендера уедет край менюшки, будет выглядеть некрасиво.
Хотя я и не изучал вопрос досконально, но как может уехать край вообще? Единственное возможное различие, насколько я понимаю — как будет сглажено изображение. Если я не прав — поправьте.
лучше скажите когда будет революция svg?
вот ajax это революция, а svg в вебе это как костыль здоровому…
НЛО прилетело и опубликовало эту надпись здесь
очень частое явление…
у вас есть статистика? или для вас лично частое?
Я часто даю такую рекомендацию людям со слабым зрением. Уже многим приотрыл двери к различным методам изменения масштаба в браузерах и других обыденных программах, а так же по настройкам dpi для шрифтов и других экранных элементов в ОС.
На самом деле я думаю, пока не стоит сильно рыпаться совершать много резких телодвижений. На данный момент дисплеев с двойной плотностью еще немного, Win8 насколько я помню в настольном режиме масштабирует все далеко не идеально (следовательно, под системы с Win пока наплыва таких дисплеев не ожидается), на iГаджетах дисплей не большой, да и многую графику, типа элементов интерфейса или иконок можно безболезненно делать в svg, оставляя только фотографии «неретинальными».

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

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

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

Поэтому до появления явно отточенной технологии работы с @2x не считаю необходимым внедрять временные костыли по всем проектам.
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Вы уверены, что люди с дорогими смартами сидят вконтактике через браузер?
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Похоже, что image-rendering: -webkit-optimize-contrast; вполне помогает.
Аналогичный вопрос про современные телевизоры, невозможно в старые игры играть без слез, даже через компонент :(
Скорее вопрос, почему браузеры, поддерживающие ретину, не умеют загружать для нее увеличенные изображения?
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Высокая детализация ретины как раз нужна для того, чтобы рассмотреть в подробностях артефакты сжатия jpeg 20%.
Я не понимаю, объясните как можно было сделать такой экран, который лучше по качеству, на на котором всё хуже видно?

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

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

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

Публикации

Истории