Щільність пікселів
Last updated
Last updated
Відносно нещодавно на ринок активно почали входити дисплеї зі збільшеною щільністю пікселів – це Retina дисплеї (на Apple пристроях) та їх аналоги інших виробників. Відтак якість зображення значно покращилася.
Для пересічного користувача пристрою - це плюс, а для веб-розробників додаткове навантаження під час розробки додатків через збільшення ресурсу для написання коду. Але про це пізніше. Спочатку - основні поняття.
Фізичні пікселі (device pixel або hardware pixel) - найдрібніші елементи будь-якого дисплея, кожен з яких має яскравість і колір.
Роздільна здатність екрану (screen resolution) - це фізична кількість пікселів на екрані пристрою. Наприклад, роздільна здатність 1920x1080 означає, що екран завширшки 1920 фізичних пікселів і заввишки 1080. Відтак загальна кількість пікселів: 1920x1080 = 2073600.
Щільність пікселів (pixel density) - кількість фізичних пікселів на одиницю площі (зазвичай пікселів на дюйм - pixels per inch (ppi)). Сучасні монітори мають ppi від 96 і вище.
CSS-пікселі - деяка браузерна величина, що використовується для точного відображення контенту і незалежна від екрану.
На звичайних екранах один CSS-піксель збігається за розмірами з одним фізичним пікселем пристрою. Але під час відтворення інформації на екранах високої піксельної щільності в одному CSS-пікселі може міститися більше одного фізичного пікселя.
Розміри елементів в CSS або HTML задають саме в CSS-пікселях. Наприклад якщо створити блок розміром 2px на 2px, то на стандартному екрані це буде блок такої ж кількості фізичних пікселів. А на екранах з подвійною щільністю пікселів в той самий фізичний розмір буде поміщено у 2 рази більше пікселів по горизонталі й у 2 рази більше пікселів по вертикалі. Відтак кількість пікселів, а відповідно і чіткість зображення зросте в 4 рази.
Скільки фізичних пікселів вміщується в один CSS-піксель вказують так: nx. Тут n - кількість фізичних пікселів в одному CSS-пікселі по вертикалі й по горизонталі. Скажімо 3x - означає, що в одному CSS-пікселі по горизонталі та по вертикалі вміщується 3 фізичні пікселі. Відтак чіткість зображення зростає в 9 разів.
Растрові пікселі (bitmap pixels) - найменші частинки з яких складається растрове зображення (png, jpg, gif тощо). Кожен піксель описується своїм розташуванням в системі координат і своїм кольором.
У CSS або HTML-коді розміри зображення вказують в CSS-пікселях. Під час відображення на звичайному екрані, один растровий піксель збігається з одним CSS-пікселем.
А от на Retina-екранах скажімо із щільністю 2x один CSS-піксель множиться на 4 фізичні пікселі. І зображення не підготовлені для відтворення на Retina-екранах відтворюватимуться зі втратою якості.
Відтак, растрові зображення для відтворення на Retina-екранах повинні мати більшу кількість пікселів. Тоді вони відображатимуться без втрати якості на екранах підвищеної щільності пікселів.
Наприклад на екранах з щільністю пікселів 2х для відтворення в браузері зображення 100px на 100px без втрати якості, потрібно завантажити зображення з растровими пікселями 200px на 200px.
Текст і векторна графіка (SVG) однаково добре без адаптації відображаються на екранах з різною щільністю пікселів. Браузер сам їх рендерить, бо це векторні елементи.
А от для растрових зображень для браузерів потрібно підготувати варіанти для екранів з різною щільністю пікселів.
Наприклад по верстці є зображення розміром 100x200. В такому разі з макета потрібно експортувати зображення 100х200 для звичайних екранів, 200х400 для екранів із щільністю пікселів 2х, 300х600 для екранів із щільністю пікселів 3х тощо. Цей прийом підготовки растрової графіки називають ретинізацією.
При цьому оригінальне зображення має якусь назву, а його відповідники для екранів з підвищеною щільністю пікселів в назві мають приставку вкінці @2x і @3x тощо.
На практиці зазвичай використовують зображення стандартного розміру і з подвійною щільністю пікселів. Утім це залежить від вимог до проєкту. Але щобільше варіантів ретинізації зображення, то більшим стає код верстки. Тут теж треба шукати "золоту середину".
Покликання:
