Web performansıyla ilgili en iyi ipuçları

Doğru resim boyutunu otomatik olarak seçmek için srcset özelliğini kullanın.

Sam Dutton

HTTP Archive'e göre, tipik bir mobil web sayfası 2, 6 MB'tan daha fazla yer kaplıyor ve bu ağırlığın üçte ikisinden fazlasını resimler oluşturuyor. Bu, optimizasyon için harika bir fırsattır.

Özet

• Görüntüleme boyutundan daha büyük resimleri kaydetmeyin.
• Her resim için birden fazla boyut kaydedin ve tarayıcının en küçüğünü seçmesini sağlamak için srcset özelliğini kullanın. w değeri, tarayıcıya her sürümün genişliğini bildirir:

<img src="small.jpg"
     srcset="small.jpg 500w,
             medium.jpg 1000w,
             large.jpg 1500w"
     alt="…">

Resimleri doğru boyutta kaydetme

Görüntü boyutuna uygun boyutlarda resimler kullanarak web sitenizi daha hızlı ve daha az veri tüketecek şekilde tasarlayabilirsiniz. Başka bir deyişle, resimleri kaydederken doğru genişlik ve yükseklik değerlerini verin.

Aşağıdaki resimlere göz atın.

Bu dosyalar neredeyse aynı görünse de birinin dosya boyutu diğerinden 10 kat daha büyük.

İlk resim, ekran boyutundan çok daha büyük boyutlarda kaydedildiği için dosya boyutu açısından çok daha büyüktür. Her iki resim de 300 piksel sabit genişlikte gösterildiğinden aynı boyutta kaydedilmiş bir resim kullanmak mantıklıdır.

Sabit genişlikler için, görüntüleme boyutuyla aynı boyutlarda kaydedilmiş resimler kullanın.

Ancak... görüntü boyutu değişirse ne olur?

Kullanıcıların birden fazla cihaz kullandığı günümüz dünyasında, resimler her zaman tek bir sabit boyutta gösterilmez.

Resim öğelerinin genişliği yüzdelik olabilir veya resim görüntüleme boyutlarının ekran boyutuna uyacak şekilde değiştiği duyarlı düzenlerin parçası olabilir.

…ve Retina ekranlar gibi piksel açısından yoğun cihazlar?

Tarayıcının doğru resim boyutunu seçmesine yardımcı olma

Her resmi farklı boyutlarda kullanıma sunup tarayıcının cihaz ve ekran boyutu için en uygun boyutu seçmesine izin vermeye ne dersiniz? Maalesef hangi resmin en iyi olduğunu belirleme konusunda bir catch-22 var. Tarayıcı, mümkün olan en küçük resmi kullanmalıdır ancak kontrol etmek için indirmeden bir resmin genişliğini bilemez.

Bu noktada srcset devreye girer. Resimleri farklı boyutlarda kaydedip tarayıcıya her sürümün genişliğini bildirirsiniz:

<img src="small.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     alt="…">

w değerleri, her resmin genişliğini piksel cinsinden gösterir. Örneğin, small.jpg 500w tarayıcıya small.jpg dosyasının 500 piksel genişliğinde olduğunu bildirir. Bu sayede tarayıcı, ekran türüne ve görünüm alanı boyutuna bağlı olarak mümkün olan en küçük resmi seçebilir. Boyutlarını kontrol etmek için resimleri indirmesi gerekmez.

Aşağıdaki resimde srcset özelliğinin nasıl çalıştığını görebilirsiniz. Dizüstü veya masaüstü bilgisayarda izliyorsanız tarayıcı pencerenizin boyutunu değiştirip bu sayfayı yeniden açın. Ardından, hangi resmin kullanıldığını kontrol etmek için tarayıcı araçlarınızın Ağ panelini kullanın. (Bunu Gizli veya Özel pencerede yapmanız gerekir. Aksi takdirde orijinal resim dosyası önbelleğe alınır.)

Nasıl birden fazla resim boyutu oluşturabilirim?

srcset ile kullanmak istediğiniz her resim için birden fazla boyut sunmanız gerekir.

