Урок-15. “Адаптивні зображення. Ретинізація”

1.Арифметика пікселів.
Приклад розрахунку щільністі пікселів екрану.

Роздільна здатність екрану (screen resolution) = 1920px x 1080px = 2073600px


Ширина екрану (в px) = 1920px

Ширина екрану (в см) = 51см

Ширина екрану (в дюймах) = 51см / 2,54cм = 20in (inch)


Щільність екрану (pixel density - pixels per inch) = 1920px / 20inch = 96ppi (px/inch)


Щільність пікселів (dppx (dots per pixel)):
1x - 1dppx = 96ppi
2x - 2dppx = 192ppi
3x - 3dppx = 288ppi

Розмір Фізичного пікселя (bitmap pixels) = 20 inch / 96 px/inch ~ 0,21in (inch)

2.Ретинізація графіки​

x1 Cute puppy x2 Cute puppy x3 Cute puppy

3.Респонсивні зображення

Man looking into the distance
max-width: 100%

4.Респонсивні фонові зображення

5.Респонсивний елемент <img> (дескриптор x​)

Опис зображення для всіх версій

6.Респонсивний елемент <img> (дескриптор w​)

Опис зображення для всіх версій

7.Респонсивний елемент <img> (дескриптор w + атрибут sizes​​)

Опис зображення для всіх версій

8.Елемент <picture>

Cute puppy

9.Елемент <picture> (фінальний приклад)

Николай Тарасов

0.Заголовок