Hatırlarsanız bundan önceki yazımda Bantgenişliğinden Konuşalım demiştim ve bantgenişliğinin ne olduğundan, o veya bu şekilde paraya dönüştüğünden bahsetmiştim. Sonunda da Türkiye’de bantgenişliğinin pahalı olduğuna değinmiştim. Eee madem ki bantgenişliği pahalı, o halde bu konuda olabildiğince ekonomik olmak zorundayız. Bunun için de sitemizde dikkat edeceğimiz bazı hususlar var. Bunlar arasında en önemlisi sitemizde kullanmış olduğumuz grafikler, resimler. Gönül isterdi ki en güzel, en kaliteli resimleri rahatça, gönlümüzün istediği gibi kullanalım fakat bantgenişliğimizin sınırlı olduğunu düşünerek malesef cömert davranamıyoruz. Şimdi gelin birlikte sitemiz için yapabileceğimiz grafik optimizasyonlarını inceleyelim.
Not: Eminim “Yöneylem” bilen arkadaşlar “Optimizasyon” yerine “En iyileme” dememi istemişlerdir :) fakat sanırım internet için optimizasyon daha uygun bir kelime…
1. Resmin boyututunu (genişlik ve yükseklik) küçültmek
İlk düşünmemiz gereken konu resimlerimizin büyüklüğü. Resimler ne kadar büyük olursa (genişlik ve yükseklik) resmin dosya olarak boyutu da o kadar büyür. Bu sebeple resimleri nasıl küçülteceğimizi bilmeliyiz. Küçültmek derken sakın html kodlarındaki büyüklük ve genişlikten küçültmeyi kastettiğimi sanmayın. Şu değil yani;
[html]<img src="resim.jpg" width="100" height="200" />[/html]
Html kodlarla resmin boyutunu küçültmek sadece tarayıcıda gösterirken küçük göstermeyi sağlar, resmin gerçek boyutunu küçültmez. Ayrıca böyle bir küçültmede resmin kalitesi düşer ve kötü görünür.
Benim kastettiğim bir grafik programıyla resmin boyutlarını küçültmek. Böylece resmin kalitesini bozmadan resmi istediğimiz kadar küçültebilir, istediğimiz boyutlara indirgeyebiliriz. En çok bilinen grafik programı Photoshop ile bunu göstermek gerekirse önce resimdeki gibi resminizi Photoshop ile açın. Dosya(File) menüsünden Aç(Open)‘ı seçerek resmi açabilirsiniz. Açmış olduğunuz resim şöyle görünecektir.
Şuanda bu gördüğünüz resmin boyutları 900×594 piksel ve dosya büyüklüğü 1,53mb. Bakalım işlemimizden sonra dosya boyutu ne olacak?
Resmimizi açtıktan sonra sıra geldi boyutunu küçültmeye. Bunu da Resim(Image) menüsünden Resim büyüklüğü (Image size) seçeneğini seçerek yapabilirsiniz.
Gördüğünüz gibi Width(Genişlik) ve Height(Yükseklik) yazan iki kutu var. Bu kutulara dosyanın boyutunu girerek dosyayı küçültebiliyoruz. Benim örnek olarak kullandığım resmin eski boyutu 900×594 piksel iken yeni boyutu 450×297 piksel. Dosya büyüklüğündeki değişmeyi soracak olursanız eskisi 1,53mb iken yenisi 379kb Yani yaklaşık 1,2mb kazandık :) Neden 450 pikseli seçtiğimi soracak olursanız ben sitemde yazılarımı yazarken resim koymak istediğimde genelde 450 piksel yapıyorum genişliği. Böylece tasarımı bozmuyor. Aslında birazcık daha büyütebilirim yani stil dosyamdan tam ihtiyacım olan genişliği biliyorum fakat emniyet payı bırakıyorum diyebilirim ;)
2. Resmin kalitesini düşürmek
Başlığa bakarak yanılmayın. Resmin kalitesini düşürmek derken insan gözünün algılayamayacağı kadar bir kalite düşürmeden bahsediyorum. Bunu yapmak için de resminizi kaydederken çıkan kaydetme penceresinden faydalanabilirsiniz.
Resimde görmüş olduğunuz Quality yani Kalite çubuğunu kaydırarak veya “12” sayısının yazdığı kutuya istediğiniz değeri yazarak kaliteyi düşürebilirsiniz. Kaliteyi düşürürken dikkat etmeniz gereken aşırıya kaçmamak. Her yaptığınız değişiklikte resme bir bakın, acaba gözü bozacak kadar mı kalitesi düştü diye. Anlayacağınız düz bilgisayarcı mantığıyla yani dene-yanılla sonuca gidiyoruz. ;)
3. Resmin türünü değiştirmek
Kimi resim vardır jpeg olarak daha az yer kaplar, kimi resim gif, kimisi ise png. Bu üç formatın da farklı özellikleri bulunmakta. Bu farklara başka bir yazımda değinirim. Bu yazımda konumuz hangi dosya tipinin en az yer kaplayacağı. Malesef bunun için kesin bir standartımız bulunmuyor. Bunu da öğrenmenin yolu dene-yanıl’dan geçiyor :) Dosyayı kaydederken farklı türlere dönüştürün ve boyutuna bakın. Tabi boyutun yanında resmin kalitesine de bakmayı unutmayın. Hem görüntü güzel hem de boyutu uygunsa seçmiş olduğunuz tür doğru türdür.
4. “Resmi Web İçin Kaydet”mek
Sıra geldi en önemli kısma. Bu başlığı bilerek en sonlara ayırdım (Balığı direk vermemek lazım :) ) Bahsettiğim konu Photoshop’ın “Web için kaydet” (Save for web) aracı. Bu araç Photoshop’ın internet ortamı için hazırlamış olduğu bir araç. Bunun sayesinde dosyanın hem türünü değiştirebiliyor, hem kalitesini ayarlayabiliyor hem de kullanacağı renk miktarını belirleyebiliyorsunuz (ve birkaç özellik daha). Yani tek başına her şeyi yapıyor gibi.
Bu araca Dosya (File) menüsünden ulaşabilirsiniz. Web için kaydet yani Save for web seçeneğini seçtiğiniz zaman aşağıdaki gibi bir ekran karşınıza gelecek.
Solda resim, sağda da ayarları görüyorsunuz. Artık bu ayarları kurcalamak size kalmış. Zaten göreceksiniz ki kullanımı oldukça basit bir araç. Ayarlar bölümünde dosya tipini seçme listesi(jpeg, gif…), resim kalitesi kaydırma çubuğu ve seçeneklerini görecebilirsiniz. Onları değiştirerek resmimizi dilediğimiz gibi düzenleyebiliyoruz ;)
5. Resminizi parçalayın
Biliyorum biraz kaba bir başlık oldu fakat gerçekten de parçalıyoruz :) Photoshop’ın araçlar menüsünden “slice” yani “dilimle” aracını seçtikten sonra resmi dilediğimiz gibi dilimlere ayırıyoruz. İşlemimiz bittiğinde “Web için kaydet” diyoruz ve aşağıdaki gibi bir resimle karşılaşıyoruz.
Resimden de anlayabileceğiniz gibi her parçayı ayrı ayrı düzenleyebiliyoruz. Sonuç olarak tek bir büyük resim göstermek yerine parça parça küçük resimler göstermiş oluyoruz.
Şunu unutmamanız gerekir ki resimler kendi sitenizde bulunduğu sürece görüntülendiklerinde, sizin bantgenişliği harcarlar. Fakat eğer resmi başka bir sunucudan çekerseniz ki bu bedava sunucular olabilir, siteniz bu resimin yükünden kurtulmuş olur. Yani sizin değil, resmi aldığınız sunucunun bantgenişliği harcanır. Örneğin Image Hosting sitesinden bu maksatla faydalanabilirsiniz. Veya dilerseniz arama motorlarından “image hosting” diyerek benzer sitelere ulaşabilirsiniz.
Sanırım artık bantgenişliği kavramı zihnimize iyice yerleşmeye başladı. Bununla birlikte bantgenişliğini ekonomik kullanma yollarından grafik optimizasyonunu da öğrenmiş olduk.
Bir sonraki yazılarımda kod ve stil optimizasyonlarına değineceğim. Tekrar görüşmek dileğiyle hoşçakalın…
