Сурет өлшемі, пиксель және DPI: қалай дұрыс таңдауға болады

Қысқаша

Суреттің өлшемі — пиксельдер, басқа ештеңе емес. Бір дюймдегі нүктелер пиксельдер қағазға түскен сәтте пайда болады: физикалық өлшем пиксель санын ppi-ге бөлгенге тең. Экран үшін слот енін экран тығыздығын ескеріп есептеңіз, баспа үшін миллиметрді 25,4-ке бөліп, 300-ге көбейтіңіз.

Сурет өлшемі туралы сұрақтардың жартысын бір ой шешеді: файлда сантиметр болмайды. Файлдың ішінде, мысалы, 4000 × 3000 пиксельдік тор жатыр. Сантиметр мен дюйм осы тор белгілі бір құрылғыда көрсетілгенде немесе белгілі бір қағазға түскенде ғана, яғни кейін пайда болады.

Ажыратымдылықтың өлшемнен айырмасы қандай?

Файл ажыратымдылығы — көлденең және тік бағыттағы пиксельдер саны. 4000 × 3000 — 12 миллион пиксель, яғни сол «12 мегапиксель». Файлда оның физикалық көлемі туралы басқа ақпарат жоқ.

Бір дюймдегі нүктелер (dpi) мен бір дюймдегі пиксельдер (ppi) суреттің қасиеті емес, оны басып шығару немесе көрсету тығыздығы. Дәлірек айтқанда, ppi сурет пен экранға, dpi баспа құрылғысына қатысты. Бірақ күнделікті қолданыста және баспахана талаптарында бұл қысқартулар синоним ретінде айтыла береді.

JPEG немесе TIFF ішінде ppi мәні шынымен жазылады, алайда ол редакторға арналған нұсқау ғана. Мәнді 72-ден 300-ге ауыстыру файлға бір де бір пиксель қоспайды: редактордың қағазға шығаратын өлшемі ғана өзгереді.

Миллиметрді пиксельге қалай айналдыруға болады?

Формула біреу және ол қысқа:

пиксельдер = миллиметрлер ÷ 25,4 × ppi

Жиырма бес бүтін оннан төрт — бір дюймдегі миллиметрдің тұрақты саны. 300 ppi стандартындағы баспа өлшемдерінің бүкіл кестесі осыдан шығады.

Пішім	Мм	300 ppi кезіндегі пиксельдер
Визитка	85 × 55	1004 × 650
10 × 15 фотосуреті	100 × 150	1181 × 1772
A6, ашықхат	105 × 148	1240 × 1748
A5, флаер	148 × 210	1748 × 2480
A4, парақ	210 × 297	2480 × 3508
A3, афиша	297 × 420	3508 × 4961

Кері есеп те осылай шешіледі: пиксельдерді ppi-ге бөліп дюймді табыңыз, кейін 25,4-ке көбейтіп миллиметрге айналдырыңыз. 300 ppi кезіндегі 2000 × 1500 кадр 169 × 127 мм, A5-тен сәл кіші. Сол кадр 150 ppi кезінде 339 × 254 мм, A4-ке жуық болады, бірақ бөлшектер тығыздығы екі есе төмендейді. 150 ppi қашан жеткілікті екенін суретті баспаға дайындау туралы мақаладан оқыңыз.

Экранға қанша пиксель керек?

Суреттің бетте алатын орны экран тығыздығына көбейтілгендегі санша пиксель керек.

Макет CSS-пиксельмен өлшенеді, ал экрандағы физикалық нүктелер әдетте көбірек: «ретина» телефондары мен ноутбуктері бір CSS-пиксельге екі не үш нүкте көрсетеді. Браузер бұл шаманы devicePixelRatio деп атайды. Сурет ені 800 CSS-пиксель орын алса, тығыздығы 2 экранда оның нақты ені 1600 пиксель.

Осыдан практикалық қағида шығады: файл ені = слот ені × 2. Бұдан жоғары көбейткішті қуу қажет емес: көз 2× пен 3× айырмасын байқамайды, ал файл салмағы аудан секілді 2,25 есе өседі. Бұл салмақпен не істеу керегі сайтқа арналған жылдам суреттер мақаласында түсіндірілген.

Қандай пропорцияларды таңдаған дұрыс?

