Як зменшити розмір зображення без втрати видимої якості
Ваш сайт завантажується шість секунд. Email повертається, бо вкладення занадто велике. Пост у соціальних мережах виглядає чудово, але завантаження тривало нескінченно. Майже у кожному випадку причина одна й та сама: зображення, що набагато більші, ніж мають бути.
Добра новина: ви можете значно зменшити розмір файлів зображень, нерідко на 70% і більше, без жодної видимої різниці у якості. Ключ — розуміння того, що робить зображення великими.
Роздільна здатність проти розміру файлу: ключова відмінність
Багато людей плутають роздільну здатність зображення з розміром файлу. Вони пов'язані, але різні речі.
Роздільна здатність — це кількість пікселів у зображенні, вимірюється як ширина x висота. Зображення 4000 x 3000 пікселів має 12 мільйонів пікселів (12 мегапікселів). Роздільна здатність визначає, наскільки великим можна відображати зображення, зберігаючи чіткість.
Розмір файлу — це кількість байтів, яку займає зображення на диску. Він залежить від роздільної здатності, але також від формату, рівня стиснення та вмісту зображення.
Ось чому ця відмінність важлива: зображення 4000 x 3000 пікселів, відображене у розмірі 800 x 600 на сайті, витрачає понад 90% своїх пікселів. Браузеру доводиться завантажувати всі 12 мільйонів пікселів, а потім відкинути більшість із них, щоб відобразити зображення меншого розміру. Зміна розміру зображення до реальних розмірів відображення перед завантаженням може зменшити розмір файлу на 80% і більше, без жодної видимої різниці.
Чи знали ви? Типова фотографія зі смартфона має роздільну здатність 4000 x 3000 пікселів або більше. Зображення на всю ширину сайту рідко потребує більше 1920 x 1080 пікселів. Для мініатюри в блозі зазвичай достатньо 600 x 400 пікселів.
Розуміння форматів зображень
Вибраний формат надзвичайно впливає на розмір файлу.
JPG (JPEG)
Універсальний стандарт для фотографій. JPG використовує стиснення з втратами, тобто відкидає деякі дані зображення, які людське око навряд чи помітить. При якості 80-85% зображення JPG виглядають ідентично оригіналу, але займають лише частку розміру.
Найкраще для: Фотографій, зображень із градієнтами, реалістичних зображень.
PNG
PNG використовує стиснення без втрат: дані не відкидаються. Це робить його ідеальним для зображень, що потребують точного відтворення пікселів, наприклад логотипів, скріншотів та графіки з текстом. Однак файли PNG значно більші за JPG для фотографічного контенту.
Найкраще для: Логотипів, скріншотів, графіки з текстом, зображень, що потребують прозорості.
WebP
Розроблений Google, WebP пропонує як стиснення з втратами, так і без втрат. Він створює файли на 25-35% менші за JPG при еквівалентній якості та підтримує прозорість (на відміну від JPG). Усі сучасні браузери підтримують WebP.
Найкраще для: Вебзображень будь-якого типу. Найкращий універсальний веб-формат на сьогодні.
| Формат | Стиснення | Прозорість | Типовий розмір фото |
|---|---|---|---|
| JPG | З втратами | Ні | 200-500 КБ |
| PNG | Без втрат | Так | 1-5 МБ |
| WebP | Обидва | Так | 150-350 КБ |
Порада Якщо у вас є зображення WebP, які потрібно конвертувати для сумісності, дивіться наш посібник: Як конвертувати WebP у JPG.
Як працює стиснення зображень
Усі алгоритми стиснення зображень використовують один базовий принцип: людське oko не може сприйняти кожну деталь, яку фіксує камера. Алгоритми стиснення виявляють і видаляють інформацію, відсутність якої ви ніколи не помітите.
Зокрема, стиснення з втратами використовує:
- Чутливість до кольору. Людські очі чутливіші до змін яскравості, ніж до змін кольору. Стиснення більш агресивно зменшує точність кольору.
- Високочастотні деталі. Тонкі текстури та тонкі градієнти можна спростити без помітного ефекту.
- Надлишковість. Ділянки однорідного кольору (блакитне небо, біла стіна) можна представити ефективніше.
Фокус — у знаходженні правильного рівня стиснення. Занадто мале стиснення витрачає пропускну здатність. Занадто велике стиснення вносить помітні артефакти: розмитість, смуги та блочні ділянки.
Практичні правила для різних сценаріїв
Для сайтів
- Максимальна ширина: 1920 пікселів для зображень на всю ширину, 800-1200 пікселів для зображень у контенті
- Формат: WebP з JPG запасним варіантом
- Якість: 75-85%
- Цільовий розмір: До 200 КБ на зображення, до 100 КБ для мініатюр
Для вкладень у email
- Максимальна ширина: 1200-1600 пікселів
- Формат: JPG (універсальна сумісність)
- Якість: 80-85%
- Цільовий розмір: До 500 КБ на зображення, загальна кількість вкладень до 10 МБ
Для соціальних мереж
Кожна платформа має власні оптимальні розміри, але загальне правило:
- Instagram: 1080 x 1080 (квадрат), 1080 x 1350 (портрет)
- Facebook: 1200 x 630 для попереднього перегляду посилань
- LinkedIn: 1200 x 627
- Формат: JPG або PNG
- Якість: 85-90% (платформи перестисують ваші зображення, тому краще починати з трохи вищою якістю)
Увага Платформи соціальних мереж ще раз стискають ваші зображення після завантаження. Якщо ви завантажуєте вже сильно стиснене зображення, подвійне стиснення може призвести до помітних артефактів. Починайте з помірно стиснених зображень (якість 85%+) і дозвольте платформі виконати власну оптимізацію.
Найчастіші помилки
1. Завантаження оригінальних файлів із камери
Необроблена фотографія з сучасного смартфона важить 3-8 МБ. Файл RAW з дзеркального фотоапарата може бути 25-50 МБ. Завантаження їх безпосередньо на сайт — найпоширеніша причина повільного завантаження сторінок.
2. Використання PNG для фотографій
PNG — неправильний формат для фотографій. Фото, збережене як PNG, може бути у 5-10 разів більшим за те саме фото, збережене як JPG з якістю 85%, без жодної видимої різниці.
3. Стиснення без зміни розміру
Стискання зображення шириною 4000 пікселів до 200 КБ набагато менш ефективне, ніж спочатку змінити його розмір до 1200 пікселів ширини, а потім стиснути. Спочатку змінюйте розмір, потім стискайте.
4. Багаторазове стиснення
Щоразу, коли ви відкриваєте JPG, редагуєте та зберігаєте, він перестискається. Після кількох циклів редагування-збереження якість помітно погіршується. Завжди працюйте з оригіналом і стискайте лише фінальну версію.
Порада Стискайте зображення безкоштовно прямо у браузері: Як стиснути зображення. Регулюйте якість, змінюйте розміри та бачте економію розміру файлу в реальному часі.
Вплив оптимізації зображень
Оптимізація зображень — це не просто зручність. Для сайтів вона безпосередньо впливає на:
- Швидкість завантаження сторінок. Швидші сторінки займають вищі позиції у пошуковій видачі Google.
- Досвід користувача. 53% мобільних користувачів покидають сторінки, завантаження яких займає більше 3 секунд.
- Витрати на трафік. Для сайтів з великим трафіком оптимізація зображень може заощадити значні витрати на хостинг.
- Доступність. Користувачі на повільних з'єднаннях або з обмеженим трафіком отримують величезну вигоду.
Готові оптимізувати ваші зображення? Дотримуйтесь нашого покрокового посібника: Як стиснути зображення. Безкоштовно, у вашому браузері, з можливістю порівняти якість перед завантаженням.