CSS Sprite Tekniği Nedir ?

[Ahmet Doğukan G.]

Merhaba PC HOCASI forum okurları ve takipçileri ;

Uzun süredir SEO hakkında makale yazmıyordum. Tekrardan bu konulara da değinmeye başladım. Öncelikle benim şuan anlatacağım konu çok çok önemli. Şuan anlatacağım konuyu uzaktan da olsa anlayacaklar olanlar, benim önceki yazmış olduğum konuları okumuş kişilerdir . 

Sürekli diyorum ve bu konulara ilginiz varsa sürekli görüyorsunuzdur, site açılma hızı Google açısından oldukça önemli. Site hızına etki edecek bir çok etken mevcut, siteyi kendiniz yazdıysanız çok fazla kod kullanımı, Wordpress kullanıyorsunuz yada farklı içerik yönetim sistemi dediğimiz sistemlerden birini kullanıyorsanız, eklentiler, resimler sitenin açılma hızını etkileyen faktörlerdendir.
Benim burada ele almak istediğim konu ise resim konusu. Resim site hızını etkileyen en önemli bir etken. Örnek olarak, sitenizde bir içerik ürettiniz ve yüksek boyutlu ve kaliteli bir fotoğraf koydunuz, bu sizin sitenizin açılma hızını etkileyecektir, çünkü yüksek boyutlu bir resim kullandığınız için resmin gözükme süresi uzayacak ve site geç açılacak. Makul bir boyutta bir resim kullanarak bu sorunun üstesinden gelebilirsiniz ama her zaman değil. Bu yöntem sizi bir süre idare edecek çünkü bir süre sonra düşük boyutlu resimler bile daha sonra büyük bir dosya halini alacak. Resmin kalitesi ne kadar iyiyse, resmin boyutu o kadar yüksek olur. 



Peki bu soruna karşı ne yapacağız, yok mu bir çözümü ? Elbette var. İşte bu noktada CSS Sprite Tekniği devreye giriyor. Bu teknik, resimleri birleştirerek tek bir resim olmasını ve CSS kaynağına taşınarak hızlı bir şekilde gösterilmesini sağlar. Kısacası resimleri sıkıştırmak diyebiliriz. Şimdi 'ben CSS bilmiyorum ki" diyecek olanları tahmin edebiliyorum bu yüzden size 2 adet web sitesi vereceğim buradan kod bilgisine gerek kalmadan bu işlemi uygulayabilirsiniz. Wordpress'de bu tekniği bir takım eklentiler sayesinde sitenize uygulayabilirsiniz. Sadece konu hız değil tabi ki,  yüksek boyutlu resimler, daha fazla alan kaplar. Örnek olarak sitenize 5 tane resim yüklediniz, 180 KB boyuta sahip, bu boyut oldukça düşük gibi görünebilir ama web sitelerinde bu konu oldukça değişiyor. 180 KB web siteleri için yüksek bir boyut. Sınırsız bir hostinge sahip değilseniz bu konu oldukça önemli. Bu 180 KB boyutu, bu tekniği kullanarak makul seviyelere indirebilirsiniz. 

Bu tekniği, bu web sitelerini kullanarak kendi sitenize uygulayabilirsiniz. 

www.csssprites.com

www.spritegen.website-performance.org

Wordpress kullanıcıları ise, cSprites for WordPress eklentisini kullanarak bu tekniği sitelerine uygulayabilirler.

[onur.firatt]

Emeğine sağlık

[Ahmet Doğukan G.]

Emeğine sağlık

Teşekkürler.

[Ahmet Doğukan G.]

Teşekkür ederim.