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

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

Sam Dutton

HTTP Arşivi'ne göre, tipik bir mobil web sayfasının ağırlığı 2, 6 MB'ın üzerindedir ve bu ağırlığın üçte ikisinden fazlası resimlerden oluşur. Bu, optimizasyon için harika bir fırsattır!

Özet

• Görüntü boyutlarından daha büyük resimler 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 kaydedin

Görüntü boyutuyla eşleşen boyutlara sahip resimler kullanarak web sitenizi daha hızlı ve daha az veriyi açtırabilirsiniz. Başka bir deyişle, kaydederken resimlere doğru genişlik ve yükseklik verin.

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

Bunlar neredeyse aynı görünür, ancak birinin dosya boyutu diğerinden 10 kat daha büyüktür.

İlk resim, görüntü boyutundan çok daha büyük boyutlarla kaydedilmiş olduğu için dosya boyutu olarak ç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 anlamlıdır.

Sabit genişlikler için ekran boyutuyla aynı boyutlarda kaydedilmiş resimler kullanın.

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

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

Resim öğelerinin genişliği yüzde olarak belirlenmiş olabilir veya resim görüntüleme boyutlarının ekran boyutuna sığacak şekilde değiştirildiği duyarlı düzenlerin bir parçası olabilir.

Peki ya Retina ekranlar gibi piksel tüketen cihazlarda ne yapmalı?

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

Her bir resmi farklı boyutlarda sunup tarayıcının cihaz ve görüntü boyutu için en iyi boyutu seçmesine izin verseniz harika olmaz mıydı? Ne yazık ki hangi resmin en iyi sonucu vereceğini belirlerken dikkate alınması gereken bir catch-22 nokta var. Tarayıcı mümkün olan en küçük resmi kullanmalıdır. Ancak, kontrol etmek için indirmeden resmin genişliğini bilemez.

srcset bu konuda size yardımcı olacaktır. Resimleri farklı boyutlarda kaydeder, ardından 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. Böylece tarayıcı, ekran türüne ve görüntü alanı boyutuna bağlı olarak mümkün olan en küçük resmi seçebilir. Boyutlarını kontrol etmek için resimleri indirmek zorunda kalmazlar.

Aşağıdaki resimde srcset öğesini iş başında görebilirsiniz. Dizüstü veya masaüstü bilgisayardaysanız tarayıcı pencerenizin boyutunu değiştirin ve 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 Gizli pencerede yapmanız gerekir. Aksi takdirde orijinal resim dosyası önbelleğe alınır.)

Nasıl birden çok resim boyutu oluşturabilirim?

srcset ile kullanmak istediğiniz her resim için birden fazla boyutu kullanılabilir hale getirmeniz gerekir.

Lokomotif resim gibi tek seferlik resimler için farklı boyutları manuel olarak kaydedebilirsiniz. Ürün fotoğrafları gibi çok sayıda resminiz varsa bunları otomatikleştirmeniz gerekir. Bunun için iki yaklaşım söz konusudur.

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

Derleme sürecinizin bir parçası olarak, görüntülerinizin farklı boyutlu 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" konusuna bakın.

Resim hizmeti kullan

Görüntü oluşturma ve gönderme, Cloudinary gibi ticari bir hizmet veya kendi yüklediğiniz ve çalıştırdığınız Thumbor gibi açık kaynaklı bir eşdeğer kullanılarak otomatikleştirilebilir.

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

Resim farklı boyutlarda düzgün görünmezse ne olur?

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

Peki ya piksel yoğunluğu?

İleri teknoloji cihazlarda daha küçük (daha yoğun) fiziksel pikseller bulunur. Örneğin, ileri teknoloji bir telefonda her piksel satırında daha ucuz bir cihaza göre iki veya üç kat fazla piksel bulunabilir.

Bu, resimlerinizi kaydetmek için gereken boyutu etkileyebilir. Burada korkunç ayrıntılara girmeyeceğiz, ancak "Yoğunluk açıklayıcıları kullanma" codelab'inden daha fazla bilgi edinebilirsiniz.

Resmin görüntü boyutu ne olacak?

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

Bu olmadan, tarayıcı bir srcset öğesinden 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örüntüleneceği genişliği bildirir. Böylece tarayıcı, düzen hesaplamaları 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="…">

Bunu uygulamalı olarak simpl.info/sizes adresinde ve "Birden çok alan genişliği belirtme" codelab'inde görebilirsiniz.

Tarayıcı desteği ne olacak?

srcset ve sizes, tüm dünyadaki tarayıcıların% 90'ı tarafından desteklenmektedir.

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

Bu da srcset ve sizes uygulamalarını aşamalı olarak önemli hale getiriyor.

Daha fazla bilgi

Resim optimizasyonunun daha ayrıntılı bir incelemesi için web.dev'in "Resimlerinizi optimize edin" bölümüne göz atın. Daha rehberli bir deneyim için Udacity'nin sunduğu ücretsiz "Duyarlı Resimler" kursunu deneyebilirsiniz.