Formati slika: WebP, PNG, JPG i SVG u poređenju
Izbor pogrešnog formata slike može da usori učitavanje stranice ili da zamuti vašu grafiku. Evo kako se moderni veb formati porede po kompresiji, transparentnosti i oštrini.
Ваши фајлови се обрађују искључиво у вашем веб прегледачу помоћу HTML5 Canvas и WebAssembly технологија. Ниједан податак не напушта ваш уређај.
Захваљујући WebAssembly технологији, конверзија се одвија тренутно без чекања на отпремање и преузимање.
Усклађеност са ISO, W3C и IETF спецификацијама обезбеђује компатибилност на различитим оперативним системима.
Тестови и перформансе
| Излазни формат | MIME Тип | Спецификација | Тип |
|---|---|---|---|
| PNG slika | image/png | W3C-PNG | Portable Network Graphics |
| JPG JPEG slika | image/jpeg | ITU-T-T81-JPEG | Joint Photographic Experts Group |
| WebP slika | image/webp | RFC-6386-VP8 | Google WebP moderni format slike |
| SVG vektor | image/svg+xml | W3C-SVG | Skalabilna vektorska grafika |
| HEIC fotografija | image/heic | ISO-IEC-23008-12-HEIF | High Efficiency Image Container |
| AVIF slika | image/avif | AOMEDIA-AV1-AVIF | AV1 format datoteke slike |
| PSD Photoshop Document | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Adobe Photoshop Document |
| PSB Photoshop Large Document | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Adobe Photoshop Large Document |
| 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 File Interchange Format |
| TGA Truevision | image/x-tga | TGA-SPEC | Truevision napredni raster |
| PCX ZSoft | image/x-pcx | PCX-SPEC | ZSoft Paintbrush PCX Bitmap |
Техничке спецификације и анализа кодека
Brzo pravilo za donošenje odluke o formatu
Koristite WebP ili AVIF za moderne veb-sajtove (30% su manji od JPEG-a uz podršku za transparentnost). Koristite JPG za fotografije gde sitni, neprimetni artefakti kompresije nisu važni. Koristite PNG za snimke ekrana, korisnički interfejs (UI) grafiku i ilustracije koje zahtevaju kristalno oštar tekst. Koristite SVG za logotipe i ikone kojima je potrebno beskonačno skaliranje.
Raster u odnosu na vektor: Zašto SVG nikada nije zamućen
Raster slike (JPG, PNG, WebP) jesu mreže fiksnih piksela u boji - ako zumirate previše, postaju mutne ili pikselizovane. SVG je čista matematika: on skladišti matematičke linije, krivougaone oblike i boje, omogućavajući da se ikone i ilustracije prikazuju oštro kao žilet na svemu, od ekrana mobilnih telefona do 8K displeja, uz veoma male veličine datoteka.
Mit: „Veća DPI vrednost znači bolji kvalitet veb slike"
DPI (tačaka po inču) je čisto fizičko uputstvo za štampanje i veb pretraživači ga u potpunosti ignorišu. Na telefonima i računarima, oštrina slike je u potpunosti određena dimenzijama u pikselima (npr. 1920x1080) i gustinom ekrana, a ne ugrađenim DPI metapodacima.
Alfa transparentnost: PNG u odnosu na WebP
Tradicionalni JPG uopšte nema podršku za transparentnost - providne pozadine postaju potpuno bele ili crne. PNG je uveo čistu 8-bitnu alfa transparentnost, ali WebP sada pruža identičan kvalitet transparentnosti uz veličine datoteka manje do 40%.
0 бајтова послато спољним серверима. Сва обрада је извршена локално у безбедном окружењу вашег прегледача.