Формати зображень: порівняння WebP, PNG, JPG і SVG
Неправильний вибір формату зображення може сповільнити завантаження сторінки або погіршити чіткість графіки. Порівняймо сучасні вебформати за стисненням, прозорістю та чіткістю.
Файли обробляються локально у вашому браузері за допомогою WebAssembly та HTML5 API. Вони ніколи не залишають ваш пристрій, тому немає завантажень на сервер чи стороннього зберігання файлів.
Починайте конвертацію негайно на своєму пристрої - без очікування передавання файлів, черг на завантаження чи обмежень віддаленого сервера.
Використовуйте будь-який доступний інструмент без створення облікового запису, оплати тарифу чи штучних обмежень на розмір файлу. Конвертуйте стільки, скільки дозволяють ваш браузер і пристрій.
Порівняння форматів та технічні характеристики
| Формат виводу | MIME-тип | Специфікація | Тип |
|---|---|---|---|
| PNG Зображення | image/png | W3C-PNG | Переносна мережева графіка |
| JPG Зображення JPEG | image/jpeg | ITU-T-T81-JPEG | Об’єднана група експертів у галузі фотографії |
| WebP Зображення | image/webp | RFC-6386-VP8 | Сучасний формат зображень WebP від Google |
| SVG Векторне зображення | image/svg+xml | W3C-SVG | Масштабована векторна графіка |
| HEIC Фотографія | image/heic | ISO-IEC-23008-12-HEIF | Контейнер зображень із високою ефективністю |
| AVIF Зображення | image/avif | AOMEDIA-AV1-AVIF | Формат файлів зображень AV1 |
| PSD Документ Photoshop | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Документ Adobe Photoshop |
| PSB Великий документ Photoshop | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Документ великого формату Adobe Photoshop |
| WMF Метафайл Windows | image/x-wmf | MS-WMF-SPEC | Векторний формат метафайлу Windows |
| EMF Розширений метафайл | image/x-emf | MS-EMF-SPEC | Векторний формат розширеного метафайлу |
| JFIF Зображення | image/jpeg | ITU-T-T81-JPEG | Формат обміну файлами JPEG |
| TGA Truevision | image/x-tga | TGA-SPEC | Растрове зображення Truevision Targa |
| PCX ZSoft | image/x-pcx | PCX-SPEC | Растрове зображення ZSoft Paintbrush PCX |
| PDF Документ | application/pdf | ISO-32000-2 | Портативний формат документів |
Технічні специфікації та розбір кодеків
Швидке правило вибору формату
WebP і AVIF можуть зменшити розмір багатьох вебзображень і підтримують прозорість, але результат залежить від зображення та параметрів кодування. Використовуйте JPG для фотографій, де прийнятні невеликі артефакти стиснення, PNG для чітких знімків екрана й графіки, а SVG для масштабованих логотипів та піктограм.
Растр проти вектора: чому SVG ніколи не розмиваються
Растрові зображення (JPG, PNG, WebP): це сітки з пікселів фіксованого кольору; якщо збільшити їх надто сильно, вони стають розмитими або пікселізованими. SVG: це чиста математика: формат зберігає математично описані лінії, криві й кольори, завдяки чому іконки та ілюстрації мають чіткий вигляд на всіх пристроях, від мобільних екранів до дисплеїв 8K, і потребують зовсім мало місця.
Міф: «Вищий DPI означає кращу якість веб-зображення»
DPI (точок на дюйм): це виключно інструкція для фізичного друку, яку веббраузери повністю ігнорують. На телефонах і комп’ютерних моніторах різкість зображення визначають лише розміри в пікселях (наприклад, 1920x1080) і щільність екрана, а не вбудовані метадані DPI.
Альфа-прозорість: PNG проти WebP
JPEG не має каналу прозорості, тому прозорі пікселі під час збереження як JPEG перетворюються на суцільний фон. PNG зберігає альфа-прозорість, а WebP також може зберігати прозорість і створювати менший файл; порівняйте зображення, адже розмір залежить від вмісту та параметрів кодування.
Жодного байта не передано на зовнішні сервери. Уся обробка відбувалася локально в ізольованому середовищі браузера.