Изображения: размеры, форматы и вес

Откройте large.png в демонстрации. Пиксели — сетка файла, CSS-пиксель — единица размеров страницы, байты — объём записи. PNG намеренно экспортирован без сильного сжатия. Значения измерены у приложенного файла, а не взяты как универсальная норма.

DPR — отношение физических пикселей к CSS-пикселям по одной стороне при текущем масштабе. В схеме одна CSS-клетка соответствует 2 × 2 физическим точкам. По площади множитель четыре. Реальное отношение зависит от экрана и масштаба, это условие модели.

Поменяйте ползунок ширины в рабочей демонстрации. Количество байтов остаётся тем же: CSS не переписывает файл. Чтобы передавать меньше байтов, готовим и подключаем другой файл. Не путайте уменьшение файла и сетевую скорость.

Растр хранит сетку пикселей, вектор описывает фигуры. Здесь краткая памятка, подробности в конспекте. JPEG подходит для фото без прозрачности, PNG для точного растра и прозрачности, WebP/AVIF для разных изображений при проверенной поддержке, SVG для простых значков. SVG может содержать растровые данные. Проверка неизвестного SVG отдельно от вопроса формата.

Показан настоящий снимок векторного значка из рабочей демонстрации. Переключите фон кнопкой. SVG здесь описывает линии и фигуры. Белая заливка в JPEG — данные изображения и останется белой на тёмном фоне. Не путайте шахматный фон редактора с содержимым файла.

Сравните один и тот же фрагмент фотографии при одинаковом размере. Слева WebP качество 82, справа JPEG качество 8. Значения относятся к настройке кодировщика, не к процентам качества. Если ученица при этом показе не замечает разницы, честно зафиксируйте и увеличьте изображение. Источник фото NASA / William Anders.

Это результат конкретных учебных экспортов, не обещание для любого изображения и не преимущество формата на фиксированный процент. Снижение = (5763167 − 19074) / 5763167 × 100. Качество оценить фактически. Исходный JPEG меньше тяжёлого учебного PNG, он сохранён рядом.

Универсального ограничения 10–200 КБ нет. Большое увеличиваемое фото и маленький значок решают разные задачи. Поддержку AVIF/WebP проверяем по актуальной документации и фактическим файлам. AVIF в этом блоке не экспортирован, его декодирование здесь не проверено.

На слайде настоящий снимок нашей демонстрации. Откройте её отдельно, пройдите PNG, WebP, грубый JPEG. Проверьте сброс после изменения всех элементов. На узком экране фактическая ширина может оказаться меньше заданной, смотрите подпись.

Используйте готовую команду из практики. Не удаляйте исходные фотографии. Результат — таблица с фактическими байтами и объяснение выбора. Разделите измерение объёма и неподтверждённый сетевой эффект. Допустимо не увидеть дефекты и назвать это ограничением.

Пять вопросов находятся отдельно. По итогам ученица должна менять ширину без изменения байтов и обосновывать подходящую копию. Полный список новых слов в конспекте. Не требуйте заучивать названия кодировщиков.