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

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

Зображення зазвичай становлять основну частину ваги сторінки. Поки браузер не завантажить велику картинку на першому екрані, користувач бачить порожній блок або «стрибаючу» верстку, а на мобільному інтернеті це відчувається особливо сильно. Повільне завантаження дратує, люди йдуть, не дочекавшись контенту, і сайт втрачає заявки, які міг би отримати.

Для пошукових систем швидкість теж має значення. Google оцінює зручність сторінок через показники Core Web Vitals: LCP (час завантаження найбільшого елемента першого екрана), CLS (зсуви макета) та INP (чуйність). На багатьох сайтах саме головне зображення чи банер стають елементом LCP, тому легкі та правильно підключені картинки безпосередньо покращують цей показник. Саме по собі стиснення не гарантує зростання позицій, але повільна сторінка програє за інших рівних умов.

Третя причина — пошук за картинками та розуміння контенту. Зрозумілі назви файлів, описові alt-тексти та зображення, які справді стосуються теми сторінки, допомагають пошуковикам і ШІ-асистентам правильно зрозуміти, про що сторінка, і показувати її в Google Картинках.

Який формат зображень обрати

Формат визначає, наскільки сильно можна стиснути картинку без помітних втрат і які можливості вона матиме (прозорість, анімація, масштабування). Універсального формату немає: для фотографій, логотипів та іконок краще підходять різні варіанти.

Практичне правило: фотографії та банери віддавайте у WebP (або AVIF із запасним WebP/JPEG), логотипи та іконки — у SVG, а PNG залишайте для випадків, де важливі чіткі краї й прозорість і немає змоги використати WebP.

Як стискати зображення без втрати якості

Фото з телефона чи фотоапарата майже завжди важить у рази більше, ніж потрібно для сайту: у ньому зайва роздільна здатність, службові дані (EXIF) і мінімальне стиснення. Перед публікацією файл потрібно зменшити й пересохранити з розумним рівнем якості.

Стиснення з втратами і без втрат

Стиснення без втрат прибирає службову інформацію та оптимізує кодування, не змінюючи жодного пікселя. Стиснення з втратами відкидає деталі, яких око майже не помічає, і дає значно більший виграш. Для фотографій майже завжди використовують стиснення з втратами: якість у районі 75–85% для JPEG і WebP зазвичай виглядає так само, як оригінал, але важить набагато менше. Точне значення краще підбирати на око, порівнюючи результат на реальному екрані.

Інструменти

• Squoosh — безкоштовний онлайн-інструмент, дозволяє порівняти оригінал і стиснуту версію та одразу зберегти у WebP або AVIF;
• TinyPNG / TinyJPG — швидке стиснення PNG, JPEG і WebP;
• ImageOptim (macOS) та аналоги — пакетна обробка без втрат;
• плагіни для CMS, які стискають і конвертують зображення автоматично під час завантаження (про них нижче).

Орієнтиру «кожна картинка має важити не більше N КБ» у Google немає. Розумний підхід інший: файл має бути настільки легким, наскільки це можливо без помітної втрати якості в тому розмірі, в якому він показується на сторінці.

Які розміри зображень використовувати

Головне правило: не завантажуйте зображення більше, ніж воно відображається на сайті. Якщо картка товару займає 400 пікселів завширшки, файл шириною 4000 пікселів змусить браузер завантажити в десятки разів більше даних і потім зменшити їх самостійно.

Орієнтири за шириною

• повноширинний банер або перший екран — 1600–1920 px для великих моніторів, плюс зменшені версії для мобільних;
• зображення в тексті статті — за шириною колонки контенту (часто 800–1200 px);
• картки товарів, прев’ю, мініатюри — 300–600 px;
• для екранів з високою щільністю пікселів (Retina) — версія приблизно вдвічі ширша за розмір відображення, але лише через srcset, а не для всіх пристроїв одразу.

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

Атрибут srcset дозволяє вказати кілька версій однієї картинки різної ширини, а sizes — підказати браузеру, яку ширину зображення займе на екрані. Браузер сам обере потрібний файл: телефон завантажить легку версію на 480–800 px, широкий монітор — велику. Так той самий сайт залишається швидким на мобільних і чітким на великих екранах.

Вказуйте width і height

