Зображення, формат, роздільна здатність, розмір файлу, як це працює Sagory Communication
Ми маніпулювати зображеннями щодня на наших смартфонах, соціальних мережах, електронною поштою, як для професіоналів, так і для особистих. Але мало хто зрештою знає тонкощі та недоліки формати файлів, що таке дозвіл, різниці між враження і екран або що означає стиснення.
Ласкаво просимо до швидкого курс зображення ! Сидіти зручно і не боятися, ця стаття призначена для початківців або освічених неофітів, а не для фахівців.
Що таке зображення ?
Основне важливе питання, ми повинні визначити, що ми маємо на увазі під зображенням. Для цілей цієї статті ми в основному поговоримо про файли зображень, комп’ютерні елементи. Однак ми швидко зробимо об’їзд враження з одного боку.
Отже, зображення - це ряд рядків коду, який визначатиме, що відображатиметься на екрані під час його читання. Є два дуже різні основні способи кодування зображення: як піксельна карта (растрове зображення, буквальний переклад з англійської) або як набір функцій вектор (так, ті самі математичні функції, які, можливо, завадили вам у старшій школі).
Найвідоміше: растрове зображення або растрове зображення
Якщо сказати просто: це як килим, або вишивка
Саме за цією моделлю ви робите свої фотографії, наприклад. Це піксельна сітка кожна з яких матиме певне значення, яке відповідає кольору. Набір пікселів, побачений «здалеку», призведе до появи зображення. Найпростіший приклад уявити це - уявити собі чорно-білу шахову дошку. Кожне поле - це піксель, і код визначає, білий він (наприклад, 0 у двійковому) або чорний (1 у двійковому).
Справа очевидно погіршується, коли ми переходимо на колір, оскільки кожен піксель буде містити більш складний код, якому потрібно відповідати кольоровий простір вибраний. Файл зображення - це послідовність символів, інтерпретована програмним забезпеченням для "показу" зображення.
Я добровільно не вдаюся в подробиці типів кодування та метаданих, щоб не втратити 85% своїх дорогих читачів.
Кількість пікселів використовується для визначення визначення зображення а їх концентрація - це те, що ми називаємо дозвіл, ми обговоримо ці поняття нижче. Кількість інформації про код, що міститься на кожному зображенні, вплине на його вагу, яку ми побачимо, як ви вже здогадалися, далі в цій статті.
Найменш відомий, але всюдисущий: векторне зображення
Чи знали ви, що з початку цієї статті ви бачили більше 2000 векторні зображення ? У переважній більшості випадків кожен символ тексту в комп'ютерному документі сам по собі є векторним зображенням. Будь то "розмір шрифту" 12 або 378, характер завжди буде таким ясним. Це сила вектора.
У цьому типі зображення немає такої карти, як у растровому зображенні, а є ряд відрізків, криві Безьє або фігури, яким задані координати. Крок пікселів: інструкції щодо відображення результату, який буде однаковим, незалежно від розміру екрану або масштабу, який ви можете виконати.
Навіть суцільні кольори визначаються як математичні функції: від такої і такої точки до такої точки ми вирішуємо, що хочемо градієнт, який починатиметься з такого-то значення кольору, приймати такий напрямок і зупинятися в такій-то точці, у такий момент значення кольору. Незалежно від того, чи надруковано зображення шириною 3 сантиметри або 3 метри, результат буде однаковим і однаковий розмір коду.
Це дає набагато легші файли ніж растрове зображення, придатне для використання в всі розміри.
Тому це надзвичайний інструмент для багатьох застосувань: логотипи наприклад. Велику частину часу логотипи мають чітко визначені та чіткі форми. Але вони повинні мати можливість використовувати їх на візитній картці, на брезенті, на підставці, короткими різними розмірами, але завжди повинні залишатися такими ж гострими. Завдяки векторній графіці одного файлу (насправді легкого) достатньо для всіх потреб.
Чому б тоді просто не робити векторні зображення, скажете ви мені? Досить просто тому, що цей метод не дозволяє настільки великій свободі, як растрове зображення, представляти безліч деталей або варіацій. У вас ніколи не буде візуалізації та деталізації фотографії з векторним файлом, якщо це не неймовірно складно.
Це не заважає багатьом художникам робити приголомшливі векторні ілюстрації - просто знайдіть "векторне зображення" у вашій улюбленій пошуковій системі зображень, щоб відчути це.
Колориметричний режим: RGB, CMYK? Що це все ?
Я швидко розгляну цю трохи більш "загострену" деталь, але тим не менш важливу. Це може пояснити вам, чому ваші фотографії взагалі не відображають те, що ви бачили, а те, що ви надрукуєте, не схоже на те, що є на екрані.
Зображення - це те, що ми бачимо (дякую Шерлоку), якщо ми його бачимо, це тому, що яскрава інформація доходить до нашого ока, а наш мозок інтерпретує його. Сприймається зображення - це світло. (Якщо вам цікаво: "Чи існує зображення, якщо його ніхто не бачить?", Я відправлю тебе до друга філософа.)
Ми можемо організувати наші курси оптики в коледжі з того, що називається адитивний синтез та субтрактивний синтез на даний момент, або спростіть:
Коли ми дивимося на щось у навколишньому світі, ми ловимо це відбите світло поверхнями предметів, що відбиває лише частину одержуваного світла, яке ми інтерпретуємо як колір.
Коли ми дивимося на екран, ми ловимо прямо випромінюване світло останніми.
Це вся різниця: відбите світло (про "реальне життя" для популяризації) та випромінюваного світла екранами. Ви можете собі уявити, що якщо це два різні способи направити світло на наше око, вони не можуть бути виражені кодом або визначені однаково.
Саме це було розроблено, коли були винайдені перші екрани: комп'ютеризований спосіб обчислення кольорів, що випромінюються. Одним з найбільш відомих є Rgb для червоного зеленого та синього - трьох основних кольорів, суміш яких дозволяє отримати кілька мільйонів відтінків.
Але коли ви щось надрукуєте, світло на документі більше не буде випромінюватися, але добре відображатиметься. Отже, це ще один спосіб кодування кольору, який слід використовувати. Найчастіше в тому, що ви знайдете в журналах, книгах чи плакатах: CMYK (Блакитно-пурпуровий жовто-чорний).
Екран спробує імітувати зовнішній вигляд зображення CMYK з його RGB-дисплеєм. Але він ніколи не досягне абсолютно такого ж результату, як принтер. І навряд чи ви зможете досягти тих самих кольорів, що й зображення RGB на екрані при друку. І знову ж, це не кажучи вже про калібрування екранів та профілів друку; зовсім інша тема, яку я колись висвітлю.
Можна було б сказати багато ВСЬОГО колір, його налаштування, інші типи кольорового кодування, їх інтереси, гама, кольоровий спектр та інші подібні страшні слова. Якщо вам цікаво, вкажіть це в коментарях, і я зроблю спеціальну статтю на тему кольору, точніше !
Гаразд, і роздільна здатність пострілу - це його визначення ?
В ІТ розмір має значення.
Тож насправді ні. Зловживаючи мовою, багато людей плутають дозвіл та визначення, але це зрештою цілком нормально. Ми говоримо про "HD" для високої чіткості, і цілком справедливо можемо думати, що зображення буде чіткішим.
За винятком того, що визначення вказує обсяг інформації, що міститься на зображенні (або відеозаписі). Не його концентрація. 45 людей у вашій квартирі - це багато, навіть тих 45 для аудиторії одного лише мітингу Трампа дуже мало (і набагато краще).
Ми повинні використовувати визначення, щоб знайти дозвіл. Визначення - це загальна кількість пікселів. Ви повинні встановити ширину та висоту вашого зображення і звідти вивести, яка кількість пікселів "на квадратний метр". Справді, найчастіше ми підраховуємо саме дюйми ("дюймові" імперські одиниці виміру, приблизно 2,54 см).
Роздільна здатність має сенс лише тоді, коли ви хочете надати зображенню розмір (друк), надати йому фіксований і остаточний розмір у ширину за висотою в см або дюймах.
Потім ми виражаємо роздільну здатність у "точці на дюйм" або, частіше, в англійській абревіатурі: dpi (крапка на дюйм => крапка на дюйм). Це спадщина друку, коли зображення робляться з «напівтоновими крапками» дещо за тим же принципом, що і пікселі. У будь-якому випадку, це еквівалентно сказанню, що у форматі зображення, у рядку (або стовпці) дюйма, є X пікселів.
роздільна здатність зображення необхідні змінюються за потребою. Коли я вперше почав користуватися Інтернетом, було прийнято говорити, що зображення розміщувалось із роздільною здатністю 72 dpi. Маються на увазі "світліші" зображення, щоб заощадити пропускну здатність того часу. По правді, роздільна здатність не має значення для Інтернету, вона призначена лише для друку. Історія, що стоїть за 72 dpi, за своєю суттю є більш складною, пов’язаною з першим монітором домашнього комп’ютера Apple та принтером, який з ним входив, але я відволікаюся досить цим.
Зображення студента комп’ютерної графіки, який усвідомлює, що його викладачі збрехали йому, сказавши, що в Інтернеті потрібні 72 точки на дюйм і що він даремно змінив 1875 фото.
А? не зменшуйте роздільну здатність зображення в Інтернеті, щоб воно важило менше ? Не зовсім: треба зменшити його визначення, або загальна кількість пікселів, що містяться на зображенні. Наприклад, у програмі Photoshop, якщо ви не встановите прапорець "передискретизація" та не зміните роздільну здатність, загальна кількість пікселів не зміниться, а також вага. Змінюватимуться лише розміри в см для друку. На вашому екрані піксель - це піксель, жодного нового з капелюха не вийде.
(Крім того, сучасні екрани здатні відображати набагато більше 72 пікселів на дюйм поверхні панелі, сучасні екрани смартфонів типу Retina навіть більше).
Незалежно від того, чи має ваше зображення 72 dpi або 800, якщо загальна кількість пікселів (визначення) не змінюється, вага не змінюється. Зменшення роздільної здатності без впливу на визначення вплине лише на розмір "друку". На екрані ви не побачите різниці.
Якщо зображення має ширину 2000 пікселів, незалежно від того, чи маєте ви роздільну здатність 1 крапка на дюйм або 1000, воно не матиме візуального впливу на екран. Ширина зображення завжди буде 2000 пікселів.
Колеги, які мені не вірять: відкрийте Photoshop і пройдіть тест, змініть роздільну здатність без передискретизації, ви побачите. Передискретизація вказує на те, що визначення також слід змінити. 🙂
Визначення: ширина х висота в пікселях
Роздільна здатність: співвідношення концентрації пікселів та розміру в см (або дюймах) для друку
З іншого боку, важливо зменшити вагу зображення, досить просто, щоб ваша веб-сторінка завантажувалася швидше (що подобається вашим користувачам, а отже і Google).
Тому вам слід зменшити чіткість зображень.
Але раптом усі, хто говорить про зниження роздільної здатності для Інтернету, є лазівками? Ні, більшість із них, зменшуючи роздільну здатність, «перепробовують» зображення і, отже, одночасно зменшують його визначення. З іншого боку, багато професіоналів досі вважають, що роздільна здатність є важливою в Інтернеті, просто тому, що їх навчили, що це так. (це ваш випадок? Скажіть це в коментарі)
Що стосується друку (професійного, а не офісного принтера), то рекомендовані визначення складають 300 dpi для кольорового зображення, 600 для сірих зображень і 1200 або навіть 2400 dpi для лінійного друку зображень - виключно складаються з чистих кольорів, без відтінків, наприклад для гравюр або манги -. Тут роздільна здатність має першорядне значення: зображення має фізичний розмір, який ніколи більше не зміниться. Роздільна здатність вказує на концентрацію точок друку для друку зображення розміром X см на X см.
Ось так виглядає надруковане зображення, якщо поглянути на нього дуже уважно: це знамениті "крапки на дюйм"
Гаразд, але jpg, gif, png, що використовувати ?
Знову все залежить від вашого використання. Не вдаватися в занадто багато деталей: головна перевага gif та png порівняно з jpg полягає в тому, що вони можуть бути прозорий, Тобто деякі пікселі не матимуть інформації про колір. Jpg обов’язково матиме прямокутну форму і, на відміну від перших двох, може кодуватися у CMYK.
PNG часто віддають перевагу gif за співвідношення стиснення/якості та багатство кольорів для формату PNG-24. Інтерес до gif полягає в тому, щоб містити a послідовність зображень надати ілюзію відео без звуку: відомий "анімований gif".
І якщо вам цікаво, я вимовляю "jif". Так, я знаю, я займаю позицію, я так колюсь.
Jpg, довгий час критикували за його стиснення так званий "руйнівний" з часом еволюціонував і дедалі більше утверджується як лідер у форматі зображень. У розпал поліграфічні професіонали, TIFF і EPS все ще широко використовуються, але набагато важче - проблема швидкості відображення не виникає. Я міг би далі розповісти вам більше про tiff та eps, svg, raw та багато іншого, але для цього потрібна буде окрема стаття (якщо ви зацікавлені, не соромтеся сказати це в коментарі).
Вага зображень
Ваш Інтернет-браузер, який переходить на неоптимізований сайт
Якщо ви зайшли так далеко, молодці, але перш за все, ви, мабуть, розуміли, що зробить вагу файлу: його визначення.
У растровому зображенні, якщо воно має, наприклад, 2000 пікселів у ширину та 2000 пікселів у висоту, то ми маємо 4 000 000 пікселів. Кожен з них матиме код, який буде визначати його колір на даній "панелі". Чотири мільйони наборів інформації за кілька бітів, щоб сказати, що існує такий відсоток червоного, зеленого або синього в контексті RGB.
Ну, а в реальному житті це насправді не відсотки, а значення, яке переходить від 0 до 255. Так, це складно. Так, я роблю абзаци з шухляд. Я скорочую.
Це спрощення, оскільки слід брати до уваги інші елементи (глибина кольорів, виражена в бітах за пікселем, наприклад https://fr.wikipedia.org/wiki/Profondeur_de_couleur_ [informatique]), але у вас є ' загальна ідея.
Якщо вам потрібно зменшити вагу ваших зображень, наприклад, щоб розмістити їх на своєму веб-сайті, найпростіший спосіб - приблизно визначити, який розмір він займе на екрані. У відповідному програмному забезпеченні ви надаєте йому такий розмір у пікселях.
Ви також можете, наприклад, як частину jpg, встановити його ступінь стиснення щоб було легше. Це зменшить діапазон кольорів, які файл може виражати, і "об'єднає" інформацію про колір суміжних пікселів, якщо вони відносно схожі, тим самим зменшуючи вагу коду. Стискання зображення до 9 або 10 (із 12, це шкала, що використовується у Photoshop) навряд чи матиме значення для неозброєного ока. Якщо вам цікаво, я можу написати статтю про стиснення зображень.
У контексті вашої роботи чи особистого життя порада: ніколи не переписуйте власні файли, найвищої чіткості у вас є, ваші "основні файли", якщо хочете. Ви не можете сказати, чи вони вам потім не знадобляться. Як тільки визначення зображення зменшується, шляху назад вже немає.
Давай, для останнього маленького грайливого посилання, ти хочеш побачити фотографії у дуже високій чіткості? Ще один спосіб відчути Дубай: 360 градусів, 45 гігапікселів (так, це означає 45 мільярдів пікселів. Так, це багато)
https://www.dubai360.com/scene/1313-burj-khalifa-pinnacle-45-gigapixels/uk
Сподіваючись, що все це навчить вас чогось, я кажу вам незабаром !