Blog
PNG Optimizasyon Teknikleri
- Ayrıntılar
- Kategori: Bilişim
- 29 Eylül 2011 tarihinde yayınlandı.
- THEMT tarafından yazıldı.
Web tasar?mlar? daha güzel hale getirmek ad?na ve de saydaml?k özelli?in sebebiyle PNG resim format?ndan uzak durmak mümkün de?il! Çok say?da kullanmak web sitenin yüklenme süresini artt?racakt?r ama sorun de?il! Optimizasyon ile bu problemi a?mak mümkün!
Resim Türü
Bilinmesi gereken önemli şeylerden bir tanesi, içinde meta-verisi bulunan PNG bir resim türü olduğudur. Photoshop kullanıcılarının bileceği PNG-8 (İndekslenmiş resim) ve PNG-24 (Gerçekrenk resim) gibi ve de Fireworks kullanıcılarının bilebileceği PNG-32 (Saydamlık ile gerçekrenk resim)
Aslında PNG'de kullanılabilir 5 resim türü vardır: Renksiz (Grayscale), Gerçekrenk (Truecolor), İndekslenmiş renk (Indexed-color) Saydamlık ile renksiz ve Saydamlık ile gerçekrenk! Ve tabi indekslenmiş renk türünün, resmi olmayan iki alt türü mevcut: bit saydamlığı ve palet saydamlığı.
Ayrıca Photoshop PNG'yi sadece üç türde kaydedebilmektedir: Saydamlık ile indekslenmiş renk, Gerçekrenk ve Saydanlık ile gerçekrenk. Fireworks PNG optimizasyonu konusunda çok iyi araçlara sahipken bu malesef Photoshop'da mümkün değil.
Fakat bu durumu OptiPNG ve pngcrush araçları ile çözmeniz münkün, aşağdaki bilgiler ile bu araçlarla ne yapabileceğinizi öğrenebilirsiniz:
- Bir resim için en iyi resim türünü belirlemek (Gerçekrenk'ten, indeklenmiş renke geçmek gibi)
- En iyi delta filteleri belirlemek
- En iyi sıkıştırma strajisi belirlemek ve renk derinliğini azaltmak
Bu işlemlerin hiç biri resim kalitesinde bir kayba sebep olmazken, PNG-resimlerinin boyutlarını düşürmektedir
1. Posterizasyon (Posterization)
Gerçekrenk resim türünde çok bilinen bir optimizasyon şeklidir! Photoshop'da Orjinal resimi açın, katmanlar (Layers) ekranının altındaki 
simgesine tıklayın ve karşınıza gelen menüde Posterize seçeneğine tıklayın.
Posterizasyon işlemi için düşük değerde bir seviye (level) seçin! Bunun için genellikle 40 idealdir. Son olarak resmi farklı şekilde kaydedin!
Orjinal resim, 84kb
İşlem sonrası, 53kb
2. Tam Saydam Alanların Resimsizleştirilmesi
Aşağıdaki iki resimi inceleyin!
75kb
30kb
İki resimde aynı gibi görünüyorken boyutları farklıdır! Peki neden? Önce biraz bilgi: Saydamlık (Alpha) kanallı bir PNG dosyasında pilsel bigisi RGBA şeklinde tutulmaktadır. R, G ve B, yani sırasıyla Red (Kırmızı), Green (Yeşil) ve Blue (Mavi) pikselin renklerini belirlerken Alpha (Saydamlık) saydamlık bilgisini belirtmektedir. Saydamlık değeri 0-255 arasındadır. 0 değeri alan kısım görünmezken, 255 değeri alan kısım tamamen görülebilirdir. Ara değerler ise yarı-saydamlıktır! Şimdi gelelim nedene: Bir resmin, diğer resimden dosya boyutu olarak büyüktür! Çünkü resmin saydamlık değeri sıfır alan yani görünmeyen yerlerinde hala gerçek anlamda bir resim mevcuttur! Tamam görünmemektedir ama o kısımlarda resim olmaktadır!
Çözüm:
- Boyutu büyük olan örnek resmi Photoshop'da açın
- Katmanlar (Layers) ekranını üzerinde, resmin küçük haline klavye üzerinde CTRL basık iken, farenin sol tuşu ile tıklayın ve bir seçim alanı oluşturun!
- Ana menüde şu kısımlara tıklayarak seçimi tersleyin: Select > Inverse
- Klavye üzerinde Q tuşuna basarak hızlı maske (Quick mask) kipine geçin!
- Ana menüde Image > Adjustments > Threshold kısımlara tıklayın ve seviyeyi (Level) en büyük değeri verin!
- Klavye üzerinde Q tuşuna basarak hızlı maske (Quick mask) kipinden çıkın ve ana menüde Edit > Fill kısımlarına tıklarak boyama (Fill) aracı ile seçili kısımları siyaha boyayın!
- Ana menüde şu kısımlara tıklayarak seçimi tekrar tersleyin: Select > Inverse
- Katmanlar (Layers) ekranını altında bulunan
add a mask simgesine tıklayarak maske atayın!
Resimi PNG-24 olarak kaydettiğinizde boyutunun küçüldüğünü göreceksiniz.
3. Saydamlık Ayrımı
Saydamlıkta üç durum olmaktadır:
- Hiç görünmez yani sıfır değer durumu
- Tam görünür yani 255 değer durumu
- Yarı-saydam yani 0> ve < 255 değer durumu
Bu durumlardan; resimde, birinci ve ikinci öğeye sahip alanları, üçüncü öğeye sahip alanlardan ayırmak ve farklı PNG resim türlerinde kaydetmek, daha faydalı olmaktadır!
Böylece birinci ve ikinci öğeye sahip alanları yani saydamlığın olmadığı "resim kısmı"larını, PNG-8, GIF yada JPEG formatında, üçüncü öğeye sahip alanlara yani saydamlığa sahip kısımları da PNG-24 formatında kaydetmek, dosya boyutunda büyük ölçüde avantaj elde etmemizi sağlamaktadır.
- Örnek olarak aşağıdaki resmi Photoshop'da açın.
- Katmanlar (Layers) ekranını üzerinde, resmin küçük haline klavye üzerinde CTRL basık iken, farenin sol tuşu ile tıklayın ve bir seçim alanı oluşturun!
- Kanallar (Channels) ekranını altındaki Save selection as channel simgesine tıklayın ve yeni bir kanal oluşturun!
- Seçimi iptal edin (Klavye üzerinde CTRL+D), yeni oluşturduğunuz kanalı seçin ve ana menüde Image > Adjustments > Threshold kısımlara tıklayın ve seviyeyi (Level) en büyük değeri verin!
- Bu kanalı, resimden ayıracağız, bunun için Kanallar (Channels) ekranını üzerindeki yeni oluşturduğunuz kanalın üzerine, klavyede CTRL basılıyken farenin sol tuşu ile tıklayın!
- Katmanlar (Layers) ekranını üzerinde, resmi seçin ve ana menüde Layer > New > Layer via Cut kısımlara tıklayın! Tamamdır!
Bu işlemlerden sonra, aşağıda göründüğü gibi iki ayrı resim olacak şekilde kaydetmek gerekiyor! İlk ve ikinci resimde göründüğü gibi (Kaydetmeden önce ikinci resimde "1. Posterizasyon (Posterization)" başlığı altında anlatılan işlemi yapın), resim altındaki açıklamalar bilgiler eşliğinde, resimleri ayrı ayrı kaydedin!
Yarı-saydam olmayan alanlar
PNG-8
128 renk
Dithering
Sonuç: 17kb
Yarı-saydam olan alanlar
PNG-24
posterizasyon: 35
Sonuç: 6kb
Kıyaslama:
Önce
63Kb
Sonra
23Kb
Notlar
Yazıyı, Kaynak(lar) başlığı altındaki sayfa(lar)dan yararlanarak yazdım, 1:1 çeviri yapmak yerine, gerekli ve önemli kısımlarını çevirdim, çeviriyi yaparken, anlaşılırlık için orjinal yazıya çok fazla sadık kalmadım ve kendi tecrübemi de katarak yazdım! Yazının tüm hakkı bana aittir! Kaynak gösterilerek kullanabilirsiniz...
