Изображения: размеры, форматы и вес
Цель: выбирать картинку по её задаче и фактической проверке. Результат: сравнить несколько версий одного фото и обосновать, какую поставить на страницу.
Три числа у одной картинки
Размер изображения — число пикселей по ширине и высоте. Размер показа — место, которое картинка занимает в странице. Объём файла — сколько байтов надо хранить или передать. Изменение одного числа не обязательно меняет остальные.
Открой демонстрацию и измени ширину показа. Файл остаётся тем же, поэтому байты не меняются. Чтобы передавать меньше данных, надо выбрать другой файл, а не просто уменьшить картинку оформлением.
Пиксели страницы и точки экрана
Физическое разрешение экрана описывает сетку его аппаратных точек, например 1920 × 1080. Масштаб ОС может менять доступную рабочую область. CSS-пиксель — единица размеров в веб-странице. Она не обязана совпадать с одной аппаратной точкой экрана.
Плотность при показе описывает devicePixelRatio, сокращённо DPR: отношение физических пикселей к CSS-пикселям по одной стороне при текущем масштабе. При DPR = 2 квадрат 100 × 100 CSS-пикселей обычно занимает область 200 × 200 физических пикселей, всего 40 000 точек. Масштаб браузера может менять это отношение. На рисунке показываем условие DPR = 2, а не свойства любого экрана.
Для картинки шириной 400 CSS-пикселей при DPR = 2 часто полезен файл шириной около 800 пикселей. Это исходная оценка: проверяем качество, кадрирование и передачу данных. Для увеличения фотографии во весь экран может понадобиться другой вариант. В демонстрации есть отдельная условная модель DPR и фактическое значение текущего браузера, они подписаны раздельно.
Растровое и векторное изображение
Растровое изображение хранит сетку пикселей. Фотография обычно растровая. Векторное описывает линии и фигуры правилами. Простой значок в SVG может увеличиваться без растягивания исходной пиксельной сетки. Но SVG бывает сложным и может включать растровые части. Расширение само по себе не гарантирует ни маленький файл, ни безопасность чужого содержимого.
| Формат | Что удобно хранить | Существенная особенность |
|---|---|---|
JPEG, обычно .jpg |
Фотографии | Типичное сжатие с потерями, обычный JPEG не поддерживает прозрачность |
| PNG | Скриншоты, схемы, изображения с прозрачностью | Сжатие без потерь, фото может получиться тяжёлым |
| WebP | Фото и иллюстрации | Поддерживает прозрачность и сжатие с потерями или без них |
| AVIF | Фото и иллюстрации | Поддерживает прозрачность и разные режимы сжатия, проверяем декодирование в целевых браузерах |
| SVG | Значки, логотипы и простые схемы | Векторное описание, не обычная замена фотографии |
Это варианты выбора, а не рейтинг форматов. Перед занятием преподаватель сверяет поддержку WebP/AVIF в нужных браузерах по официальным сведениям и открывает файл фактически.
Прозрачность и сжатие
Прозрачность позволяет видеть фон сквозь часть картинки. Белый фон внутри JPEG останется белым на тёмной странице. Шахматный фон редактора обычно обозначает прозрачную область, но сам по себе ещё не является частью изображения.
Сжатие — способ уменьшить объём записи. Сжатие без потерь позволяет восстановить закодированные пиксели точно. При сжатии с потерями часть информации отбрасывается, поэтому файл может стать меньше, но появятся дефекты. Сохранение исходного JPEG в PNG не возвращает детали, ранее потерянные в JPEG.
Сравни качество при одинаковой ширине показа. Уменьшать файл за счёт нечитаемого текста или испорченного лица нельзя. В нашей демонстрации грубый JPEG специально сохранён с низким качеством. Тяжёлый PNG — намеренно неэффективный учебный экспорт без сильного сжатия, а не доказательство, что PNG всегда плох.
Выбор по задаче
Сначала выясни, где показывается картинка: маленькая иллюстрация, большой экран, схема с мелкими буквами или изображение для печати. Затем выбери несколько размеров и форматов, сравни байты и качество, проверь нужные браузеры. Сохрани оригинал. После замены открой страницу, проверь фактический файл и мобильный вид.
В этом уроке замеряем размеры файлов. Ускорение загрузки по времени не измеряем: на локальном диске оно не показывает работу настоящей сети. При одинаковом ответе без кэша меньший файл обычно требует передать меньше байтов. Сетевой замер с одинаковыми условиями проведём позже. Нет универсального правила «любая картинка должна весить 10–200 КБ».
Новые слова
CSS-пиксель — единица размера в странице. Физический пиксель — аппаратная точка экрана. DPR — отношение физических пикселей к CSS-пикселям по стороне. Растр — сетка пикселей. Вектор — описание фигур и линий. Прозрачность — возможность видеть фон сквозь часть картинки. Сжатие — уменьшение объёма записи. С потерями — часть информации отбрасывается. Без потерь — закодированные пиксели восстанавливаются точно. Качество — пригодность изображения для своей задачи, которую проверяют просмотром, а не только числом в настройке экспорта.
Я понимаю и могу сделать
- [ ] Различить пиксели файла, размер показа и байты.
- [ ] Объяснить, почему уменьшение CSS-ширины не уменьшило файл.
- [ ] Выбрать фотографию и прозрачный значок в подходящем формате.
- [ ] Сравнить одинаковый размер показа и сохранить оригинал.
- [ ] Записать реальный результат без придуманного ускорения.
Источники
Проверены 04.11.2026: MDN: форматы, devicePixelRatio, W3C: единица px, W3C: PNG, Google: сжатие WebP. Фотография NASA / William Anders сохранена локально, варианты для урока созданы из неё. Размеры и байты конкретных вариантов лежат в Материалы_демонстрации/manifest.json.