Великі зображення — головна причина повільного завантаження сторінок. Виправлення майже завжди у два кроки: задайте зображенню правильні розміри, потім стисніть те, що лишилося. Зробіть обидва — і фото на 4 МБ стане фото на 150 КБ, що виглядає ідентично на екрані.
Поставмо на це реальні числа.
Цільові розміри, у які варто цілитися
Вгадувати не треба. Ось практичні бюджети ваги, що тримають сторінки швидкими:
- Hero / повноширинний банер: до 200 КБ, ідеально ~100–150 КБ.
- Фото всередині статті: 80–150 КБ кожне.
- Мініатюра / аватар: 10–30 КБ.
- Логотип чи іконка (PNG/SVG): до 30 КБ; часто значно менше.
І розміри:
- Повноширинний hero: 1600–2000 px завширшки — цілком достатньо для більшості макетів (подвоюйте, лише якщо ви цілитеся в Retina й можете дозволити собі байти).
- Фото в колонці: узгодьте з шириною контенту — часто 800–1200 px.
- Мініатюра: розмір, у якому вона реально показується, наприклад 300–400 px.
Якщо будь-яке окреме зображення на сторінці понад ~300 КБ, це зазвичай помилка, варта виправлення.
Крок 1: зменште до реальної ширини показу
Це крок, який люди пропускають, і це найбільший важіль. Фото прямо з телефона часто понад 4000 пікселів завширшки. Якщо воно показується в колонці на 800 пікселів, ви відвантажуєте у 25 разів більше пікселів, ніж екран показує, — а кількість пікселів визначає розмір файлу більше за будь-що.
Скористайтеся Зміною розміру, щоб зменшити зображення до ширини, у якій воно реально з'являється. Змінюйте розмір у пікселях чи відсотках, тримайте співвідношення сторін зафіксованим і дайте якісному зменшувачу тримати краї чистими.
Сама лише правильна зміна розміру часто зрізає розмір файлу на 80–90% ще до того, як ви стиснули бодай один байт.
Крок 2: стисніть те, що лишилося
Тепер зменште дані всередині цих правильних розмірів.
- Фото (JPG/WebP): задайте повзунок якості на 75–85. Це візуально без втрат для більшості зображень, водночас сильно зрізаючи розмір.
- PNG (скріншоти, графіка): Стиснення зображень зводить їх до палітри в 256 кольорів, зазвичай економлячи 60–80% без видимих змін і зберігаючи прозорість.
Стиснення також обмежує вивід оригінальним розміром — воно ніколи не віддає щось більше — і має необов'язкове обмеження ширини, тож ви фактично можете зробити обидва кроки за один прохід: задайте обмеження на цільову ширину й стисніть одразу. Обробіть цілу теку пакетно й завантажте її як ZIP.
Заодно оберіть правильний формат
Якщо ваші зображення віддаватимуться сучасним браузерам, конвертація фото у WebP зазвичай перевершує JPEG ще на 25–35% тієї самої якості. Плоска графіка лишається як PNG (чи WebP). Не зберігайте фотографії як PNG — це класична помилка роздування, легко в 5–10 разів гірше.
Реалістичний робочий процес
Для допису в блозі з п'ятьма фото:
- Змініть розмір кожного до ширини вашої колонки (скажімо, 1200 px).
- Стисніть з якістю 80 або конвертуйте у WebP.
- Підтвердьте, що кожне вкладається під ~150 КБ.
- Перевірте обрізок одного зображення на 100%, щоб упевнитися, що якість витримала.
П'ять фото, що починалися з 20 МБ загалом, приземляться близько 600 КБ — сторінка, що завантажується вмить, а не застигає.
Приватно й офлайн
Усе вищезгадане працює повністю у вашому браузері за допомогою Canvas і WebAssembly. Жодне зображення не завантажується на сервер, а після першого візиту інструменти закешовані й працюють офлайн. Ви можете оптимізувати зображення цілого допису без з'єднання, і ніщо не залишає вашу машину.