Размер фотографий для публикации в интернете: pavel_kosenko — LiveJournal
В каком размере лучше сохранять фотографии под web? Эта тема неоднократно затрагивалась в обсуждениях и я обещал описать свой подход. Но для начала мне было интересно оценить, насколько отличаются экраны людей, увлекающихся фотографией, от экранов среднестатистических интернет-пользователей, поэтому я запустил опрос об используемых разрешениях экрана (большое спасибо всем, кто проголосовал). Итак, попробую объяснить цифры.
Зачем вообще нужно обращаться к статистике? Дело в том, что если мы хотим, чтобы наши картинки было комфортно смотреть, необходимо учесть удобство большинства бользователей, а лучше всех. Реально учесть интересы всех вряд ли возможно, т.к. они часто противоречат друг другу. Например, если сделать картинку под большое разрешение вроде 3200х2400 px, её будет очень сложно просматривать на маленьком мониторе. И наоборот, если оптимизировать картинку под разрешение, скажем, 320х240, то на экранах значительной части зрителей она будет выглядить как маленькое пятнышко, где нельзя рассмотреть не только деталей, но и толком сюжета.
Встаёт логичный вопрос — где золотая середина?
На мой взгляд, с одной стороны необходимо ориентироваться на большинство пользователей, с другой, учитывать интересы малочисленных групп. К значимым группам я бы отнёс аудиторию, составляющую 5%-10% и выше. Всё-таки менее 5%, это обычно пользователи со спецзадачами, а вот от 10%, это уверенно высокая часть аудитории, пренебрегать которой недопустимо. Есть и другие критерии. Например, иногда специально ограничивают потенциальную аудиторию тематической выборкой, заведомо отсекая «непрофильных потребителей», в угоду комфорта основных. Такой подход также бывает оправдан, но лично я предпочитаю по возможности учитывать интересы максимально возможного количества зрителей.
С максимальным ограничением размера фотографий ситуация более-менее ясна. Редко кто готов бесплатно раздавать графические файлы, поэтому просмотр в интернете обычно подразумевает режим preview (предосмотр). Для вполне качественной печати формата 10х15 достаточно разрешения 200 dpi, чему соответствует файл порядка 1200х800 пикселей.
Охраняя свои творения от посягательств, фотографы стараются не допускать размещение в интернете файлов выше размера печати 10х15.
Для того, чтобы определиться с минимальными размерами, обратимся к статистике. В первую очередь к глобальной статистике интернета — например, w3counter.com, spylog.ru, hotlog.ru. Мы видим, что лидер сегодняшних хит-парадов, это разрешение 1024х768. Доля таких пользователей колеблется в среднем от 22% до 47%. Второе место принадлежит разрешению 1280×1024, которым пользуется от 15% до 20% человек. В моём опросе места 1 и 2 поменялись местами — 11% и 49% соответственно. Я думаю, это связано с тем, что мой блог читают в основном люди, в той или иной степени увлечённые фотографией, т.е. обладающие мониторами размеров выше среднего. Вместе с тем даже среди такой аудитории процент использования разрешения 1024х768 уверенно превысил 10%.
В настоящее время, с учётом имеющейся статистики, мне представляется оптимальным ориентация на экраны с разрешением 1024×768 пикселей.
В этом случае мы учтём интересы большинства людей и менее численных групп, при этом не сделаем просмотр на незначительно меньших или больших экранах намного сложнее.
Когда мы говорим о разрешении экрана, то должны помнить следующее. Как правило, часть экрана требуется на интерфейсы операционной системы (например, кнопка «Пуск» и полоса навигации в Windows) и интерфейс браузера. Конечно, существуют режимы просмотра full screen (полный экран), но если вспоминать про удобство пользователей, то необходимо уместить картинку целиком в его стандартном поле для просмотра web-страниц. Давайте посмотрим, какового это поле при разрешении 1024х768? А оно примерно таково:
посмотреть крупнее (откроется в новом окне)
Размер 1000х620 пикселей определён примерно, т.к. в реальности он варьируется в зависимости от ОС, используемых режимов и интерфейсов браузера. Также некоторые учитывают ICQ-клиент, но я считаю, что для просмотра картинок в интернете человек вполне способен убрать его на это время.
С учётом минимально необходимых отступов, получается, что для показа картинки с соотношением сторон 3:2 у нас остаётся 600 пикселей по высоте. Что соответствует 900 по ширине.
900х600 — этот формат я определяю для себя в качестве максимального для публикации в интернете. Вот так он выглядит в реальном размере:
Фотография в таком размере будет показана целиком (без полосы прокрути) у подавляющего большинства пользователей. При этом такой размер вполне достаточен, чтобы рассмотреть детали и сюжет, даже если просматривать его на большом экране порядка 1600х1200 и более пикселей. Тем более, при слишком больших разрешениях люди часто предпочитают не открывать браузер на всю ширину. При описанном подходе у меня получаются следующие размеры картинок, которые я и стараюсь использовать по возможности:
3:2 (горизонтальный) — 900х600
3:2 (вертикальный) — 400х600
4:3 (горизонтальный) — 800х600
4:3 (вертикальный) — 450х600
1:1 (квадрат) — 500х500
При размещении картинок свыше 900х600 пикселей мы заведомо создаём неудобство просмотра для большого количества людей.
В этом случае пострадает в среднем от 10% (увлеченной) до 50% (массовой) аудитории, у которых возникнут полосы прокрутки и которые не смогут без специальных действий просмотреть фотографию целиком на экране.
Несколько примечаний:
1. В случае нестандартных соотношений сторой я ориентируюсь на максимальный размер стороны согласно обозначенному ограничению 900х600. Например, картинку 3000х1500 пикселей я скорее всего уменьшу до 900х450.
2. Квадрат сам по себе создаёт ощущение большой площади, поэтому для гармоничного его просмотра с другими картинками, я беру максимальную сторону чуть меньше, чем для других случаев (500, а не 600).
3. В случае узкой длинной панорамы стараюсь сделать один размер для просмотра целиком на экране + ссылка на более большой вариант. Конкретные цифры зависят от самой панорамы, но для таких случаев при описанном подходе (наличие превью и ссылки) считаю допустимым делать картинку шириной 1200-1500 пикселей и даже больше. Но только, если такая картинка буде скрыта под отдельной ссылкой.
4. Для публикации фотографий в ЖЖ я стараюсь вынести вне ката более маленькую картинку (как правило, одну), чтобы не перегружать френд-ленты. Те, кого заинтересует превью, могут посмотреть нормальный размер под катом. Считаю размещение большой (порядка 900х600 пикселей) картинки вне ката чрезмерным, хотя не критичным. Т.е. я не обижаюсь на такие каринки в своей ленте :), хотя и считаю размеры свыше 900х600 перебором, который мешает удобству. Сам стараюсь для предосмотра (т.е. вне ката) не использовать картинки более 600х400.
5. Для тех случаев, когда необходимо показать очень мелкие детали в кадре, имеет смысл сделать кроп исходного кадра и разместить его отдельно, в качестве дополнительного материала. Такой кроп может потребоваться для демонстрации качества исходника, но никогда не используется для оценки фотографии и её сюжета.
Примерно так. Описанный принцип не претендует на объективность. Другие подходы также могут быть оправданы, в зависимости от целей и ориентирации на определённую (ограниченную) аудиторию.
Просто я рассказываю о своём подходе и надеюсь, что эта информация может оказаться полезной. Как всегда, буду благодарен за отзывы и встречные мнения.
UPDATE. Обновленная статья (2015 год):
http://pavel-kosenko.livejournal.com/642666.html
Разрешение изображений и качество печати
В этой статье мы рассмотрим, как разрешение изображения влияет на качество печати.
Вы когда-нибудь скачивали картинку из Интернета, а затем при печати получали результаты, которые были, ну, меньше, чем вы ожидали? Изображение выглядело великолепно на экране вашего компьютера, но когда вы распечатали его, оно либо выводилось на печать в размере почтовой марки или в нормальном размере, но выглядело размытым или «с кубиками»? Причина в разрешении изображения.
На самом деле, это не совсем справедливо.
Это не так, что разрешение изображения специально указывается таким образом, чтобы сделать вас несчастными, когда вы печатаете фото из Интернета. Проблема заключается в том, что большинство фотографий в Интернете имеют очень маленькие размеры в пикселях, как правило, в районе 640 пикселей в ширину и 480 пикселей в высоту. Или даже меньше.
Потому что изображение не должно быть очень большим, чтобы нормально выглядеть на экране компьютера. А также потому, что маленькие изображения загружаются намного быстрее, чем более крупные (это уже совсем другой вопрос, который мы не будем затрагивать в этой статье).
Так что мы можем сделать, чтобы фотографии, загруженные из Интернета, выглядели при печати как качественные фотографии с цифровой камеры? Ответ — абсолютно ничего. В большинстве случаев интернет-снимки просто не имеют достаточно пикселей, чтобы обеспечить печать с высоким качеством. По крайней мере, если не печатать их в формате почтовой марки. Давайте выясним, почему.
Прежде всего, давайте немного отойдем от темы загрузки изображений из Интернета, так как таковой, и от того, что мы на самом деле в любом случае не должны делать это без разрешения владельца авторских прав.
Давайте рассмотрим разрешение изображений в целом.
Термин «разрешение изображения» означает, сколько пикселей вашего снимка будет помещаться на каждом дюйме бумаги при печати.
Очевидно, что, так как ваша фотография имеет фиксированное количество пикселей, чем больше пикселей содержится в одном дюйме, тем меньше изображение будет выглядеть на бумаге. Аналогично, чем меньше пикселей на дюйм при печати, тем больше изображение.
Количество пикселей на дюйм при печати и называется «разрешением изображения». Разрешение изображения определяет качество печати изображения. Оно не имеет ничего общего с тем, как изображение выводится на экране компьютера. Поэтому фото, загруженные из Интернета, как правило, имеют гораздо более высокое качество на экране, чем когда вы выводите их на печать.
Давайте в качестве примера рассмотрим фотографию:
Не слишком качественное фото лошади
Я не могу удержаться от смеха каждый раз, когда вижу эту фотографию лошади, которую я сделал проезжая по сельской местности.
Обычно эта лошадь — гордое, мощное, полное достоинства животное, но я, кажется, поймал его в довольно неприглядном положении. Она стоит под немного странным углом, солома свисает у нее с гривы и, кажется, я застал ее во время пережевывания пищи.
Либо так, либо она отчаянно пытается мне улыбнуться. В любом случае, этой лошади уже неловко, что я застал ее в такой момент. Давайте используем это изображение в качестве примера.
Во-первых, давайте посмотрим, что Photoshop может рассказать нам о текущем размере этой фотографии. Я захожу в меню «Изображение» в верхней части экрана и выбираю пункт «Размер изображения», после чего появляется диалоговое окно с соответствующим названием «Размер изображения»:
Диалоговое окно «Размер изображения» показывает нам текущий размер фото
Диалоговое окно «Размер изображения» делится на две основные части: «Размеры в пикселях» в верхней части и «Размер документа» непосредственно под ней.
«Размеры в пикселях» указывают, сколько пикселей содержит наше изображение.
«Размер документа» сообщает нам, насколько большим изображение будет выглядеть на бумаге, если мы распечатаем его. Если мы посмотрим на раздел «Размеры в пикселях», то видим, что эта фотография имеет ширину 1200 пикселей и высоту 800 пикселей. Это может показаться огромным количеством пикселей (1200 на 800 = 960000 пикселей!).
И это, конечно, было бы так, если бы мы отображали изображение на экране компьютера. В самом деле, в 1200 на 800, это может быть слишком большим изображением, чтобы уместиться полностью на вашем мониторе!
Но только то, что оно выглядит красивым и большим на экране, не означает, что оно будет красивым и большим на печати. По крайней мере, не с высокой степенью качества. Давайте внимательнее посмотрим на то, что говорит нам раздел «Размер документа»:
Раздел «Размер документа» говорит о том, насколько большой или маленькой фотография будет при печати в определенном разрешении
Раздел «Размер документа» диалогового окна «Размер изображения» позволяет нам узнать две вещи: какое текущее разрешение у нашего изображения и насколько большим или маленьким будет изображение, если мы распечатаем его на основе данного разрешения.
В настоящее время у нас установлено значение разрешение в 72 пикселя / дюйм, что означает, что из 1200 пикселей, которые составляют размер от правого до левого края фото (ширину), на каждый дюйм бумаги будет идти 72 пикселя. И из 800 пикселей, которые составляют размер изображения сверху вниз (высоту), также на каждый дюйм бумаги будет идти 72 пикселя.
Значение в поле «Разрешение» определяется для ширины и высоты, а не общего количества пикселей. Другими словами, на каждый квадратный дюйм бумаги, по 72 пикселя будет идти на дюйм высоты и ширины. Общее количество пикселей, печатаемых в каждом квадратном дюйме бумаги, в таком случае будет 72 на 72 (72 пикселя по ширине и 72 пикселя по высоте). Что дает нам 5184 пикселей!
Давайте произведем некоторые простые математические вычисления, чтобы убедиться, что ширина и высота, показываемая нам в разделе «Размер документа» верна. Мы знаем из раздела «Размер в пикселях», что мы имеем 1200 пикселей слева направо и 800 пикселей сверху вниз.
Разрешение печати в настоящее время установлено на 72 пикселей / дюйм.
Чтобы выяснить, насколько велико будет наше изображение на печати, нам нужно всего лишь разделить количество пикселей слева направо на 72, что даст нам наш ширину изображения при печати. А также разделить количество пикселей сверху вниз на 72, что даст нам высоту при печати. Давайте сделаем это:
1200 пикселей в ширину, разделенные на 72 пикселей на дюйм = 16,667 дюймов ширины
800 пикселей делится на 72 пикселей на дюйм = 11,111 дюйма высоты
Исходя из наших собственных простых вычислений, при разрешении 72 пикселя / дюйм (ppi для краткости), наше изображение при печати будет иметь 16,667 дюймов в ширину и 11,111 дюймов в высоту. И если мы посмотрим на раздел «Размер документа» еще раз:
Подтверждение размеров печати в разделе «Размер документа»
Это именно то, что здесь указано! Ничего себе, фото 1200 на 800 пикселей является достаточно большим для того, чтобы распечатать его в размере 11 на 14 дюймов, мы даже можем его немного уменьшить! Замечательно!
К сожалению, нет.
Если бы в жизни все было так просто.
Дело в том, что 72 пикселей на дюйм не достаточно, чтобы дать нам на печати резкое, хорошего качества, профессионально выглядящее изображение. Даже близко нету. Чтобы дать Вам представление о том, что я имею в виду, вот грубое приближение того, как фото будет выглядеть на бумаге, если бы мы попытались распечатать его с разрешением 72 пикселя на дюйм.
Вы должны будете немного использовать свое воображение. Попробуйте представить себе, что это 11 на 16 дюймов:
Как будет выглядеть фото на бумаге при печати в разрешении всего лишь 72 пикселя на дюйм
Выглядит не слишком хорошо, не так ли? Проблема в том, что 72 пикселя на дюйм дают слишком мало информации об изображении, чтобы распечатать на бумаге резкое и четкое фото. Как будто на большой кусок тоста намазали слишком мало арахисового масла. Фото теперь выглядит размыто, скучно и вообще непривлекательно.
Мы не видим этого на экране компьютера, потому что компьютерными мониторами, как правило, называют устройства с низким разрешением.
Даже фото с относительно небольшими размерами в пикселях, например, 640 на 480, будет отлично смотреться на экране компьютера.
Принтеры, однако, являются устройствами высокого разрешения, и если вы хотите, чтобы ваши фотографии печатались четко и на них были видны все мелкие детали, вам нужно разрешение намного выше, чем 72 пикселя на дюйм.
Так какое максимальное значение разрешения нужно для печати профессионального качества? Принято считать, что это 300 пикселей на дюйм. Печать изображения с разрешением 300 пикселей на дюйм достаточно сжимает пиксели, чтобы сохранить резкость.
На самом деле, 300, как правило, даже немного больше, чем нужно. Вы часто можете видеть фото с разрешением 240 точек на дюйм, без заметной потери качества изображения. Однако профессиональный стандарт — это 300 пикселей на дюйм.
Давайте возьмем то же изображение, с теми же 1200 пикселями ширины и 800 пикселями высоты, а затем изменим разрешение с 72 пикселей на дюйм до 300 пикселей на дюйм, и посмотрим, что получится.
Вот диалоговое окно «Размер изображения» с новым разрешением в 300 пикселей на дюйм. Заметьте, что в разделе «Размер в пикселях» в верхней части у нас по-прежнему значится 1200 пикселей по ширине и 800 пикселей по высоте.
Единственное, что изменилось, это наше разрешение — с 72 до 300:
Разрешение печати было изменено на 300 пикселей на дюйм
То, что разрешение увеличилось с 72 до 300 пикселей на дюйм, означает, что из 1200 пикселей, которые имеет наше изображение в ширину, 300 пикселей печатаются на один дюйм бумаги. И из 800 пикселей высоты 300 печатаются на каждый дюйм бумаги по высоте. Естественно, с таким большим количеством пикселей на каждый дюйм бумаги, фотография на печати будет намного меньше.
И, конечно, в разделе «Размер документа» теперь значится, что наше фото будет печататься в размере всего 4 дюйма в ширину, 2,667 дюйма в высоту:
Фото теперь будет печататься в гораздо меньшем размере, чем прежде
Откуда же взялись эти новые значения ширины и высоты? Опять же, немного простой математики:
1200 пикселей в ширину делится на 300 пикселей на дюйм = 4 дюйма
800 пикселей в высоту делится на 300 пикселей на дюйм = 2,667 дюйма
Фото теперь будет печататься в гораздо меньшем размере, чем это было при разрешении 72 точек на дюйм.
Но то, что мы теряем в физическом размере, мы более чем компенсируем за счет качества изображения. При 300 пикселях на дюйм (или даже при 240 пикселях на дюйм) мы будем наслаждаться четким, профессионального качества результатом:
Более высокое разрешение печати ведет к уменьшению размеров фотографии, но при этом изображение имеет гораздо более высокое качество
Конечно, большинство людей не печатают свои фотографии в нестандартных форматах, таких как 4 на 2,667. Так как нам убедиться, что мы получим результаты профессионального качества при печати в более стандартном формате, например, 4 на 6? Отличный вопрос, и получить ответ мы можем, снова обратившись к скучной арифметике.
Допустим, вы взяли фотографии с вашего недавнего семейного отдыха, сделанные с помощью цифровой камеры, и вы хотите распечатать некоторые из них на принтере в формате 4 на 6. Теперь мы знаем, что для того, чтобы достичь профессионального качества снимков, мы должны установить разрешение изображений минимум на 240 пикселей на дюйм.
Хотя официальный стандарт 300 пикселей на дюйм.
Давайте рассмотрим оба этих значения разрешения, чтобы увидеть, насколько большими должны быть изображения с камеры для того, чтобы распечатать их в хорошем качестве в формате 4 на 6. Во-первых, давайте рассмотрим 240 пикселей на дюйм.
Чтобы выяснить, насколько велики в пикселях должны быть наши изображения, чтобы они печатались в формате 4 на 6 в профессиональном качестве, нам всего лишь нужно умножить 240 на 4 по ширине, а затем 240 на 6 по высоте (или наоборот, в зависимости от того, имеют ли ваши фотографии ландшафтную или портретную ориентацию).
Давайте сделаем это:
240 пикселей на дюйм х 4 дюйма в ширину = 960 пикселей
240 пикселей на дюйм х 6 дюймов в высоту = 1440 пикселей
Исходя из этих расчетов, мы видим, что для того, чтобы напечатать цифровую фотографию в формате 4 на 6 с разрешением 240 пикселей на дюйм, и чтобы при этом сохранялось отличное качество, размер фото в пикселях должен быть как минимум 960 на 1440.
Мы видим также, сколько пикселей должна содержать фотография в целом, 960 умножить на 1440 дает нам 1382400 пикселей.
Давайте округлим это значение до 1400000 пикселей. Это может показаться слишком большим числом, но на самом деле так и есть. 1,4 миллиона — это минимальное количество пикселей, которое необходимо, чтобы напечатать фотографию в формате 4 на 6 при минимально допустимом для нормального качества разрешении 240 пикселей на дюйм.
Хорошая новость заключается в том, что на сегодняшний день большинство цифровых камер на рынке имеют 5 Мп («мега пикселей» или «миллионов пикселей») и выше. Так что у вас не возникнет проблемы с печатью хорошего качества в формате 4 на 6 даже при разрешении 300 пикселей на дюйм.
Конечно, мы еще не подсчитали точно, сколько пикселей мы должны иметь, чтобы распечатать фото в формате 4 на 6 с профессиональным качеством при разрешении 300 пикселей на дюйм. Так что давайте сделаем это. Мы будем использовать ту же простую формулу, которая была описана выше.
Мы умножим 300 на 4, а затем 300 на 6, чтобы получить размеры в пикселях, которые нам понадобятся:
300 пикселей на дюйм х 4 дюйма в ширину = 1200 пикселей
300 пикселей на дюйм х 6 дюймов в высоту = 1800 пикселей
Давайте сделаем еще одно быстрое вычисление, чтобы узнать, сколько пикселей нам нужно в общей сложности:
1200 пикселей в ширину умножаем на 1800 пикселей в высоту = 2160000
Итак, для того, чтобы напечатать фотографии в формате 4 на 6 в хорошем качестве с использованием профессионального стандарта 300 пикселей на дюйм для разрешения, наша фотография должна иметь 1200 пикселей в ширину и 1800 пикселей в высоту (или наоборот). Это означает, что мы должны в общей сложности иметь 2160000 пикселей. Что опять-таки не должно стать проблемой для большинства цифровых камер на рынке, которые имеют 5Mп и больше.
Но что, если у вас есть фото, которые вы обожаете и считаете, что оно заслуживает того, чтобы распечатать его в формате 8 на 10, а не 4 на 6? Насколько большое изображение должно быть, чтобы при печати в формате 8 на 10 оно выглядело нормально? Ответ на этот вопрос также легко дать, как ранее.
Все, что вам нужно сделать, это умножить значение разрешения в пикселях на дюйм на ширину в дюймах, а затем сделать то же самое для высоты.
Давайте сначала используем разрешение 240 пикселей на дюйм:
240 пикселей на дюйм х 8 дюймов в ширину = 1920 пикселей
240 пикселей на дюйм х 10 дюймов в высоту = 2400 пикселей
Общее количество пикселей = 1920 пикселей в ширину х 2400 пикселей в высоту = 4608000 пикселей.
По результатам вычислений мы видим, что для того, чтобы напечатать фотографию в хорошем качестве в формате 8 на 10, изображение должно иметь 1920 пикселей в ширину и 2400 пикселей в высоту (или наоборот). В общей сложности около 4,6 миллионов пикселей.
Теперь мы начинаем приближаться к границе технических возможностей цифровых камер. 4-мегапиксельной цифровой камеры нам уже будет недостаточно, чтобы иметь возможность распечатать изображение в формате 8 на 10 с разрешением 240 пикселей на дюйм. Потеря порядка 600 000 пикселей это не слишком значительно.
Вы все еще сможете распечатать изображение в формате 8 на 10, но, скорее всего, вы уже не получите профессионального качества.
Давайте сделаем такие же вычисления для формата 8 на 10 при разрешении 300 пикселей на дюйм:
300 пикселей на дюйм х 8 дюймов в ширину = 2400 пикселей
300 пикселей на дюйм х 10 дюймов в высоту = 3000 пикселей
Общее количество пикселей = 2400 пикселей в ширину х 3000 пикселей в высоту = 7200000 пикселей
Теперь мы действительно выходим за ограничения, существующие для некоторых цифровых фотоаппаратов. Для того, чтобы иметь возможность распечатать фотографию в формате 8 на 10 с разрешением 300 пикселей на дюйм, наша фотография должна быть 2400 пикселей в ширину и 3000 пикселей в высоту (или наоборот), в общей сложности 7,2 миллиона пикселей! Теперь это на самом деле много!
Это означает, что вы должны иметь, по крайней мере, 7.2-мегапиксельную цифровую камеру. В этом случае вы будете иметь возможность печатать свои фотографии в формате 8 на 10, и при этом все еще сможете получить снимки профессионального качества.
Конечно, не забудьте, что большинство фотографий требуется хотя бы немного обрезать, а значит, вы теряете еще несколько пикселей.
Если вы уверены, что будете печатать много фотографий в формате 8 на 10, инвестиции в качественную 8-мегапиксельную или выше камеру настоятельно рекомендуются.
Это в целом все!
Сергей Бензенкоавтор-переводчик статьи «Image Resolution And Print Quality»
Миф о разрешении экрана и Интернета 72 PPI
Автор сценария Стив Паттерсон.
Если вы некоторое время работали с компьютерами и цифровыми изображениями, особенно если вы веб-дизайнер или фотограф, публикующий свои фотографии в Интернете, вы, несомненно, слышали, что правильное разрешение для изображений, отображаемых в Интернете, или на экранах компьютеров в целом, составляет 72 пикселя на дюйм (ppi).
Возможно, вы даже слышали, что, хотя разрешение 72 ppi является правильным для изображений, отображаемых на Mac, для ПК с Windows требуется разрешение, установленное на 9.
6 точек на дюйм.
Одни говорят, что это «ppi» ( пикселей на дюйм), другие утверждают, что это «dpi» ( точек на дюйм), и все это стало бы очень запутанным, если бы не один маленький факт — это все полная чушь ! В этом уроке мы узнаем, почему просто не существует такого понятия, как стандартное веб-разрешение или разрешение экрана, и почему, если ваши изображения предназначены для Интернета, вам вообще не нужно беспокоиться о разрешении изображения!
Немного истории…
Происхождение разрешения экрана 72 ppi восходит к середине 19 века.80-х, когда Apple выпустила свои первые компьютеры Macintosh. Эти компьютеры имели встроенный 9-дюймовый дисплей с разрешением экрана 72 пикселя на дюйм. Почему 72 пикселя на дюйм? Это связано с тем, что экраны Macintosh были специально разработаны для идеальной работы с принтерами Apple ImageWriter, разрешение печати которых составляло 144 точки на дюйм, что ровно в два раза превышает разрешение экрана. Это упростило масштабирование экрана до размера печатной страницы, а это означало, что ваш текст и графика можно было предварительно просмотреть на экране в том размере, в котором они будут отображаться при печати.
Но разрешение экрана 72 пикселя на дюйм было стандартом только для Apple, и долго оно не продержалось. Сторонние компании, продающие мониторы для Macintosh, не придерживались стандарта, как и конкурирующие мониторы для ПК. Сегодня, почти три десятилетия спустя, технологии значительно улучшились, и времена экранов с разрешением всего 72 ppi давно прошли. Даже Apple, компания, с которой все началось, теперь продает свои дисплеи с гораздо более высоким разрешением. Никто больше не делает экраны с разрешением 72 ppi. никто не с использованием больше экранов с разрешением 72 ppi. И все же, несмотря на то, что эта старая технология далеко позади, у нас все еще есть много людей, продолжающих верить, что нам нужно установить разрешение наших изображений на 72 пикселя на дюйм в Photoshop, прежде чем загружать их в Интернет.
Испытание стандарта 72 PPI
Как и у всех в наши дни, дисплей вашего компьютера (будь то автономный монитор, многофункциональная система, такая как iMac, или часть ноутбука) имеет разрешение экрана выше 72 пикселей на дюйм, и вы не можете должен поверить мне на слово. Вы можете легко проверить это самостоятельно. Все, что вам нужно, это линейка или рулетка. Теперь, когда магазин продает вам компьютерный монитор, вам обычно говорят о его размере, исходя из его ширины по диагонали , причем некоторые распространенные размеры составляют 17 дюймов, 19 дюймов, 24 дюйма и так далее. Это нормально, но для нашего теста нам не нужно заботиться об этом числе. Нам нужно выяснить фактическую ширину , в дюймах, вашего экрана.
Для этого просто возьмите линейку или рулетку и измерьте площадь экрана слева направо. Убедитесь, что вы измеряете только саму область экрана. Не включайте границу вокруг экрана. Нам нужна фактическая ширина экрана (фото монитора компьютера с Shutterstock):
Измерьте ширину экрана (не включая внешнюю границу).
После того, как вы измерили ширину, вам также нужно убедиться, что ваш монитор настроен на собственное разрешение экрана , которое является фактическим количеством пикселей, которое ваш экран может отображать слева направо и сверху. на дно. Например, монитор с исходным разрешением экрана 1920 x 1080 (в наши дни его обычно называют «full HD») содержит 1920 пикселей слева направо и 1080 пикселей сверху вниз. В настоящее время я использую монитор с собственным разрешением экрана 2560 x 1440, но мой ноутбук имеет собственное разрешение экрана 1920 x 1200, поэтому оно различается, а это значит, что вам нужно знать собственное разрешение экрана вашего конкретного монитора и убедиться, что оно установлено в параметрах дисплея вашей операционной системы.
Теперь, когда вы измерили фактическую ширину экрана и убедились, что ваш монитор работает с исходным разрешением экрана, чтобы узнать фактическое разрешение экрана (в пикселях на дюйм), просто возьмите первое число из собственное разрешение экрана, которое указывает ширину экрана в пикселях и делит ее на ширину экрана в дюймах. Например, мое родное разрешение экрана 2560 x 1440, поэтому я возьму первое число, 2560, то есть ширину экрана в пикселях, и разделю его на ширину в дюймах, которая в моем случае была 23,4 (или очень близко, во всяком случае). Используя удобный встроенный калькулятор моей операционной системы, 2560 ÷ 23,4 = 109.4, которое я округлю до 109. Итак, только из этого быстрого и простого теста я подтвердил, что разрешение моего экрана составляет 109 пикселей на дюйм , , а не 72 пикселя на дюйм. Ваш собственный тест с вашим экраном может дать вам результат, отличный от моего, но если вы все еще не используете один из тех оригинальных компьютеров Macintosh середины 80-х годов, он будет намного выше, чем 72 ppi.
Если хотите, вы можете сделать то же самое с высотой экрана. Просто возьмите линейку или рулетку и измерьте фактическую высоту экрана в дюймах (еще раз избегая области вокруг него):
Измерьте высоту экрана (не включая внешнюю границу).
Затем возьмите второе число из исходного разрешения экрана вашего экрана, которое дает высоту в пикселях, и разделите его на высоту в дюймах. Опять же, мое собственное разрешение экрана составляет 2560 x 1440, поэтому я возьму это второе число, 1440, и разделю его на измеренную высоту экрана, которая составила 13,2 дюйма. Используя мой калькулятор, 1440 ÷ 13,2 = 109,09, который я снова округлю до 109. Как мы видим, вы должны получить практически одинаковый результат, используя ширину или высоту вашего экрана. В моем случае они оба отработали до 109.пикселей на дюйм, а не 72 пикселя на дюйм.
Для сравнения проверим реальное разрешение экрана моего ноутбука. Это MacBook Pro (конечно, сделанный Apple, компанией, которая много лет назад дала нам оригинальный стандарт 72 ppi).
Два разных дисплея, каждый с двумя разными разрешениями экрана (109 пикселей на дюйм и 133 пикселей на дюйм), оба значительно выше 72 пикселей на дюйм, что, по мнению многих людей, сегодня остается отраслевым стандартом разрешения для просмотра изображений в Интернете и на экране. Если мой экран, ваш экран и экран всех остальных имеет разрешение выше 72 ppi, не говоря уже о том, что оба моих экрана имели очень сильно отличающееся друг от друга разрешение и ваш экран также может иметь разное разрешение, то однозначно, не только официального стандарта разрешения экрана больше нет, а если бы и был, то уже не 72 ppi.
Разрешение изображения влияет на размер печати, а не на размер экрана
Если тот факт, что сегодня все компьютерные мониторы имеют разрешение экрана выше 72 пикселей на дюйм, не убедил вас в том, что такого понятия, как стандарт разрешения экрана 72 пикселей на дюйм, больше не существует, вот еще один важный факт, который следует учитывать. Если вы ранее читали наше руководство «Разрешение изображения, размеры в пикселях и размер документа», вы уже знаете, что разрешение изображения не имеет абсолютно никакого отношения к тому, как ваше изображение отображается на экране. На самом деле, цифровое изображение само по себе не имеет собственного разрешения. Это просто пиксели. Он имеет определенное количество пикселей слева направо и определенное количество сверху вниз. Ширина и высота изображения в пикселях известны как его пикселей размером , и это все, что нужно экрану компьютера.
Размер изображения на экране зависит только от двух факторов: размера изображения в пикселях и разрешения экрана. Пока вы установили для своего экрана собственное разрешение экрана, как мы обсуждали ранее, изображение будет отображаться попиксельно. Другими словами, каждый пиксель изображения будет занимать ровно один пиксель на экране. Например, изображение размером 640×480 пикселей заполнит область экрана размером 640×480 пикселей. Баннер шириной 800 пикселей на веб-сайте будет отображаться на экране шириной 800 пикселей. Ни больше ни меньше. И независимо от того, какое разрешение изображения вы установите в Photoshop, будь то 72 ppi, 300 ppi или 3000 ppi, это никак не повлияет на то, насколько большим или маленьким будет изображение на экране.
Это потому, что разрешение изображения влияет только на одну вещь — размер изображения при печати . Установив разрешение в Photoshop, мы сообщаем принтеру , а не экрану, сколько пикселей изображения нужно втиснуть в дюйм бумаги.
Чем больше пикселей вы втиснете в каждый дюйм бумаги, тем меньше будет изображение при печати. Вообще говоря, чем больше пикселей вы печатаете на дюйм, тем выше качество печати.
Мы можем легко вычислить, какого размера будет напечатана фотография, исходя из определенного разрешения изображения. Просто возьмите ширину фотографии в пикселях и разделите ее на разрешение изображения, затем возьмите высоту фотографии в пикселях и разделите ее также на разрешение изображения. Если мы возьмем в качестве примера изображение размером 640 x 480 пикселей и установим для него разрешение 72 ppi в Photoshop, то мы можем разделить ширину и высоту фотографии на ее разрешение, чтобы определить, что она будет напечатана на бумаге с разрешением примерно 8,9.х 6,7 дюйма. Если мы увеличим его разрешение в Photoshop, скажем, до 240 пикселей на дюйм, что является более распространенным разрешением печати, то, опять же, если мы сделаем математику, разделив ширину и высоту пикселя на 240 пикселей на дюйм, мы знаем, что фотография будет напечатана с размером размером 2,7 x 2 дюйма, что намного меньше, чем если бы мы напечатали его с разрешением 72 ppi, но общее качество печати было бы намного лучше.
Но здесь важнее понять, что, изменяя разрешение, мы никоим образом не влияем на внешний вид изображения на экране.
Чтобы лучше увидеть, как разрешение влияет на размер отпечатка, а не на размер экрана, вот изображение, которое я открыл в Photoshop. Этот маленький парень тоже пытался разобраться во всех этих вещах с веб-разрешением 72 ppi, но похоже, что он может немного переусердствовать (задумывая детское фото с Shutterstock):
Разрешение изображения на самом деле не такое уж сложное, но определенно требует усилий.
Я открою диалоговое окно Размер изображения Photoshop, перейдя к Изображение в строке меню в верхней части экрана и выберите Размер изображения :
.Переход к Изображение > Размер изображения.
В верхней части диалогового окна Image Size находится раздел Pixel Dimensions , который сообщает нам ширину и высоту изображения в пикселях. Здесь мы видим, что моя фотография имеет ширину и высоту 500 пикселей, что делает ее приличным размером для отображения в Интернете.
Это единственная часть диалогового окна «Размер изображения», о которой заботится экран вашего компьютера — фактические размеры изображения в пикселях:
В разделе Размеры в пикселях показаны ширина и высота в пикселях.
Под размерами в пикселях находится раздел Размер документа , который сообщает нам, насколько большим будет изображение на бумаге, если мы его распечатаем. Этот раздел касается исключительно размера печати и никак не влияет на то, как изображение отображается на экране. Кроме того, здесь находится очень важная опция Разрешение (почему мы все здесь!), что имеет смысл, поскольку разрешение влияет на размер печати, а не на размер экрана. Как мы видим, Photoshop пошел дальше и установил разрешение моей фотографии на 72 пикселя на дюйм (да, даже Photoshop вносит свой вклад в миф о 72 ppi), и прямо над параметром «Разрешение», в полях «Ширина» и «Высота», мы можно увидеть, что при разрешении 72 ppi моя фотография размером 500 x 500 пикселей будет напечатана с разрешением 6,9. 44 x 6,944 дюйма на бумаге (500 ÷ 72 = 6,944):
В разделе «Размер документа» отображается размер отпечатка в зависимости от текущего разрешения. На размер экрана это никак не влияет.
Посмотрим, что произойдет, если я увеличу разрешение изображения. Прежде чем я это сделаю, я быстро сниму флажок Resample Image в нижней части диалогового окна, чтобы изображение сохраняло исходные размеры в пикселях при изменении разрешения:
.Снятие флажка с параметра «Пересэмплировать изображение».
Если флажок Resample Image не установлен, я увеличу разрешение с 72 пикселей на дюйм до 240 пикселей на дюйм . Мы можем видеть в разделе «Размеры в пикселях» вверху, что увеличение разрешения не изменило фактические размеры в пикселях. Он по-прежнему имеет размер 500 x 500 пикселей, что означает, что он по-прежнему будет занимать на экране область размером 500 x 500 пикселей. Но при 240 ppi он теперь будет печатать на бумаге размером всего 2,083 x 2,083 дюйма (500 ÷ 240 = 2,083). Изменение разрешения изменило размер печати фотографии, но больше ничего:
Изображение теперь печатается меньше, но остается точно таким же размером 500 x 500 пикселей на экране.
Я снова увеличу разрешение изображения, на этот раз до чего-то сумасшедшего, например, 500 пикселей на дюйм , просто чтобы упростить вычисления. Изображение размером 500 x 500 пикселей с разрешением 500 пикселей на дюйм будет напечатано на бумаге как изображение размером 1 x 1 дюйм (500 ÷ 500 = 1). И снова реальные размеры изображения в пикселях не изменились. Даже при разрешении 500 пикселей на дюйм мое изображение будет отображаться на экране не больше и не меньше, чем при разрешении 72 пикселей на дюйм или 240 пикселей на дюйм, или при любом разрешении, потому что оно по-прежнему имеет размер 500 x 500 пикселей независимо от настройки разрешения, а его размеры в пикселях равны все, что заботит экран вашего компьютера:
При разрешении 500 пикселей на дюйм изображение действительно будет очень маленьким, но все равно будет отображаться на экране как изображение размером 500 x 500 пикселей.
Наконец, вот параллельное сравнение изображения, которое появляется во всех трех вышеупомянутых разрешениях. Я уменьшил изображение (теперь оно составляет всего 200 x 200 пикселей), поэтому я могу разместить все три версии рядом друг с другом, но первая версия слева была сохранена с разрешением 72 ppi. Версия в середине была сохранена с разрешением 240 ppi, а версия справа была сохранена с разрешением 500 ppi:
Версия изображения с разрешением 72 ppi (слева), 240 ppi (в центре) и 500 ppi (справа).
Как мы видим, разрешение никак не влияет на то, как изображение выглядит на экране. Каждая из трех версий занимает пространство ровно 200 x 200 пикселей независимо от настройки разрешения. Качество каждой версии также точно такое же. Каждая версия будет печатать с очень разным размером из-за разных настроек разрешения, но это не имеет никакого значения ни для размера экрана, ни для качества изображения.
Хотя сомнительно, что эта ерунда с 72 ppi для веб-сайтов и разрешения экрана исчезнет в ближайшее время, я надеюсь, что этот учебник, по крайней мере, помог понять, почему на самом деле это ерунда на данный момент. В наши дни все компьютерные мониторы имеют разрешение экрана выше 72 пикселей на дюйм, а параметр разрешения изображения в Photoshop влияет только на размер печати фотографии, а не на размер экрана.
Любая фотография с размерами в пикселях, достаточно малыми для отображения в Интернете, будет слишком мала для того, чтобы кто-либо мог загрузить и распечатать версию хорошего качества в удобном размере, поэтому с учетом всех этих причин, если ваша фотография будет просматриваться только на экране, будь то в Интернете, в электронном письме или в любом другом случае, просто нет логической причины, по которой вам нужно было бы установить его разрешение на 72 ppi в Photoshop. Если вы не печатаете фотографию, вам вообще не нужно беспокоиться о разрешении изображения. И вот оно!
Получите все наши уроки Photoshop в формате PDF! Загрузите их сегодня!
Высокое разрешение по сравнению с фотографиями из Интернета
Высокое разрешение по сравнению с фотографиями из Интернета
Автор вывесок спросит, есть ли у компании фотографии высокого разрешения, которые они могут использовать. Обычный ответ: «Просто используйте один с нашего веб-сайта» или «Вот тот, который мы использовали в наших социальных сетях». Несмотря на то, что автору вывесок несложно сохранить фотографию из Интернета, качество фотографии не подходит для печати на большой вывеске. Почему?… Потому что фото не в высоком разрешении.
Цифровое разрешение и разрешение печати
Цифровое разрешение измеряется в PPI (пикселей на дюйм), а разрешение печати измеряется в DPI (точек на дюйм). Пиксели — это крошечные маленькие точки, которые являются строительными блоками цифровой фотографии, тогда как точек обозначают количество точек, находящихся в пределах однодюймовой линии отпечатка 26 . Хотя эти два термина представляют собой оба типа разрешения и часто термины взаимозаменяемы, на самом деле они разные.
Чем больше точек или пикселей на дюйм, тем четче и детальнее будет фотография.
Фотографии высокого разрешения
Итак, что означает «высокое разрешение»? Высокое разрешение или высокое разрешение относится к плотности пикселей, из которых состоит фотография. Цифровая фотография с высоким разрешением имеет множество пикселей, что позволяет легко увидеть детали на изображении, даже если оно увеличено в цифровом виде или напечатано. Если в цифровом изображении недостаточно пикселей и оно слишком сильно увеличено, оно теряет детали и становятся заметными «блочные квадраты» пикселей — термин, широко известный как «пиксельный». Точно так же, если напечатанная фотография не имеет достаточного количества точек на дюйм, она будет размытой при увеличении. Следуя вышеприведенному примеру, чтобы позволить автору вывесок увеличить фотографию, ему нужно начать с фотографии, которая уже содержит много информации (пикселей), чтобы в увеличенной печатной версии фотографии сохранялись детали.
Фотографии веб-размера
И наоборот, когда фотография используется в Интернете для веб-сайта или для социальных сетей, в ней должно быть столько пикселей, сколько в мониторе, на котором она просматривается. Разрешение мониторов увеличивается по мере изменения технологий, и все чаще можно услышать разговоры о мониторах 4K и 8K, но для большинства пользователей 1080 и 1440 в настоящее время являются стандартными разрешениями для мониторов. Чтобы фотография загружалась быстро, занимала меньше места и сохраняла детали, размеры цифровых фотографий изменяются в соответствии со стандартными разрешениями монитора. Если бы вы распечатали фотографию, используя файл веб-размера, вы могли бы напечатать фотографию размером 6 × 4 дюйма, но все, что больше, обычно теряет детализацию и четкость.
Проще говоря, фотографии с высоким разрешением лучше всего подходят для печати и увеличения, а фотографии веб-размера лучше всего подходят для использования на компьютере (веб-сайт, социальные сети, электронная почта, цифровые документы).