Bu değerli bilginin ardından, artık paylaşımıma başlayabilirim. Arkadaşlar bu paylaşımımda birbirine denk olan formatları dövüştürerek, webde kullandığımız resimleri veya grafikleri, en iyi kalite ve en düşük boyutta kullanmak için hangi formatı kullanmamız gerektiğini sizlere göstermeye çalışacağım.

Diğer bir deyişle, nasıl?, üretimlerimizin maliyetini düşük, kalitesini yüksek tutarız onu göreceğiz.

Başlamadan Önce

Evet, ölümcül dövüşlere başlamadan önce, bu dosya türleri hakkında sizlerle paylaşmak istediğim bilgiler var.

• Yukarıda da bahsettiğim gibi 2 adet PNG türü var, PNG 24 bit ve PNG 8 bit.
• PNG 24, IE 6 da sorun çıkartıyor, PNG 8 sorun çıkartmıyor. Ama bu durum için bir çok çözüm var.
• GIF’in animasyon oynatabilme özelliği var, PNG ya da JPG de bu özellik yok.
• Çok renkli resimler ya da grafikler için JPG ve PNG 24, az renkli grafikler, simge, ikon vs, için GIF ya da PNG 8 kullanıyoruz.
• Transparanlıkda ihtiyacımız olan 1 renk ise GIF’in ya da PNG 8′in matte özelliğini kullanabiliriz ama kusursuz bir transpanlığa ihtiyacımız varsa kesinlikle PNG 24 kullanmalıyız.

Çok Önemli İki Bilgi Daha

JPG Hakkında

Arkadaşlar yıllardan beri tasarım işleri ile uğraşanların bile JPG formatında resmi kaydederken kalite değeri olarak hep 100′ü seçtiğini gördüm. Oysa aşağıdaki resimde de görebileceğiniz gibi 80 kalite değerini seçtiğiniz zaman, dosya boyutunun düşmesine rağmen, gözle görülür bir fark bulmak çok zor, hatta 60′ı seçtiğimiz zaman bile dosya boyutunun çok daha düşmesine rağmen, çok dikkatli bakınca bir fark görebiliyorsunuz.

Kısacası kalite olarak 100′ü seçmeye gerek yok, duruma göre 80 ve 60 tercih edilmeli.

GIF ve PNG 8 Hakkında

Photoshop’ta, bir grafiği GIF olarak kayıt edeceğimiz zaman direk Colors bölümünde 256 seçili olarak gelir. Ben de uzun bir süre GIF lerimi hiç sorgulamadan direk 256 renk ile kayıt ettim.

Ama yakın bir geçmişte, resimde de görebileceğiniz gibi orada 256′nın dışında 128, 64, 32 gibi daha az renk sayısı kullanabileceğimi gördüm ve yaptığım denemelerde, grafiklerde daha az renk kullandığımda gözle görülür bir bozulma olmadığını ve dosya boyutunun 256 renkli haline nazaran daha azaldığını gördüm ve aynı durum PNG 8 için de geçerli.

İzin verin size bir örnek göstereyim

Yukarıdaki resimde görebileceğiniz gibi 256 Renk ve 128 Renk ile kaydedilen GIF ler arasında gözle görülür farklar yok ama boyuttan ne kadar tasarruf ediyoruz değil mi? Ve evet 64 renkte gözle görülür bozulmalar başlıyor ama en azından bu durum bu grafik için böyle daha az renge sahip grafiklerde, net bozulmalara rastlamadan, çok daha az renk kullanabiliriz, denemeler yapmak lazım.

Artık Dövüşler Başlasın

Küçük bir simgede, GIF, PNG 8′e karşı

Gördüğünüz gibi bu ilk musabakada, 285 bytlık bir fark ile GIF galip geliyor ve gördüğünüz gibi kalite olarak gözle görülür bir fark yok.

Büyük bir simgede, GIF, PNG 8′e karşı

Tekrar 220 bytelık bir fark ile GIF galip geliyor. Ama burada esas dikkat çekmek istediğim nokta, PNG 24′ün transparanlık konusunda kusursuz olduğu.

Normal bir resimde, JPG, PNG 24′e karşı

Arkadaşlar gördüğünüz gibi JPG bu tip bir resimde PNG 24′ü 174 KB lık bir fark ile deyim yerindeyse ezip geçiyor. JPG’in kalitesini 80′e ve 60′a çekebildiğimizi de hatırlarsak fazla bir söze gerek kalmıyor.

Geçişli renklere sahip bir grafikte, GIF, PNG 8′e karşı

PNG 8 ilk defa GIF’i alt ediyor ve 1505 bytelık bir fark atıyor. Ama işin ilginç yanı ise PNG 24′ün 436 byte gibi bir boyut ile hem GIF’i hem de PNG 8′i alt etmesi.

Bu durum üzerine başka geçişli grafikler ile de aynı testi yaptım ve sonuç değişmedi. PNG 24 inanılmaz boyutlara düşürdü grafiği.

Bu Testler Sonucunda Neler Öğrendik

• Transparanlık konusunda PNG 24 bir numara
• Gradient dediğimiz renk geçişli grafiklerde birinci PNG 24, ama PNG 24 kullanmak istemessek, IE6 sorunundan dolayı, PNG 8 GIF karşısında üstün
• Normal resimlerde 80% ya da 60% kalitede JPG en iyi çözüm ve zaten JPG sadece normal resimlerde başarılı.
• Simgelerde, ikonlarda, kısacası az renkli grafiklerde GIF, PNG 8 karşısında üstün.

Şöyle Bir Durum Var

Arkadaşlar sizlerde lütfen bu konudaki tecrübelerinizi paylaşın yorum bölümü aracılığı ile sunduğum bilgilerde yanlışlarım varsa söyleyin. Veya siz hangi durumlarda hangi formatı neden kullanıyorsunuz bundan bahsedin, lütfen. Bu test sonuçlarına katılıyormusunuz, katılmıyormusunuz?

Bu Arada

RSS yayınıma hala üye olmadıysanız, çok darılırım

HTTP-İsteği mi? O da ne?

Peki bu sunucuya yaptığımız istekler yani HTTP-İstekleri nelerdir? Kim kimden ne istiyor? Ve bu isteklerin sayfamızın performansı ile ilgisi nedir? Aşağıdaki videoda bu konu üzerine konuşuyorum.

Kaynaklar

• Videoda bahsettiğim Yahoo ekibinin bulgularının yer aldığı ve videoda kullandığım tablonun bağlantısı Performans Araştırması 1
• Videoda tanıttığım Web Sayfası Analiz Uygulaması

Düşünceleriniz

Peki sizin bu konu hakkındaki düşünceleriniz nelerdir? Projelerinizde özen gösteriyormusunuz bu konuya? Ya da bu videoyu izledikten sonra ne düşünüyorsunuz?

İzin Verin…

Paylaşımlarımın haberini size ben getireyim, bunun için RSS yayınıma üye olabilisiniz ya da beni Twitter‘da takip edebilirsiniz.