Я занимаюсь дизайном веб-баннеров больше года, но никогда не рассматривал DPI.
Я использовал стандартное разрешение 72 dpi, но теперь я хочу знать, нужно ли создавать веб-дизайны с разрешением 72 dpi? Что, если мы используем больше, например, 200 dpi?
Я знаю, что больше DPI означает более качественное изображение, и поэтому я хочу использовать высокое DPI, но недавно я где-то прочитал, что для веб-баннеров мы должны использовать 72 dpi. Я просто хочу знать, является ли это обязательным и влияет ли это негативно в каком-либо аспекте?
Настройки PPI (пикселей на дюйм) не используются в веб-изображениях. Изображения в Интернете, на дисплеях Retina и т. д. отображаются по размеру в пикселях (ширина и высота), а не по настройкам PPI/DPI. Фактически, многие веб-изображения, такие как png, gif, jpg, могут даже не хранить настройку ppi в своих внутренних данных и полагаться на настройки ширины и высоты.
Изображение размером 100 x 100 пикселей отображается так же, как и изображение в Интернете, независимо от любых настроек PPI/DPI.
Вот почему изображения для дисплеев Retina сохраняются с 2-кратным размером, а не с увеличенным значением ppi. Однако плотность пикселей дисплеев Retina выше, они по-прежнему отображают изображение с любой шириной и высотой изображения, независимо от настроек PPI.
На самом деле монитор с плотностью пикселей 72 ppi не видели с начала до середины 1980-х годов. 72ppi не было точным более 40 лет. Фактически, это никогда не было точным для систем Windows, потому что Windows использует плотность пикселей по умолчанию 96ppi.
Не верите мне? Попробуйте сами. Создайте два изображения в Photoshop размером 100 на 100 пикселей. Сделайте одно изображение 72ppi, а другое 300ppi. Сохраните их обоих для Интернета. Они отличаются в веб-браузере? Неа. Они оба являются изображениями размером 100 на 100 пикселей.
Настройки DPI (точек на дюйм) применимы только при печати изображения. DPI не имеет отношения к изображениям, предназначенным для экрана. DPI относится к количеству чернильных точек / пятен, которые печатная машина размещает в пределах дюйма. Поскольку ни один дисплей на Земле не использует чернила, DPI — неправильный термин для всего, что связано с экранами дисплеев.
Имейте в виду, что некоторые производители мобильных устройств решили использовать термин DPIx или xDPI, который иногда сокращается до простого DPI. Это не традиционная форма аббревиатуры, и производитель просто сильно замутил воду. Если вы видите DPI по отношению к разрешениям экрана мобильного устройства, они говорят об эффективном PPI , а не о количестве точек на дюйм. Более подходящей аббревиатурой было бы xPPI или PPIx, потому что мобильные экраны, как и все дисплеи, используют пиксели, а не чернила.
Не имеет значения, какой параметр ppi вы используете для веб-изображений. Важны ширина (пиксель) и высота (пиксель) изображения.
При работе с несколькими изображениями важно соблюдать последовательность . Вы хотите, чтобы все ваши изображения были установлены на один и тот же ppi , чтобы избежать изменения размера и масштабирования аспектов, если вы перемещаете части между изображениями. Независимо от того, решите ли вы использовать 72, 96, 200 или 145,8 пикселей на дюйм, все изображения должны быть установлены одинаково.
Хотя PPI определенно не имеет значения — для веб-дизайна и дизайна приложений важны размеры в пикселях, вы должны быть очень осторожны при использовании дизайнерских приложений и смешивании настроек PPI. Вот почему:
Однако, если вы планируете использовать Photoshop и разные плотности пикселей для каждого документа, перетаскивание слоев и копирование стилей слоев между документами масштабирует стили слоев — перетаскивание слоя из документа iPhone Retina 326PPI в документ iPad Retina 264PPI будет означать масштабирование всех стилей слоев. на 20% (с последующим округлением до ближайшего целого числа). И это, вероятно, не то, что вы хотите. Кроме того, предварительный просмотр OS X будет отображать изображения 72PPI точного размера, независимо от того, как вы его настроили.
Пиксели на дюйм - это всего лишь тег
Именно по этим причинам я назначаю 72PPI всем своим проектным документам и рекомендую вам сделать то же самое. Чтобы изменить плотность пикселей документа Photoshop без изменения размера данных изображения, откройте диалоговое окно «Размер изображения», снимите флажок «Изменить размер изображения» и введите желаемую плотность пикселей.
Я подробно расскажу, что на самом деле означает «dpi», на примерах; при этом вы можете просто увидеть ответ сами. :
Короче говоря, ваше изображение состоит из цветных точек, расположенных рядом друг с другом. Но они не имеют размера ни в каком физическом смысле.
Теперь, когда вы показываете изображение на экране, вы обычно просто помещаете цвета точек изображения в растр цветных прямоугольников, которые может отображать ваш экран. Обратите внимание, что то, что я здесь называю «точками» и прямоугольниками, называется «пикселями», но при ближайшем рассмотрении это нечто другое.
Если мы отобразим изображение таким естественным образом на экране, мы сможем измерить его размер.
Например, наше изображение имеет ширину 500 точек, мы помещаем их в цветные прямоугольники на экране и видим, что оно имеет ширину 5 дюймов. Затем у нас есть 100 прямоугольников на дюйм, показывающих 100 наших точек на дюйм.
То есть наше изображение имеет разрешение 100dpi на экране.
Но мы даже не смотрели на значение dpi в нашем файле изображения!
Теперь, если мы посмотрим на наш файл, он вполне может сказать, что изображение имеет разрешение 200 dpi! Значение dpi показывает, сколько цветных точек видно на дюйм ширины или высоты экрана. Итак, значение dpi на изображении говорит нам, что наше изображение будет иметь ширину 2,5 дюйма при отображении — как обещание, а не как факт .
Когда мы назначали точки изображения экрану, нас это даже не заботило, потому что мы просто отображали его и измеряли фактический физический dpi экранного представления изображения.
Итак, как видите, обещание было просто неверным . И никому нет дела! Потому что это просто не актуально.
Файл был многообещающим — сказав, что 200 dpi — он будет «шириной 2,5 дюйма при отображении». Затем мы использовали экран, который показывал его ширину 5 дюймов — мы можем знать это, потому что знаем, что такое настоящий экран.
Обычно мы даже не знаем, что конечный пользователь будет использовать в качестве дисплея, поэтому мы можем только догадываться,
Итак, теперь имеет смысл:
Причем изображение может отображаться не только на одном экране - они могут быть разного размера, так что даже невозможно узнать реальное значение dpi при создании файла изображения.
См. также мой ответ о том, что такое «Пиксель»? .
Сразу к вопросу, исходя из вышеизложенного:
Когда вы указываете dpi в файле изображения, это не имеет прямого отношения к качеству изображения, отображаемого в конце.
Но его можно использовать для сообщения о качестве изображения — с точки зрения намерений: вы можете сказать: «Я хочу, чтобы это изображение отображалось на экране с разрешением 200 точек на дюйм».
Если я хочу показать это изображение, я могу позаботиться и поискать экран с разрешением 200 точек на дюйм; или, может быть, я просто использую старый экран с разрешением 75 точек на дюйм, который может быть на моем столе. Изображение будет довольно большим, мне придется прокручивать - но это моя проблема, и: вы даже не узнаете, что на самом деле используется - значение 200 dpi не контролировало качество изображения - оно просто сообщало, как отображать его «правильно». путь", если я забочусь.
Я только что протестировал две копии изображения, сделанного в Photoshop. Однако я установил один на 72 dpi, а другой на 720 dpi, чтобы посмотреть, будет ли какой-либо из браузеров, которые я использую, отображать их на экране разного размера.
Во всех браузерах, кроме одного, они выглядели одинаково — по размеру и по качеству. Однако при использовании Google Chrome тот, что был сделан в размере 72, выглядел нормально, но тот, что был сделан в размере 720, был очень маленьким — как будто он был 1/10 размера.
Печаль во благо. Это выглядит как аргумент в пользу размещения всех отдельно стоящих (не ограниченных веб-страницей) изображений с разрешением 72. Практически все мои (число которых исчисляется многими сотнями) имеют разрешение 120 dpi. Несмотря на то, что они все еще выглядят достаточно большими в Chrome, возможно, имея в виду этот браузер, мне следует поработать над тем, чтобы поместить их все в 72. Может быть, где-то мелким шрифтом в настройках Chrome есть средство.
роджерпак
Скотт