Сравнение на графични формати: WebP, PNG, JPG и SVG
Изборът на грешен графичен формат може да увеличи времето за зареждане на страницата или да размаже вашите графики. Ето как съвременните уеб формати се сравняват по отношение на компресията, прозрачността и отчетливостта.
Файловете се обработват локално във вашия браузър с WebAssembly и HTML5 API. Те никога не напускат устройството ви, така че няма качвания на сървър или съхранение на файлове от трети страни.
Започнете да конвертирате веднага на собственото си устройство - без чакане за качване, без опашка за изтегляне и без ограничаване на скоростта от отдалечен сървър.
Използвайте всеки наличен инструмент, без да създавате акаунт, да плащате план или да достигате изкуствен лимит за размера на файловете. Конвертирайте толкова често, колкото браузърът и устройството ви позволяват.
Сравнение на формати и технически спецификации
| Изходен формат | MIME тип | Спецификация | Тип |
|---|---|---|---|
| PNG изображение | image/png | W3C-PNG | PNG изображение с висока резолюция, сканирано от документ |
| JPG JPEG изображение | image/jpeg | ITU-T-T81-JPEG | Сканиран документ в JPEG формат |
| WebP изображение | image/webp | RFC-6386-VP8 | Анимация с висока ефективност |
| SVG Експорт на CAD чертеж в | image/svg+xml | W3C-SVG | Векторно изображение, генерирано от CAD |
| HEIC снимка | image/heic | ISO-IEC-23008-12-HEIF | Високоефективен контейнер за изображения |
| AVIF изображение | image/avif | AOMEDIA-AV1-AVIF | AV1 файлов формат за изображения |
| PSD Photoshop Document | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Adobe Photoshop Document |
| PSB Голям документ на Photoshop | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Голям документ на Adobe Photoshop |
| WMF Windows Metafile | image/x-wmf | MS-WMF-SPEC | Windows Metafile Vector Format |
| EMF Enhanced Metafile | image/x-emf | MS-EMF-SPEC | Enhanced Metafile Vector Format |
| JFIF Image | 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 Bitmap |
| PDF документ | application/pdf | ISO-32000-2 | Преносим документ за съхранение на форматирана информация |
Технически спецификации и анализ на кодеците
Бързо правило за избор на формат
WebP и AVIF могат да намалят размера на много уеб изображения и поддържат прозрачност, но резултатът зависи от изображението и настройките за кодиране. Използвайте JPG за снимки, при които приемливи са малки артефакти от компресията, PNG за ясни екранни снимки и графики, а SVG за мащабируеми лога и икони.
Растерни срещу векторни изображения: Защо SVG никога не се размазват
Растерните изображения (JPG, PNG, WebP) представляват мрежи от фиксирани цветни пиксели - ако увеличите твърде много, те стават размазани или пикселизирани. SVG е чиста математика: той съхранява математически линии, криви и цветове, което позволява на иконите и илюстрациите да се изобразяват изключително отчетливо на всичко - от мобилни екрани до 8K дисплеи с малки файлови размери.
Мит: „По-високата DPI стойност означава по-добро качество на уеб изображенията“
DPI (точки на инч) е чисто физическа инструкция за печат и се игнорира напълно от уеб браузърите. На телефони и компютърни монитори остротата на изображението се определя изцяло от размерите в пиксели (напр. 1920x1080) и плътността на дисплея, а не от вградените DPI метаданни.
Алфа прозрачност: PNG срещу WebP
JPEG няма канал за прозрачност, затова при записването му прозрачните пиксели стават плътен фон. PNG запазва алфа прозрачността, а WebP също може да съхранява прозрачност и да създаде по-малък файл; сравнете резултатите, защото размерът зависи от съдържанието и настройките за кодиране.
0 байта са качени на външни сървъри. Цялата обработка се извършва локално в пясъчниците на вашия браузър.