Görsel Formatları: WebP, PNG, JPG ve SVG Karşılaştırması
Yanlış görsel formatını seçmek sayfa yükleme sürelerini artırabilir veya grafiklernizi bulanıklaştırabilir. Modern web formatlarının sıkıştırma, şeffaflık ve keskinlik açısından nasıl karşılaştırıldığını burada bulabilirsiniz.
Dosyalarınız tamamen web tarayıcınızda, HTML5 Canvas ve WebAssembly kullanılarak işlenir. Cihazınızdan asla hiçbir veri çıkmaz.
Yükleme ve indirme kuyruklarını atlayın. Dönüştürmeler, sunucu sınırları olmaksızın yerel olarak tam makine donanımı hızında gerçekleşir.
Modern işletim sistemlerinde çıktı uyumluluğunu garanti etmek için resmi ISO, W3C ve IETF spesifikasyonlarına uygundur.
Format Karşılaştırması ve Teknik Özellikler
| Çıktı Formatı | MIME Türü | Özellik | Tür |
|---|---|---|---|
| PNG Görseli | image/png | W3C-PNG | Taşınabilir Ağ Grafikleri |
| JPG JPEG Görseli | image/jpeg | ITU-T-T81-JPEG | Joint Photographic Experts Group Formatı |
| WebP Görseli | image/webp | RFC-6386-VP8 | Google WebP Modern Görsel Formatı |
| SVG Vektörü | image/svg+xml | W3C-SVG | Ölçeklenebilir Vektör Grafikleri |
| HEIC Fotoğrafı | image/heic | ISO-IEC-23008-12-HEIF | Yüksek Verimli Görsel Konteyneri |
| AVIF Görseli | image/avif | AOMEDIA-AV1-AVIF | AV1 Görsel Dosya Formatı |
| 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 Gelişmiş Raster |
| PCX ZSoft | image/x-pcx | PCX-SPEC | ZSoft Paintbrush PCX Bitmap |
Teknik Özellikler ve Kodek Ayrıntıları
Hızlı Format Karar Kuralı
Modern web siteleri için WebP veya AVIF kullanın (şeffaflık desteği ile JPEG'den %30 daha küçüktür). Küçük ve fark edilmeyen sıkıştırma artıklerinin önemli olmadığı fotoğraflar için JPG kullanın. Ekran görüntüleri, arayüz grafikleri ve piksel keskinliğinde metin gerektiren illüstrasyonlar için PNG kullanın. Sonsuz ölçeklendirme gerektiren logolar ve simgeler için SVG kullanın.
Raster ve Vektör Karşılaştırması: SVG'ler Neden Asla Bulanıklaşmaz
Raster görseller (JPG, PNG, WebP) sabit renk piksellerinden oluşan ızgaralardır - çok fazla yakınlaştırırsanız bulanıklaşır veya piksellenirler. SVG saf matematiktir: matematiksel çizgileri, eğrileri ve renkleri saklar; bu sayede simgelerin ve illüstrasyonların mobil ekranlardan 8K ekranlara kadar her yerde son derece küçük dosya boyutlarıyla keskin bir şekilde oluşturulmasını sağlar.
Efsane: 'Daha Yüksek DPI, Daha İyi Web Görsel Kalitesi Anlamına Gelir'
DPI (inç başına nokta), tamamen fiziksel bir baskı talimatıdır ve web tarayıcıları tarafından tamamen göz ardı edilir. Telefonlarda ve bilgisayar monitörlerinde görsel keskinliği, gömülü DPI meta verileri tarafından değil, tamamen piksel boyutları (ör. 1920x1080) ve ekran yoğunluğu tarafından belirlenir.
Alfa Şeffaflığı: PNG ve WebP Karşılaştırması
Geleneksel JPG'nin sıfır şeffaflık desteği vardır - şeffaf arka planlar saf beyaz veya siyah olur. PNG, temiz 8 bit alfa şeffaflığına öncülük etmiştir, ancak WebP artık %40'a varan oranda daha küçük dosya boyutlarıyla aynı şeffaf kalitesini sunmaktadır.
Harici sunuculara 0 bayt yüklendi. Tüm işlemler tarayıcınızın korumalı alanında (sandbox) yerel olarak gerçekleştirildi.