Türkiye'nin en güncel forumlardan olan forumdas.com.tr'de forumda aktif ve katkısı olabilecek kişilerden gönüllü katkıda sağlayabilecek kişiler aranmaktadır.
urgot
FD Üye
Görüntüleri CSS Sprite Kullanarak Birleştirmek
Nedir : Sitenizdeki resimler tek kaynakta birleştirilerek site açılışı esnasında pek çok resmi ayrı ayrı çağırmak yerine tek kaynaktan resimler istendiği için fark edilir derecede hız artışı sağlar.
Çözüm : Css ile resimleri birleştirmek.
Uzman Yorumu : Bu yapı resimler için değil css ile çağırılan arkaplan resimleri için geçerli. Site yayına alınırken yapılabilir. Oldukça faydalı bir uygulamadır.
Genel Açıklama
İnternet sayfanızdaki görüntüleri CSS sprite kullanarak mümkün olduğu kadar az dosyada birleştirebilirsiniz. Bu birleştirme işlemi, diğer kaynakları indirirken gecikmeleri ve gidiş dönüş sayısını azaltmanıza yardımcı olur. Aynı zamanda, bu sayede istek ek yüküne azaltıcı yönde etki ederek, web sayfası tarafından indirilen toplam bayt sayısını azaltabilirsiniz.
Google’dan Detaylar
JavaScript ve CSS’ye benzer şekilde, birden fazla resim indirmek ek turlara sebep olur. Oldukça fazla resim içeren bir internet sitesi, gecikmeyi azaltmak için bu görüntüleri daha az çıktı dosyasında birleştirebilir. Bu da maliyet anlamında daha hesaplı olacaktır.
Görüntüleri CSS Sprite kullanarak birleştirirseniz, internet sayfanızda birden çok simge kullanıyorsanız her biri için ayrı istek gönderilmesi yerine tek bir dosyada hepsini birleştirerek oluşacak karmaşayı daha sade şekle indirgeyebilirsiniz. Her simge için ayrı imge yolları tanımlamak yerine tek bir imge yolu tanımlamanız yeterli olacaktır.
Bunlar dışında internet sitenizdeki görüntüleri ve simgeleri CSS Sprite ile birleştirmeniz, tıklandığı zaman bloğunuzun açılmasını hızlandırmanızı sağlar. Site sayfa hız optimizasyonu açısından bakıldığında bu işlemin yapılması site hızını tahminen %3 ile %5 arasında artırır.
Css Sprite ile görüntüleri en uygun şekilde birleştirmek için Photoshop veya Illustrator gibi programlardan yararlanılmalıdır. Çünkü kullanılan resimlerin yükseklik ve genişliğini tam olarak biliyor olmanız gerekir. Bunun dışında resimler arasında boşluk bulunmamasına dikkat edilmesi gerekir.
Nedir : Sitenizdeki resimler tek kaynakta birleştirilerek site açılışı esnasında pek çok resmi ayrı ayrı çağırmak yerine tek kaynaktan resimler istendiği için fark edilir derecede hız artışı sağlar.
Çözüm : Css ile resimleri birleştirmek.
Uzman Yorumu : Bu yapı resimler için değil css ile çağırılan arkaplan resimleri için geçerli. Site yayına alınırken yapılabilir. Oldukça faydalı bir uygulamadır.
Genel Açıklama
İnternet sayfanızdaki görüntüleri CSS sprite kullanarak mümkün olduğu kadar az dosyada birleştirebilirsiniz. Bu birleştirme işlemi, diğer kaynakları indirirken gecikmeleri ve gidiş dönüş sayısını azaltmanıza yardımcı olur. Aynı zamanda, bu sayede istek ek yüküne azaltıcı yönde etki ederek, web sayfası tarafından indirilen toplam bayt sayısını azaltabilirsiniz.
Google’dan Detaylar
JavaScript ve CSS’ye benzer şekilde, birden fazla resim indirmek ek turlara sebep olur. Oldukça fazla resim içeren bir internet sitesi, gecikmeyi azaltmak için bu görüntüleri daha az çıktı dosyasında birleştirebilir. Bu da maliyet anlamında daha hesaplı olacaktır.
Görüntüleri CSS Sprite kullanarak birleştirirseniz, internet sayfanızda birden çok simge kullanıyorsanız her biri için ayrı istek gönderilmesi yerine tek bir dosyada hepsini birleştirerek oluşacak karmaşayı daha sade şekle indirgeyebilirsiniz. Her simge için ayrı imge yolları tanımlamak yerine tek bir imge yolu tanımlamanız yeterli olacaktır.
Bunlar dışında internet sitenizdeki görüntüleri ve simgeleri CSS Sprite ile birleştirmeniz, tıklandığı zaman bloğunuzun açılmasını hızlandırmanızı sağlar. Site sayfa hız optimizasyonu açısından bakıldığında bu işlemin yapılması site hızını tahminen %3 ile %5 arasında artırır.
Css Sprite ile görüntüleri en uygun şekilde birleştirmek için Photoshop veya Illustrator gibi programlardan yararlanılmalıdır. Çünkü kullanılan resimlerin yükseklik ve genişliğini tam olarak biliyor olmanız gerekir. Bunun dışında resimler arasında boşluk bulunmamasına dikkat edilmesi gerekir.