Пропорция абсолют өлшемнен маңыздырақ: өлшемді кішірейту оңай, ал пропорцияны тек қию арқылы өзгертуге болады, қию композицияның бір бөлігін жояды.

Пропорция	Қайда кездеседі
1:1	каталог превьюі, аватарлар, тауар карточкалары
4:5	тік таспа, мобильді жазба
3:2	камераның классикалық кадры, фотобаспа
16:9	мұқабалар, слайдтар, бейнекадр
1,91:1	әлеуметтік желідегі сілтеме (og:image)
9:16	тік бейне және стористер

Кадрды қайта құрастырғанда қанша бөлігі жоғалатынын есептеңіз. 4:5 пішіміндегі 3:2 сурет енінің 0,8 ÷ 1,5 = 0,53 үлесін сақтайды, демек кадр енінің жартысына жуығы кетеді. Таспаға да, мұқабаға да қажет сюжет шеттерінде жеткілікті қор қалдырып түсірілуі немесе жасалуы керек.

Платформалар қандай өлшемдерді сұрайды?

Платформа талаптары өзгеріп тұрады, сондықтан олардың өз анықтамалығы — жалғыз сенімді дереккөз. Мақала жарияланған сәтте ресми құжаттарда мына талаптар бар.

Платформа немесе міндет	Талап
Әлеуметтік желідегі сілтеме	1200 × 630-дан бастап, ең азы 200 × 200, файл 8 МБ-қа дейін
YouTube мұқабасы	3840 × 2160, ең аз ені 640, JPG немесе PNG
Picwin мақаласының мұқабасы	1200 × 675
Picwin жұмысының превьюі	1024 × 1024 шаршысы

Алғашқы екі жол Open Graph сурет талаптарынан және YouTube бейне белгішелері туралы анықтамадан алынған. Онда файл салмағы да көрсетілген: сілтеме превьюіне 8 МБ, телефоннан жүктелетін белгішеге 2 МБ. Соңғы екі жол — сайт белгілеуінде жарияланған өз өлшемдеріміз.

Міндетке сай өлшемді қалай таңдаймыз?

1. Соңғы тасымалдағышты анықтаңыз

   Экран, баспа немесе екеуі де. Бұл шешілмейінше пиксель санын анықтау мүмкін емес.

2. Слотты өлшеңіз

   Экран үшін аймақ енін CSS-пиксельмен, баспа үшін бұйым енін миллиметрмен өлшеңіз.

3. Тығыздыққа көбейтіңіз

   Экран үшін 2-ге көбейтіңіз. Баспа үшін жоғарыдағы формуламен миллиметрді 300 ppi бойынша айналдырыңыз, ал үлкен пішімге төменірек тығыздық алыңыз.

4. Ақылға қонымды мәнге дейін жоғары дөңгелектеңіз

   Артық екі жүз пиксель ештеңеге тұрмайды, ал екі жүз пиксельдің жетіспеуі суретті үлкейтуге мәжбүр етеді.

5. Ең тар платформаға лайық пропорцияны таңдаңыз

   Кадр шаршы да, кең де керек болса, шеттерінде қоры бар кең нұсқа жасап, одан шаршыны қиып алыңыз.

6. Бастапқы файлды сақтаңыз

   Ең үлкен өлшемдегі түпнұсқа — кейін басқа өлшемді сапаны жоғалтпай шығарудың жалғыз жолы.

Кішірейткенде не болады?

Кішірейту де қайта есептеу, тек зияны азырақ. Төрт көршілес пиксельден біреуі шығады, ұсақ бөлшектер орташаланады: жіңішке сызықтар бозарады, кадрдағы маңдайша мәтіні оқылмайды, шу біркелкі сұр түске айналады.

Бұдан екі ереже шығады. Біріншісі: 10% сатылармен емес, бір қадамда кішірейткен дұрыс, өйткені әр қадам қайта орташалайды. Екіншісі: қатты кішірейткен соң кадрға аздап айқындық керек, әйтпесе ол солғын көрінеді. Айқындық соңғы өлшемдегі ең соңғы амал болуы тиіс, әйтпесе сығу оны жиектердегі ореолға айналдырады.

