Калькулятор размера адаптивного изображения
Калькулятор размера адаптивного изображения
Введите максимальную ширину отображения изображения в CSS-пикселях (размер в макете, а не размер файла). Это рассчитает реальные пиксельные ширины, которые нужно экспортировать для каждой распространённой плотности экрана.
- Формула: Ширина источника = Ширина отображения × Плотность пикселей устройства, рассчитывается для четырёх самых распространённых значений: 1x, 1.5x, 2x и 3x.
- Почему нужно несколько размеров: экран с высокой плотностью пикселей ("retina") вмещает больше физических пикселей в то же пространство, поэтому изображение 1x выглядит размытым.
- 1x, 2x и 3x — самые важные: большинство устройств попадает в эти три категории плотности; 1.5x — менее значимая, но всё же полезная категория для некоторых Android-устройств.
Нужны ли все четыре размера для каждого изображения?
Не обязательно — 1x, 2x и 3x покрывают подавляющее большинство устройств; добавление 1.5x — меньшая оптимизация, которую некоторые сайты пропускают.
Как использовать эти ширины в HTML?
Перечислите их в атрибуте srcset тега img вместе с атрибутом sizes, описывающим ваш макет, и браузер автоматически загрузит наиболее подходящий вариант.
Калькулятор размера адаптивного изображения
Введите максимальную ширину отображения изображения в CSS-пикселях (размер в макете, а не размер файла). Это рассчитает реальные пиксельные ширины, которые нужно экспортировать для каждой распространённой плотности экрана.
- Формула: Ширина источника = Ширина отображения × Плотность пикселей устройства, рассчитывается для четырёх самых распространённых значений: 1x, 1.5x, 2x и 3x.
- Почему нужно несколько размеров: экран с высокой плотностью пикселей ("retina") вмещает больше физических пикселей в то же пространство, поэтому изображение 1x выглядит размытым.
- 1x, 2x и 3x — самые важные: большинство устройств попадает в эти три категории плотности; 1.5x — менее значимая, но всё же полезная категория для некоторых Android-устройств.
Нужны ли все четыре размера для каждого изображения?
Не обязательно — 1x, 2x и 3x покрывают подавляющее большинство устройств; добавление 1.5x — меньшая оптимизация, которую некоторые сайты пропускают.
Как использовать эти ширины в HTML?
Перечислите их в атрибуте srcset тега img вместе с атрибутом sizes, описывающим ваш макет, и браузер автоматически загрузит наиболее подходящий вариант.