Lokomotif resimler gibi tek seferlik resimler için farklı boyutları manuel olarak kaydedebilirsiniz. Ürün fotoğrafları gibi çok sayıda resminiz varsa otomasyon kullanmanız gerekir. Bunun için iki yaklaşım vardır.

Derleme sürecinize görüntü işlemeyi dahil etme

Geliştirme sürecinizin bir parçası olarak, resimlerinizin farklı boyutlardaki sürümlerini oluşturmak için adımlar ekleyebilirsiniz. Daha fazla bilgi edinmek için "Resimleri sıkıştırmak için Imagemin'i kullanma" başlıklı makaleyi inceleyin.

Görüntü hizmeti kullanma

Resim oluşturma ve yayınlama, Cloudinary gibi ticari bir hizmet veya Thumbor gibi açık kaynaklı bir eşdeğer kullanılarak otomatikleştirilebilir. Thumbor'u kendiniz yükleyip çalıştırabilirsiniz.

Yüksek çözünürlüklü resimlerinizi yüklersiniz. Resim hizmeti, URL parametrelerine bağlı olarak farklı resim biçimleri ve boyutları oluşturup otomatik olarak sunar. Örneğin, Cloudinary'deki bu örnek resmi açın ve URL çubuğunda w değerini veya dosya uzantısını değiştirmeyi deneyin.

Resim hizmetleri, farklı resim boyutları için "akıllı kırpma"yı otomatikleştirme ve dosya uzantısını değiştirmeden, biçimi destekleyen tarayıcılara JPEG yerine otomatik olarak WebP resimler sunma gibi daha gelişmiş özelliklere de sahiptir.

Resim farklı boyutlarda doğru görünmüyorsa ne olur?

Bu durumda, "sanat yönetimi" için <picture> öğesini kullanmanız gerekir: Farklı boyutlarda farklı bir resim veya resim kırpma sağlamak. Daha fazla bilgi edinmek için "Sanat yönetimi" codelab'ine göz atın.

Piksel yoğunluğu nasıl?

Üst düzey cihazlarda daha küçük (daha yoğun) fiziksel pikseller bulunur. Örneğin, üst düzey bir telefonda, daha ucuz bir cihaza kıyasla her piksel satırında iki veya üç kat daha fazla piksel olabilir.

Bu durum, resimlerinizi kaydetmek için gereken boyutu etkileyebilir. Burada ayrıntılı bilgi vermeyeceğiz ancak "Yoğunluk tanımlayıcılarını kullanma" codelab'inde daha fazla bilgi edinebilirsiniz.

Resmin görüntüleme boyutu ne olmalı?

srcset özelliğinin daha iyi çalışması için sizes kullanabilirsiniz.

Bu özellik olmadan tarayıcı, srcset öğesinden bir resim seçerken görüntü alanının tam genişliğini kullanır. sizes özelliği, tarayıcıya bir resim öğesinin hangi genişlikte gösterileceğini bildirir. Böylece tarayıcı, herhangi bir düzen hesaplaması yapmadan önce mümkün olan en küçük resim dosyasını seçebilir.

Aşağıdaki örnekte sizes="50vw", tarayıcıya bu resmin görüntü alanı genişliğinin% 50'si kadar bir alanda gösterileceğini bildirir.

<img src="small.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     sizes="50vw"
     alt="…">

Bu özelliği simpl.info/sizes adresinde ve "Birden fazla yuva genişliği belirtme" codelab'inde görebilirsiniz.

Tarayıcı desteği hakkında ne söyleyebilirsiniz?

srcset ve sizes, dünya genelindeki tarayıcıların% 90'ından fazlası tarafından desteklenir.

Bir tarayıcı srcset veya sizes'yi desteklemiyorsa yalnızca src özelliğini kullanır.

Bu, srcset ve sizes'yi mükemmel progresif geliştirmeler yapar.

Daha fazla bilgi

Görsel optimizasyonu hakkında daha ayrıntılı bilgi için web.dev'deki "Görsellerinizi optimize etme" bölümüne göz atın. Daha fazla rehberlik içeren bir deneyim için Udacity'nin sunduğu ücretsiz "Duyarlı Resimler" kursunu deneyebilirsiniz.