Оптимізація зображень для Інтернету: повний посібник

Повільне завантаження сторінок вбиває конверсії. Дослідження показують, що 40% користувачів залишають сайт, який займає більше 3 секунд. Найбільша причина? Неоптимізовані зображення. Одне фото розміром 5 МБ на вашій домашній сторінці може збільшити час завантаження навіть за швидких з’єднань.

Контрольний список оптимізації зображення

1. Правильні розміри — не надсилайте зображення розміром 4000 пікселів, де ви відображаєте 800 пікселів
2. Правильний формат — сучасний WebP/AVIF, резервний JPG/PNG
3. Правильне стиснення — 75–85% якості для фотографій, без втрат для графіки
4. Правильна доставка — відкладене завантаження, адаптивний srcset

Рекомендовані розміри у 2026

• Основні зображення: 1920×1080 (Full HD) або 2560×1440 (2K) макс.
• Герой допису в блозі: 1200×675 (16:9)
• Фотографії продукту: 1500×1500 із підтримкою масштабування, 800×800 за умовчанням
• Аватари: 256 × 256 (ескізи будуть зменшуватися)
• Open Graph (поширення в соціальних мережах): 1200×630
• Значок сайту: 32×32, 192×192, 512×512 PNG

Змініть розмір фотографій до цих розмірів за допомогою нашого інструмента зміни розміру зображень перед завантаженням.

Формати: коли що використовувати

• WebP: за умовчанням для 95% веб-зображень. На 25–35% менший за JPG за такої ж якості. Підтримка універсального браузера.
• AVIF: навіть менший (на 50% менший за JPG). Використовуйте для зображень героїв. Новіші браузери підтримують це.
• JPG: фотографії без прозорості. Чудова сумісність.
• PNG: логотипи, знімки екрана, будь-що прозоре. Без втрат.
• SVG: векторна графіка, значки, прості ілюстрації. Маленький розмір файлу, нескінченне масштабування.

Конвертуйте ці формати за допомогою PDF7 Image Convert.

Стиснення: наскільки агресивне означає занадто агресивне?

Для фотографій: починайте з 85% якості. Знизьте до 75% для сторінок, критичних до пропускної здатності. Нижче 70% стають видимими артефакти. Скористайтеся нашим інструментом стиснення зображень, щоб знайти правильний баланс.

Адаптивні зображення з srcset

Не надсилайте на телефон зображення 2K. Використовуйте атрибут srcset HTML:

Браузер вибирає найменше зображення, яке підходить. Вам знадобиться 3 розміри для кожного зображення.

Відкладене завантаження

Додайте loading="lazy" до всіх зображень у нижній частині сторінки. Сучасні веб-переглядачі не завантажують їх, доки користувач не прокрутить поряд, заощаджуючи пропускну здатність під час кожного завантаження сторінки.

Правило 100 КБ

Окремі зображення розміром менше 100 КБ. Зображення героїв можуть розтягуватися до 200 КБ. Якщо розмір однієї фотографії перевищує 500 КБ, ви наплуталися — змініть розмір і знову стисніть.