Resimleri doğru boyutlarda sunma

Katie Hempenius
Katie Hempenius

Bu Glitch, resimlerinin elle incelenebilecek kadar küçüktür. Ancak çoğu web sitesi için bu işlemi otomatikleştirmek amacıyla Lighthouse gibi bir araç kullanmak çok önemlidir.

  1. Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a tam ekran basın.
  2. Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
  3. Lighthouse sekmesini tıklayın.
  4. Kategoriler listesinde Performans onay kutusunun seçili olduğundan emin olun.
  5. Rapor oluştur düğmesini tıklayın.
  6. Görselleri Uygun Şekilde Boyutlandırın denetiminin sonuçlarını arayın.

Lighthouse'ta "Görselleri uygun şekilde boyutlandırın" denetimi başarısız.

Lighthouse denetimi, bu sayfadaki her iki resmin de yeniden boyutlandırılması gerektiğini gösteriyor.

flower_logo.png ile ilgili sorunları düzeltin

Sayfanın en üstünden başlayarak logo resmini düzeltin.

  • DevTools Nesneler panelinde flower_logo.png öğesini inceleyin.

Geliştirici Araçları nesne paneli

flower_logo.png için CSS:

.logo {
  width: 50px;
  height: 50px;
}

Bu resmin CSS genişliği 50 piksel olduğundan flower_logo.png, eşleşecek şekilde yeniden boyutlandırılmalıdır. Resmi sığacak şekilde yeniden boyutlandırmak için ImageMagick'i kullanabilirsiniz. ImageMagick, kod laboratuvarının ortamına önceden yüklenmiş bir resim düzenleme KSA aracıdır.

  1. Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiks oluştur'u tıklayın.
  2. Terminal'i tıklayın (not: Terminal düğmesi görünmüyorsa Tam Ekran seçeneğini kullanmanız gerekebilir).
  3. Konsolda şunları yazın:
convert flower_logo.png -resize 50x50 flower_logo.png

flower_photo.jpg dosyasını düzeltin

Ardından, mor çiçeklerin fotoğrafını düzeltin.

  • DevTools öğe panelinde flower_photo.jpg öğesini inceleyin.

Geliştirici Araçları nesne paneli

flower_photo.jpg için CSS:

.photo {
  width: 50vw;
  margin: 30px auto;
  border: 1px solid black;
}

50vw, flower_photo.jpg öğesinin CSS genişliğini "tarayıcının genişliğinin yarısı" olarak ayarlar. (1vw, tarayıcının genişliğinin% 1'ine eşittir).

Bu resim için ideal boyut, görüntülendiği cihaza bağlıdır. Bu nedenle, resmi kullanıcılarınızın çoğu için uygun bir boyuta yeniden boyutlandırmanız gerekir. Kullanıcılarınız arasında yaygın olarak hangi ekran çözünürlüklerinin kullanıldığını öğrenmek için analiz verilerinizi kontrol edebilirsiniz:

Ekran çözünürlüklerinin Google Analytics'i.

Bu veriler, bu sitenin ziyaretçilerinin%95'inden fazlasının 1.920 piksel genişliğinde veya daha düşük ekran çözünürlüğü kullandığını gösteriyor.

Bu bilgileri kullanarak resmin ne kadar geniş olması gerektiğini hesaplayabiliriz: (1920 piksel genişliğinde) * (tarayıcı genişliğinin% 50'si) = 960 piksel

1.920 pikselden geniş çözünürlüklerde resim, alanı kaplayacak şekilde uzatılır. Yeniden boyutlandırılan resim hâlâ oldukça büyük olduğundan bu durumun etkileri çok belirgin olmayacaktır.

  • Resmi 960 piksel genişliğinde olacak şekilde yeniden boyutlandırmak için ImageMagick'i kullanın. Terminalde şunu yazın:
# macOS/Linux
convert flower_photo.jpg -resize 960x flower_photo.jpg

# Windows
magick convert flower_photo.jpg -resize 960x flower_photo.jpg

Lighthouse'u yeniden çalıştırma

  • Resimleri başarıyla yeniden boyutlandırdığınızı doğrulamak için Lighthouse Performans denetimini yeniden çalıştırın.

Lighthouse'un resimleri uygun şekilde boyutlandırma denetimi.

… Ve başarısız olur. Bunun nedeni nedir?

Lighthouse, testlerini Nexus 5X'te çalıştırır. Nexus 5x'in ekranı 1080 x 1920'dir. Nexus 5x için flower_photo.jpg'ün optimum boyutu 540 piksel genişliğinde (1080 piksel * . 5). Bu, yeniden boyutlandırılmış resmimizden çok daha küçük.

Resmi daha da küçültmeniz gerekir mi? Muhtemelen. Ancak bu sorunun cevabı her zaman net değildir.

Burada, yüksek çözünürlüklü cihazlardaki görüntü kalitesi ile performans arasında bir denge kurulmalıdır. Kullanıcıların resimleri ne kadar yakından inceleyeceğini tahmin etmek kolaydır. Bu nedenle, resimleri daha küçük yapmanız gerekir. Ancak görüntü kalitesinin daha önemli olduğu kullanım alanları da vardır.

Neyse ki birden fazla resim boyutu sunmak için duyarlı resimler kullanarak bu dengeyi tamamen atlayabilirsiniz. Bu konu hakkında daha fazla bilgiyi Duyarlı Resimler kılavuzunda bulabilirsiniz.