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 

Bitmap ve Vektör Grafik Türleri

Eminim çoğumuz bu kavramları duymuşuz ya da görmüşüzdür. Bunlar bilgisayar ortamında kullanılan iki çeşit grafik türüdür.

Yazıda ilk olarak iki grafik çeşidini kısaca açıklayacağım. Ondan sonra iki grafik çeşidini hangi programlar ile yapabileceğinizi, bunların hangi uzantılarda olabileceğini, iki çeşit arasında nasıl geçiş yapabileceğinizi anlatacağım.

Yazıya başlamadan önce aşağıdaki iki grafikten hangisinin vektörsel hangisinin Bitmap olduğuna bakalım.

Aslında bu iki grafikte Bitmap türüdür. Çünkü grafikleri büyüttüğümüzde ikisi de bozulmaya başlar, bunu ctrl ve + tuşlarına aynı anda basarak yakınlaştırarak yapabilirsiniz. Gördüğünüz gibi iki resimde de onları oluşturan pikseller belli olmaya başlar. Yakınlaştığınızda gördüğünüz gibi yazılarda ve sayfanın bazı kısımlarına herhangi bir bozulma olmaz, çizgileri ilk baştaki kadar keskindir. Bu tarz yazı ve diğer grafikler tahmin edebileceğiniz gibi vektörsel grafiklerdir.  Şimdi bunun nasıl olduğuna bakalım.

Vektörsel grafikler: Vektör grafikleri çözünürlükten bağımsız matematiksel ifadeler kullanır. Örneğin bir doğruyu düşünürsek o doğru için bilgisayarda şu tarz bilgiler bulunur; başlangıç ve bitiş noktaları arasındaki uzaklık, doğrunun rengi ve kalınlığı. Aynı şekilde daireyi düşünürsek onun da rengi ve yarıçapının uzunluğu tarzı bilgileri vardır.  Ancak vektörsel grafikler her zaman bu kadar basit olmaya bilir. Örneğin bu yazıdaki harfleri düşünürsek bunlar sadece yarıçap, kalınlık uzunluk gibi basit tanımlanamazlar. Bilgisayar bunları oluşturmak için “anchor point” ler kullanır. Bu anchor pointler aşağıdaki a harfini çevreleyen mavi noktalardır(her programda aynı olmayabilir adobe illustrator programından kestim).

Bunun gibi karmaşık vektörsel grafiklerde “anchor point”lerin herbirinin ayrı bilgileri vardır örneğin o noktaya gelecek olan doğrunun eğrilik oranı, o noktadan giden doğrunun eğrilik oranı ayrıca bu tarz kapalı şekillerde içlerinin doldurulacağı renginde bilgisi bulunur. Bu noktacıkların oluşturduğu matematiksel fonksiyonların sayesinde de a harfini ne kadar büyütürseniz büyütün bozulmaz. Şimdi birazda bitmap grafik türüne bakalım.

Bitmap grafik: Bitmap türünden grafikler piksel denilen ufak karelerden oluşur bu kareleri aşağıda görebiliriz. Bu grafik aslında yukarıdaki kibritin baş kısmının büyütülmüş hali. Burada gördüğünüz karelerin her biri bir pikseldir. Buna bağlı olarak diyebiliriz ki aşağıdaki parçanın orijinal boyutu yaklaşık 14×13 pikseldir.(yükseklik x genişlik). Gördüğünüz gibi resmi bu boyutlarda büyütünce bize pek bir şey ifade etmez ancak bu piksellere uzaktan baktığımızda, gözümüz bu piksellerin kare olduğunu algılayamaz ve grafik bize gerçekmiş gibi gözükür. Bitmap tarzı grafiklerde vektörsellerde olduğu gibi belirli noktaların bilgileri yoktur onun yerine piksellerin her birinin ayrı bilgisi vardır.

Şimdi de bu iki türü hangi programlar ile oluşturduğumuza bakalım. Adobe Illustrator ve Corel Draw en çok kullanılan vektörsel tabanlı programlardır. Bunun dışında Adobe Freehand ve Adobe Fireworks ile de vektörsel çizimler yapılabilir. Bitmap türünden grafik oluşturabileceğiniz en yaygın programlar ise; Adobe Photoshop ve hepimizin aşina olduğu MS Paint’dir.

Vektörsel grafiklerin uzantıları genelde kullandıkları programların orijinal dosya uzantıları olur örneğin Adobe Illustrator’ın “.ai” dir. Ayrıca Corel Draw  “.cdr”, Adobe Freehand  “.fh”  uzantılarını kullanır. Bitmap uzantılarının en yaygın olanları ise “.jpg, .png, .gif, .bmp” türleridir.

Bu iki tür arasında geçiş yapmak bazı zamanlarda gerçekten çok işe yarar. Örneğin vektörsel yapmanız gerek bir logoda, aşağıdaki gibi bir palmiye ağacını kullanmanız gerekirse sağdaki sonucu elde etmek için tek tek noktalar belirleyerek bu işi yapmak gerçekten imkânsız derecede zor ve bir o kadar gereksiz bir iştir. Rakam vermek gerekirse sağdaki görüntüde yaklaşık 6200 tane anchor point vardır.

 

 

Ağacı sağdaki gibi vektörsel bir forma dönüştürmek için Illustrator programının live trace özelliğini kullanabilirsiniz. Bunu yapmak için, öncelikle Illustrator programında File menüsünden Place seçeneğine tıklayarak dönüştürmek istediğimiz resmi seçerek çalışmamıza atıyoruz daha sonra çalışmamızı seçiyoruz o anda yukarıda live trace butonuna basarak resmimizi dönüştürüyoruz.