Combine Images Using CSS Sprites Çözümü

Combine Images Using CSS Sprites, web sitelerinde yer alan görsellerin CSS Sprite kullanımı ile birleştirilmesini işaret eden bir ifadedir. CSS dijital literatürde, metinlerin ve formatların biçimlendirilmesinde kullanılan, işaretleme dillerinden biri olarak tanımlanmaktadır. CSS Sprite ise birleştirme işlemlerinde kullanılan, genellikle görsel içeriklerine odaklanan bir tekniktir.

CSS Sprite’ın kullanım amacı, bir web sitesinde ya da tema içerisinde barındırılan tüm görsellerin birleştirilerek gösterilmesi olarak belirtilmektedir. CSS Sprite yöntemi ile bir web sitesini ziyaret eden kullanıcının, birden çok görselin her birine ayrı ayrı sorgu yapması önlenmektedir.

Normal şartlarda, ortalama olarak 50 görselin barındırıldığı bir web sitesi için, 50 ayrı görsel sorgusu gerekir. CSS Sprite yöntemi ile bu durumu tek bir sorguya dönüştürmek mümkündür. “Combine Images Using CSS Sprites” çözümü ile sorgu sayılarının ciddi oranlarda azalması ve sitelerin açılış hızlarının artması hedeflenmektedir.

CSS Sprite Nedir? Neden Önemlidir?

Web sitelerinde, ikonlar, simgeler ve farklı boyutlarda görseller kullanılmaktadır. Bir site içerisinde barındırılan tüm bu görsellerin, sitenin yüklenme süresini uzattığı görülmektedir. CSS Sprite kullanımı, tarayıcı üzerinden site sunucusuna iletilen HTTP taleplerinin sayısını önemli ölçüde azaltmaktadır. Bu durum, web sitesinin yüklenme sürelerini ve genel performansını iyileştirmek için avantaj sağlar.

CSS Sprite tekniği ile web sitesinde barındırılan tüm görseller, mümkün olan en az dosya sayısında birleştirilir. Birleştirme tekniği, sitelerdeki diğer kaynakların da indirilme süreçlerinde yaşanan gecikmelerinin azaltılmasına yardımcı olmaktadır. CSS Sprite tekniğinin uygulanması, web sitelerinin tüm indirme işlemlerindeki bayt sayılarının düşmesini de destekler. Her bir imge ya da görsel için iletilen istekler, sistem içerisinde karmaşaya neden olabilmektedir. CSS Sprite bu karmaşanın önüne geçerek, sadeleşme ve işlevsellik sunmaktadır. CSS Sprite kullanımı site performanslarının iyileştirilmesini sağlarken, site hızları %3 ilâ %5 oranlarında arttırılmış olur.

CSS Sprite Nasıl Uygulanır?

CSS Sprite tekniğinin uygulanması için, görsellerin en iyi şekilde birleştirilmesi gerekir. Bunun için Photoshop ya da Illustrator gibi programlardan yararlanmak mümkün olmaktadır. CSS Sprite tekniği uygulanırken, web sitesinde kullanılan görsellerin boyutlarını bilmek gerekmektedir.

Hazırlanacak görseller arasında boşluk bırakılmadan, belirli bir düzen içerisinde ön hazırlığın tamamlanması önerilmektedir. CSS Sprite, CSS dosyalarının “background-position” değerlerinin değiştirilmesi ile uygulanmaktadır. Birden çok görsel ile hazırlanabilen tasarımlar, ortaya tek bir görselin çıkmasını sağlamaktadır. CSS Sprite, istenilen sayıda görselin birleştirilerek, daha az sayıda görsel meydana getirilmesi kurgusuna dayanır. Sitenin genel tasarımını da daha kaliteli hale getiren bu yöntem, görsel boyutlarının azalması ile sayfa hızını doğru orantılı olarak arttırmaktadır.

Çok sayıda ikon içeren bir görselimiz olsun ve onların arasından Facebook ikonunu çekmek istiyoruz diyelim. Görselin tamamı üzerinden koordinat verip X,Y düzleminde konumunu belirterek görselin kullanılmasını sağlayabilirsiniz.

