Большой сжатый снимок всё ещё большой
Маленький блок не уменьшает скачиваемый файл. Если всем отдаётся одна полноразмерная фотография, телефон скачивает и ненужные пиксели. Сжатие и адаптивный выбор решают разные части задачи.
Подготовка для сайта объясняет процесс, а руководство по доставке связывает его с диагностикой. Мы прослеживаем фото от файлов до реального выбора, не подменяя результат баллом.
Подготовьте варианты и наблюдайте
Пропорциональные копии сделаны во внешнем редакторе до сжатия; Bitinz не менял размеры. 2026-10-29 каждая обработана на Баланс локальным движком. Размеры, байты и суммы определяют варианты браузерного опыта.
Локальная страница предлагала srcset с подходящим правилом sizes. Наблюдения фиксируют ширину окна, плотность и выбранный ресурс. Это объём изображения, не полная загрузка страницы или симуляция мобильной сети. Данные объясняет редакционная политика.
Файлы, из которых сделан выбор
Сравните размеры вариантов и запись выбора в источниках. Браузер выбирает только из файлов, предложенных страницей.
| Изображение | Пиксели | Выход | Уровень | До | После | Экономия |
|---|---|---|---|---|---|---|
photo-4000.jpg | 4000 × 2667 px | JPG | Баланс | 2032.6 KB | 595.9 KB | 70.7% |
photo-1600.jpg | 1600 × 1067 px | JPG | Баланс | 393.1 KB | 129.0 KB | 67.2% |
photo-800.jpg | 800 × 533 px | JPG | Баланс | 116.0 KB | 40.0 KB | 65.5% |
photo-400.jpg | 400 × 267 px | JPG | Баланс | 34.2 KB | 12.4 KB | 63.7% |
Bitinz · 1 KB = 1000 байт.
Что браузер скачал на самом деле
| Ширина окна (CSS px) | Плотность пикселей | Ширина показа (CSS px) | Выбранная ширина (px) | Объём изображения |
|---|---|---|---|---|
| 390 | 1× | 358 | 400 | 12.4 KB |
| 390 | 2× | 358 | 800 | 40.0 KB |
| 768 | 1× | 736 | 800 | 40.0 KB |
| 768 | 2× | 736 | 1600 | 129.0 KB |
| 1280 | 1× | 960 | 1600 | 129.0 KB |
| 1280 | 2× | 960 | 4000 | 595.9 KB |
Каждая строка получена в новом контексте браузера с отключённым кэшем. Самое широкое окно с высокой плотностью выбрало максимальный вариант из-за большого промежутка в наборе. Стоит проверить промежуточный размер: браузер выбирает только существующие в списке файлы.
Проверяйте в полезном масштабе
Деталь исходного фото
Деталь сжатого фото
Проверьте маленький и плотный экран. Минимальный вариант не лучший, если выглядит размытым. Большой тоже не оправдан только красивой степенью сжатия.
Выбор относится к указанной среде. Кэш и решения браузера влияют на следующие посещения. Для повтора используйте новый контекст и смотрите запрошенный ресурс, не угадывая по видимым размерам.
Свяжите подготовку и доставку
Сожмите копии в сервисе сжатия, затем предложите варианты через сайт или систему управления содержимым. Если разметка всем даёт один большой файл, сжатие не меняет выбор.
Согласуйте sizes с макетом CSS. Браузер использует подсказку, варианты и плотность; имя файла не объясняет намерение автора. После изменения макета проверяйте ресурс.
В повторяющемся процессе API для разработчиков может сжимать подготовленные файлы при публикации. Изменение размеров остаётся отдельным этапом подготовки. В руководстве по качеству объясняется, как сравнивать детали перед заменой изображения.
Проверьте блок изображения
- Измерьте блок и выберите пропорциональные ширины для макета.
- Подготовьте и сожмите копии, сохранив редактируемый оригинал.
- Предложите варианты с правилом
sizes, совпадающим с макетом. - Проверьте выбранный ресурс и видимое фото на разных экранах.
Вопросы и ответы
- Уменьшение ширины показа уменьшает скачивание?
- Ширина CSS меняет макет, не байты отдельного файла. Предлагайте подходящие варианты и проверяйте выбор.
- Почему плотный телефон выбирает более широкое фото?
- Плотный экран использует больше пикселей в том же видимом блоке. Влияют размеры вариантов и подсказка страницы.
- Опыт измеряет скорость страницы?
- Он фиксирует сжатие и выбор изображения. Полная загрузка зависит также от других ресурсов, сети и отрисовки.