JPG GIf ve PNG formatları
Başlangıç olarak web için kullanılan en yaygın 3 format hakkında kısaca bahsedelim
Jpeg (Joint Photographic Experts Group)
JPG formatı, resim işleme programlarının yüksek Mb’lı dosyaları sıkıştırarak disk üzerinde kayıt edebileceğiniz bir formattır. JPEG veya JPG formatının özelliği gerçek renk değerlerini içermesidir. Bu nedenle fotoğrafsal (çizgisel/grafiksel olmayan) görüntüler için kullanılmalıdır. Jpg kayıplı sıkıştırma yöntemini kullanır yani gözle fark edilmeyecek detayları silerek dosyanın boyunu azaltır bunu pikselleri birleştirerek yapar. Jpg saydamlığı desteklemez. Jpg biçimi hareketli resimleri desteklemez.
Gif(Graphics Interchange Format )
GIF, bir sayısal resim saklama biçimidir. Kayıpsız sıkıştırma kullanır. 8-bit renge (yani 256 renge) kadar destek verir ve 1-bit’lik (yani tek renk için) saydamlık sunar. Bu uzantı hareketliliği destekler.
Png (Portable Network Graphics)
PNG Portable Network Graphics formatı patentsizdir. PNG kayıpsız Wave Table sıkıştırma yöntemini kullanır. Şu anda mevcut olmayan kayıpsız gerçek renk ve saydamlık bilgilerini içeren resim kalitesini internet’e taşımayı amaçlamaktadır. PNG biçimi hareketli resimleri desteklemez.
Şimdi bu formatlar arasındaki farklara örnekler ile bakalım. Aşağıda arka planında resim ve üstünde yazı olan bir banner bulunmakta ( egitimmateryalleri.com ). Bu banner ı kaydederken eğer jpg olarak kaydederseniz yazı kısımlarında bir bozukluk olduğunu görürsünüz. Bunun nedeni yukarıda belirtildiği gibi jpeg formatının çizgisel/grafiksel olmayan görüntülerde sorun çıkarmasıdır. Ancak burada banner ı kaydederken gif formatında kaydetseydik bu defa da arkadaki manzara resmi bozulurdu.

Yukarıdaki kargaşayı önlemek için yalnızca yazının(egitimmateryalleri) bulunduğu yeri “slice tool” ile bölüp ondan sonra kaydedersek, resmin kalitesini arttırabilir ve aynı zamanda boyutunu düşürebiliriz. Bunu yapmamın amacı yukarıda jpeg ile yaşadığımız sıkıntıyı yalnızca yazının bulunduğu slice ı gif veya png yaparak çözmek. Bunu yapmamdaki amaç resmin kalan parçalarında(manzarada) bozukluğa neden olmamak ve dosyanın boyutunu minimum tutmaktı. Parçalara bölme yönteminin bu banner için en iyi yöntem olduğu söylenemez ancak konuyu anlamanız için özellikle bunu seçtim. Aşağıda yazı için kullanmanız gereken formatların karşılaştırmaları var. Burada kullandığım resimleri, photoshop’un file menüsünden Save for Web & Devices seçeneğine tıkladığınızda karşınıza çıkan pencereden kestim, isterseniz sizde kendi kendinize bu formatları karşılaştırabilirsiniz.
İlk olarak aşağıda iki farklı kalitede (128,256) gif ve kalitesi 60 olan jpg formatlarını karşılaştıralım. Ardaki farkı görebilirsiniz jpeg in boyutu daha fazla olmasına rağmen, 128 ve 256 renkli gif daha başarılı. Burada gif in daha iyi olmasının nedeni grafiksel öğelerdeki performansıdır.

Aşağıda jpg ve png karşılaştırması var. Burada png ve jpeg in kalitesini max. yaptım ve çok iyi sonuçlar verdiler ancak boyutları 3 katı oranda arttı. Web için bir görüntü hazırlarken en önem vermeniz gereken şeylerden biri görüntünün boyutudur. Eğer bu şekilde bannerı max. jpeg ve png formatında web e koyarsanız sayfanızın yavaş yüklenmesine neden olabilir. Onun yerine boyutu 3 e 1 oranında azalmış png 8 i kullanmanız daha mantıklı. Bu formatın kalite/boyut oranı diğerlerine göre oldukça yüksek bundan dolayı kalite azalması göz ardı edilebilir.

Bu arada png 8 ile gif 256 nın performanslarını karşılaştırmakta da yarar var. Yukarıda gördüğünüz gibi png 8 ve gif 256 kalite ve boyut olarak birbirlerine çok yakınlar. Önceleri pngnin transparanlık özelliği bazı internet tarayıcıları tarafından desteklenmiyorudu ancak şimdi neredeyse bütün tarayıcıların yeni sürümü, png yi destekler bu nedenle gönül rahatlığıyla kullanabilirsiniz:P
kaynaklar:
http://www.frmtr.com/bilgisayar-bilgileri/2553192-resim-uzantilari.html
http://tr.wikipedia.org/wiki/Graphics_Interchange_Format





