Комментарии 102
Разве устройства с ретиной не сами масштабируют графику и шрифты?
0
В том то и дело что они масштабируют графику в сторону увеличения, потому картинки становятся блеклыми и слегка размытыми.
+1
Вот статья со сравнением изображений при разных подходах: blog.netvlies.nl/design-interactie/retina-revolution (наверное, пару изображений оттуда не мешало бы добавить и в статью здесь).
+6
Спасибо за ссылку! Если вы не против, то добавлю в текст.
+1
Я очень даже за :)
К слову, это не совсем оригинал, вот он: blog.netvlies.nl/design-interactie/retina-revolutie-follow-up
К слову, это не совсем оригинал, вот он: blog.netvlies.nl/design-interactie/retina-revolutie-follow-up
0
НЛО прилетело и опубликовало эту надпись здесь
Тут возникает другой вопрос. Насколько красиво будут выглядеть отмасштабированные картинки не на ретине. То бишь делаем 600х400, а в теге img прописываем 300х200. Артефакты масштабирования не появятся?
+1
Современные браузеры нормально масштабируют (особенно на ступенчатые масштабы).
Если использовать уменьшение до 50% или 25% — проблем не будет.
Если использовать уменьшение до 50% или 25% — проблем не будет.
0
За 25% я бы не стал ручаться. Помоему честную билинейную интерполяцию при уменьшении сейчас не делает никто. Все берут не больше 2-х ближайших пикселей. Соответственно при 25% 3/4 пикселей потеряется.
+1
Firefox не сглаживает
+1
developer.mozilla.org/en-US/docs/CSS/Image-rendering
Там внизу есть примеры картинок, в FF уменьшеные картинки не гладкие, даже есть указывать максимальное качество в стилях
Там внизу есть примеры картинок, в FF уменьшеные картинки не гладкие, даже есть указывать максимальное качество в стилях
0
Всё проще (хотя с какой стороны посмотреть) — нужно делать два изображения: для не-ретины подгружается изображение в стандартном размере (ничего не масштабируется), для ретины — в двойном («масштабируется» из виртуальных пикселей в реальные)
-3
Действительно, «более альтернативный способ.»…
+4
А на retina с такими изображениями точно не будет преобразований? Не получится так, что при рендеринге изображения 600x300 сначала сожмется до 300x150, а потом будет увеличено до 600x300?
0
80% jpeg? Я, обычно, сохраняю не ниже 90%, чаще всего — 95%. При 80% артефакты же ужасные будут.
+1
Да ладно, я всегда сохраняю в качестве 51% — никто еще не жаловался.
0
Можете минусы воспринимать как жалобы )
+3
В принципе, я и правда не понимаю, почему так негодуют 4 человека. Сохранять жипег в качестве больше 60% для мобильных устройств я считаю неразумным. 4G интернет есть пока далеко не у всех. У меня и 3G работает через пень-колоду по праздникам (оператор — Билайн). Юзер все равно не увидит артефактов на небольшом экране планшетника или телефона. Тогда зачем, спрашивается, на заставлять пользователя грузить лишние килобайты? Ради наших эстетических чувств?
+1
Очень интересная шкала сжатия у вашего редактора.
JPEG 51 в Paint.NET
JPEG 51 в GIMP (оптимизированная, прогрессивная)
JPEG 51 в GIMP со сглаживаением 0,4 (оптимизированная, прогрессивная)
JPEG 51 в Paint.NET
JPEG 51 в GIMP (оптимизированная, прогрессивная)
JPEG 51 в GIMP со сглаживаением 0,4 (оптимизированная, прогрессивная)
0
Вообще да, ради эстетических чувств. Представьте, для некоторых людей это важно.
-1
Это какая программа при 80 дает ужасные артефакты?
В ФШ, на мой вкус, обычно оптимально 70-80% (хотя бывают и исключения — в обе стороны).
В ФШ, на мой вкус, обычно оптимально 70-80% (хотя бывают и исключения — в обе стороны).
+7
Я еще давно опытным путем установил, что самое лучше значение размера и качества это сжатие ровно 85%, на процент меньше, и качество сильно снижается, а меньшее сжатие на качество не сильно влияет, но размер увеличивается.
0
НЛО прилетело и опубликовало эту надпись здесь
Думаю первоисточник достаточно проблематично уже определить. В англоязычном сегменте этот способ достаточно часто встречается и давно, русскоязычном к сожалению не встречал. Специально предварительно просмотрел хабр и ни чего подобного не встретил. Подумал возможно кому то окажется полезным.
+2
Я не придумал этот способ, просто рассказал о нём.
Видео с Технофорума: www.youtube.com/watch?v=n0Vy9cYES-4
Сама презентация: pepelsbey.net/pres/clear-and-sharp/
Видео с Технофорума: www.youtube.com/watch?v=n0Vy9cYES-4
Сама презентация: pepelsbey.net/pres/clear-and-sharp/
+4
НЛО прилетело и опубликовало эту надпись здесь
Возможно это самый короткий туториал на хабреТакой короткий, что я не понял зачем в нём кат.
+3
Пробовал, но получается не ахти. Масштабирование в разных браузерах разное, но везде заведомо хуже графического редактора.
+3
Что бы верстка не «поплыла» необходимо в тэге IMG явно указать размеры. То есть если следовать этому способы при наличии картинки 200х200 в IMG необходимо указать 100х100.
0
Действительно работает!
Масштабирование не супер-идеальное, но вполне приемлемое, и при этом без лишних телодвижений.
Дешево и сердито, как говорится.
Масштабирование не супер-идеальное, но вполне приемлемое, и при этом без лишних телодвижений.
Дешево и сердито, как говорится.
0
на реальных фото JPG 30% получим дивную постеризацию на небе, на лице, на любых более-менее равномерных градиентах и никакое масштабирование не спасет.
В примерах по ссылке очень специально подобраны картинки для сравнения. Во-первых большие области одного цвета, во вторых диапазон цветов заужен, толи специально, толи от неграмотности автора или фотографа.
В примерах по ссылке очень специально подобраны картинки для сравнения. Во-первых большие области одного цвета, во вторых диапазон цветов заужен, толи специально, толи от неграмотности автора или фотографа.
+4
Все столько пишут про эту ретину, про совместимость сайтов, аж тошнит уже.
А кто-нибудь знает нормальный способ выяснить, как ваш сайт отображается на ретине, не тратя, как минимум, 2500$ на покупку макбука?
А кто-нибудь знает нормальный способ выяснить, как ваш сайт отображается на ретине, не тратя, как минимум, 2500$ на покупку макбука?
0
Способа, вероятно, нет, потому что для этого нужно как-то сэмулировать то, как будет работать браузер (а браузеры разные и графику масштабируют тоже по-разному) на ретине (то есть, чтобы графика 1:1, а текст 1:2). Может быть, кто-то придумает способ сделать это, тогда можно будет поставить монитор подальше и увидеть то, что вы увидите на дисплее с ретиной. То есто это должна быть настройка браузера, включающия этот механизм. Она, вероятно, у браузеров, где-то есть, но пока её никто не нашёл.
0
Поставить масштаб страницы 200% — не?
0
Нет, нельзя. При масштабировании даже вёрстка будет другая. Как браузер захочет отмасштабировать картинки, тоже непонятно. Масштаб — это другой случай.
0
> вёрстка будет другая
Вот у вас страничка 1024 в ширину. Делаете ширину окна 2048 и масштаб 200%. Не хватает монитора для удвоения? Открываете web-инспектор, смотрите ширину body, прописываете ему явно style=«width: xxxpx;». Так верстка такая же будет?
> Как браузер захочет отмасштабировать картинки, тоже непонятно.
А как он может захотеть? Что именно вас пугает?
Вот у вас страничка 1024 в ширину. Делаете ширину окна 2048 и масштаб 200%. Не хватает монитора для удвоения? Открываете web-инспектор, смотрите ширину body, прописываете ему явно style=«width: xxxpx;». Так верстка такая же будет?
> Как браузер захочет отмасштабировать картинки, тоже непонятно.
А как он может захотеть? Что именно вас пугает?
0
Наглядный пример
Видите вот это подчёркивание под ссылкой? Почему оно шириной в один пиксель? Какая была бы его ширина, если бы мы отмасштабировали страничку как картинку? Какая была бы его ширина, если бы это был скриншот с ретины? +1
Похоже вы правы, по крайней мере в эмуляторе айпада эта полоса в два физических пикселя:
Но другой вопрос, а важно ли это. На удвоенном масштабе можно увидеть мыльные картинки, а подчеркивание не слишком влияет на восприятие страницы.
Но другой вопрос, а важно ли это. На удвоенном масштабе можно увидеть мыльные картинки, а подчеркивание не слишком влияет на восприятие страницы.
0
Ну да, можно посмотреть и примерно увидеть, как оно будет выглядеть. Или отдельную картинку смасштабировать. Но это немного не то: я говорил о том, что хочется посмотреть полный сайт, грубо говоря в браузере включить UseRetinaMode, а он бы уже увеличивал картинки, шрифты, прочее — абсолютно так, как он делает, когда запущен на ретина-дисплее, без лишних телодвижений, догадок о размере шрифтов, границ итд. Имхо только это нормальный безгеморройный способ проверки.
0
Попробовал вот еще что: gist.github.com/3191869
Но это жесть конечно, на такое разрешение переключаться. После этого все окна едут.
Но это жесть конечно, на такое разрешение переключаться. После этого все окна едут.
0
iPad, сейчас вполне реально найти знакомого у которого он есть и взять на денек.
0
+1
В каждом предложении: «Скорее всего», «Вероятно», «Наверное», «Может быть»…
+1
С фотками ладно, сойдет и так, а что делать с графическими элементами интерфейса: полосочками, фончиками, иконочками, кнопочками и прочая попиксельная мелочевка? такой вариант уже на них не прокатит…
+1
Всё в SVG.
+1
Я как дизайнер отдавая картинку для веба в растре, знаю, как будет выглядеть она во всех браузерах, а вот за svg не уверен, даже программы векторные один и тот же svg могут открыть по разному, если там не тупо квадратик с кружочком. Ну и попадание в пиксели при рендеринге svg в браузере, тоже не даст никто 100% гарантии.
Ещё в 7-8 году предрекали революцию svg в вебе, но чето не видно её… проще уж полосочки и кнопочки на css зафигачить, останутся только иконки, но тут придется опять же под ретину весь сайт переделывать…
Ещё в 7-8 году предрекали революцию svg в вебе, но чето не видно её… проще уж полосочки и кнопочки на css зафигачить, останутся только иконки, но тут придется опять же под ретину весь сайт переделывать…
0
> даже программы векторные один и тот же svg могут открыть по разному
Я скажу по секрету, что даже шрифты на разных системах рисуются различно. Их что, что-бы удовлетворить желание дизайнера, который хочет точного соответствия пиксела к пикселу, тоже делать растровыми (сохранять в png и вставлять картинкой)?
Я скажу по секрету, что даже шрифты на разных системах рисуются различно. Их что, что-бы удовлетворить желание дизайнера, который хочет точного соответствия пиксела к пикселу, тоже делать растровыми (сохранять в png и вставлять картинкой)?
-2
не путайте теплое с мягким :)
шрифты на разных системах и отображение на одной системе в разных браузерах, две большие разницы.
шрифты на разных системах и отображение на одной системе в разных браузерах, две большие разницы.
+1
> шрифты на разных системах и отображение на одной системе в разных браузерах, две большие разницы.
У меня Safari на Win отрисовывает шрифты по фирменному алгоритму Apple, Firefox версий 4 — ~8 использовал аппаратное ускорения, в результате шрифты были замыленными, и смотрелись отлично от их-же аналогов на той-же системе, IE8 тоже использовал отличные от системных настройки сглаживания. А Chrome и Opera в таком не замечены.
И это все не мешает мне читать текст, написанный этими шрифтами. Как и возможные различия на разных системах/интернет-обозревателях в отрисовке SVG графики не будут мешать ее восприятию пользователем.
У меня Safari на Win отрисовывает шрифты по фирменному алгоритму Apple, Firefox версий 4 — ~8 использовал аппаратное ускорения, в результате шрифты были замыленными, и смотрелись отлично от их-же аналогов на той-же системе, IE8 тоже использовал отличные от системных настройки сглаживания. А Chrome и Opera в таком не замечены.
И это все не мешает мне читать текст, написанный этими шрифтами. Как и возможные различия на разных системах/интернет-обозревателях в отрисовке SVG графики не будут мешать ее восприятию пользователем.
+1
Когда у вас отрисовывается по другому весь массив текста, то это одно. А когда из-за различий рендера уедет край менюшки, будет выглядеть некрасиво.
0
лучше скажите когда будет революция svg?
вот ajax это революция, а svg в вебе это как костыль здоровому…
вот ajax это революция, а svg в вебе это как костыль здоровому…
-4
НЛО прилетело и опубликовало эту надпись здесь
очень частое явление…
у вас есть статистика? или для вас лично частое?
у вас есть статистика? или для вас лично частое?
-2
SVG.
added:
// Меня опередили ;(
added:
// Меня опередили ;(
-1
На самом деле я думаю, пока не стоит сильно рыпаться совершать много резких телодвижений. На данный момент дисплеев с двойной плотностью еще немного, Win8 насколько я помню в настольном режиме масштабирует все далеко не идеально (следовательно, под системы с Win пока наплыва таких дисплеев не ожидается), на iГаджетах дисплей не большой, да и многую графику, типа элементов интерфейса или иконок можно безболезненно делать в svg, оставляя только фотографии «неретинальными».
Основная-же причина в том, что стандарты для таких дисплеев только разрабатываются. Есть (-webkit-)image-set, есть @media с min-device-pixel-ratio, тут тоже описано много разных колдунств типа image-rendering (как масштабировать изображение при его несоответствии реальному размеру, если я правильно понял). Одним словом, пусть доделают нормально технологии, а потом мы их будем использовать.
Основная-же причина в том, что стандарты для таких дисплеев только разрабатываются. Есть (-webkit-)image-set, есть @media с min-device-pixel-ratio, тут тоже описано много разных колдунств типа image-rendering (как масштабировать изображение при его несоответствии реальному размеру, если я правильно понял). Одним словом, пусть доделают нормально технологии, а потом мы их будем использовать.
+2
Плохой пример по вашей ссылке. Все изображения не такие «сложные» в нём. Попробовал, как вы и сказали .jpg, уровень качества 20 % справа, в два раза больше, чем слева. Вы хотите сказать, это приемлемо? Разумеется, открывал я это на ретине. Изображение чуть лучше ввиду того, что она меньше гораздо, но все равно видны ужасные артефакты на градиентах.
+2
Меня сейчас конечно закидают тухлыми помидорами, но есть ли смысл адаптировать сайт под ретина?
У кого нибудь есть дельная статистика что на сайт заходят 20% пользователей с ретина, а еще и уходят по причине что картинки плывут на сайте плывут?
Статья была про 20% трафика рунета приходится на трафик мобильных устройств. Вот только на соц сети и почтовые ресурсы приходится скорее всего 19%, на остальные ресурсы остается 1%,
Стоит ли игра свеч все эти оптимизации?
У кого нибудь есть дельная статистика что на сайт заходят 20% пользователей с ретина, а еще и уходят по причине что картинки плывут на сайте плывут?
Статья была про 20% трафика рунета приходится на трафик мобильных устройств. Вот только на соц сети и почтовые ресурсы приходится скорее всего 19%, на остальные ресурсы остается 1%,
Стоит ли игра свеч все эти оптимизации?
+1
Лично я начал адаптировать из-за того, что на собственном сайте просмотр картинок начал вызывать тошноту… Подумал, что кроме меня кто-то еще может зайти с ретиной и пожалел людей.
А найти собственное оправдание для того, чтобы что-нибудь не делать можно всегда.
А найти собственное оправдание для того, чтобы что-нибудь не делать можно всегда.
+2
Думаю это самая распространенная причина поддержки ресурсом @2Х-графики — покупка владельцем сайта девайса с ретина-экраном :)
+2
Аналогично, после покупки макбука с ретиной стараюсь прикручивать поддержку на все свои сайты )
0
Фанатизм тоже излишен. Я считаю, что наибольшее внимание этому вопросу надо уделять там, где пользователи сами генерируют контент. В дизайне большая часть должна решаться через css, остаются иконки, которые пользователям не так важны. А вот загружаемые фотографии каждый жаждет увидеть во вменяемом качестве. Учитывая, что большинство пользователей не задумываясь грузит 4-6 мб фотки (как с мыльницы скопировали на хард, так и вставляется по соц. сетям), подобный контент можно без проблем серверными скриптами подготовить к отображению на сайте.
Поэтому до появления явно отточенной технологии работы с @2x не считаю необходимым внедрять временные костыли по всем проектам.
Поэтому до появления явно отточенной технологии работы с @2x не считаю необходимым внедрять временные костыли по всем проектам.
0
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Похоже, что image-rendering: -webkit-optimize-contrast; вполне помогает.
+2
Аналогичный вопрос про современные телевизоры, невозможно в старые игры играть без слез, даже через компонент :(
0
Скорее вопрос, почему браузеры, поддерживающие ретину, не умеют загружать для нее увеличенные изображения?
0
НЛО прилетело и опубликовало эту надпись здесь
Высокая детализация ретины как раз нужна для того, чтобы рассмотреть в подробностях артефакты сжатия jpeg 20%.
+3
Я не понимаю, объясните как можно было сделать такой экран, который лучше по качеству, на на котором всё хуже видно?
Комментарий не ради троллинга и разжигания холивара, просто не понятно, зачем такая технология вообще нужна? Почему нельзя масштабировать попиксельно например?
Комментарий не ради троллинга и разжигания холивара, просто не понятно, зачем такая технология вообще нужна? Почему нельзя масштабировать попиксельно например?
0
Можете закидать меня помидорами, но я не смог добиться того, что показано на картинках по ссылкам.
Если сохранять изображения с удвоенным разрешением и тем же размером файла в фотошопе, на выходе получается не только большая четкость, но и масса артефактов.
ИМХО метод применим, но только в каких-то узких границах: нужно либо подбирать специально изображения без ровных плашек и градиентов, либо все-таки смириться с увеличением размера файла.
Если сохранять изображения с удвоенным разрешением и тем же размером файла в фотошопе, на выходе получается не только большая четкость, но и масса артефактов.
ИМХО метод применим, но только в каких-то узких границах: нужно либо подбирать специально изображения без ровных плашек и градиентов, либо все-таки смириться с увеличением размера файла.
0
Зарегистрируйтесь на Хабре , чтобы оставить комментарий
Готов ли ваш сайт к Retina?