Görsel Optimizasyonun Web Performansına Katkısı

, görsel optimizasyon

Görsel Optimizasyonun Web Performansına Katkısı

Dijital medyanın gelişimi ile görsellik de hızla önem kazanmaya başladı. 2018 yılı itibari ile bir web sitesindeki görseller hacim olarak bir web sitesinin 0rtalama %64'ünü oluşturuyor.

Web sitenizde içeriğe uygun görseller kullanmak kullanıcının içeriğe odaklanmasını ve tekrar o siteyi ziyaret etme olasılığını artırıyor. Ancak, web sitenizde görsel kullanırken dikkat etmeniz gereken bazı hususlar var.

Görseller optimize edilmediklerinde fazla yer kaplar, web sitenizi yavaşlatır ve performansını düşürür. Web sitenizi ziyaret eden kullanıcıların kaliteli bir deneyim yaşaması için ve bu ziyaretçilerin tekrar gelmesini sağlamak için kullandığınız görselleri optimize etmenizde fayda var.

Peki neler yapabilirsiniz?

  • Doğru Görüntü Formatını Bulun

Web sitelerindeki görsel yoğunluğu göz önüne alındığında görsellerin performansa etkisi oldukça yüksektir. Görsel formatları görsellerin boyutu ve kalitesi üzerinde etkin rol oynar. Bu sebeple doğru formatı bulmak, web sitesi performansı için kritik bir noktadır.

Görüntü formatları ile ilgili yazımızı okumak için: Web İçin En İyi Görsel Formatı Nedir? Hangisini Seçmeli?

  • Görsellerinizi Boyutlandırın

Web sitelerinde görseller xhtml veya css ile boyutlandırılırlar. Boyutlandırılmamış görseller, diğerlerine göre daha yavaş yüklenirler.

  • Görsellerinizi Sıkıştırın

Görsellerinizi web sitenize yüklemeden önce sıkıştırmak, alandan tasarruf etmenizi sağlayacaktır. Bu durum da yüklenme hızının artmasını sağlar. Web sitenizde kullanacağınız görselleri Adobe Photoshop ile kolayca sıkıştırabilirsiniz.

  • Görsellerinizin Url Yapısını Değiştirin

Görsellerin kaynak kodlar içerisinde bulunan url yapısı da web sitesinin hızına etki eden faktörler arasındadır. Url'deki gereksiz uzantıları kaldırarak kaynak kodu sadeleştirebilirsiniz.  

  • CSS Sprite Kullanın

Css Sprite, web sitenizdeki görsellerin birleştirilip tek bir görsel gibi kullanılmasını sağlar. Bu sayede sitenizde ne kadar görsel olursa olsun hepsi tek bir dosya içinde birleştirildiği için bir resim dosyası açılıyor gibi açılacak, bu da sitenin yüklenmesi için geçen süreyi kısaltacaktır. Bu yöntem ayrıca sayfa boyutunu da küçültecektir.

Sonuç olarak web sitenizde kullandığınız büyük boyutlu görsellerin web performansını yavaşlatarak olumsuz etki göstermemesi için bu basit yöntemleri uygulamak size hem alandan tasarruf sağlayacaktır, hem de kullanıcı deneyimini iyileştirerek ziyaretçi potansiyelinizi artıracaktır.

Kaynaklar:

https://www.maxcdn.com/one/visual-glossary/css-sprites/
https://image4.io/tr/blog/web-icin-en-iyi-gorsel-formati-nedir-hangisini-secmeli/
https://kinsta.com/blog/optimize-images-for-web/s