Проверьте параметры всплывающего окна с шириной окна браузера 1600 пикселей и 1000 пикселей

Обновлено: 20.11.2024

Всплывающее окно — один из старейших способов показать пользователю дополнительный документ.

По сути, вы просто бежите:

… И откроется новое окно с заданным URL. Большинство современных браузеров настроены на открытие URL в новых вкладках, а не в отдельных окнах.

Всплывающие окна существуют с очень древних времен. Первоначальная идея заключалась в том, чтобы показать другой контент, не закрывая главное окно. На данный момент есть и другие способы сделать это: мы можем динамически загружать контент с помощью fetch и отображать его в динамически генерируемом файле

Кроме того, всплывающие окна сложны на мобильных устройствах, поскольку они не отображают несколько окон одновременно.

Тем не менее, есть задачи, в которых по-прежнему используются всплывающие окна, например для авторизации OAuth (вход через Google/Facebook/…), потому что:

Всплывающее окно — это отдельное окно с собственной независимой средой JavaScript. Поэтому открывать всплывающее окно со стороннего, ненадежного сайта безопасно.
Открыть всплывающее окно очень просто.
Всплывающее окно может перемещаться (менять URL-адрес) и отправлять сообщения в открывающее окно.

Блокировка всплывающих окон

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

Большинство браузеров блокируют всплывающие окна, если они вызываются вне обработчиков событий, запускаемых пользователем, таких как onclick .

Таким образом, пользователи в некоторой степени защищены от нежелательных всплывающих окон, но функциональность не отключается полностью.

Что делать, если всплывающее окно открывается по клику, но после setTimeout? Это немного сложно.

Всплывающее окно открывается в Chrome, но блокируется в Firefox.

…Если мы уменьшим задержку, всплывающее окно будет работать и в Firefox:

Разница в том, что Firefox считает допустимым тайм-аут в 2000 мс и меньше, а после него — убирает «доверие», считая, что теперь оно «вне действия пользователя». Так что первый заблокирован, а второй нет.

окно.открыть

Синтаксис для открытия всплывающего окна: window.open(url, name, params):

url URL-адрес для загрузки в новое окно. name Имя нового окна. У каждого окна есть window.name , и здесь мы можем указать, какое окно использовать для всплывающего окна. Если окно с таким названием уже есть – в нем открывается указанный URL, иначе открывается новое окно. params Строка конфигурации для нового окна. Содержит настройки, разделенные запятой. В параметрах не должно быть пробелов, например: width=200,height=100 .

Настройки параметров:

Позиция:

left/top (numeric) – координаты левого верхнего угла окна на экране. Существует ограничение: новое окно нельзя расположить за пределами экрана.
width/height (число) – ширина и высота нового окна. Существует ограничение на минимальную ширину/высоту, поэтому невозможно создать невидимое окно.

строка меню (да/нет) — показывает или скрывает меню браузера в новом окне.
панель инструментов (да/нет) — показывает или скрывает панель навигации браузера (назад, вперед, перезагрузить и т. д.) в новом окне.
местоположение (да/нет) — показывает или скрывает поле URL в новом окне. FF и IE по умолчанию не позволяют его скрыть.
статус (да/нет) — показывает или скрывает строку состояния. Опять же, большинство браузеров заставляют его показывать.
изменяемый размер (да/нет) – позволяет отключить изменение размера для нового окна. Не рекомендуется.
полосы прокрутки (да/нет) — позволяет отключить полосы прокрутки для нового окна. Не рекомендуется.

Существует также ряд менее поддерживаемых функций браузера, которые обычно не используются. Проверьте window.open в MDN для примеров.

Пример: минималистичное окно

Откроем окно с минимальным набором функций, просто чтобы посмотреть, какие из них браузер позволяет отключить:

Здесь большинство «функций окна» отключены, а окно расположено за пределами экрана. Запустите его и посмотрите, что происходит на самом деле. Большинство браузеров «исправляют» странные вещи, такие как нулевая ширина/высота и левый/верхний край за пределами экрана. Например, Chrome открывает такое окно на всю ширину/высоту, чтобы оно занимало весь экран.