CSS Sprite Kullanarak Görsellerin Birleştirilmesi

Web sitelerinin hızı ve çevrimiçi varlıkları, SEO alanın da önem teşkil eden konuların başında gelir. CSS Sprite kullanımı, sitelere görsel yüklemek için gönderilen HTTP isteklerini azaltır. CSS Sprite, WordPress ya da HTML tabanlı web sitelerinin hızlandırılması ve geliştirilmesi için kullanılan popüler bir tekniktir. CSS Sprite oluşturucusu ile minimum bir çabayla, performans optimizasyon tekniğinden yararlanmak mümkün olmaktadır. İşlemlerin yürütülmesi için temel düzeyde CSS ve HTML bilgisine sahip olmak gerekir. Google Pagespeed gibi site performans test araçlarında sıklıkla karşımıza çıkan sorunlardan biri olan “Images Using CSS Sprites” hatasının çözümü, yazımızın devamında bulabilirsiniz.

CSS Sprite Kullanımının Avantajları

CSS Sprite, sitelerin yanıt verme sürelerini geliştirmek için kullanılan anahtar stratejilerinden biridir. Dünya üzerinde milyonlarca kullanıcısı bulunan Amazon, Apple, Facebook gibi hizmet sağlayıcıların da CSS Sprite tekniğinden yararlandığı görülmektedir. Web sitelerinin CSS Sprite tekniğini kullanmasının birçok avantajı bulunur. Bunları aşağıdaki şekilde listeleyebiliriz;

Tek bir dosya ile işlem akışı sağlanması.
Sayfa yükleme sürelerinin iyileşmesi.
Web sunucularından iletilen HTTP isteklerinin azaltılması.
Yüksek miktarda görsel indirmek yerine, web sitesinin tek bir görsel indirmesi.
Arka plan resimlerinin, logoların, simgelerin, menü görsellerinin her birinin birleştirilerek kullanılabilmesi.

CSS Sprite uygulanan görseller, tarayıcılar tarafından da birçok ek görsel yerine birleştirilmiş tek görsel olarak algılanır. Bu sebeple site performans değerlendirmelerinden iyi bir puan almak isteyen tüm site sahiplerinin, CSS Sprite özelliğinden yararlanması önerilir.

CSS Sprite Çözümü Nedir?

CSS Sprite, bir web sitesinde var olan görselleri birleştirerek, tek bir görselde toplama tekniği olarak ifade edilir. CSS Sprite çalışma sistematiğinde, birden fazla görsel, tek bir hareketli grafik haline getirilir. Grafik sayfasında birleştirilen görseller, ızgara özelliği ile aralarında boşluk kalmayacak şekilde kullanılır. İşlem akışı aşağıdaki şekilde sağlanmaktadır;

CSS hareketli görsel sayfası ziyaret edilir.
İstenilen hareketli grafik dizini seçilir.
Hareketli görselin piksel değeri belirlenir.

Bu teknik, genellikle web sayfasında menü düğmeleri ve logolar gibi aynı boyutta görsellerin bir araya getirilmesi ile uygulanmaktadır. Örneğin; bir web sayfasında aynı boyutta logo ve hizmet simgesi yer alıyorsa, bu iki görsel birleştirilmek için uygundur ve ardından oluşturulan CSS dosyası <div> ya da <span> etiketleri kullanımı ile görüntülenmeye hazır hale getirilir.

CSS Sprite Kullanımı İşlem Adımları

CSS Sprite tekniğini uygulamadan önce görsellerin hazırlanması için Photoshop gibi fotoğraf düzenleme araçlarından yararlanılır.

Piksel ızgarası oluşturun: Görsellerin konumlandırılması ve referans verilmesi için, uygulama üzerinde piksel ızgarası oluşturulması gerekir.
Görselleri ekleyin: Birleştirilecek görseller, boyutlarına göre gruplandırılır. Birden fazla küçük görsel tek bir hücreye sığarken, büyük boyutlu görseller için geniş bir hücre tanımlamak gerekir.
CSS ekleyin: CSS de hareketli grafik oluştururken dikkat edilmesi gereken noktalar bulunur. Bunlar; görsellerin yüksekliği, genişliği ve arka plânıdır. Görselin boyutunu belirlemek için yükseklik ve genişlik ayarlarından yararlanılır. Hareketli grafik sayfası ve sayfanın konumu için ise arka plân özelliği kullanılır.
Öğeyi sayfaya ekleyin: ID ya da sınıfa uygun olarak CSS hareketli dosyasını eklemek için kod etiketlerinden yararlanılmaktadır. Bu işlem için <div> ya da <span> etiketleri uygun olmaktadır.

