← К уроку

Ответы и проведение второй встречи

1. Пиксели исходного изображения, CSS-размер показа, байты файла. Хорошо, если ученица указывает все три на одном реальном примере.
2. По стороне два физических пикселя на CSS-пиксель при указанном масштабе. Область 400 × 300 соответствует 800 × 600 точкам, 480 000 точек. По площади множитель четыре, а не два. Не считать, что DPR любого устройства постоянен при изменении масштаба.
3. С потерями часть информации отбрасывается, без потерь закодированные пиксели можно восстановить точно. Перезапись испорченного JPEG в PNG сохраняет и его дефекты. Сжатие без потерь не восстанавливает утраченное ранее.
4. Изменили оформление, сам файл тот же. Подготовить отдельную копию нужного размера, выбрать формат, сохранить оригинал, сравнить байты и вид. В дальнейшем можно использовать адаптивные варианты. Обещание «стало вдвое быстрее» без сетевого замера неверно.
5. Для простого векторного значка возможен проверенный SVG, для растрового с прозрачностью — PNG/WebP/AVIF по задаче и поддержке. Обычный JPEG прозрачность не сохранит. Для фото нужны размеры под показ и, если нужно, отдельное увеличение. Проверка на светлом/тёмном фоне, при нужной плотности, в целевых браузерах и по фактическим байтам.

Ход встречи, 70 минут

0–7: повторить файлы первой страницы и задать вопрос о трёх размерах. 7–19: пиксели исходника, CSS-показ, физические точки и условие DPR = 2. 19–30: растр/вектор, пять форматов и прозрачность. Назвать назначение, не требовать таблицу наизусть. 30–40: показать реальные варианты фото, пояснить намеренно тяжёлый PNG и сильное сжатие JPEG. 40–58: практика с ползунками, сбросом и сравнением свойств файлов. 58–65: отчёт с байтами и выбором. Проверить, что объём не выдан за скорость. 65–70: пять вопросов и чек-лист.

Для 60 минут оставить форматы как памятку, обсуждать выбор в вопросе 5. Для 75 — открыть те же файлы во втором доступном браузере и сравнить. Не создавать аккаунты или облачное хранилище ради этой встречи.

Подготовка преподавателя

Открыть PPTX/HTML и Материалы_демонстрации/index.html. Сверить manifest с реальными файлами. Карточка по умолчанию показывает PNG шириной 400 CSS-пикселей и условную модель DPR = 2. Фактический DPR браузера подписан отдельно. На узком экране картинка уменьшается, интерфейс показывает фактическую ширину. До сравнения обеих версий использовать одинаковую фактическую ширину.

Прозрачность показать на встроенном SVG-значке с переключением фона в демонстрации. Для JPEG достаточно объяснить непрозрачный фон, не выдавать шахматную картинку за прозрачность. AVIF в этом блоке объясняется по документации; отдельный AVIF-файл не экспортировался и его декодирование здесь не проверялось.

Критерий перехода

Ученица объясняет неизменность байтов при изменении CSS-ширины и выбирает подходящую копию по фактическому сравнению. Ошибку «DPR = 2 значит вдвое больше точек всего» разобрать на квадрате 2 × 2. Если качество не различается при заданном показе, допустим честный ответ «не заметила», затем проверить другой размер.