Lighthouse'u çalıştırma
Bu arıza, resimleri elle incelenebilecek kadar küçük. Ancak çoğu web sitesi için bu işlemi otomatikleştirmek amacıyla Lighthouse gibi bir araç kullanmak çok önemlidir.
- Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran düğmesine basın.
- Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
- Lighthouse sekmesini tıklayın.
- Kategoriler listesinde Performans onay kutusunun seçili olduğundan emin olun.
- Rapor oluştur düğmesini tıklayın.
- Görselleri Uygun Şekilde Boyutlandırın denetiminin sonuçlarını arayın.
Lighthouse denetimi, bu sayfadaki her iki resmin de yeniden boyutlandırılması gerektiğini gösterir.
flower_logo.png
ile ilgili sorunları düzeltin
Sayfanın en üstünden başlayarak logo resmini düzeltin.
- Geliştirici Araçları Öğeleri panelinde
flower_logo.png
bölümü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
, 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.
- Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiks oluştur'u tıklayın.
- Terminal'i tıklayın (not: Terminal düğmesi görünmüyorsa Tam Ekran seçeneğini kullanmanız gerekebilir).
- 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.
- Geliştirici Araçları öğeler panelinde
flower_photo.jpg
özelliğini inceleyin.
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 resmin ideal boyutu, görüntülendiği cihaza bağlıdır. Bu nedenle, resmi kullanıcılarınızın çoğu için uygun olan 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 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ğu için bunun etkileri çok belirgin olmamalıdı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.
… 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üçük olacak şekilde yeniden boyutlandırmanız 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 konuda daha fazla bilgiyi Duyarlı Resimler kılavuzunda bulabilirsiniz.