Sayfa yüklemesi tamamlandığında, CSS Sprite özelliği ile hazırlanan görseller birleştirilmiş hali ile arka planda işlemeye başlayacaktır.

CSS Sprite Hazırlığı ve Uygulaması

CSS Sprite işlemleri 3 aşamalı olarak yürütülmektedir. Bunlar;

Görsel düzenleme aşaması.
CSS aşaması.
HTML aşaması olarak belirtilmektedir.

Görsel Düzenleme

Görsel düzenlemeleri genellikle Adobe Photoshop yardımıyla veya diğer görsel düzenleme programlarıyla yapılabilmektedir. Uygulamaya giriş yaptıktan sonra, işlem yapmak istediğimiz iki görsel seçin. Görsel formatları “PNG” ya da “GIF” olmalıdır. Her iki görselin de arka planı transparan olarak belirlenir. Seçilen görseller, CSS Sprite tekniği ile yeniden tasarlanır. 30×30 boyutlarında iki görsel olduğunu varsayarsak, toplam genişliğin 60 piksel, yüksekliğin ise 30 piksel olarak belirlenmesi gerekir. Görseller CSS Sprite ile birleştirilirken renkleri de değişir, bu yüzden görseller kopyalanır. 2 görsel üzerinde çalışırken toplamda 4 görsel elde etmek gerekir. Adobe Photoshop içerisinde CSS Sprite tekniği ile işlem yapılırken uygulamanın bazı alanlarını açık tutmak, birleştirme işleminin kalitesini arttırmaktadır. Bunlar;

View / Extra
View / Rules
View / Snap
Snap / Guides / Layers
View / Smart Guides alanları olarak önerilmektedir.

Birleştirme işlemlerinin kaydırma olmadan, en iyi şekilde oluşturulabilmesi için, uygulamanın bu alanları işlem kolaylığı yaratır. “Color Overlay” alanında görsellerin renklendirme işlemleri yapılmaktadır. Birleştirilen ve optimizasyonu yapılan görseller, CSS aşaması için hazır hale gelir.

CSS Aşaması

Hazırlık aşamasında 4 görselden oluşturulan fotoğrafın, öncelikle parçalara ayrılması gerekmektedir. Ayrıştırma işlemi <li> kodu ile yapılmaktadır. Yan yana getirilen iki adet <li> kodu, görsellerin geçiş işlemini gerçekleştirmektedir.

Tablodaki kod diziliminde yer alan “list-style:none” alanı, satır başlarında başlık objesinin çıkmasını engellemektedir.
“float:left” alanı ise hazırlanan görsellerin sol tarafa yaslama işlemini sağlamaktadır.
“transition” kodları, görsellerin geçiş kalitesini arttırmak için kullanılmaktadır.

Yukarıda belirtilen “background-position” kodlarının da eklenmesi ile CSS aşaması tamamlanmış olur.

HTML Aşaması

Tüm aşamaları tamamlanan CSS Sprite işlemlerinin son adımda HTML tanımlamaları yapılır. Tasarımı yapılmış olan arayüze şekil vermek için bu aşama kullanılır. İşlem adımları ise kısa ve kolaydır. Bunlar;

Bir adet <ul> satırı oluşturulur.
İçerisine her iki görsel için iki adet <li> kodu tanımlanır.
</ul> </li> kodları ile satır kapatılır.

CSS Sprite tasarımı işlem akışı verilen aşamaların uygulanması ile tamamlanır. Google Pagespeed gibi site performans ölçme araçlarında karşımıza çıkan “Combine Images Using CSS Sprites” hatasının çözümü, bu şekilde sağlanmış olacaktır.