İçindekiler

    Ölçeklendirilmiş Görüntüleri Sunmak

     

    Nedir : Web sitesinin kullanıcısı 400 x 400 boyutlu resim yüklemiş ancak, HTML / CSS kodlarında resim boyutu 40 x 40 olarak gösteriliyor ise bu, tarayıcının önce büyük dosyayı indirmesi ve görüntülemeden önce ölçeklendirmesi gerektiği anlamına gelir.
    Çözüm : Daha verimli bir yöntem, görüntüyü 40 x 40’a yeniden boyutlandırmaktır. Böylece tarayıcının görüntüyü verimsiz bir şekilde indirip ölçeklendirmesi gerekmez.
    Uzman Yorumu : Bu responsive olmayan işler için oldukça kolaydır ancak değişken yapılarda bunu ayarlamak için src set kullanılmalıdır. Masaüstü için 4 resim yanyana olarak 250px lik istenir ve mobil için 400px tek resim istenirse bunu ancak srcset ile ayarlamak gerekir ve oldukça karmaşık bir kullanım oluşturmaktadır.

     

    Genel Açıklama

    Görsel içerikler bir web sayfasının performansını iyileştirirken aynı zamanda ciddi anlamda bayt tasarrufu sağlar. Bir web sayfasındaki resimlerin ölçeklendirilerek sunulması, mobil gibi düşük güçlü bilgisayar dışındaki cihazlarda sayfanın görüntülenmesindeki hızı etkiler.

     

    Fakat Benim İnternet Sitem Duyarlı...

    Tüm kullanıcılar için yüksek çözünürlükte görüntüler sunmak, değişken piksel yoğunluğuna sahip ekranlar için çekici gelebilir. Sıkıştırılmış görüntü tekniği çoğunlukla daha iyi kalite algısına sahip daha küçük dosya boyutları sağlar. Bu sebeple, bu seçenek kesinlikle değerlendirilmelidir. Fakat; yüksek çözünürlüklü görüntülerin her zaman daha çok bellek gerektirdiği ve kod çözmenin daha uzun süreceğinin farkında olunmalıdır. Bu sebeple, aynı zamanda standart çözünürlükte görüntülerle düşük güçlü cihazları da değerlendirmek önemlidir. Bu nedenle “srcset attribute” u kullanmanızı öneririz. Srcset attribute çok iyi bir tarayıcı desteği var. Ayrıca, gecikmeli tarayıcılara Scott Jehl'in resim dolgusu ile yardım edilebilir. İnternet siteniz için en uygun uygulamayı seçerken örnek kullanımlara bakın.

     

    Google’dan Detaylar

    Bazen aynı görsel farklı boyutlarda görüntülenmek istenebilir. Bu durumda, tek bir görüntü kaynağına hizmet edilecek ve görseli ölçeklemek için, ölçeklenecek görseli içeren sayfada HTML veya CSS kullanılacaktır.

    Örneğin, kendisinden daha büyük olan 250 x 250 bir görüntünün, 10 x 10 küçük resim sürümünü elde edebilirsiniz. Kullanıcıyı iki ayrı dosya indirmek durumunda bırakmanıza gerek kalmadan, küçük resim sürümünü yeniden boyutlandırmak için biçimlendirme kullanabilirsiniz. Bu durum, eğer gerçek görüntü boyutu sayfadaki örneklerden en az biriyle eşleşiyorsa, bizim verdiğimiz örnekte 250 x 250 piksel olan büyük görüntü, anlamlı hale gelir. Fakat; tüm biçimlendirme örneklerinde kullanılan boyutlardan daha büyük bir görüntü sunarsanız, tel üzerinden gereksiz baytlar gönderiyor olabilirsiniz. Görüntüleri internet sayfanızda ihtiyaç duyulan en büyük boyuta uyacak biçimde ölçeklendirmek için resim düzenleyici kullanmanız gereklidir. Ayrıca, boyutları aynı zamanda sayfada da belirtmeyi unutmayın.