Transparent uygulamalarda PNG, gif'e göre çok daha iyi sonuç verebilen bir formattır. Hiç optimizasyon uygulamadan bile (bazı durumlar hariç) daha az yer kaplar. Fakat tasarımlarında photoshop kullananlar bilir ki, jpeg, gif gibi formatlarda optimizasyon için birçok seçenek varken, png dosyalar için durum pek de iç açıcı değildir.
Bahsettiğimiz konu masaüstü yayıncılık işlerinde, yani katalog, broşür el ilanı, poster gibi medya işleri için pek geçerli değildir, çünkü bu tip işlerde kaliteden ödün vermeniz gerekmez, hatta kaliteyi en üst seviyede tutmanız gerekir.
Fakat iş website tasarımına geldiğinde durum değişir, web sitenin açılma hızı site içeriğiyle yakından ilişkilidir (siteye koyacağınız bir resim, yazacağınız onlarca sayfa yazıdan daha fazla yer kaplayabilir), hele site çok sayıda fotoğraf içeriyorsa, hem açılma hızı hem de bant genişliği açısından sıkıntıdasınız demektir.
Bu sebepten siteye koyacağınız resimler için, kaliteyi de çok düşürmeden, farkedilmeyecek ölçülerde optimizasyon yapmanızda fayda vardır.
Bu yazımızda png dosyalarını photoshop kullanarak hızlı bir şekilde optimize etmeye çalışacağız...
Fig1. - 56kb 214X240.
Fig2. - 37kb 214X240.
Sol taraftaki iki resim görsel kalite olarak hemen hemen aynı olmalarına rağmen, üstteki dosyanın boyutu 56kb altındaki dosyanın ise 37 kb'dır.
Özellikle full background slayt show kullanan veya sitesinde çok sayıda png resim kullanan web tasarımcıları için, kullandıkları resimlerin kaliteli fakat düşük boyutta olması, sitenin açılma hızı ve bant genişliği kullanımı açısından önemlidir.
Vermiş olduğum örnekte ebatlar küçük olduğu için, 19kb'lık bir fark çıktı, size çok önemli görünmeyebilir, fakat dosya ebatlarınız büyüdüğünde bu fark yarı yarıya kadar olacaktır.
Şimdi bu durumu nasıl elde ettik kısaca görelim.
1-Posterize
Posterize metodu hızlı bir optimizasyon için başvuracağımız ilk araçtır.
Posterize, resmin renk yoğunluğunu azaltır ve benzer olan renk geçişlerini birleştirir. Bu sebepten orjinal dosyaya göre daha az yer kaplamasını sağlar.
Şunu da unutmamak gerekir ki bu ve benzeri işlemler orjinal resme göre kaliteyi düşürebilir, fakat resmi çok büyütüp incelemedikçe farkedilecek bir durum değildir. Web için kullanacağınız resimlerde bu işlemler optimizasyon için idealdir.
İlk resmi bilgisayarınıza indiripi photoshopta açın, layer panelinin alt kısmında "new adjustment layer" 
butonuna tıklayarak, posterize'ı seçin, seviyeyi de 40-50 civarında belirleyin.
Fig3. - Posterize işleminin uygulanması
Dosyanızı bu şekilde kaydederseniz yaklaşık 40kb'lık bir boyuta indirmiş olursunuz. Optimizasyonu burada bitirebilirsiniz.
2-Gizlenmiş detaylar
1. - Şeffaf alanın seçimi.
2. - Quick Mask uygulanmış hali.
3. - Şeffaf alanın siyah ile doldurulması.
4. - Vektor mask uygula ve kaydet.
Alfalı truecolor resimlerdeki herbir piksel 4byte ile tanımlanır:RGBA. Sonuncu değer alfa(alpha) değeridir, piksellerin şeffaflık(transparent) değerlerini kontrol eder, "0" değeri tamamen şeffaf(transparent ) 255 değeri ise tamamen opak anlamına gelir. Yani, aslında RGB değerleri olan herhangi bir piksel alfa(alpha) değeri ile saklanabilir, tamamen şeffaf görünmekle birlikte hala RGB değerlerini taşıyan pikseller olduğu için dosya boyutu yüksektir, bizim amacımız bu değerleri silmek.
1-"Magic Wand Tool" kullanarak resimdeki şeffaf alanı tıklayın, bu sayede resmin şeffaf kısmını seçmiş olacaksınız, "Q" kısayol tuşuna basarak Quick Mask uygulayın.
2-Sadece şeffaf pikselleri seçmemizi sağlamak için,
Image > Adjustment > Threshold
seçin, threshold seviyesini kaydırıcıyı sağ tarafa sürükleyerek 255 değerine getirin, bu sayede sadece şeffaf olan alan seçilmiş olacaktır.
3-Şimdi tekrar "Q" kısayol tuşuna basarak maskı kaldırın ve seçim haline dönün ve seçim alanını siyah ile doldurun, seçimi ters
Select > Inverse
çevirerek esas figürümüzü seçili hale getirin.
4-Layer paletin alt kısmındaki 
"Add Vector Mask" düğmesine tıklayarak maskeleme işlemini tamamlayın.
Dosyanızı bu haliyle png olarak kaydettiğinizde boyutunun 37kb'ta düştüğünü görecekseniz.
Sonuçlar/Öneriler:
- Örnek olarak verdiğimiz dosyaların boyutları küçük olduğu için, optimizasyon farkları çok yüksek çıkmadı, fakat sitenizde bu dosyalardan binlerce varsa önemli olmaya başlar, ayrıca daha büyük dosyaları bu yöntemlerle optimize ettiğinizde bu farklar daha da artacaktır.
- Ayrıca şunu da belirtmekte fayda var, burada bahsettiğimiz konu frontend tasarımcıların ve yazılımcıların dikkat ettikleri site performansını artırıcı optimizasyonlardır.
- Yoğun trafiğe ve içeriğe sahip siteler için yapılması zaman / performans açısından olumludur...
- Yaptığınız çalışmalara ve harcadığınız emeğe bu kısmı da gözönünde bulundurarak devam edin.
Photoshop aşamasında, website tasarımını yüksek boyutlu fotoğraflarla yapmak görsellik anlamında güzeldir, fakat siz bu siteyi internette yayınlayacaksınız kitap olarak basmayacaksınız ki, hele bir de herkesin internet bağlantı hızının sizinki kadar yüksek olmadığı düşünüldüğünde, sitenin açılması dakikalar alabilir.
Sadece photoshop veya herhangi bir ortamda site tasarlayıp, yazılım kısmını düşünmeyen tasarımcılarda yaşanan en önemli sıkıntılardan biri budur, görsellik mükemmel, fakat site çok hantal, bekle ki site açılsın, ne anladım ben bu işten...
Tasarımcının görsel medyayı hazırlarken, optimizasyon konusuna kesinlikle dikkat etmesi gerekir. Hele tasarladığınız websitenin mobile ortamlarda da yayınlanacağı düşünülürse, hem kullanıcı, hem de site sahibi açısından, bant genişliği, limit problemi an meselesidir.
Şunu da unutmayın, websitenin görsel medyası için CDN (Content Delivery Network) servislerinin kullanılması, site açılma hızı ve bant genişliği limiti açısından çok büyük fayda sağlayacaktır.
Bu arada tekrar belirtmek isterim, ben de websitenin görsel olanını severim, amacımız görselliği sıfıra indirmek değil tabii...
Kolay gelsin, görüşmek üzere...
