Обязательно ли хранить изображения в 72DPI для веб-дизайна?

Я разрабатывал веб-баннеры уже более года, но никогда не рассматривал DPI.

Я использовал 72DPI по умолчанию, но теперь я хочу знать, нужно ли создавать веб-дизайны в 72DPI? Что, если мы используем больше, чем, например, 200DPI?

Я знаю, что чем больше DPI, тем лучше качество изображения, и поэтому я хочу использовать высокое DPI, но недавно я где-то читал, что для веб-баннеров мы должны использовать 72DPI. Я просто хочу знать, является ли это обязательным и влияет ли это отрицательно в каком-либо аспекте?

Настройки PPI (Pixels Per Inch) не используются в веб-изображениях. Изображения в Интернете, сетчатке и т. Д. Отображаются в пиксельных размерах (ширина и высота), а не в настройках PPI / DPI. На самом деле, многие веб-изображения, такие как png, gif, jpg, могут даже не сохранять настройки ppi в своих внутренних данных и полагаться на настройки ширины и высоты.

Изображение 100 x 100 пикселей отображается так же, как в Интернете, независимо от настроек PPI / DPI.

Вот почему изображения для дисплеев сетчатки сохраняются в 2-кратном размере, а не с увеличенным значением ppi. Плотность пикселей на дисплеях сетчатки выше, однако, они по-прежнему отображают изображение при любых состояниях экрана, независимо от ширины и высоты изображения, не основанных на настройке PPI.

В действительности, монитор, использующий плотность пикселей 72ppi, не был замечен с начала до середины 1980-х годов. 72ppi не был точным в течение почти 30 лет. На самом деле, это никогда не было точным для систем Windows, поскольку Windows использует значение по умолчанию 96ppi для плотности пикселей.

Не веришь мне? Попробуйте сами. Создайте в Photoshop два изображения, размером 100 на 100 пикселей. Сделайте одно изображение 72ppi, а другое 300ppi. Сохраните их обоих для веб-сайтов ... они отличаются в веб-браузере? Нет. Они оба по 100px по 100px изображений.

Настройки DPI (точек на дюйм) применимы только при печати изображения. DPI не имеет отношения к изображениям, предназначенным для экрана. DPI относится к количеству точек / точек чернил, которые пресс поместит в дюйме. Поскольку ни один дисплей на Земле не использует чернила, DPI - это неправильный термин, используемый для всего, что связано с экранами дисплея.

Имейте в виду, что некоторые производители мобильных телефонов решили использовать термин DPIx или xDPI, который иногда сокращается до просто DPI. Это не традиционная форма аббревиатуры, и производитель просто сильно замутил воду. Если вы видите DPI в отношении мобильных разрешений экрана, они говорят об эффективном PPI , а не на самом деле ссылки точек на дюйм. Более подходящей аббревиатурой была бы xPPI или PPIx, потому что мобильные экраны, как и все дисплеи, используют пиксели, а не чернила.

Не имеет значения, какую настройку ppi вы используете для веб-изображений. Важны ширина (пиксель) и высота (пикселя) изображения.

При работе с несколькими изображениями важно оставаться последовательным. Вы будете хотеть, чтобы все ваши изображения были установлены в том же ppi, чтобы избежать изменения размера и масштабирования аспектов, если вы перемещаете части между изображениями. Неважно, выберете ли вы использовать 72, 96, 200 или 145,8 ppi, но все изображения должны быть одинаковыми.

Хотя PPI определенно не имеет значения - это размеры в пикселях, которые имеют значение для веб-дизайна и дизайна приложений, вы должны быть очень осторожны при использовании дизайнерских приложений и смешивании настроек PPI. Вот почему:

Однако, если вы планируете использовать Photoshop и разные плотности пикселей для каждого документа, перетаскивание слоев и копирование стилей слоев между документами масштабирует стили слоев - перетаскивание слоя из документа iPhone Retina с 326PPI в документ Retina iPad 264PPI будет означать масштабирование всех стилей слоев. на 20% (затем округляется до ближайшего целого числа). И это, вероятно, не то, что вы хотите. Кроме того, предварительный просмотр OS X будет отображать изображения 72PPI в точном размере, независимо от того, как вы его настроили.

Пикселей на дюйм это просто метка

Именно по этим причинам я назначаю 72PPI для всех моих проектных документов, и я рекомендую вам сделать то же самое. Чтобы изменить плотность пикселей вашего документа Photoshop без изменения размера данных изображения, откройте диалоговое окно «Размер изображения», снимите флажок «Изменить размер изображения» и введите желаемую плотность пикселей.

