Resimleri doğru boyutlarda sunma

Katie Hempenius

Lighthouse'u çalıştır

Bu arıza, görüntülerinin elle incelenebileceği kadar küçüktür. Ancak çoğu web sitesi için bunu otomatikleştirmek amacıyla Lighthouse gibi bir araç kullanmak çok önemlidir.

1. Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a basın.
2. Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+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. Resimleri Uygun Şekilde Boyutlandır denetiminin sonuçlarını inceleyin.

Lighthouse denetimi bu sayfanın her iki resminin de yeniden boyutlandırılması gerektiğini gösteriyor.

flower_logo.png ile ilgili sorunları düzeltin

Sayfanın üst kısmından başlayın ve logo resmini düzeltin.

• Geliştirici Araçları'nın Öğeler panelinde flower_logo.png aracını inceleyin.

flower_logo.png için CSS:

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

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

1. Projeyi düzenlenebilir hale getirmek için Düzenlenecek remiks'i 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 şunu yazın:

convert flower_logo.png -resize 50x50 flower_logo.png

çiçek_fotoğrafı.jpg sorununu düzelt

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

• DevTools'un öğe panelinde flower_photo.jpg raporunu inceleyin.

flower_photo.jpg için CSS:

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

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

Bu resmin ideal boyutu, görüntülendiği cihaza göre değişir. 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 hangi ekran çözünürlüklerinin yaygın olduğunu öğrenmek için analiz verilerinizi kontrol edebilirsiniz:

Bu veriler, bu siteye gelen ziyaretçilerin%95'inden fazlasının, 1920 piksel veya daha az genişlikte ekran çözünürlükleri kullandığını göstermektedir.

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

1920 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, bunun etkileri çok belirgin olmayacaktır.

• Resmi 960 piksel genişliğe getirmek için ImageMagick'i kullanın. Terminal türünde:

# 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ır

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

... Ve başarısız oluyor! Bunun nedeni nedir?

Lighthouse, testlerini Nexus 5x'te yürütüyor. Nexus 5x'in ekranı 1080 x 1920'dir. Nexus 5x için flower_photo.jpg adlı cihazın optimum boyutu 540 piksel genişlikte (1080 piksel * . 5). Bu, yeniden boyutlandırılan resmimizden çok daha küçük.

Resmi daha da küçük hale getirmek için yeniden boyutlandırmanız gerekir mi? Muhtemelen. Ancak bu sorunun cevabı her zaman kesin değildir.

Burada denge, yüksek çözünürlüklü cihazlardaki görüntü kalitesi ile performans arasındadır. Kullanıcıların resimleri ne kadar yakından görüntüleyeceklerini tahmin etmek kolaydır. Bu nedenle, muhtemelen fotoğrafları küçültmeniz gerekir. Ancak elbette resim 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. Duyarlı Resimler kılavuzunda bu konu hakkında daha fazla bilgi edinebilirsiniz.