Web performansı için en iyi ipuçları

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

Sam Dutton

HTTP Arşivi'ne göre, tipik bir mobil web sayfasının ağırlığı 2, 6 MB'tır ve bu ağırlığın üçte ikisinden fazlası resimlerdir. Bu, optimizasyon için mükemmel bir fırsat.

Özet

• Resimleri, görüntü boyutlarından daha büyük olarak kaydetmeyin.
• Her resim için birden fazla boyut kaydedin ve tarayıcının en küçük boyutu seçmesini sağlamak üzere 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ü boyutuyla eşleşen boyutlara sahip resimler kullanarak web sitenizin daha hızlı ve daha az veri kullanımını sağlayabilirsiniz. Başka bir deyişle, kaydederken resimler doğru genişlikte ve yükseklikte olmalıdır.

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

Dosyalar neredeyse aynı görünüyor ancak 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 çok daha büyüktür. Her iki resim de 300 piksel sabit genişlikte görüntülenir. Bu nedenle, aynı boyutta kaydedilmiş bir resim kullanmak mantıklıdır.

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

Peki ekran boyutu değişirse ne olur?

Çok çeşitli cihazların kullanıldığı bir dünyada, resimler her zaman tek bir sabit boyutta gösterilmez.

Resim öğeleri, yüzde bir genişliğe sahip olabilir veya resim görüntüleme boyutlarının ekran boyutuna sığacak şekilde değiştiği duyarlı düzenlerin bir parçası olabilir.

Peki Retina ekranlar gibi çok fazla piksele ihtiyaç duyan cihazlar ne olacak?

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

Her resmi farklı boyutlarda sunup tarayıcıya cihaz ve ekran boyutu için en iyi boyutu seçmesini bırakmak harika olmaz mı? Maalesef en iyi resmi belirleme konusunda bir çıkmaz söz konusudur. 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 bir 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 ekran boyutuna bağlı olarak mümkün olan en küçük resmi seçebilir. Bu işlem için resimleri indirip boyutlarını kontrol etmesine gerek yoktur.

srcset'ün işleyişini aşağıdaki resimde görebilirsiniz. Dizüstü veya masaüstü bilgisayar kullanıyorsanız tarayıcı pencereniz 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 bir pencerede yapmanız gerekir. Aksi takdirde orijinal resim dosyası önbelleğe alınır.)

Birden fazla resim boyutu nasıl oluşturabilirim?

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

Hero resimler gibi tek seferlik resimler için farklı boyutları manuel olarak kaydedebilirsiniz. Ürün fotoğrafları gibi çok sayıda resminiz varsa, işleri otomatikleştirmeniz gerekir. Bunun için iki yaklaşım vardır.

Derleme sürecinize görüntü işleme ekleme

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

Görüntü hizmeti kullan

Görüntü oluşturma ve yayınlama işlemi, Cloudinary gibi ticari bir hizmet veya Thumbor gibi açık kaynak bir eşdeğer kullanılarak otomatikleştirilebilir.

Yüksek çözünürlüklü resimlerinizi yüklediğinizde resim hizmeti, URL parametrelerine bağlı olarak otomatik olarak farklı resim biçimleri ve boyutları oluşturup sunar. Örneğin, Cloudinary'daki bu örnek resmi açın ve URL çubuğundaki 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 JPEG yerine WebP resimlerini biçimi destekleyen tarayıcılara otomatik olarak yayınlama gibi daha gelişmiş özelliklere de sahiptir.

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

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

Piksel yoğunluğu ne durumda?

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

Bu, resimlerinizi kaydetmeniz gereken boyutu etkileyebilir. Burada ayrıntılara girmeyeceğiz ancak "Yoğunluk tanımlayıcılarını kullanma" kod laboratuvarından daha fazla bilgi edinebilirsiniz.

Resmin görüntü boyutu ne olacak?

srcset'un daha iyi çalışmasını sağlamak için sizes'ü kullanabilirsiniz.

Bu olmadan, tarayıcı, srcset kaynağından 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 gösterileceği genişliği 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'sinde görüntüleneceğini bildirir.

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

Bunun nasıl çalıştığını simpl.info/sizes ve "Birden fazla alan genişliği belirtme" codelab'inde görebilirsiniz.

Tarayıcı desteği nasıl?

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

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

Bu sayede srcset ve sizes, progresif iyileştirmeler için mükemmel birer platformdur.

Daha fazla bilgi

Resim optimizasyonu hakkında daha fazla bilgi edinmek için web.dev'deki "Resimlerinizi optimize edin" bölümüne göz atın. Daha rehberli bir deneyim için Udacity'nin sunduğu ücretsiz "Uyumlu Görüntüler" kursunu deneyebilirsiniz.