Ең маңыздысы: туынды өлшемдерді бір-бірінен емес, түпнұсқадан жасаңыз. 800 пиксельге кішірейтіліп, 1200-ге созылып, қайта сығылған сурет әр қадамы зиянсыз көрінсе де, сапасын үш рет жоғалтады.

Кішкентай суретті үлкейтуге бола ма?

Үлкейтуге болады, бірақ нақты бөлшек қосылмайды. Қарапайым интерполяция жаңа пиксельдерді көршілерінен есептейді: жиек жұмсарады, текстура ботқаға айналады. Нейрожелілік апскейл жақсырақ көрінеді, бірақ жоғалғанды қалпына келтірмейді, тек нанымды бөліктерді салады: шашты, әріпті, ұсақ өрнекті өзі ойлап табады.

Экран үшін практикалық шек — суретке жақыннан қаралмайтын жағдайда шамамен екі есе үлкейту. Баспаға арналған кез келген үлкейтуді 100% масштабта тексеріңіз: экран суретті кішірейтіп көрсетіп, айқындығы туралы жаңылыстырады.

Фотостокпен жұмыс үшін бұл нені білдіреді?

Дайын суретті алғанда оның өлшемі алдын ала белгіленген, сондықтан сатып алғаннан кейін емес, бұрын қараңыз. Picwin жұмыстары каталог брифтері бойынша нейрожелімен жасалады. Сөредегі превью қабырғасы 1024 пиксель, ал жұмыстың соңғы өлшемі оның парақшасында көрсетіледі.

Техника

Техника, интерфейс және деректер туралы кадрлар — кең және шаршы нұсқалар қатар жиі қажет болатын тақырыптар.

Жұмыстарды көруМокаптар

Мокаптар мен фондар: олар үшін пропорция өте маңызды, өйткені кадр кейін макетке сәйкес қиылады.

Жұмыстарды көру

Ең бастысы

• Файл өлшемі — пиксельдер; ppi тек физикалық тасымалдағышпен бірге пайда болады.
• Миллиметрді пиксельге айналдыру үшін 25,4-ке бөліп, тығыздыққа көбейтіңіз.
• Экран үшін слот енін 2-ге көбейтіп алыңыз.
• Пропорция алдын ала таңдалады, оны тек қию арқылы өзгертуге болады.
• Қарапайым да, нейрожелілік те үлкейту нақты бөлшек қоспайды.

Сайт баннеріне қандай өлшем керек?

Баннердің CSS-пиксельдегі енін 2-ге көбейтіңіз. Ноутбук экранының толық еніндегі баннер шамамен 1440 CSS-пиксель, яғни файл ені 2880 пиксель болуы керек.

300 dpi деген не және ол әрдайым қажет пе?

Бұл — бір дюйм қағазға 300 пиксель, қол созым қашықтан қаралатын басылымдардың стандарты. Үш метрден қаралатын плакатқа әлдеқайда төмен тығыздық жеткілікті.

A4 баспасына қанша мегапиксель керек?

300 ppi кезінде 2480 × 3508 = 8,7 мегапиксель. Кез келген заманауи камера мен жоғары ажыратымдылықтағы генерацияның көбі бұл талаптан асады.

Неге сурет телефонда бұлыңғыр көрінеді?

Файл экран тығыздығын ескермей, CSS-слот өлшемінде берілген болуы мүмкін: телефон 400 пиксельді 800 физикалық нүктеге созады.

Пропорцияны шығынсыз өзгертуге бола ма?

Жоқ. Пропорция қию немесе шеттерін толықтыру арқылы өзгереді. Қию кадр бөлігін жояды, толықтыру онда болмаған нәрсені қосады.

Түпнұсқаны қандай өлшемде сақтау керек?

Қолжетімді ең үлкен өлшемде, қайта сығусыз сақтаңыз. Барлық туынды өлшем әрдайым бір-бірінен емес, осы түпнұсқадан жасалады.

Платформа аталмаса, қандай өлшем таңдау керек?

Ұзын қабырғасын 2000 пиксель етіңіз: бұл толық экранға және A5-ке дейін басуға жетеді, ал файл салмағы қалыпты болып қалады.

Тақырыптың жалғасы: сурет пішімдері және оларды қашан таңдау және жылдам сайтқа сурет дайындау. Дайын жұмыстар каталогта.