Екран виглядає однаково, а файл змінюється
Знімок — растрове зображення, не живий інтерфейс. Екран високої щільності може записати більше пікселів того самого видимого макета. Це підвищує чіткість тексту, але для малого перегляду одержувачеві не завжди потрібен повний знімок.
Пояснення PNG розглядає знімки загалом. Тут ефект відокремлено завдяки спеціально створеному інтерфейсу без даних облікових записів і сторонніх брендів. Посібник із завантаження пояснює перевірку відхиленого файлу.
Контрольований знімок і справжнє стиснення
2026-10-29 той самий локальний інтерфейс знімали при 1× і 2×. Подвоєння ширини й висоти дає у 4 рази більше пікселів, але не сталий множник розміру файлу. Обидва знімки оброблено Bitinz на рівні Баланс.
Для кожного знімка ми зберегли результат PNG і перетворення у WebP. Кожне налаштування виконали 3 рази, щоб перевірити повну тотожність вихідних файлів. Джерела, контрольні суми та результати додано до експерименту; загальний метод описує редакційна політика.
Щільність і формат окремо
Спершу порівняйте PNG та WebP за однакової щільності. Потім зіставте вихідні знімки, щоб побачити окрему вартість додаткових пікселів.
| Зображення | Пікселі | Результат | Рівень | До | Після | Заощаджено |
|---|---|---|---|---|---|---|
interface-1x.png | 800 × 500 px | PNG | Баланс | 42.8 KB | 13.3 KB | 68.8% |
interface-1x.png | 800 × 500 px | WebP | Баланс | 42.8 KB | 11.1 KB | 74.1% |
interface-2x.png | 1600 × 1000 px | PNG | Баланс | 101.5 KB | 30.6 KB | 69.9% |
interface-2x.png | 1600 × 1000 px | WebP | Баланс | 101.5 KB | 27.6 KB | 72.8% |
Bitinz · 1 KB = 1000 байтів.
Найкорисніше перевіряти текст
Деталь вихідного PNG
Деталь стисненого PNG
Дрібний текст, тонкі лінії й злегка затінені панелі потребують більше уваги, ніж велике порожнє тло. Перевірте фрагмент у повному розмірі, потім знімок із реальною шириною для читача.
Менший WebP корисний, якщо місце завантаження його приймає й літери чіткі. Якщо потрібен PNG, прямо порівнюйте стиснений PNG. Зберігайте текст сторінки справжнім текстом, коли знімок не потрібен.
Покажіть необхідне читачеві
Перед надсиланням обріжте зайве оточення в редакторі. Це окреме від стиснення рішення про вміст: воно прибирає відволікання й пікселі. Залиште потрібний контекст, наприклад відповідний елемент керування й підпис поруч.
Документації може знадобитися чіткий знімок високої щільності зі збільшенням. Для чату може вистачити потрібної ділянки. Перевірте справжнє місце використання замість однакового зменшення всіх знімків.
Використовуйте компресор PNG, якщо необхідний PNG, або перевірте PNG у WebP для власного сайту. Порівняйте обидва з джерелом і оберіть за читабельністю й підтримкою формату.
Підготуйте читабельний знімок
- Зніміть тільки інтерфейс і контекст, потрібні читачеві.
- Збережіть вихідний PNG і стисніть копію.
- Порівняйте літери й тонкі лінії в повному розмірі й потрібній ширині.
- Використайте найлегший придатний файл у підтримуваному форматі.
Запитання й відповіді
- Знімок 2× має вдвічі більше пікселів?
- Якщо подвоєно і ширину, і висоту, пікселів у 4 рази більше. Співвідношення розмірів файлів залежить також від вмісту й формату.
- Чи завжди варто перетворювати знімки на WebP?
- Використовуйте WebP, коли його приймають і текст залишається чітким. Зберігайте PNG, коли він потрібен або дає корисніший результат.
- Bitinz обрізає чи змінює розміри знімка?
- Обрізання й зміна розмірів виконуються в редакторі перед надсиланням. Bitinz обробляє файл у завантажених розмірах.