Формати зображень: Порівняння WebP, PNG, JPG та SVG
Вибір неправильного формату зображення може збільшити час завантаження сторінки або розмити вашу графіку. Ось як сучасні веб-формати порівнюються за ступенем стиснення, прозорістю та чіткістю.
Ваші файли обробляються повністю у вашому веб-переглядачі за допомогою HTML5 Canvas та WebAssembly. Жодні дані ніколи не покидають ваш пристрій.
Жодних черг завантаження та вивантаження. Конвертація відбувається локально на повній швидкості апаратного забезпечення без обмежень сервера.
Відповідає офіційним специфікаціям ISO, W3C та IETF для гарантії сумісності результатів у сучасних операційних системах.
Порівняння форматів та технічні характеристики
| Формат виводу | MIME-тип | Специфікація | Тип |
|---|---|---|---|
| PNG Зображення | image/png | W3C-PNG | Переносне растрове зображення |
| JPG Зображення JPEG | image/jpeg | ITU-T-T81-JPEG | Стиснене растрове зображення Joint Photographic Experts Group |
| WebP Зображення | image/webp | RFC-6386-VP8 | Сучасний формат зображень від Google WebP |
| 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 |
| PCX ZSoft | image/x-pcx | PCX-SPEC | Растрове зображення ZSoft Paintbrush PCX |
Технічні специфікації та розбір кодеків
Швидке правило вибору формату
Використовуйте WebP або AVIF для сучасних веб-сайтів (на 30% менші за JPEG з підтримкою прозорості). Використовуйте JPG для фотографій, де крихітні непомітні артефакти стиснення не мають значення. Використовуйте PNG для знімків екрана, графіки інтерфейсу та ілюстрацій, що потребують чіткого до пікселів тексту. Використовуйте SVG для логотипів та іконок, які потребують нескінченного масштабування.
Растр проти Вектора: Чому SVG ніколи не розмиваються
Растрові зображення (JPG, PNG, WebP) - це сітки фіксованих пікселів кольору; якщо наблизити їх занадто сильно, вони стають розмитими або пікселізованими. SVG - це чиста математика: він зберігає математичні лінії, криві та кольори, що дозволяє іконкам та ілюстраціям відображатися надзвичайно чітко на чому завгодно, від мобільних екранів до 8K-дисплеїв, маючи крихітні розміри файлів.
Міф: «Вищий DPI означає кращу якість веб-зображення»
DPI (крапки на дюйм) - це виключно інструкція для фізичного друку, яку веб-браузери повністю ігнорують. На телефонах та комп'ютерних моніторах різкість зображення визначається виключно розмірами в пікселях (наприклад, 1920x1080) та щільністю дисплея, а не вбудованими метаданими DPI.
Альфа-прозорість: PNG проти WebP
Традиційний JPG зовсім не підтримує прозорість - прозорі фони стають суцільно білими або чорними. PNG започаткував чисту 8-бітну альфа-прозорість, але WebP тепер забезпечує ідентичну якість прозорості при розмірах файлів, що менші на 40%.
0 байт завантажено на зовнішні сервери. Уся обробка виконується локально в пісочниці вашого браузера.