Давайте добавим обычные параметры позиционирования и разумные координаты width , height , left , top:

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

Правила для пропущенных настроек:

Если в вызове open нет третьего аргумента или он пуст, используются параметры окна по умолчанию.
Если есть строка параметров, но некоторые функции "да/нет" опущены, то считается, что пропущенные функции не имеют значения. Поэтому, если вы указываете параметры, убедитесь, что вы явно установили для всех необходимых функций значение yes.
Если в параметрах нет значения left/top, браузер пытается открыть новое окно рядом с последним открытым окном.
Если ширина/высота отсутствуют, новое окно будет такого же размера, как и последнее открытое.

Доступ к всплывающему окну из окна

Вызов open возвращает ссылку на новое окно. Его можно использовать для управления его свойствами, изменения местоположения и многого другого.

В этом примере мы генерируем всплывающее содержимое из JavaScript:

А здесь мы изменяем содержимое после загрузки:

Обратите внимание: сразу после window.open новое окно еще не загружено. Это демонстрируется предупреждением в строке (*). Поэтому мы ждем загрузки, чтобы изменить его. Мы также можем использовать обработчик DOMContentLoaded для newWin.document .

Windows может свободно получать доступ к содержимому друг друга, только если они исходят из одного и того же источника (один и тот же протокол://домен:порт).

Доступ к окну из всплывающего окна

Всплывающее окно также может получить доступ к окну «открывателя», используя ссылку window.opener. Он равен нулю для всех окон, кроме всплывающих окон.

Если вы запустите приведенный ниже код, он заменит содержимое открывающего (текущего) окна на «Тест»:

DigitalOcean объединяет усилия с CSS-Tricks! Специальное приветственное предложение: получите бесплатный кредит в размере 100 долларов США.

Когда я написал это в Твиттере, а затем добавил это, я получил такие комментарии. У этого комментария совершенно правильная точка зрения.

Мы часто говорим о разрешении экрана, которое не является релевантной статистикой, когда речь идет о том, какое место доступно посетителям нашего веб-сайта. Соответствующей статистикой является размер окна браузера. Так почему же мы так много говорим о разрешении экрана? Ну, наверное, потому что в самом популярном в мире аналитическом программном обеспечении Google Analytics вы получаете только эти данные.

(команда Google Analytics знает об этом)

Итак, что нам делать? Что ж, начните измерять размер браузера, например.

Но сначала несколько слов.

Что, если бы мы выяснили все виды данных о размерах браузеров наших посетителей. Что делать с этими данными, когда они у нас есть? Если @beep нас чему-то и научил, так это тому, что мы можем и должны приспосабливаться к браузерам любой формы и размера.

Но, тем не менее, иметь информацию никогда не бывает плохо. Более умные мужчины и женщины, чем я, могут видеть то, чего не вижу я, и думать о разумных действиях на основе этих данных.

Получение данных

Поскольку Google Analytics в настоящее время не может нам помочь, нам нужно будет самостоятельно запустить код JavaScript на странице, чтобы получить данные. jQuery позволяет легко измерять размеры, а также создавать и вызывать Ajax для POST данных в сценарий, который может их сохранить:

Теперь нам просто нужно, чтобы скрипт savedata.php был готов принять и сохранить эти данные. Сначала нам нужна база данных, поэтому вот простая структура для нее:

Я не эксперт по MYSQL, но вот что дал мне экспорт структуры из phpMyAdmin:

А теперь мой коварный примитивный скрипт для сохранения POST:

Это то, что я делал на CSS-Tricks в течение одного дня. Если хотите, вот полные данные, которые я собрал в виде SQL.

Просмотр результатов

Во-первых, данные о скучном разрешении экрана. Я получил это, запросив 500 случайных выборок данных и наложив элементы div такого размера друг на друга настолько светло-серым, насколько я мог сделать. Кстати, это rgba(0,0,0,0.004) , потому что rgba(0,0,0,0.003) чисто белый (странно).

Обратите внимание на довольно четкие линии. Только мониторы бывают разных размеров. Имеет смысл. Вот что происходит, когда мы делаем то же самое с размерами окна браузера:

Гораздо более размыто. Также имеет смысл. Даже когда я пишу это, мой браузер имеет очень произвольный размер, вероятно, около 80% разрешения моего экрана. Щелкните эти изображения выше, чтобы увеличить их. Вы заметите, что какие бы ни были видимые четкие края в версии размера браузера, они ровно на 20 пикселей уже, чем аналог размера экрана. Интересно.

Если я окрашу размеры экрана в красный цвет, а размеры браузера в зеленый и положу их друг на друга, мы получим вот что:

Обратите внимание, что на внешних краях оттенок остается красным. Немногие люди с очень широкими мониторами открывают окно браузера так широко. Я знаю, что нет. Давайте посмотрим на статистику для «полноэкранных» браузеров. Сколько людей используют браузер в полноэкранном режиме или, так сказать, с «максимальным» окном браузера.Ну, если вы запрашиваете только те записи, где размер окна и разрешение экрана точно такие же, очень мало, менее 1%, но становится интересно:

Полностью полный экран	0,85%
В пределах 50 пикселей от полного экрана	1,06%
В пределах 100 пикселей от полного экрана	9,67 %
В пределах 200 пикселей от полного экрана< /td>	61,18%

Поэтому очень немногие люди просматривают в полноэкранном режиме, но большинство людей просматривают почти в полноэкранном режиме. Как предположение, вполне вероятно, что пользователи Windows просматривают полноэкранный режим, так как это гораздо более естественное поведение в этой операционной системе. Но теперь «полноэкранный режим» имеет большое значение в OS X Lion, возможно, это начнет влиять на этот материал.

Если мы поместим этот материал в разворот и используем весь набор данных, вот один из способов разбить его на части:

td>

Диапазон ширины	Окно браузера	Разрешение экрана
0px – 500px< /td>	1,13%	1,02%
501–800 пикселей	2,01%	1,06%
801px – 1000px	2,84%	0,07%
1001px – 1200px	14,91%	6,86%
1201px – 1400px	40,65%	35,57%
1401px – 1600px	17,38%	17,17%
1601px – 2000px	20,41%	34,34%
2000px+	0,66 %	3,91%

И где во всем этом мобильность? Несмотря на отчеты о массовом росте мобильного просмотра, в чем я не сомневаюсь, у CSS Tricks очень мало мобильного трафика.

Давайте завершим это несколькими простыми советами:

Самое популярное разрешение экрана — 1680 x 1050 – почти 13 % посещений используют мониторы такого размера.
Как и ожидалось, ни один размер окна браузера не превосходит все остальные, но лидирует размер окна 1349 x 667 – 0,75 % посещений.
Самое популярное соотношение разрешения экрана – 16:10, и оно составляет 46 % посещений. Может быть, потому, что многие видео имеют формат 16:9, и производители мониторов хотели, чтобы люди смотрели это, но при этом оставалось место для некоторого хрома ОС? Следующим идет формат 16:9 с 29%, 5:4 с 12% и 4:3 с 8%.
Все эти пропорции больше в ширину, чем в высоту. Оказывается, только у 2 % посетителей экраны больше в высоту, чем в ширину (или, по крайней мере, об этом сообщают).
Фактические окна браузера также имеют тенденцию быть шире, чем в высоту, и только 3% посещений имеют размеры, которые больше в высоту, чем в ширину.
Среднее количество пикселей на экран = 1 539 515 пикселей.
Среднее разрешение экрана = 1526 x 967.
Средний размер окна браузера = 1366 x 784

Джейми Бикнелл из Rentedsmile Web Design за помощь в объединении запросов MYSQL и PHP, необходимых для выполнения каких-либо полезных действий с данными.

С помощью Photoshop можно изменять размер и обрезать изображения несколькими способами. Чтобы добиться наилучших результатов при кадрировании или изменении размера изображений, полезно понимать принципы, лежащие в основе методов изменения размера, и то, как изменение размера влияет на обрезку.

Инструкции по изменению размера фотографий см. в разделе Размер и разрешение изображения.

Инструкции по обрезке фотографий см. в разделе Обрезка и выравнивание фотографий.

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

Размер экрана

Разрешение экрана вашего монитора – это количество пикселей, которое он может отображать. Например, монитор с разрешением экрана 640 x 480 пикселей отображает 640 пикселей по ширине и 480 пикселей по высоте. Существует несколько различных разрешений экрана, которые вы можете использовать, и физический размер экрана монитора обычно определяет доступные разрешения. Например, большие мониторы обычно имеют более высокое разрешение, чем маленькие мониторы, потому что у них больше пикселей.

Чтобы узнать разрешение вашего экрана, выберите «Пуск» > «Панель управления» > «Экран» > «Настройки» и посмотрите на разрешение экрана (Windows) или выберите «Системные настройки» > «Мониторы» и посмотрите в списке «Разрешение» (macOS).

Размер изображения на экране

Изображения имеют фиксированный размер в пикселях, когда они появляются на вашем мониторе. Разрешение экрана определяет, насколько большим будет изображение на экране. Монитор с разрешением 640 x 480 пикселей отображает меньше пикселей, чем монитор с разрешением 1024 x 768 пикселей. Таким образом, каждый пиксель на мониторе с разрешением 640 x 480 пикселей больше, чем каждый пиксель, отображаемый на мониторе с разрешением 1024 x 768 пикселей.

Изображение размером 100 x 100 пикселей занимает примерно одну шестую часть экрана при разрешении 640 x 480, но при разрешении 1024 x 768 оно занимает лишь около одной десятой части экрана. Таким образом, при разрешении 1024 x 768 изображение выглядит меньше. пикселей, чем при разрешении 640 x 480 пикселей.

Размер изображения при печати

Другие значения, используемые при изменении размера изображения — физический размер изображения при печати и разрешение — не используются до тех пор, пока изображение не будет напечатано. Затем физический размер изображения, разрешение и размеры в пикселях определяют количество данных в изображении и качество его печати. Как правило, изображения с более высоким разрешением печатаются с более высоким качеством. Дополнительные сведения о разрешении и физическом размере см. в следующих разделах.

Диалоговое окно "Размер изображения"

При использовании диалогового окна «Размер изображения» для изменения размера изображений (выберите «Изображение» > «Размер изображения») могут измениться четыре аспекта вашего изображения:

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

Photoshop вычисляет физический размер, разрешение и размеры изображения в пикселях следующим образом:

Физический размер = разрешение x размер в пикселях.
Разрешение = физический размер / размер в пикселях.
Размеры в пикселях = физический размер / разрешение

Диалоговое окно "Размер изображения" позволяет изменять размер изображений двумя способами. Вы можете увеличить или уменьшить количество данных в изображении (ресамплинг). Или вы можете сохранить тот же объем данных в изображении (изменение размера без повторной выборки). При передискретизации качество изображения может в некоторой степени ухудшиться. Возможно, вам придется проделать дополнительную работу, например использовать фильтр «Контурная резкость», чтобы повысить резкость изображения, чтобы компенсировать передискретизацию.

Совет. Чтобы вернуть исходное состояние диалогового окна «Размер изображения», нажмите клавишу «Alt» (Windows) или «Option» (macOS). Нажатие этих клавиш превращает кнопку «Отмена» в кнопку «Сброс».

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

Повторная выборка изменяет общее количество пикселей в изображении, которое отображается как ширина и высота в пикселях в диалоговом окне «Размер изображения». При увеличении количества пикселей в этой части диалогового окна (повышение дискретизации) приложение добавляет данные к изображению. При уменьшении количества пикселей (понижающей выборке) приложение удаляет данные. Всякий раз, когда данные удаляются из изображения или добавляются к нему, качество изображения в некоторой степени ухудшается. Удаление данных из изображения обычно предпочтительнее добавления данных. Это потому, что повышение частоты дискретизации требует, чтобы Photoshop угадал, какие пиксели добавить. Эта процедура более сложна, чем угадывание, какие пиксели удалить при понижении разрешения. Вы получаете наилучшие результаты, работая с изображениями, которые вы загружаете в Photoshop с правильным разрешением для получения желаемого результата. Вы можете получить нужные результаты, изменив размер изображения без передискретизации. Однако если вы передискретизируете изображения, делайте это только один раз.

Когда вы включаете Resample, вы можете изменить любые значения в диалоговом окне Image Size: размеры в пикселях, физический размер или разрешение. Если вы измените одно значение, вы повлияете на другие. Размеры в пикселях всегда изменяются.

Изменение размера в пикселях влияет на физический размер, но не на разрешение.
Изменение разрешения влияет на размеры в пикселях, но не на физический размер.
Изменение физического размера влияет на размер в пикселях, но не на разрешение.

Вы не можете установить размер файла; он меняется, когда вы меняете общее количество данных в изображении (размеры в пикселях). Обратите внимание на значение размера файла, прежде чем изменять другие значения в диалоговом окне. Затем вы можете использовать информацию о размере файла, чтобы понять, сколько данных удаляется или добавляется к вашему изображению при его повторной выборке. Например, если размер файла изменится с 250 КБ до 500 КБ, вы добавите в изображение в два раза больше данных, что может ухудшить его качество. Поврежденные изображения могут выглядеть размытыми, зубчатыми или блочными.

Когда вы изменяете размер изображения, но не выполняете его передискретизацию, вы изменяете размер изображения без изменения объема данных в этом изображении. Изменение размера без передискретизации изменяет физический размер изображения без изменения размеров изображения в пикселях. Никакие данные не добавляются и не удаляются из образа. Когда вы отменяете выбор или отключаете Resample, поля размеров в пикселях становятся недоступными. Вы можете изменить только два значения: физический размер (ширина и высота в разделе «Размер документа») или разрешение (в пикселях/дюйм). При изменении размера без повторной выборки можно установить либо физический размер, либо разрешение изображения.Чтобы общее количество пикселей в изображении оставалось неизменным, Photoshop компенсирует установленное вами значение, увеличивая или уменьшая другое значение. Например, если вы установите физический размер, Photoshop изменит разрешение.

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

Например, изображение размером 400 x 400 пикселей имеет физический размер 4 x 4 дюйма и разрешение 100 пикселей на дюйм (ppi). Чтобы уменьшить физический размер изображения наполовину без передискретизации, установите физический размер 2 x 2 дюйма. Photoshop увеличивает разрешение до 200 ppi. Изменение размера изображения таким образом сохраняет общее количество пикселей постоянным (200 ppi x 2 x 2 дюйма = 400 x 400 пикселей). Если вы удвоите физический размер (до 8 x 8 дюймов), разрешение уменьшится до 50 пикселей на дюйм. Добавление большего количества дюймов к размеру изображения означает, что количество пикселей на дюйм может быть вдвое меньше. Если вы измените разрешение изображения, физический размер также изменится.

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

Примечание. Пиксели на дюйм (ppi) — это количество пикселей в каждом дюйме изображения. Количество точек на дюйм (dpi) относится только к принтерам и варьируется от принтера к принтеру. Как правило, на пиксель приходится от 2,5 до 3 точек чернил. Например, принтеру с разрешением 600 точек на дюйм требуется только изображение с разрешением от 150 до 300 точек на дюйм для печати наилучшего качества.

Дополнительные сведения о параметрах в диалоговом окне «Размер изображения» см. в разделе «О размерах в пикселях и разрешении печатного изображения» в справке Photoshop.

При использовании инструмента "Кадрирование" для изменения размера изображения размеры в пикселях и размер файла изменяются, но изображение не подвергается повторной выборке. При использовании инструмента «Кадрирование» размеры и разрешение в пикселях включают большее количество пикселей на дюйм в зависимости от размера области обрезки. Однако Photoshop не добавляет и не удаляет данные из изображения специально.

Когда вы кадрируете изображение, вы удаляете или добавляете данные к исходному размеру изображения, чтобы создать другое изображение. Поскольку вы удаляете или добавляете данные относительно исходного изображения, концепция передискретизации теряет большую часть своего значения. Это связано с тем, что количество пикселей на дюйм может варьироваться в зависимости от количества пикселей в области выбора обрезки. Когда количество пикселей в области обрезки позволяет, Photoshop пытается сохранить то же разрешение, что и исходное изображение. Этот метод считается кадрированием без передискретизации. Однако, если вы не уверены в количестве выбранных пикселей, размеры в пикселях и размер файла изменятся в новом изображении.

Параметры инструмента обрезки

Параметры на панели параметров инструмента "Кадрирование" изменяются после того, как вы нарисуете выделенную область. При первом выборе инструмента «Обрезка» вы можете указать ширину, высоту и разрешение. Вы можете измерять ширину и высоту в дюймах, сантиметрах, миллиметрах, точках и пиках. Введите единицу измерения или ее сокращение после числа в поле значения. Например, 100 пикселей, 1 дюйм, 1 дюйм, 10 см, 200 мм, 100 точек или 100 пикселей. Если вы не укажете единицу измерения в полях «Ширина» и «Высота» на панели параметров кадрирования, единицей измерения по умолчанию будут дюймы.

Вы также можете установить значение разрешения обрезанного изображения в поле "Разрешение". Выберите пиксели/дюйм или пиксели/см во всплывающем меню.

Дополнительную информацию о параметрах инструмента "Кадрирование" см. в разделе "Кадрирование и выравнивание изображений".

Изменение размера только в дюймах

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

Примечание. Исходное изображение, используемое в приведенных ниже примерах, имеет размеры 4 x 4 дюйма, 100 пикселей на дюйм, 400 x 400 пикселей и 468,8 КБ.

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

PPI и DPI часто используются как синонимы, когда это не должно быть. Понимание того, чем они отличаются и как применять каждое из них в своих проектах, позволит вам производить качественную печать, оптимизировать цифровые изображения для Интернета и, в конечном счете, сэкономить драгоценное время.С учетом сказанного давайте разберем, что означают эти термины, и рассмотрим различия между PPI и DPI.

В чем разница между PPI и DPI?
—

PPI описывает разрешение цифрового изображения в пикселях, тогда как DPI описывает количество чернильных точек на печатном изображении.

Хотя PPI в основном относится к отображению на экране, он также влияет на размер печати вашего дизайна и, следовательно, на качество вывода. DPI, с другой стороны, не имеет ничего общего с чем-либо цифровым и в основном касается печати.

Разрешение PPI
—

Что означает ИЦП

PPI, или пикселей на дюйм, относится как к фиксированному количеству пикселей, которые может отображать экран, так и к плотности пикселей в цифровом изображении. С другой стороны, количество пикселей относится к количеству пикселей по длине и ширине цифрового изображения, то есть к размерам изображения в пикселях. Пиксели, или «элементы изображения», являются мельчайшими строительными блоками цифрового изображения. Увеличьте масштаб любого изображения, и вы увидите, что оно разбито на цветные квадраты — это пиксели.

Каждый пиксель состоит из субпикселей RGB

Подсчет пикселей описывает размеры изображения на основе количества пикселей

PPI, или плотность пикселей, описывает степень детализации изображения на основе концентрации пикселей

В пикселях находятся субпиксели, элементы красного, зеленого и синего света, которые человеческий глаз не может видеть, поскольку аддитивная обработка цвета смешивает их в один оттенок, который проявляется на уровне пикселей. Вот почему PPI использует цветовую модель RGB (красный, зеленый и синий), также известную как аддитивная цветовая модель. Этого нет в печати — только в электронном отображении изображений, например, на экранах телевизоров, компьютерных мониторах и цифровой фотографии.

Когда вы используете PPI?

Используйте PPI при работе с цифровыми изображениями. PPI наиболее полезен при подготовке файлов к печати (хотя DPI будет использоваться физическим принтером — подробнее см. в разделе DPI ниже). Изображение с более высоким значением PPI, как правило, имеет более высокое качество, поскольку оно имеет большую плотность пикселей, но экспорт с разрешением 300 PPI обычно считается отраслевым стандартом качества.

Меньшее разрешение PPI приводит к меньшей детализации и пикселизации изображения

Более высокое разрешение PPI обеспечивает большую детализацию и четкость изображения

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

Как настроить или изменить разрешение PPI

В начале окна «Новый документ» в Photoshop вы установили разрешение «Пиксели на дюйм»

Растровые программы (программы, работающие с пиксельным мультимедиа), такие как Photoshop, требуют установки разрешения PPI в самом начале при создании документа. Вы найдете Разрешение в списке вместе с другими параметрами в окне Новый документ.

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

В Photoshop это можно сделать, выбрав Изображение > Размер изображения. В окне «Размер изображения» у вас будут параметры для изменения ширины, высоты и разрешения PPI вашего изображения.Установите флажок «Пересэмплировать» и установите для него значение «Сохранить детали», чтобы выбрать, как Photoshop заполнит новые пиксели.

В окне "Размер изображения" можно настроить разрешение в Photoshop

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

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

Печать DPI
—

Что означает DPI

DPI, или количество точек на дюйм, относится к значению разрешения физического принтера. Принтеры воспроизводят изображение, выплевывая крошечные точки, а количество точек на дюйм влияет на количество деталей и общее качество печати.

Точки принтера смешивают чернила CMYK

DPI описывает степень детализации изображения в зависимости от концентрации точек принтера

DPI использует цветовую модель CMYK (голубой, пурпурный, желтый и ключевой/черный) для управления количеством красного, зеленого и синего света, отражаемого белой бумагой. Это также известно как субтрактивная цветовая модель. Точки каждого цвета напечатаны узорами, что позволяет человеческому глазу воспринимать определенный цвет, состоящий из этой комбинации. DPI является измерением этой плотности. Эти точки имеют фиксированный размер, и на разрешение влияет только количество точек на дюйм.

Когда вы используете DPI?

Когда ваш дизайн будет распечатан физически, принтер будет использовать DPI. Каждая модель и стиль принтера создает свой уникальный DPI на основе своих настроек. Струйные принтеры обеспечивают разрешение от 300 до 720 точек на дюйм, а лазерные — от 600 до 2400 точек на дюйм.

Чем выше DPI, тем выше разрешение, но размер точек зависит от принтера

Не существует стандартного размера или формы точек, поэтому более высокое значение DPI не всегда означает более высокое качество печати. Точки одного производителя могут выглядеть так же хорошо при разрешении 1200 DPI, как точки другого производителя при разрешении 700 DPI. Книги и журналы часто используют 150 точек на дюйм для фотографического воспроизведения, а газеты часто используют 85 точек на дюйм. Спросите в типографии или ознакомьтесь со спецификациями принтера, чтобы найти подходящий DPI для вашего проекта.

Разрешение изображения имеет значение
—

Знание того, как использовать PPI, позволит вам каждый раз создавать высококачественные изображения. А знание того, как ориентироваться в DPI, поможет вам эффективно общаться с печатными машинами и профессионалами полиграфической отрасли. Если вы не печатник, основное внимание будет уделяться PPI. Но важно понимать процесс физической печати, если ваша работа требует этого на регулярной основе.

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

Ознакомьтесь с этой статьей об основах графического дизайна, чтобы узнать больше о дизайне.

Хотите идеальное разрешение изображения в своих дизайнерских проектах?

Найдите дизайнера сегодня!

Эта статья изначально была написана Алексом Бингманом и опубликована в 2013 году. В нее добавлены новые примеры и информация.

Читайте также: