Selam!
Bu konuya biraz tedirgin bakıyorum. Çünkü bu konu üzerinde sürekli fikir değiştiriyordum. Ama uzun süren araştırmalar ve milyonlarca tatbiklerim sonucunda webde görselleri nasıl optimize edebileceğimi belirledim, toparladım, ve size de söylemem gerektiğini düşündüm. Malum bu işler paylaşınca eğlenceli oluyor:)
Önce dijital görüntü biçimlerini tanıyalım, çünkü sadece isimlerini biliyoruz bazen açılımları bile önemli olmuyor, ama ne işe yaradıklarını bilmek hepimiz için en birinci güzel şey değil mi:) Görüntü biçimleri kayıplı(lossy) ve kayıpsız(lossless) olarak ikiye ayrılıyor.

Bakalım aşağıda ne varmış;

JPEG: .JPG, .JIF, . JFF, .JFIF formatın işletim sistemine göre değişen diğer uzantılarıdır. Joint Photographic Experts Group tarafından geliştirilmiştir (açılımı). Neredeyse tüm bilinen grafik okuyucu programlar jpeg gösterebilir. Kayıplı bir formattır en az kayıplı sıkıştırma 1/20, en fazla kayıplı sıkıştırma ise 1/100 oranında olur. Yüksek frekanslı resimlerde bu format kullanılır. Fakat keskin hatlı çizimlerde ve belirgin geçişleri olan görsellerde bu format tercih edilmez çünkü fazla kayıplı görünecektir. Yüksek frekanslı görsellerde (Çiçekli böcekli fotoğraflar vb.) insan gözü ortalama değerde jpgdeki sıkıştırma kayıplarını algılamaz. Ayrıca jpeg saydamlık özelliğine sahip değildir. Ben genel olarak %60-70 arası sıkıştırma değeri kullanıyorum.

GIF: Açılımı (Graphics Interchange Format) Grafik Değiştirme Biçimi anlamına gelir. Kayıpsız bir formattır. 256 renge kadar destek verir, ayrıca saydamlık özelliği de var. Bazı küçük animasyonları da (buton, hyperlink banner, vs.) gif formatında oluşturabilirsiniz.

PNG: Açılımı Portable Network Graphics’tir yani Taşınabilir Ağ Grafiği. Transparan özelliği vardır. Üstün sıkıştırma özelliği sayesinde görüntü kaybı olmadan görselleri optimize etmenize yarar. Web tarayıcılarında genel anlamda destek vardır. Fakat explorer 6 ve öncesi transparan png ye destek vermemektedir. Tabi bu bi kaç css filtresiyle çözülebiliniyor. Değil mi Gözde?:)

SVG: Aslında bir görüntü formatı sayılmadığını düşünüyorum. Ölçeklenebilir vektörel grafikler; XML kullanılarak tanımlanır. Animasyon da olabilirler. Vektörel olduğu için webde çok az yer kaplayacağından çok kullanışlı olduğunu düşünüyorum. Fakat çok fazla kullanılmıyor çünkü svg viewer tüm bilgisayarlarda standart olarak bulunmuyor. Aşağıda wikipediadan aldığım görselde svg ve gif,jpg,png arasındaki farklılığı görebilirsiniz;

Ayrıca W3 Konsorsiyum svgnin kullanımını öneriyor. Kullanımın yayılmasını biz de umuyoruz. Keza web pixel tabanlı görselleri kullandığından, “vektörel görseller” web tasarımın sınırlarının esnemesine sebep olacağını düşünüyorum.

Velhasıl-ı kelam bu konu burada belirttiğim 3-4 noktadan daha uzun ve derindir bence. İlgili sorularınız ya da yorumlarını bekliyorum ki unuttuğum eksik kalan noktaları tamamlayayım değil mi:)

Yazar Hakkında:  Merhaba Ben İlkay TURAN. Crema'da "Web Designer" olarak çalışıyorum. 10 yıldır dijital tasarımla ilgileniyorum. Yaklaşık 5 yıldan beri profesyonel olarak tasarım yapıyorum. Clubcrema 'da bilgi ve tecrübelerimi sizinle paylaşmak için yazıyorum. Kod adı: ilkay.psd:)