Чому зображення на вашому вебсайті потребують стиснення | Bulk Image Compressor
Якщо ваш вебсайт завантажується більше кількох секунд, люди йдуть. Це не думка. Власне дослідження Google показує, що показник відмов збільшується на 32%, коли час завантаження сторінки зростає з однієї секунди до трьох. І зображення майже завжди є найбільшою причиною повільного завантаження сторінок.
Більшість вебсайтів подають зображення, які набагато більші, ніж потрібно. Одне герой-зображення прямо з камери або сайту стокових фото може легко бути 5 МБ або більше. На пристойному широкосмуговому з’єднанні цей файл сам по собі займає кілька секунд завантаження. На мобільному 3G-з’єднанні ви дивитеся приблизно на 15 секунд лише для одного зображення. А тепер уявіть сторінку з п’ятьма або шістьма такими зображеннями.
Наскільки великі ваші зображення насправді?
Ось швидка перевірка реальності. Відкрийте інструменти розробника вашого браузера (F12), перейдіть на вкладку Network, перезавантажте сторінку та відфільтруйте за “Img”. Подивіться на розміри. Ви, ймовірно, знайдете принаймні кілька зображень розміром понад 1 МБ.
Для довідки, ось як виглядають типові нестиснуті зображення:
- Фото з дзеркальної камери, використане як герой-банер: 4-8 МБ
- Фото товару зі смартфона: 2-5 МБ
- Стокове фото, завантажене в повній роздільній здатності: 3-10 МБ
- Інфографіка або ілюстрація, збережена як PNG: 1-4 МБ
Після правильного стиснення ті самі зображення можуть бути 100-300 КБ без видимої втрати якості. Це зменшення розміру файлу на 90% або більше.
Швидкість сторінки та Core Web Vitals
Google використовує Core Web Vitals як сигнал ранжування, і зображення безпосередньо впливають на дві з трьох метрик.
Largest Contentful Paint (LCP) вимірює, скільки часу потрібно для завантаження найбільшого видимого елемента. На більшості сторінок цей найбільший елемент — зображення. Якщо ваше герой-зображення має 5 МБ, ваш LCP буде жахливим. Google вважає все, що перевищує 2,5 секунди, поганим показником LCP. Стиснені зображення зазвичай приводять LCP до цього порогу.
Cumulative Layout Shift (CLS) вимірює візуальну стабільність. Зображення без визначених розмірів спричиняють зміщення макету під час завантаження. Це більше про атрибути HTML, ніж про стиснення, але завеликі зображення, які завантажуються повільно, погіршують проблему, оскільки сторінка відображає контент навколо заповнювача, який може не відповідати кінцевому розміру зображення.
Ви можете перевірити ваші поточні показники за допомогою [Google PageSpeed Insights](https://pagespeed.web.dev/. Запустіть вашу головну сторінку та кілька внутрішніх сторінок. Якщо ваш показник продуктивності нижче 90, зображення, ймовірно, є значною частиною проблеми.
Зв’язок з SEO
Швидкість сторінки — підтверджений фактор ранжування Google. Він таким є з 2010 року для десктопів та з 2018 року для мобільних пристроїв. Впровадження Core Web Vitals у 2021 році зробило його ще більш прямим.
Але вплив виходить за межі просто сигналу швидкості. Повільні сторінки скануються Googlebot рідше. Google виділяє “краулінговий бюджет” для кожного сайту, і якщо ваші сторінки повільні, бот витрачає свій бюджет на очікування відповідей, замість індексації більшого обсягу вашого контенту. Для великих сайтів із сотнями або тисячами сторінок це має велике значення.
Також існує непрямий вплив через поведінку користувачів. Коли люди відмовляються від повільних сторінок, Google це помічає. Високі показники відмов і низький час на сторінці надсилають негативні сигнали залучення, які можуть вплинути на ваші рейтинги з часом.
Досвід користувачів та показники відмов
Люди нетерплячі в інтернеті. Дослідження Portent показало, що коефіцієнти конверсії падають у середньому на 4,42% за кожну додаткову секунду часу завантаження. Якщо ваш сайт електронної комерції завантажується п’ять секунд замість двох, ви можете втрачати значний відсоток продажів.
Мобільні користувачі ще менш терплячі. Більше половини всього веб-трафіку надходить з мобільних пристроїв, а мобільні з’єднання зазвичай повільніші за десктопні. Ваші зображення мають бути достатньо малими, щоб швидко завантажуватися на телефоні, використовуючи стільникову мережу.
Також існує фактор сприйняття. Швидкий сайт відчувається більш професійним і заслуговує на довіру. Повільний сайт відчувається зламаним, навіть якщо все зрештою завантажується. Перші враження формуються за мілісекунди.
Витрати на пропускну здатність накопичуються
Якщо ви на спільному хостингу або базовому плані, пропускна здатність може бути не тим, про що ви думаєте. Але для сайтів із реальним трафіком пропускна здатність коштує грошей.
Давайте зробимо підрахунки. Скажімо, ваша середня сторінка має 3 МБ зображень, і ви отримуєте 100 000 переглядів сторінок на місяць. Це 300 ГБ переданих даних зображень щомісяця. Після стиснення ті самі сторінки можуть мати 400 КБ зображень, зменшуючи передачу до 40 ГБ. Це значне зниження витрат на хостинг та рахунків за CDN.
Для високотрафікових сайтів, медіакомпаній або магазинів електронної комерції з великими каталогами товарів ця різниця може заощаджувати сотні або тисячі доларів на місяць.
Як пакетно стиснути зображення вашого вебсайту
Ви могли б стискати зображення по одному в Photoshop або GIMP, але якщо у вас десятки або сотні зображень, це не практично. Пакетне стиснення — це шлях.
За допомогою Bulk Image Compressor ви можете перетягнути всі зображення вашого вебсайту одночасно та стиснути їх разом. Ось практичний робочий процес:
-
Експортуйте ваші поточні зображення. Якщо вони вже на вашому сайті, завантажте їх. Якщо ви будуєте новий сайт, зберіть усі зображення, які плануєте використовувати.
-
Виберіть ваш формат. Для фотографій найкраще підходять JPEG або WebP. Для графіки з прозорістю використовуйте PNG або WebP. Якщо ви не впевнені, який формат вибрати, перегляньте наш посібник з форматів зображень для веб-продуктивності.
-
Встановіть рівень якості. Для більшості веб-зображень налаштування якості від 75 до 85% дає хороший баланс між розміром файлу та візуальною якістю. Ви можете знизити для мініатюр або фонових зображень. Детальніше про цей компроміс читайте в нашій статті про зменшення розміру файлу без втрати якості.
-
Стисніть та завантажте. Інструмент обробляє все у вашому браузері, тому ваші зображення ніколи не залишають ваш комп’ютер. Замініть оригінали на вашому сервері стиснутими версіями.
-
Також встановіть розміри. Не подавайте зображення шириною 4000px у контейнері, ширина якого лише 800px. Змініть розмір ваших зображень відповідно до розміру їх відображення до або під час стиснення. Це само по собі може різко скоротити розміри файлів.
Швидкий приклад “до і після”
Ось як виглядає стиснення на практиці для типового вебсайту:
| Зображення | До | Після | Економія |
|---|---|---|---|
| Герой-банер (JPEG) | 4.2 МБ | 210 КБ | 95% |
| Фото команди (JPEG) | 3.1 МБ | 185 КБ | 94% |
| Логотип (PNG) | 890 КБ | 95 КБ | 89% |
| Мініатюра блогу (JPEG) | 1.8 МБ | 120 КБ | 93% |
| Загалом | 10 МБ | 610 КБ | 94% |
Це різниця між сторінкою, яка завантажується за одну секунду, і тією, що завантажується за вісім.
Не забувайте про новий контент
Стиснення наявних зображень — це одноразове виправлення, але вам також потрібен процес для постійного контенту. Кожного разу, коли ви або ваша команда додаєте новий допис у блозі, сторінку товару або цільову сторінку, ці зображення мають бути стиснуті перед публікацією.
Зробіть стиснення зображень частиною вашого робочого процесу публікації контенту. Це займає кілька хвилин, а вплив на швидкість вашого сайту та SEO є реальним і вимірюваним.
Зображення вашого вебсайту — це, ймовірно, найбільше покращення продуктивності, яке ви можете зробити. Інструменти безкоштовні, процес швидкий, а результати одразу з’являються в показниках швидкості ваших сторінок.
Ready to compress your images?
Bulk compress JPEG, PNG, WebP, and AVIF images right in your browser. No uploads, no sign-ups.
Try Bulk Image Compressor