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, bir Android'deki tipik mobil web sayfasının ağırlığı 2, 6 MB'tan fazladır ve resimdir. Bu, optimizasyon için harika bir fırsattır.

Özet

• Resimleri ekran boyutundan daha büyük olarak kaydetmeyin.
• Her resim için birden fazla boyut kaydedin ve 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 boyutlarda kaydetme

Aşağıdakileri içeren resimler kullanarak web sitenizi daha hızlı ve veri kullanımını daha az hale getirebilirsiniz. görüntüleme boyutuyla eşleşen boyutlarla birlikte gelir. Başka bir deyişle, görsellere yüksekliği ve genişliği değiştirilebilir.

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

Bunlar neredeyse aynı görünür ancak birinin dosya boyutu 10 kattan fazladır daha büyük olabilir.

İlk resim, boyutlarla kaydedildiğinden dosya boyutu olarak çok daha büyüktür ekran boyutundan çok daha büyüktür. Her iki resim de sabit 300 piksel genişliğinde bir resim dosyası tasarladık. Bu nedenle, aynı anda seçin.

Sabit genişlikler için, boyuta ayarlanır.

Peki, görüntü boyutu farklıysa ne olur?

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

Resim öğelerinin genişliği yüzdeye sahip olabilir veya duyarlı düzenlerin bir parçası olabilir Burada resim görüntüleme boyutlarının ekran boyutuna sığacak şekilde değiştiğini varsayalım.

...Peki Retina ekranlar gibi piksel odaklı cihazlarda ne olacak?

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

Her bir resmin farklı boyutlarda ve farklı boyutlarda Tarayıcının cihaz ve görüntü boyutu için en iyi boyutu seçmesine izin verilsin mi? Ne yazık ki bir catch-22 ile belirlemek için bu planı kullanabilirsiniz. Tarayıcı, mümkün olan en küçük ancak kontrol etmek üzere indirmeden bir resmin genişliğini bilemez.

srcset burada devreye giriyor. Resimleri farklı boyutlarda kaydedersiniz, ardından her sürümün genişliğini tarayıcıya bildirir:

<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 olduğunu bildirir piksel genişliğinde. Bu, tarayıcının mümkün olan en küçük resmi seçmesini sağlar. görüntü alanı boyutuna bağlı olarak değişiklik gösterir. resimleri indirin.

Aşağıdaki resimde srcset özelliğinin nasıl kullanıldığını görebilirsiniz. Dizüstü bilgisayar tarayıcınızın pencere boyutunu değiştirin ve bu sayfayı tekrar 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 bir Gizli veya Gizli pencerede yapmanız gerekir, aksi halde orijinal resim dosyası önbelleğe alınır.)

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

Kullanmak istediğiniz her resim için birden çok boyut sunmanız gerekir. srcset ile birlikte.

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

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

Derleme sürecinizin bir parçası olarak, farklı boyutlarda öğeler oluşturmak için sürümleri olabilir. "Resimleri sıkıştırmak için Imagemin'i kullanma" konusuna bakın konulu videomuzu izleyin.

Görüntü hizmeti kullan

Görüntü oluşturma ve gönderme, şu gibi ticari bir hizmet kullanılarak otomatikleştirilebilir: Cloudinary veya Kendi yüklediğiniz ve çalıştırdığınız küçük resim.

Yüksek çözünürlüklü resimlerinizi yüklediğinizde resim hizmeti otomatik olarak yüklenir URL'ye bağlı olarak farklı resim biçimleri ve boyutları oluşturup yayınlar. parametreleridir. Örnek iç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 de otomatikleştirme gibi daha gelişmiş özelliklere sahiptir. "akıllı kırpma" farklı boyutlarda resimler için ve otomatik olarak WebP resimleri (dosyayı değiştirmeden) yalnızca JPEG yerine biçimi destekleyen tarayıcılara uzantısına sahip olur.

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

Bu durumda, "resim yönü" için <picture> öğesini kullanmanız gerekir: farklı boyutlarda kırpılmış resimler sağlayabilirsiniz. Daha fazla bilgi edinmek için "Sanat yönü" codelab'ine göz atın.

Peki ya piksel yoğunluğu?

İleri teknoloji cihazların daha küçük (daha yoğun) fiziksel pikselleri vardır. Örneğin, ileri teknoloji bir telefonun her satırında iki veya üç kat daha fazla piksel daha ucuz bir cihaz olarak görür.

Bu değişiklik, resimlerinizi kaydetmek için ihtiyacınız olan boyutu etkileyebilir. Kanunlara girmeyeceğiz ancak daha fazla bilgiyi şuradan edinebilirsiniz: "Yoğunluk tanımlayıcıları kullanın" codelab'ini inceleyin.

Resmin görüntü boyutu ne olacak?

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

Bu olmadan, tarayıcı bir bir srcset resminden alınmıştır. sizes özelliği, tarayıcıya bir reklamın tarayıcı mümkün olan en küçük resim öğesini seçebileceği için herhangi bir düzen hesaplaması yapmadan önce dosya yükleyin.

Aşağıdaki örnekte sizes="50vw", tarayıcıya bu resmin görüntü alanı genişliğinin% 50'sinde görüntülenir.

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

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

Tarayıcı desteğine ne olacak?

srcset ve sizes ürünleri kullanıcıların% 90'ından fazlası tarafından dünya genelinde daha fazla içerik sunar.

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

Bu da srcset ve sizes için muhteşem ilerlemeler gösteriyor.

Daha fazla bilgi

"Resimlerinizi optimize edin" bölümüne göz atın web.dev adresini ziyaret edin. Daha iyi rehberlik için öğrenmek istiyorsanız ücretsiz "Duyarlı Görseller" kursu Udacity.