Пиксель

Слово образовано от английского picture element — «элемент изображения». Любая растровая картинка — JPEG, PNG, WebP — хранится как прямоугольная сетка точек: у снимка 4000×3000 их двенадцать миллионов, и для каждой записан цвет. Экран устроен похоже: матрица монитора или смартфона состоит из физических точек, и в каждой обычно есть красный, зелёный и синий субпиксели, смешение которых даёт нужный оттенок.

Во фронтенде этим словом называют сразу три разные вещи, и путаница между ними — частая причина размытых картинок.

Три пикселя веб-разработчика

• Пиксель изображения — точка в файле. Размер картинки в таких точках называют её разрешением.
• Физический пиксель — точка матрицы конкретного устройства. Сколько их приходится на дюйм, описывает плотность пикселей.
• CSS-пиксель — логическая единица в стилях. На обычном мониторе он совпадает с физическим, а на смартфоне может занимать квадрат 3×3 точки. Подробнее — в статье про CSS-пиксель.

Пример: почему логотип мылится

Логотип сохранён в файле 200×60 и выведен в вёрстке тем же размером:

<img src="logo.png" width="200" height="60" alt="Компания-пример">

На обычном мониторе всё чётко. Но на телефоне, где на один CSS-пиксель приходится три физических, браузеру нужно 600×180 точек, а в файле их втрое меньше по каждой стороне. Недостающие он достраивает интерполяцией, и края букв расплываются. Решения — векторный SVG для логотипов и иконок или несколько вариантов растра в атрибуте srcset.

Что учитывать при подготовке графики

Размер файла в точках должен соответствовать размеру вывода с запасом для плотных экранов, но не превышать его многократно: фото шириной 4000 точек в карточке товара шириной 300 только замедляет загрузку. CMS здесь помогают: WordPress при загрузке нарезает несколько размеров и сам подставляет их в srcset, а в 1С-Битриксе уменьшенные копии готовят настройками инфоблока или методом CFile::ResizeImageGet. Правильный размер картинок — один из первых пунктов чек-листа, когда занимаются ускорением сайта на 1С-Битриксе.