Проверка изображения: размер файла, пропорции и размер на странице

Назначение

Большая картинка может выглядеть маленькой, но всё равно передавать лишние байты. В упражнении нужно различить размер загруженного файла, естественные размеры изображения и его область отображения.

Как это работает

Network показывает выбранный ресурс и объём передачи, а Elements — размеры элемента в раскладке. Для img доступны currentSrc и naturalWidth/naturalHeight. Последние значения учитывают плотность и не всегда равны простому подсчёту пикселей исходного файла.

Пример

const image = document.querySelector("img");
if (image) {
  const rect = image.getBoundingClientRect();
  console.table({
    source: image.currentSrc,
    naturalWidth: image.naturalWidth,
    naturalHeight: image.naturalHeight,
    renderedWidth: rect.width,
    renderedHeight: rect.height
  });
}

Что должно получиться

На собственной странице после загрузки изображения таблица показывает выбранный URL и размеры. Код только читает состояние DOM. При отсутствии img он ничего не выводит, а незагруженное изображение может иметь нулевые естественные размеры.

Граница применения и частая ошибка

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

Самостоятельная проверка

Откройте свою страницу, дождитесь загрузки и запишите три показателя. Подготовьте уменьшенный файл с сохранёнными пропорциями, замените ресурс и повторите замер с отключённым кешем. Сравните резкость и объём.

Связанные материалы

• Локальный просмотр
• Повторная проверка
• Отладка