Атрибути ширини та висоти (або задане в CSS співвідношення сторін) резервують місце під картинку до її завантаження. Без них текст «стрибає», коли з’являється зображення, — це погіршує CLS і дратує користувачів, які вже почали читати або збиралися натиснути кнопку.

Lazy loading: як правильно налаштувати відкладене завантаження

Відкладене завантаження (атрибут loading=”lazy”) відкладає завантаження картинок, що розташовані нижче першого екрана, до моменту, коли користувач до них прокрутить. Це економить трафік і пришвидшує перше відображення сторінки, особливо на довгих сторінках із галереями, каталогами та статтями.

Важливий виняток — зображення першого екрана. Головний банер, фото товару чи обкладинку статті, які користувач бачить одразу, ліниво завантажувати не можна: браузер почне їх завантаження пізніше, і LCP погіршиться. Для такого зображення, навпаки, корисно вказати fetchpriority=”high”, щоб браузер завантажив його першочергово. Зазвичай достатньо не застосовувати lazy loading до перших одного–двох зображень сторінки.

Alt-тексти та назви файлів

Alt-текст потрібен насамперед людям: його зачитують програми екранного доступу, і він показується, якщо картинка не завантажилася. Пошукові системи використовують його, щоб зрозуміти зміст зображення. Добрий alt коротко й конкретно описує, що зображено і навіщо картинка на цій сторінці.

• погано: «img_2041», «фото», «купити диван купити диван недорого»;
• добре: «Кутовий диван сірого кольору в інтер’єрі вітальні»;
• декоративним елементам (фонові візерунки, розділювачі) alt можна залишити порожнім, щоб не засмічувати сторінку.

Назву файлу теж варто робити зрозумілою, латиницею, через дефіс: kutovyj-dyvan-siryj.webp замість IMG_2041.JPG. Ключові слова доречні, якщо вони чесно описують картинку, — перелічувати запити в alt і назві файлу не потрібно.

CDN і кешування зображень

Навіть оптимізовані картинки завантажуються повільніше, якщо сервер далеко від користувача або щоразу віддає їх заново. Дві речі помітно допомагають:

• кешування в браузері — сервер віддає зображення з довгим терміном зберігання, і під час повторних візитів і переходів між сторінками вони беруться з кешу;
• CDN (мережа доставки контенту) — копії файлів зберігаються на серверах у різних регіонах і віддаються з найближчого до відвідувача; багато CDN вміють на льоту конвертувати картинки у WebP або AVIF і зменшувати їх під потрібний розмір.

Для невеликого локального сайту часто достатньо правильного кешування на хостингу, а CDN стає корисним за аудиторії з різних країн або великої кількості зображень, наприклад в інтернет-магазині.

Оптимізація зображень у WordPress

WordPress сам створює кілька зменшених копій кожної завантаженої картинки й виводить їх через srcset, а з версії 5.5 додає loading=”lazy” до зображень у контенті. Але цього недостатньо: вихідний файл однаково потрібно завантажувати розумного розміру, а конвертацію у WebP і додаткове стиснення зазвичай беруть на себе плагіни.

• плагіни стиснення та конвертації (наприклад, WebP Express, EWWW Image Optimizer, ShortPixel, Imagify) — оптимізують нові завантаження й можуть обробити вже наявну медіатеку;
• плагіни кешування — допомагають із заголовками кешу та відкладеним завантаженням;
• перевірка теми — часто проблема в самому шаблоні: тема виводить повнорозмірний оригінал замість потрібної мініатюри або ставить lazy loading на перший екран.

Якщо тему написано під замовлення або вона давно не оновлювалася, такі речі виправляються в коді шаблонів. Це типова задача для доопрацювання сайту під сучасні формати зображень, а під час повного оновлення дизайну її варто закласти одразу — наприклад, під час редизайну сайту.

Як перевірити, що зображення оптимізовані

Перевірку зручно почати з безкоштовного сервісу PageSpeed Insights від Google. Введіть адресу сторінки та подивіться мобільну версію звіту:

• показник LCP і те, який елемент ним є, — якщо це картинка, саме її потрібно пришвидшувати насамперед;
• рекомендації «Налаштуйте відповідний розмір зображень», «Використовуйте сучасні формати зображень», «Налаштуйте ефективне кодування зображень»;
• попередження про те, що зображення LCP завантажується з відкладеним завантаженням;
• показник CLS — якщо він високий, перевірте, чи задані розміри в картинок.

