От пикселя

← К уроку

Практика: выбрать картинку для страницы

Условия

Открой Материалы_демонстрации/index.html этой встречи. Страница работает локально, отправок и установки программ не требует. В комплекте четыре настоящих файла одной фотографии. Название «Тяжёлый учебный экспорт PNG» прямо обозначает специально подготовленный пример.

Готовая команда

Работаем только с учебным комплектом и папкой «Уроки/02_Изображения_размеры_форматы_вес/Материалы_демонстрации». Сначала прочитай manifest.json и проверь фактические файлы: формат, ширину, высоту и байты. Не меняй оригиналы. Сравни large.png и card.webp для показа шириной 400 CSS-пикселей при условном DPR = 2. Сравни их визуально в одинаковом размере. Отдельно покажи, что изменение ширины показа того же файла не меняет его байты. Проверь rough.jpg и объясни цену сильного сжатия. Сохрани в новом файле «Отчёт_ученицы.md» таблицу до/после, выбор и ограничения. Если файл уже есть, сначала сохрани только его для отката. Не пиши о замере скорости, если измерял только объём. Запусти относящиеся к демонстрации тесты с coverage и честно назови непроверенные браузеры.

Проверка ученицей

  1. Выбрать large.png, поставить ширину 400. Записать байты.
  2. Поставить ширину 200. Убедиться, что байты те же. Поменялся только размер показа.
  3. Вернуть 400 и выбрать card.webp. Сравнить подробности и подпись с размерами.
  4. Выбрать rough.jpg. Найти дефекты при показе и увеличении. Если не видишь разницы, так и записать, а не выдумывать её.
  5. В условной модели DPR сравнить 1 и 2. Проверить расчёт ширины файла: 400 × 2 = 800.
  6. Нажать «Сбросить» после изменения обоих ползунков и выбора файла. Проверить исходное состояние: PNG, ширина 400, условный DPR = 2.
  7. Открыть файлы в Проводнике или Finder и сравнить точное количество байтов с демонстрацией. Округлённые КБ могут отличаться.

Ожидаемый результат: у того же файла байты не меняются от ползунка, WebP меньше учебного PNG, картинка для 400 CSS-пикселей при DPR = 2 имеет 800 пикселей по ширине. Снижение объёма в процентах: (байты PNG − байты WebP) / байты PNG × 100. Это снижение объёма, не процент ускорения сайта.

Форма отчёта

Место показа: ____. Условие DPR: ____. Файл до: ____, размер ____ × ____, байты ____. Файл после: ____, размер ____ × ____, байты ____. Снижение объёма: ____. Что видно при одинаковом размере: ____. Выбор: ____, потому что ____. Что ещё надо проверить: ____.

Необязательное продолжение

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