Чи обов'язково зберігати зображення на 72DPI для веб-дизайну?

Я розробляв веб-банери більше року, але ніколи не розглядав ІПН.

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

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

Параметри PPI (пікселі на дюйм) не використовуються у веб-зображеннях. Зображення в Інтернеті, на сітківці або в іншому випадку відображаються за розмірами пікселів (шириною та висотою), не будь-якими параметрами PPI / DPI. Насправді, багато веб-зображень, таких як png, gif, jpg, можуть навіть не зберігати налаштування ppi у своїх внутрішніх даних і покладатися на параметри ширини та висоти.

Зображення розміром 100 пікселів на 100 пікселів відображається як таке в Інтернеті, незалежно від налаштувань PPI / DPI.

Ось чому зображення для дисплеїв сітківки зберігаються у розмірі 2х, а не у збільшенні параметра ppi. Щільність пікселів на сітківці відображається вище, проте вони все ще відображають зображення в будь-якому стані екрану, якщо ширина та висота зображення не ґрунтуються на будь-яких параметрах ІРП.

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

Не вірите мені? Спробуйте самі. Створіть у Photoshop два зображення як 100 пікселів на 100 пікселів. Зробіть одне зображення 72ppi, а інше 300ppi. Збережіть їх обох для Інтернету .. Чи відрізняються вони у веб-браузері? Ні. Вони обидва фотографії на 100 пікселів на 100 пікселів.

Налаштування DPI (Dots per Inch) застосовні лише під час друку зображення. DPI не стосується зображень, призначених для екрана. DPI позначає кількість точок / плям чорнила, які преса розмістить в межах дюйма. Оскільки жодне відображення на Землі не використовує чорнило, DPI - це неправильний термін, який можна використовувати для будь-якого, що стосується екранів відображення.

Майте на увазі, що деякі мобільні виробники вирішили використовувати термін DPIx або xDPI, який іноді скорочується до просто DPI. Це не традиційна форма абревіатури, і виробник просто сильно забруднив води. Якщо ви бачите DPI по відношенню до роздільної здатності екрана мобільних пристроїв, вони говорять про ефективний ІЦН і не дуже посилаються на точки за дюйм. Більш підходящим абревіатурою був би xPPI або PPIx, оскільки мобільні екрани, як і всі дисплеї, використовують пікселі, а не чорнило.

Це не має різниці, яку налаштування ppi ви використовуєте для веб-зображень. Важливими є ширина (пікселя) та висота (пікселя) зображення.

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

Я детально розберуся, що насправді означає "dpi", на прикладах; з цим, ви можете просто побачити відповідь самі. :

Коротше кажучи, ваше зображення складається з кольорів, розташованих поруч. Але розміри не мають жодного фізичного сенсу.

Тепер, коли ви показуєте зображення на екрані, ви зазвичай просто поміщаєте крапкові кольори зображення в растр кольорових прямокутників, які ваш екран може відображати. Зауважте, що і те, що я тут називаю "крапками", і прямокутниками, називаються "пікселями", але придивляючись уважно, вони є чимось різним.

Якщо ми відображаємо зображення природним чином на екрані, ми можемо виміряти його розмір.
Наприклад, наше зображення шириною 500 крапок, ми поміщаємо їх у кольорові прямокутники на екрані, і бачимо, що воно шириною 5 дюймів. Потім у нас є 100 прямокутників на дюйм, що показує 100 наших точок на дюйм.
Тобто наше зображення має на екрані 100dpi.
Але ми навіть не дивилися на значення dpi у нашому файлі зображень!

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

Коли ми призначили крапки зображення на екрані, ми навіть про це не переймалися, тому що ми просто відображали їх і вимірювали фактичний, фізичний dpi екранного зображення зображення.
Отже, як бачите, обіцянка була просто невірною . І нікого не хвилює! Тому що це просто не актуально.

Файл був багатообіцяючим - сказавши 200dpi - він буде "2,5 дюйма в ширину, коли відображається". Тоді ми використовували екран, який показував його шириною 5 дюймів - ми можемо це знати, оскільки ми знаємо, що таке власне екран.
Зазвичай ми навіть не знаємо, що буде використовувати кінцевий користувач як дисплей, тому ми можемо лише здогадуватися,

Отже, тепер має сенс:

• Ми не знали, що зображення, які відображаються на екрані, буде мати, тому що ми не знали екрана.
• Але у нас виникла ідея, як це має виглядати, "приблизно такий розмір ... нормально, тоді нам потрібно приблизно 200dpi або близько того". і зберегли "200dpi" у файлі
• Пізніше ми подивилися на екран і виміряли, що це насправді 100dpi;

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

Дивіться також мою відповідь на те, що саме "Піксель"? .

Безпосередньо до питання, виходячи з вищезазначеного:

Якщо ви вказуєте dpi у файлі зображень, це не безпосередньо реагує на якість показу зображення в кінцевому підсумку.
Але він може використовуватися для спілкування про якість зображення - з точки зору намірів: ви можете сказати "Я хочу, щоб це зображення відображалося на екрані з 200 dpi".

Якщо я хочу показати це зображення, я можу подбати і подивитися, щоб знайти екран з 200 dpi; а може, я просто використовую старий екран із роздільною здатністю 75 точок на дюйм, який може бути на моєму столі. Зображення буде досить великим, мені доведеться прокручувати - але це моя проблема, і: ви навіть не дізнаєтесь, що насправді використовується - значення 200dpi не контролювало якість зображення - воно просто повідомляло, як його відображати "правильно спосіб ", якщо мені байдуже.

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

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

Пікселі на дюйм - це лише тег

Саме тому я призначаю 72PPI всі свої проектні документи, і я рекомендую зробити те саме. Щоб змінити щільність пікселів документа Photoshop, не змінюючи розмір даних про зображення, відкрийте діалогове вікно «Розмір зображення», зніміть прапорці Змінити розмір зображення та введіть потрібну щільність пікселів.

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

У всіх браузерах, окрім одного, вони виглядали однаково - розміром та якістю. Однак із застосуванням Google Chrome той, який був зроблений у 72, виглядав чудово, але той, який виготовлений у 720, був надзвичайно крихітним - на зразок 1/10 розміру.

Добре горе. Це виглядає як аргумент для розміщення всіх вільно стоячих (не обмежених на веб-сторінці) зображень на 72. Практично всі мої (кількість яких у багатьох сотнях) мають 120 dpi. Незважаючи на те, що вони все ще виглядають досить великими на Chrome, можливо, маючи на увазі цей веб-переглядач, я повинен працювати над їх розміщенням у 72. Можливо, десь у тонкому шрифті в уподобаннях Chrome є засіб захисту.