Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 57
Спасибо за статью! Очень вовремя. Но скажу честно, думал решение уже найдено, а оказались сплошные костыли. Буду пробовать, какое решение лучше подойдет для сайта.
p.s. Технологии не успевают за Apple =)))))))
p.s. Технологии не успевают за Apple =)))))))
p.s. Технологии не успевают за Apple =)))))))
На дворе 2001 год, IBM T220/T221 — это было 11 лет назад.
Как вариант ретинизации контента:
<figure class="retina-optimized-content">
<img src="image.jpg" class="image-1x" alt="Non-retina image" />
<img src="image@2x.jpg" class="image-2x" alt="Retina image" />
</figure>
.retina-optimized-content img {
max-width: 100%;
}
.retina-optimized-content .image-2x {
display: none;
}
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.retina-optimized-content .image-1x {
display: none;
}
.retina-optimized-content .image-2x {
display: inline;
}
}Если уж нужно так круто оптимизировать, то всегда есть content: url(); где можно подключать уже retina-версию. Вот тогда уж точно не будет лишней подгрузки. Но в этом варианте тоже свои минусы, в первую очередь в том что это самый несемантичный вариант решения :)
Картинки, вставленные через тег img, будут загруженны даже если скрыт их родитель.
В оригинальном Twitter Bootstrap нет иконочных шрифтов. Там «glyphicons-halflings.png» + оффсеты, а иконки задаются так:
<i class="icon-search"></i>. Иконочные шрифты используют форки Bootstrap'a, такие как Kickstrap например.
Полагаю, что автор первоисточника имел в виду Font Awesome — бесплатный свободный (CC BY 3.0) шрифт со значками для употребления в стиле Twitter Bootstrap.
<< Чтобы оптимизировать favicon для Retina-устройств, необходимо подготовить .ico в двух размерах: 16x16 и 32x32 пикселей.
Простите, но favicon лучше сохранять в png
Простите, но favicon лучше сохранять в png
Если favicon сохранять в PNG, то Internet Explorer в Windows XP не станет отображать значок у закладки после того, как её перетащить и положить на рабочий стол.
Кстати, уместно значок в формате ICO подготавливать в трёх размерах: 16×16, 32×32и 48×48 — последний из которых имеет в виду режим «крупные значки» рабочего стола Windows.
Кстати, уместно значок в формате ICO подготавливать в трёх размерах: 16×16, 32×32
Вы много знаете людей, которые перетаскивают закладку на рабочий стол? Я не знаю, зачем это может понадобиться, браузер открыт все время.
Но в любом случае, можно хранить две иконки, в link — png, favicon — ico (т.е. будет файл favicon.ico и favicon.png, указанный в шапке). Если среди требований отсутствует IE6-8, то можно от ico отказаться.
Но в любом случае, можно хранить две иконки, в link — png, favicon — ico (т.е. будет файл favicon.ico и favicon.png, указанный в шапке). Если среди требований отсутствует IE6-8, то можно от ico отказаться.
Господа, а правильно ли я понимаю, что, фактически, retina-монитор отображает все так же, как монитор с плотностью пикселей меньше в 4 раза просто из-за того, что везде в обязательном порядке включен downsampling? В чем профит монитора сверх-высокого разрешения, если на него можно уместить даже меньше, чем на монитор «прошлого поколения»? :(
В четкости и плавности текста и графики
Просто прекрасно, но либо я неправильно понял статью, либо не понимаю принципа работы ретины, и прошу это разъяснить.
Новые макбуки имеют хардварное разрешение (количество модулей, изменяющих свою светимость) в 2880х1800 пикселей, но при этом софтварное разрешение (пиксельная размерность экранного буфера) составляет 1440x900 пикселей — из-за downsampling в 4 раза.
Если нельзя использовать хардварные пиксели по одиночке, а только группами по 2х2 пикселя, то чем это эффективно отличается от монитора с обычным разрешением 1440х900?
Новые макбуки имеют хардварное разрешение (количество модулей, изменяющих свою светимость) в 2880х1800 пикселей, но при этом софтварное разрешение (пиксельная размерность экранного буфера) составляет 1440x900 пикселей — из-за downsampling в 4 раза.
Если нельзя использовать хардварные пиксели по одиночке, а только группами по 2х2 пикселя, то чем это эффективно отличается от монитора с обычным разрешением 1440х900?
> то чем это эффективно отличается от монитора с обычным разрешением 1440х900?
Для ПО/сайтов не оптимизированных под ретину — ничем. С точки зрения пользователя не изменится ничего, разве что текст станет более четким. Но при этом не обнаружится, что <irony>внезапно</irony> элементы интерфейса стали в 2 раза меньше.
А вот оптимизированные под ретину — вполне себе используют полное разрешение.
Для ПО/сайтов не оптимизированных под ретину — ничем. С точки зрения пользователя не изменится ничего, разве что текст станет более четким. Но при этом не обнаружится, что <irony>внезапно</irony> элементы интерфейса стали в 2 раза меньше.
А вот оптимизированные под ретину — вполне себе используют полное разрешение.
Софтварное разрешение можно менять, максимально (без танцев с бубнами) — 1920х1200. Тоже даунсемплинг из 2880х1800, но в теории векторные элементы чётче, чем ан родных 1920х1200. Про растровую графику не знаю.
Вот это:
«CSS-пиксели… для точного отображения контента на страницах, вне зависимости от экрана… 200x300 пикселей, а на Retina-экранах тот же блок получит 400x600 пикселей… на Retina-экранах плотность пикселей в 4 раза больше, чем на обычных:», по меньшей мере, безграмотно.
CSS pixel это логический length unit равный 1/96 дюйма. Т.е. по своим свойствам тождественен 1pt (1/72 in), 1cm и пр.
И «в 4 раза больше» есть зело оптимистичная оценка. Retina она разная бывает.
«Обычный» экран имеет пиксели размерами 1/96 дюйма (96 DPI).
Ретина на iPhone и ~ 320 DPI т.е. примерно 11 раз больше пикселей на дюйм;
MacPro 220 DPI — в 5 раз больше;
iPad — 264 DPI — в 7 раз.
При переводе цифры надо проверять.
«CSS-пиксели… для точного отображения контента на страницах, вне зависимости от экрана… 200x300 пикселей, а на Retina-экранах тот же блок получит 400x600 пикселей… на Retina-экранах плотность пикселей в 4 раза больше, чем на обычных:», по меньшей мере, безграмотно.
CSS pixel это логический length unit равный 1/96 дюйма. Т.е. по своим свойствам тождественен 1pt (1/72 in), 1cm и пр.
И «в 4 раза больше» есть зело оптимистичная оценка. Retina она разная бывает.
«Обычный» экран имеет пиксели размерами 1/96 дюйма (96 DPI).
Ретина на iPhone и ~ 320 DPI т.е. примерно 11 раз больше пикселей на дюйм;
MacPro 220 DPI — в 5 раз больше;
iPad — 264 DPI — в 7 раз.
При переводе цифры надо проверять.
Автор в статье привел следющий посыл «200x300 пикселей — 400x600 пикселей — плотность в 4 раза больше».
Т.е. по всей видимости он имел ввиду «плотность на единицу площади». Поэтому и квадрат.
Не знаю откуда вот это «закрепляет за браузером право как привязывать логический пиксель...» и далее взялось.
Вот все что есть:
… it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.
Note that if the anchor unit is the pixel unit, the physical units might not match their physical measurements. Alternatively if the anchor unit is a physical unit, the pixel unit might not map to a whole number of device pixels.
Т.е. по всей видимости он имел ввиду «плотность на единицу площади». Поэтому и квадрат.
Не знаю откуда вот это «закрепляет за браузером право как привязывать логический пиксель...» и далее взялось.
Вот все что есть:
… it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.
Note that if the anchor unit is the pixel unit, the physical units might not match their physical measurements. Alternatively if the anchor unit is a physical unit, the pixel unit might not map to a whole number of device pixels.
Как же хорошо быть человеком, который не особо видит разницы между обычными пикселями и «уменьшенными». Мне хватает и родных для 23" 1680 точек. Не то что бы я отрицал инновации, но с расстояния в почти метр я и так не замечаю жутких гигантских размеров пикселей в обычных мониторах, что в браузере, что в каком-нибудь Крузисе. Сомневаюсь, что смогу рассмотреть тот «четырехпиксельный» кружок из статьи на ретине.
Про физику с геометрией забывать не надо. Фрагмент экрана в 1/96in (1 пиксель у тебя) с расстояния метр имеет такой же угловой размер как и пиксель 1/192in на расстоянии пол-метра. Т.е. чем ближе экран устройства тем больше плотность пикселей на нем должна быть.
Возможно, именно поэтому я и указал «почти метр»? Я сомневаюсь, что кто-то работает на 23" «вплотную», а не с аналогичный расстоянием до экрана. И — снова повторюсь для яблофилов и «веб-дизайнеров» — лично мне не видно разницы на таком расстоянии между размерами пикселей, и существующий меня вполне устраивает.
Впрочем, я не отрицаю, что найдутся люди, которые будут серфить интернет с трехметрового экрана.
Впрочем, я не отрицаю, что найдутся люди, которые будут серфить интернет с трехметрового экрана.
Отключите сглаживание шрифтов, и увидите разницу.
Не тех макбуках с ретина экранами, которые видел я, на глаз было именно 2880 на 1800 пикселей разрашение физически. На глаз всё очень мелко и компактно, никакого downsampling на глаз не видно. Любой желающий может загуглить скриншот из системы запущеной на таком экране.
В связи с этим не совсем понятен вообще смысл статьи? Сделать страницы более четкими и плавными или все таки сделать страницы визуально не слишком мелкими?
Объясните в чем там проявляется downsampling если даже установленная убунта находит экран. www.phoronix.com/image-viewer.php?id=apple_mbpr_linux&image=apple_rmbp_preview_lrg вот пруф.
В связи с этим не совсем понятен вообще смысл статьи? Сделать страницы более четкими и плавными или все таки сделать страницы визуально не слишком мелкими?
Объясните в чем там проявляется downsampling если даже установленная убунта находит экран. www.phoronix.com/image-viewer.php?id=apple_mbpr_linux&image=apple_rmbp_preview_lrg вот пруф.
Предвидел минусы от хейтеров, которым влом объяснить а только минусовать.
images.anandtech.com/galleries/2078/Screen%20Shot%202012-06-11%20at%204.35.46%20PM.png
вот интересная картинка. Судя по всем это режим Best и есть ничто иное как downsampling.
images.anandtech.com/galleries/2078/Screen%20Shot%202012-06-11%20at%204.35.46%20PM.png
вот интересная картинка. Судя по всем это режим Best и есть ничто иное как downsampling.
Возможно, когда вы видел MPB Retina, то там бы включён 5-ый режим в настройках дисплея — на таком работать с текстом очень сложно, т.к. всё очень мелко, но вам ничего не мешает включить стандартный 3-ий режим, тогда размеры всех элементов будут такими же, как на обычном ноутбуке.
Что Вы такое пишете? У элемента
div нет таких атрибутов.
Есть такой вопрос, как отключить смазывание на MB Retina в Windows? Т.е. хочу использовать 1440х900, и чтобы пиксели не смазывались, а использовались 4 вместо одного. Весь интернет облазил, найти не могу :( Подобный эффект добивается в VirtualBox когда запускаешь винду в макосе, и в MacOS стоит 1440х900 или при запуске 2880х1800 и включение экранной лупы.
Ну и как быть с Хабром? :)
Мы в тестовом режиме попробовали на Автокадабре внедрить «иконочный шрифт» — сперва понравилось, но потом началось: иконки нормально не выравнять (скачут по высоте из-за масштабирования), в каждом браузере выглядят по-разному (а в некоторых версиях оперы так вообще квадратики вместо иконок) и так далее — в итоге пришлось отказаться :( А так хотелось…
Мы в тестовом режиме попробовали на Автокадабре внедрить «иконочный шрифт» — сперва понравилось, но потом началось: иконки нормально не выравнять (скачут по высоте из-за масштабирования), в каждом браузере выглядят по-разному (а в некоторых версиях оперы так вообще квадратики вместо иконок) и так далее — в итоге пришлось отказаться :( А так хотелось…
Лично я считаю что внешний вид, функциональность и производительность не должны ущемляться в пользу идеологии или технологии. Новые технологии использовать безусловно нужно, хотя-бы для поддержания имиджа но только в разумном сочетании с «look and feel».
В некоторых версиях браузера Opera при некоторых условиях (нелатинские — например, русские — буквы в имени пользователя Windows) вообще перестаёт работать @font-face.
Поэтому все пользователи Оперы должны мучительно страдать до тех пор, пока не перейдут на другой, более нормальный браузер.
Поэтому все пользователи Оперы должны мучительно страдать до тех пор, пока не перейдут на другой, более нормальный браузер.
попробовал window.devicePixelRatio на последнем firefox — не пашет.
Наверняка и остальное всё тоже не пашет на десктопных браузерах.
Как свормировать картинку на канвасе с определённым PPI?
Наверняка и остальное всё тоже не пашет на десктопных браузерах.
Как свормировать картинку на канвасе с определённым PPI?
Надо будет посмотреть поподробнее на это всё. Единственное, я перед выбором — iPhone, по всей видимости, надо отсекать. Чёткость — замечательно, но качать по мобильной сети картинки, которые станут весить в 4 раза больше издевательство над мобильным каналом пользователя, мне кажется.
Apple, разработав Retina-экраны с двойной плотностью пикселей, утверждает, что человеческий глаз не способен различить бо′льшую плотность.
Если это действительно так, почему в продуктах Apple до сих пор используется антиалиасинг? Например, при растеризации шрифтов. Ведь он нужен как раз для того, чтобы сгладить границы между пикселами, видимые человеческому глазу.
Так что мне кажется, Apple несколько лукавит, делая подобные заявления.
автор молодец! Спасибо огромное!
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Оптимизация графики для Retina-экранов