Модуль I · IT Skills (Hardware & Multimedia) · тема 4, урок 1 з 2 · 120 хвилин
Сьогодні ми беремо картинку й дивимося, з чого вона зроблена.
Одна іконка на 16 пікселів. І банер на три метри. Файли для них потрібні різні.
До кінця уроку ти сам вибиратимеш формат — і зможеш назвати причину.
identify source.png і прочитати кожне число з відповіді;magick -resize.Слова «растр», «вектор», «dpi» й «альфа-канал» поки нічого не означають. Розберемо їх по черзі.
| Етап | Хв | Що робимо |
|---|---|---|
| Вхід: лупа по пікселях | 10 | Наближаємо фото до окремих квадратиків |
| Растр проти вектора | 20 | Одна фігура, спільний повзунок 1× → 32× |
| px, роздільна здатність, dpi | 25 | Калькулятор відбитка, дві задачі |
| Перерва | 10 | — |
| Колір, альфа, артефакти JPEG | 20 | Три байти на піксель, прозорість, блоки 8×8 |
| Перші кроки у власному терміналі | 25 | identify, magick -resize, identify.txt |
| Підсумок і ДЗ | 10 | Дерево рішень, домашнє завдання |
| Разом | 120 |
media/lesson-04/.
На сервер по FTP їде тільки текст: identify.txt, cmd.txt
і index.html. Растрові файли вчитель дивиться очно, на твоєму екрані.lesson-04/.
Не шукай lesson-07: її немає.Комп'ютер не бачить «фото». Він бачить сітку і три числа в кожній клітинці
Уяви вишивку хрестиком. Кожна клітинка одного кольору, і нічого «між» клітинками немає.
Картинка у файлі влаштована так само. Це прямокутна сітка однакових клітинок.
Одна клітинка зветься пікселем, від англійського picture element. Вона зберігає рівно один колір.
Ніякої «фігури» чи «лінії» у файлі немає. Є тільки список кольорів по рядках.
Розмір сітки пишуть як ширина × висота: 1200 × 800, 1920 × 1080. Це і є роздільна здатність зображення.
Перемнож — вийде кількість пікселів. 1200 × 800 = 960 000, майже мегапіксель.
Звідси головна властивість растру. Деталей у ньому рівно стільки, скільки пікселів.
Розтягнути картинку — не означає додати деталі. Це означає зробити кожен квадратик більшим.
Ти взяв іконку 32 × 32 px і розтягнув її на всю ширину презентації. Чому вона стала «мильною»?
Перший зберігає результат. Другий зберігає інструкцію, як його намалювати
Уяви два способи передати другові малюнок. Можна надіслати фото готового малюнка. А можна надіслати рецепт: де коло, якого воно радіуса, якого кольору.
Перший спосіб — це растр, сітка пікселів. Файл каже: «у клітинці 47-й зверху й 12-й зліва колір 230, 126, 34».
Так влаштовані JPEG, PNG, WebP, GIF, кадр із камери й скріншот екрана.
Другий спосіб — це вектор, список фігур із числами. Файл каже: «намалюй коло радіуса 20 в точці (44, 40), колір бірюзовий».
Так влаштований SVG, а ще шрифти й креслення. Пікселів у такому файлі немає взагалі.
Пікселі з'являються пізніше. Тоді, коли програма малює фігуру на конкретному екрані або принтері.
Різниця вилазить при збільшенні. Посунь повзунок: обидві панелі наближають ту саму фігуру.
Растр показує все більші квадрати. Вектор щоразу перемальовується заново.
Праворуч уся фігура описана дев'ятьма числами. Це центр і радіус кола плюс три вершини трикутника.
Скільки не наближай — програма перерахує їх під новий розмір. І намалює рівний край.
Ліворуч чисел 9600, по одному на піксель. Нових узятися нізвідки.
| Растр | Вектор | |
|---|---|---|
| Що в файлі | сітка кольорів, по одному на піксель | список фігур із координатами |
| Збільшення | видно квадрати | край лишається рівним |
| Вага залежить від | кількості пікселів і складності картинки | кількості фігур, а не від розміру |
| Фото | єдиний придатний варіант | непридатний: мільйони фігур |
| Логотип, іконка, схема | треба тримати кілька розмірів | один файл на всі розміри |
| Редагування | малюєш пікселі | правиш числа в текстовому редакторі |
| Формати | JPEG, PNG, WebP, GIF, AVIF | SVG, EPS, PDF (векторна частина) |
Логотип школи дали у двох файлах. Це logo.png 512 × 512
і logo.svg на 6 КБ. Треба наліпку на двері 60 × 40 см.
Який файл несеш у друк?
px нічого не каже про сантиметри, поки не з'явиться друк
Піксель — не одиниця довжини. У файлі «1200 px» означає лише «1200 клітинок у рядку». Скільки це сантиметрів — залежить від того, на чому їх покажуть.
| Назва | Пікселів | Усього |
|---|---|---|
| HD, 720p | 1280 × 720 | 0,92 Мп |
| Full HD, 1080p | 1920 × 1080 | 2,07 Мп |
| QHD, 1440p | 2560 × 1440 | 3,69 Мп |
| 4K UHD, 2160p | 3840 × 2160 | 8,29 Мп |
Уяви два клітчасті зошити. В одному клітинки по 5 мм, у другому по 3 мм. На тій самій сторінці другий зошит умістить більше клітинок.
З пікселями так само. Питання лише в тому, скільки їх кладуть на один дюйм.
ppi — це pixels per inch. Скільки пікселів припадає на дюйм екрана або відбитка.
dpi — це dots per inch. Скільки крапок фарби кладе принтер на той самий дюйм.
У побуті обидві абревіатури вживають як синоніми. У друкарні ти почуєш саме «dpi».
Дюйм — це рівно 25,4 мм, так домовилися 1959 року.
Звідси єдина формула, яка потрібна на цьому уроці:
Приклад. Візьмімо фото 3000 × 2000 і друк на 300 dpi.
Ширина: 3000 ÷ 300 = 10 дюймів, тобто 25,4 см. Висота: 2000 ÷ 300 ≈ 6,67 дюйма, тобто 16,9 см.
Той самий файл при 150 dpi дасть відбиток удвічі більший. І вдвічі грубіший.
У PNG є службовий блок pHYs. У JPEG — поля щільності
в заголовку JFIF. Туди можна записати «300 dpi».
Браузер це ігнорує. Він малює картинку на 1200 пікселів у 1200 умовних пікселів сторінки, і крапка.
Візьми два однакові файли 1200 × 800. На одному мітка 72 dpi, на другому 300 dpi.
На сайті вони виглядають однаково й важать однаково. Мітка оживає лише в друку або у верстці.
Логотип треба надрукувати на банері 3 × 2 метри. Який файл ти несеш у друкарню і чому?
Три байти на клітинку — і звідси вся арифметика розміру
Колір пікселя збирають із трьох складників: червоного, зеленого й синього. Як фарби на палітрі.
Кожен складник зберігають одним байтом. Це число від 0 до 255.
Три байти дають 224 = 16 777 216 кольорів. Таку глибину звуть truecolor, або «8 біт на канал».
| Зображення | Пікселів | Сира вага, RGB |
|---|---|---|
| іконка 64 × 64 | 4 096 | 12,3 КБ |
| джерело уроку 1200 × 800 | 960 000 | 2,88 МБ |
| кадр Full HD 1920 × 1080 | 2 073 600 | 6,22 МБ |
| кадр 4K 3840 × 2160 | 8 294 400 | 24,88 МБ |
| знімок камери 6000 × 4000 | 24 000 000 | 72,0 МБ |
Останній рядок пояснює, навіщо взагалі потрібні формати зі стисненням.
А тепер візьми 4K і 25 кадрів на секунду. Вийде 622 МБ на кожну секунду відео.
Саме тому наступна тема буде про кодеки.
Ти зберігаєш кадри 6000 × 4000 без стиснення, по 3 байти на піксель. На флешці вільно 500 МБ. Скільки таких кадрів туди влізе?
Уяви скло у вікні. Крізь чисте видно все, крізь матове — розмито, крізь зафарбоване — нічого.
Четвертий байт пікселя задає рівно це. Він зветься альфа-каналом.
0 — пікселя не видно зовсім. 255 — він повністю закриває те, що під ним.
Проміжні значення дають напівпрозорість. Це м'які тіні, згладжені краї літер, скло.
Формати вміють різне. PNG і WebP тримають усі 256 рівнів.
GIF має лише один біт: піксель або видно повністю, або не видно взагалі. Звідси зубчасті краї старих гіфок.
JPEG прозорості не має взагалі. Причина — у самому стандарті ITU-T T.81 від 1992 року.
Він описує яскравість і дві колірні різниці. Каналу прозорості там просто не передбачено.
Тому при збереженні прозорі ділянки заливають фоном. Зазвичай білим або чорним.
Дизайнер прислав логотип у PNG із прозорим тлом. Ти пересохранив його у JPEG і поклав на синій банер. Що ти побачиш?
JPEG стискає з втратами. Робить він це в чотири кроки.
Крок 1. Переводить картинку з RGB у яскравість плюс два колірні канали.
Крок 2. Часто зберігає колір у вчетверо дрібнішій сітці. Це звуть 4:2:0: око гірше бачить колір, ніж яскравість.
Крок 3. Ділить зображення на квадрати 8 × 8 пікселів.
Крок 4. Викидає в кожному квадраті найдрібніші деталі.
Що сильніше викидати, то легший файл. І то помітніші сліди.
На рівному небі проступають квадрати 8 × 8. Навколо контрастних країв з'являється сірий «дзвін», особливо навколо тексту.
Силу стиснення задає параметр -quality, від 0 до 100.
Це не відсотки, а номер набору таблиць округлення.
Орієнтири прості. 90 і вище — різницю видно хіба що при збільшенні.
75–85 — робочий діапазон для вебу. Нижче 50 — артефакти видно неозброєним оком.
У кожного своя робота; «найкращого взагалі» не буває
| Формат | Стиснення | Прозорість | Анімація | Сильний у |
|---|---|---|---|---|
| JPEG | з втратами | немає | немає | фото й усе, де плавні переходи |
| PNG | без втрат | 256 рівнів | немає | скріншоти, схеми, текст, прозорість |
| WebP | обидва режими | 256 рівнів | є | веб: легший і за JPEG, і за PNG |
| SVG | вектор, це текст | є | є | логотипи, іконки, схеми, графіки |
| GIF | без втрат, 256 кольорів | 1 біт | є | нічого нового; лишився за звичкою |
Стандарт зветься ITU-T T.81 / ISO 10918-1. Його рахували саме під фотографію.
На фото сусідні пікселі майже завжди схожі. Тому дрібні відмінності можна викинути майже непомітно.
Фото 1200 × 800 у JPEG якості 85 важить 150–250 КБ.
Трьох речей JPEG не вміє. Перша — прозорість: порожнє місце він однаково заллє білим.
Друга — різкі лінії. Букви й рамки JPEG розмиває, а навколо них проступають сірі ореоли.
Третя — перезбереження. Кожне «зберегти» відкидає нову порцію даних, і після п'ятого разу фото псується помітно.
Звідси правило: у JPEG кладуть готове фото, а не робочий файл, який ще редагуватимуть.
PNG стискає без втрат. Розпакував — отримав рівно те, що зберігав.
Усередині фільтрація рядків і той самий алгоритм DEFLATE, що в ZIP. Плюс повноцінний альфа-канал.
Чому ж PNG погано стискає фото? Бо DEFLATE шукає повтори.
У знімку з камери сусідні пікселі майже ніколи не збігаються точно. Заважає шум матриці.
Повторів немає — і економити нема на чому. Те саме фото 1200 × 800 у PNG легко займе 1,5–2,5 МБ.
Це вдесятеро більше за JPEG.
Зате на скріншоті, схемі чи тексті все навпаки. Там цілі рядки однакових пікселів повторюються сотнями.
Тому PNG виграє в JPEG і за вагою, і за чіткістю.
WebP уміє обидва режими. З втратами, як JPEG. І без втрат, як PNG.
В обох режимах він тримає прозорість. Цим він сильніший за JPEG.
За вимірюваннями Google, без втрат WebP приблизно на 26% менший за PNG.
З втратами він на 25–34% менший за JPEG при тій самій якості на око.
Підтримують усі сучасні браузери. Chrome і Edge давно, Firefox з 65-ї версії, Safari з 14-ї, це 2020 рік.
Обмеження одне: максимум 16 383 пікселі по стороні.
SVG — це звичайний текстовий файл у форматі XML.
Його можна відкрити в блокноті. Знайти потрібний колір пошуком і замінити. Перефарбувати з CSS. Анімувати.
Логотип у SVG важить одиниці кілобайтів. І однаково чіткий на фавіконі 16 px і на шестиметровому банері.
Атрибут viewBox задає малюнку власну систему координат.
Саме завдяки йому один файл лягає в будь-який розмір без спотворень.
Для фото SVG непридатний. Описати кожен піксель окремою фігурою — це файл, більший за растр.
На один кадр GIF бере лише 256 кольорів. Фото в ньому вкривається плямами: плавний перехід неба просто немає з чого скласти.
Прозорість тут однобітна. Тобто піксель або видно повністю, або не видно зовсім.
М'якої напівпрозорої тіні GIF не вміє. По краю круглої іконки лишаються східці.
Стискає він теж слабко — алгоритм 1987 року. Той самий кадр у WebP важить у кілька разів менше.
Тому анімацію сьогодні роблять у WebP або коротким відео. GIF лишається там, де його вимагає стара платформа.
Ти зняв фото 1200 × 800 і зберіг його двічі. У PNG вийшло 2,1 МБ, у JPEG якості 85 — 180 КБ. Що кладеш у галерею сайту?
Скріншот уроку з дрібним текстом ти зберіг у JPEG якості 60. Навколо букв з'явилися сірі ореоли. Що робити?
Усе з цього кроку набирається у твоєму терміналі, у теці
media/lesson-04/ — не на сервері
exit
і повернешся до себе. ImageMagick стоїть тільки в тебе на комп'ютері,
на сервері його для учнів немає.ImageMagick — це набір інструментів для зображень, які працюють без вікон і мишки. Нам потрібні два.
identify читає параметри файлу. magick
перетворює його.
У сьомій версії головна команда зветься magick,
у шостій — convert. На нових машинах працює перша.
Шукай слово webp у рядку Delegates.
І рядок WEBP у списку форматів.
Обидва на місці — WebP підтримується. Немає — підніми руку зараз: наступного уроку WebP знадобиться, а доставити його на перерві не встигнеш.
На macOS і Linux замість findstr /i webp пиши
grep -i webp.
identify| Що у виводі | Що це означає |
|---|---|
| source.png | ім'я файлу |
| PNG | справжній формат — визначений за вмістом, а не за розширенням |
| 1200x800 | розмір у пікселях |
| 1200x800+0+0 | розмір «полотна» і зсув зображення на ньому |
| 8-bit | 8 бітів на канал, тобто 256 градацій кожного кольору |
| sRGB | колірний простір |
| 1.48MB | вага файлу на диску |
Щоб вивід був машиночитним, задають власний шаблон ключем
-format. Кожен «відсоток із літерою» — це підстановка:
| Ключ | Що підставляє |
|---|---|
| %f | ім'я файлу |
| %w | ширину в пікселях |
| %h | висоту в пікселях |
| %m | формат: PNG, JPEG, WEBP… |
| %z | глибину каналу в бітах |
| %[colorspace] | колірний простір: sRGB, Gray, CMYK |
| %b | вагу файлу |
| %A | чи є в зображенні альфа-канал |
| \n | перехід на новий рядок — інакше все злипнеться в один |
Саме цей текстовий файл поїде на сервер. Він легкий, і чекер зможе звірити числа.
Файлів у команді може бути кілька. Кожен дасть свій рядок.
Порядок аргументів у ImageMagick має значення. Спочатку вхідний файл, потім дії над ним, останнім — файл результату.
Формат результату визначає розширення. Написав .jpg —
отримав JPEG.
| Ключ | Що робить |
|---|---|
| -resize 300x200 | вписує зображення в прямокутник 300 × 200, зберігаючи пропорції |
| -resize 300x200! | робить рівно 300 × 200, навіть якщо картинка спотвориться |
| -resize 50% | зменшує вдвічі за обома сторонами |
| -quality 85 | якість JPEG або WebP, 0—100 |
| -strip | викидає службові дані (EXIF, GPS) — файл легшає |
-resize 300x200
дає рівно 300 × 200. А фото 4000 × 3000 — це 4:3, і в той самий прямокутник
воно впишеться як 267 × 200. Точний розмір примушує знак оклику.Фото 4000 × 3000. Ти виконав
magick photo.jpg -resize 300x200 small.jpg.
А identify показав 267 × 200. Це помилка?
Кроки 1—8 — у твоєму терміналі, кроки 9—12 — сторінка й сервер. Галочки зберігаються, сторінку можна закрити.
source.png і thumb.jpg лишаються в локальній теці
media/lesson-04/. FTP-приймальня не приймає зображення понад
500 КБ і будь-що понад 2 МБ — це технічне обмеження. На сервер їдуть тільки
index.html, identify.txt і cmd.txt.Чекер зайде у твій кабінет і звірить звіт сам із собою. Це перша половина перевірки теми, друга буде наступного уроку. Спроби не обмежені.
Демонстраційний режим: результат згенеровано для показу. На сервері
ця кнопка викликає POST /api/check, який запускає
check 04 від імені учня.
media/lesson-04/, у ній справді
лежать source.png і thumb.jpg;id="dpi-task".Це те, що бачить учитель, коли виставляє оцінку.
| Складник | Вага | Результат |
|---|
-resize 300x200 рівно 300 × 200 і забувають про
пропорції та знак оклику;exit.Знайди навколо себе чотири реальні зображення. Іконку застосунку на телефоні. Фотографію. Скріншот із текстом. Логотип бренду.
Для кожного запиши одним реченням, який формат доречний і чому саме.
Спирайся на те, що сьогодні порахував: прозорість, різкі краї, вага, потреба масштабувати.
Відповіді неси в зошиті. На початку наступного уроку 4—5 учнів аргументуватимуть свій вибір, а решта наводитиме контраргументи.
Усі значення на цій сторінці — з відкритих стандартів і офіційної документації. Перевіряти дозволено й корисно.
pHYs. w3.org/TR/pngviewBox і система координат.
w3.org/TR/SVG2/coords.htmlidentify і рядки формату — ключі
%w, %h, %m, %z,
%b, %A.
imagemagick.org/script/escape.php-resize,
-quality, -strip і синтаксис геометрії зі знаком оклику.
imagemagick.org/script/command-line-options.phpПовний список із поясненнями і всі проміжні розрахунки —
у файлі urok-07-джерела.md поруч із цією сторінкою.