Додатково корисно відкрити вкладку «Мережа» (Network) в інструментах розробника браузера, відфільтрувати зображення й відсортувати їх за розміром: найважчі файли одразу буде видно. Для регулярного контролю варто перевіряти ключові сторінки після кожного великого оновлення — це зручно робити в межах регулярної технічної підтримки сайту.

Типові помилки під час роботи із зображеннями

• завантаження фото «як є» з телефона чи камери, з величезною роздільною здатністю та вагою;
• використання PNG для фотографій;
• одна велика версія картинки для всіх пристроїв без srcset;
• lazy loading на головному зображенні першого екрана;
• відсутність width і height, через що верстка зсувається під час завантаження;
• порожні або безглузді alt-тексти на важливих зображеннях — або, навпаки, alt, напханий ключовими словами;
• назви файлів на кшталт IMG_2041.JPG;
• фонові зображення величезного розміру, підключені через CSS, про які забувають під час оптимізації;
• відсутність кешування зображень на сервері.

Чек-лист оптимізації зображень

• розмір файлу відповідає розміру відображення (з версією для Retina через srcset);
• фото й банери — у WebP або AVIF із запасним форматом, логотипи та іконки — у SVG;
• файли стиснуті перед завантаженням або автоматично плагіном;
• є srcset і sizes для зображень, які змінюють розмір на різних екранах;
• у картинок задані width і height або співвідношення сторін;
• lazy loading увімкнено для зображень нижче першого екрана й вимкнено для головного;
• у важливих зображень зрозумілий alt, у файлів — зрозумілі назви;
• налаштовано кешування, за потреби підключено CDN;
• ключові сторінки перевірено в PageSpeed Insights на мобільній версії.

Часті питання

Який формат зображень краще використовувати на сайті?

Для фотографій і банерів оптимальний WebP: він підтримується всіма сучасними браузерами й зазвичай помітно легший за JPEG і PNG. AVIF стискає ще сильніше, але його краще підключати із запасним WebP або JPEG. Логотипи та іконки найзручніше зберігати у SVG.

Скільки має важити картинка для сайту?

Єдиного ліміту немає — ні в Google, ні в стандартах. Зображення має бути настільки легким, наскільки можливо без помітної втрати якості в тому розмірі, в якому воно показується. Зазвичай для цього достатньо зменшити роздільну здатність до потрібної ширини й зберегти файл у WebP з якістю близько 75–85%.

Чи впливає оптимізація зображень на SEO?

Так, і опосередковано, і напряму. Легкі картинки пришвидшують завантаження й покращують Core Web Vitals, насамперед LCP, а це один із сигналів зручності сторінки. Зрозумілі alt-тексти та назви файлів допомагають показуватися в пошуку за картинками й дають пошуковикам додатковий контекст про зміст сторінки.

Чи потрібно вмикати lazy loading для всіх зображень?

Ні. Відкладене завантаження варто вмикати для картинок нижче першого екрана. Головне зображення, яке користувач бачить одразу після відкриття сторінки, має завантажуватися без затримки — інакше погіршиться LCP. Для нього, навпаки, можна вказати fetchpriority=”high”.

Як швидко перевірити, які картинки гальмують сайт?

Відкрийте сторінку в PageSpeed Insights і подивіться елемент LCP та рекомендації щодо зображень. Потім у вкладці «Мережа» інструментів розробника відсортуйте файли за розміром — найважчі зображення будуть на початку списку, з них і варто починати.

Легкі зображення — швидкий сайт і більше заявок

Оптимізація зображень — одне з найдешевших і водночас помітних доопрацювань: правильний формат, розмір, стиснення та акуратне налаштування lazy loading пришвидшують сторінки без зміни дизайну й контенту. Відвідувачі швидше бачать те, заради чого прийшли, а пошукові системи отримують швидку й зрозумілу сторінку.

Почніть із ключових сторінок — головної, послуг, популярних товарів і статей: перевірте їх у PageSpeed Insights, виправте найважчі картинки й налаштуйте автоматичне стиснення нових завантажень. А якщо потрібно комплексно пришвидшити сайт і покращити його видимість у пошуку, це добре поєднується з SEO-просуванням сайту.