Я подробно расскажу, что на самом деле означает «dpi», на примерах; с этим, вы можете просто увидеть ответ самостоятельно. :

Короче говоря, ваше изображение состоит из цветных точек, которые находятся рядом друг с другом. Но они не имеют размера ни в каком физическом смысле.

Теперь, когда вы показываете изображение на экране, вы обычно просто помещаете точечные цвета изображения в растр цветных прямоугольников, которые может отображать ваш экран. Обратите внимание, что и то, что я называю здесь «точками» и прямоугольниками, называется «пикселями», но если присмотреться, они являются чем-то другим.

Если мы отображаем изображение таким естественным образом на экране, мы можем измерить его размер.
Например, наше изображение имеет ширину 500 точек, мы помещаем их в цветные прямоугольники на экране и видим, что оно имеет ширину 5 дюймов. Затем у нас есть 100 прямоугольников на дюйм, показывая 100 наших точек на дюйм.
То есть наше изображение имеет 100 точек на дюйм на экране.
Но мы даже не посмотрели на значение dpi в нашем файле изображения!

Теперь, если мы посмотрим на наш файл, он вполне может сказать, что изображение имеет разрешение 200 точек на дюйм! Значение dpi - это количество цветных точек на дюйм ширины или высоты экрана. Таким образом, значение dpi на изображении говорит нам о том, что наше изображение при отображении будет иметь ширину 2,5 дюйма - как обещание, а не как факт .

Когда мы назначали точки изображения на экран, мы даже не заботились об этом, потому что мы просто отображали его и измеряли фактические физические точки на дюйм экранного представления изображения.
Итак, как вы видите, обещание было просто неверным . И никому нет дела! Потому что это просто не актуально.

Файл был многообещающим - говоря 200dpi - он будет «2,5 дюйма в ширину при показе». Затем мы использовали экран, который показывал его шириной 5 дюймов - мы можем это знать, потому что мы знаем, что такое настоящий экран.
Обычно мы даже не знаем, что конечный пользователь будет использовать в качестве дисплея, поэтому мы можем только догадываться,

Итак, теперь это имеет смысл:

• Мы не знали точек на дюйм, которые будут иметь изображения, показанные на экране, потому что мы не знали экрана.
• Но у нас была идея, как это должно выглядеть, «примерно такого размера ... хорошо, тогда нам нужно около 200 точек на дюйм или около того». и сохранил «200dpi» в файл
• Позже мы посмотрели на экран и измерили, что на самом деле он составляет 100 точек на дюйм;

И есть не только один экран, на котором изображение может быть показано - они могут быть разного размера, поэтому даже невозможно определить реальное значение dpi при создании файла изображения.

Смотрите также мой ответ на Что такое «Пиксель»? ,

Непосредственно к вопросу, исходя из вышеизложенного:

Когда вы указываете dpi в файле изображения, это напрямую не зависит от качества изображения, отображаемого в конце.
Но его можно использовать для информирования о качестве изображения - с точки зрения намерений: вы можете сказать: «Я хочу, чтобы это изображение отображалось на экране с разрешением 200 точек на дюйм».

Если я хочу показать это изображение, я могу позаботиться и найти экран с разрешением 200 точек на дюйм; или, может быть, я просто использую старый экран 75 точек на дюйм, который может быть на моем столе. Изображение будет довольно большим, мне нужно прокрутить - но это моя проблема, и: вы даже не узнаете, что на самом деле используется - значение 200dpi не контролирует качество изображения - оно просто сообщило, как правильно его отобразить путь ", если я забочусь.

Я только что проверил две копии изображения, которое я сделал с помощью Photoshop. Однако я установил один на 72 dpi, а другой на 720 dpi, чтобы увидеть, будет ли какой-либо из используемых мной браузеров отображать их на экране разных размеров.

Во всех браузерах, кроме одного, они выглядели одинаково - по размеру и качеству. Тем не менее, с использованием Google Chrome, тот, который сделан в 72, выглядел хорошо, но тот, который был сделан в 720, был очень маленьким - как будто он был 1/10 размера.

Печаль во благо. Это выглядит как аргумент для размещения всех автономных (не ограниченных в пределах веб-страницы) изображений на 72. Практически все мои (это число во многих сотнях) имеют разрешение 120 точек на дюйм. Несмотря на то, что они все еще выглядят достаточно большими в Chrome, возможно, с учетом этого браузера, я должен поработать над тем, чтобы поместить их все в 72. Возможно, где-то в мелком шрифте в настройках Chrome есть выход