Велике стиснене зображення лишається великим вибором
Малий блок у макеті не зменшує отриманий файл. Якщо всі отримують те саме повне фото, телефон може завантажувати непотрібні пікселі. Стиснення й адаптивний вибір розв’язують різні частини проблеми.
Процес для сайтів пояснює підготовку, а посібник із доставки зображень пов’язує її з діагностикою швидкодії. Тут фото простежується до справжнього вибору браузера, а оцінка не підміняє результат.
Підготуйте варіанти, спостерігайте за браузером
Перед стисненням ми створили пропорційні копії в зовнішньому редакторі; 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 |
Для кожного рядка використовувався новий контекст браузера з вимкненим кешем. Найширший випадок із високою щільністю обрав найбільший варіант через велику прогалину між запропонованими розмірами. Варто перевірити проміжний варіант: браузер обирає лише наявні у списку файли.
Перевірте вибрану картинку в потрібному масштабі
Деталь вихідного фото
Деталь стисненого фото
Перевірте фото на малому екрані й екрані високої щільності. Найменший варіант не найкращий, якщо стає розмитим. Великий також не виправдовує сама вражаюча економія після стиснення.
Журнал — знімок зазначеного середовища. Кеш і рішення браузера можуть змінювати наступні відвідування. Повторюйте в новому контексті браузера й перевіряйте запитаний файл, не вгадуйте його за видимими розмірами.
Поєднайте підготовку й доставку
Обробіть підготовлені копії компресором зображень, а сайт чи CMS нехай запропонує потрібні варіанти. Якщо розмітка надсилає всім екранам один великий файл, саме стиснення не змінить вибору.
Узгоджуйте sizes із макетом CSS. Браузер поєднує цю підказку з варіантами та щільністю екрана; назва файлу не пояснює задум автора. Перевіряйте вибраний ресурс після зміни макета.
У повторюваному процесі API для розробників може стискати підготовлені файли під час публікації. Зміна розмірів залишається окремим етапом підготовки. Посібник із якості пояснює, як порівняти деталі перед заміною зображення.
Перевірте блок зображення на сторінці
- Виміряйте блок і визначте потрібні пропорційні ширини.
- Підготуйте й стисніть копії, зберігаючи редагований оригінал.
- Запропонуйте варіанти з правилом
sizes, узгодженим із макетом. - Перевірте обраний ресурс і видиме фото на різних екранах.
Запитання й відповіді
- Зменшення видимої ширини зменшує отриманий файл?
- Ширина CSS змінює макет, не байти окремого файлу. Запропонуйте відповідні варіанти й перевірте вибір браузера.
- Чому телефон високої щільності обирає ширше зображення?
- Щільний екран використовує більше пікселів у тому самому видимому блоці. На вибір впливають розміри варіантів і підказка розміру сторінки.
- Цей дослід вимірює швидкість сторінки?
- Він фіксує стиснення та вибір зображень. Повне завантаження залежить також від інших ресурсів, мережі й відтворення.