Перевірка розміру зображень

Безкоштовно й без реєстрації: введіть URL — завантажимо до 40 зображень сторінки й для кожного покажемо вагу файлу, справжній формат (за вмістом, а не за розширенням), розмір у пікселях і розмір, заданий в HTML, lazy-load і alt, а потім підкажемо, що стиснути, зменшити чи перевести у WebP/AVIF. Свої файли можна перевірити у вкладці «Мої файли» — прямо в браузері, без завантаження на сервер.

Відмальований розмір на екрані

Сервер не бачить, у якому розмірі браузер реально малює зображення. Відкрийте свою сторінку, натисніть F12 → Console, вставте рядок нижче — отримаєте таблицю: справжній розмір, відмальований і в скільки разів зображення більше потрібного.

console.table([...document.images].filter(i=>i.naturalWidth).map(i=>({src:(i.currentSrc||i.src).split('/').pop().slice(0,60),intrinsic:i.naturalWidth+'×'+i.naturalHeight,rendered:i.clientWidth+'×'+i.clientHeight,dpr:devicePixelRatio,xTooBig:+(i.naturalWidth/Math.max(1,i.clientWidth*devicePixelRatio)).toFixed(1)})).sort((a,b)=>b.xTooBig-a.xTooBig))

Перетягніть зображення сюди або натисніть, щоб обрати (JPEG, PNG, WebP, AVIF, GIF, SVG). Файли не залишають ваш браузер.

Коротко про інструмент

Ціна: Безкоштовно
Реєстрація: Не потрібна
Де відбувається обробка: Режим URL — на нашому сервері: сторінка й до 40 зображень завантажуються через SSRF-захист, файли не зберігаються; режим «Мої файли» — лише в браузері
Що приймає: URL сторінки (зображення <img>, до 8 МБ на файл) або свої файли зображень
Ліміти: Режим URL: 6 перевірок на хвилину; на добу 15 без реєстрації, 45 з акаунтом, з Pro без ліміту; «Мої файли» — без ліміту
Результат: Для кожного зображення: формат за вмістом, пікселі, вага, розмір з HTML, srcset, lazy-load, alt і поради; загальна вага й оцінка економії
Оновлено: 2026-10-13

Альтернативи

Інші інструменти для того самого завдання і в чому кожен із них сильний:

PageSpeed Insights — Відмальовує сторінку й в аудитах Lighthouse точно рахує зайві байти зображень (розмір, формат, стиснення).
Squoosh — Застосунок Google для стиснення й конвертації одного зображення в браузері з попереднім переглядом якості (WebP, AVIF та інші).

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

Описи звірено із сайтами цих інструментів у жовтні 2026 року.

Перевірка розміру й ваги зображень на сторінці

Зображення — зазвичай найважча частина сторінки, і найчастіше проблема не в кількості, а в тому, що фото 4000 px завширшки показують у блоці на 400 px або віддають PNG там, де вистачило б WebP. Інструмент завантажує до 40 зображень сторінки й для кожного показує справжній формат (за вмістом файлу), розмір у пікселях, вагу й розмір, заданий в HTML, позначає lazy-load, srcset і alt та пояснює, що виправити: зменшити, стиснути, перевести у WebP чи AVIF, замінити GIF відео, додати width і height. У вкладці «Мої файли» можна дізнатися розмір і вагу своїх зображень прямо в браузері, нічого не завантажуючи.

Вага файлу, пікселі й справжній формат кожного зображення

Порівняння з розміром в HTML: знайдемо зображення у 2+ рази більші за потрібне

Поради: WebP/AVIF, стиснення, srcset, відео замість GIF, width/height, lazy-load

Загальна вага зображень і оцінка економії

Перевірка своїх файлів у браузері без завантаження

Безкоштовно: 15 перевірок сторінок на добу без реєстрації, 45 з акаунтом

Як користуватися

Введіть адресу сторінки або відкрийте вкладку «Мої файли»
Відсортуйте зображення за вагою й почніть із найважчих
Зменшіть і стисніть файли, потім перевірте сторінку знову

FAQ

Жорсткої норми немає, але орієнтири такі: головне зображення першого екрана — до 150–250 КБ, зображення в тексті — до 100 КБ, іконки й логотипи — одиниці кілобайтів (краще SVG). Ми позначаємо растрові файли більші за 200 КБ як важкі, а більші за 500 КБ — як дуже важкі.

Реальний розмір на екрані залежить від CSS, ширини вікна й щільності пікселів — його знає лише браузер. Ми порівнюємо файл із розміром з атрибутів width/height в HTML, а для точної відповіді на сторінці є рядок для консолі DevTools: він виведе справжній і відмальований розмір кожного зображення на вашому екрані.

Squoosh від Google стискає й переводить у WebP/AVIF прямо в браузері; у нас є стиснення й конвертер зображень. Для сайту на WordPress простіше встановити плагін, який сам створює WebP і зменшені копії для srcset.

PageSpeed Insights у розділі «Налаштуйте відповідний розмір зображень» точно рахує зайві байти, відмалювавши сторінку. Наш інструмент швидше дає загальну картину за всіма зображеннями — формат, пікселі, вага, атрибути — і вміє перевіряти ваші файли до завантаження на сайт, без реєстрації.

Три «розміри» одного зображення

Що	Де дивитися	Навіщо
Вага файлу (КБ, МБ)	колонка «Вага»	Скільки завантажує відвідувач; головне для швидкості
Розмір у пікселях	колонка «Пікселі»	Наскільки детальне зображення; зайві пікселі — зайва вага
Розмір на екрані	атрибути width/height у колонці «HTML» і сніпет для консолі	Скільки пікселів справді потрібно сторінці

Правило: файл має бути не ширшим за подвоєний розмір показу (для екранів зі щільністю 2×). Фото 4000 px у колонці на 400 px важить у десятки разів більше, ніж треба.

Який формат обрати

WebP — за даними Google, на 25–34% легший за JPEG за порівнянної якості; підтримується всіма сучасними браузерами.
AVIF — часто ще легший за WebP, але кодується повільніше; добрий для великих фото.
JPEG — запасний варіант для фото; якість 75–85 зазвичай не відрізнити від 100.
PNG — для скриншотів, схем і прозорості; для фото надто важкий.
SVG — для логотипів та іконок; проженіть через оптимізатор, якщо файл більший за кілька КБ.
GIF-анімація — замініть відео MP4 чи WebM з autoplay muted loop playsinline: файл стане в рази меншим.

Ми визначаємо формат за вмістом файлу: буває, що photo.jpg насправді WebP — CDN підміняє формат на льоту, і це нормально.

srcset: різні файли для різних екранів

Атрибут srcset зі списком файлів різної ширини та sizes дає телефону завантажити малу версію, а великому монітору — велику:

<img src="photo-800.webp"
     srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     width="800" height="533" alt="…" loading="lazy">

Більшість CMS створюють такі копії самі — перевірте, що тема виводить srcset.

Порядок оптимізації

Відсортуйте таблицю за вагою й почніть із 3–5 найважчих файлів — зазвичай це половина всієї ваги.
Зменште завеликі зображення до подвоєного розміру показу.
Переведіть JPEG і PNG у WebP чи AVIF (конвертер зображень, стиснення).
Додайте width і height усім зображенням — це прибирає зсуви макета (CLS).
Поставте loading="lazy" зображенням нижче першого екрана, але не головному зображенню вгорі — його краще позначити fetchpriority="high".
Перевірте результат тут і в перевірці швидкості.