webp komut satırı aracı sizin için önceden yüklenmiştir, dolayısıyla kullanmaya hazırsınız. Bu araç JPG, PNG ve TIFF resimlerini WebP'ye dönüştürür.
Resimleri WebP'ye dönüştürün
- Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i tıklayın.
- Terminal'i tıklayın (not: Terminal düğmesi görünmüyorsa Tam Ekran seçeneğini kullanmanız gerekebilir).
- Aşağıdaki komutu yazın:
cwebp -q 50 images/flower1.jpg -o images/flower1.webp
Bu komut, images/flower1.jpg
dosyasını 50
(0
en kötü ve 100
en iyi) kalitesinde dönüştürür ve images/flower1.webp
olarak kaydeder.
Bu işlemi yaptıktan sonra konsolda şuna benzer bir çıkış görürsünüz:
Saving file 'images/flower1.webp'
File: images/flower1.jpg
Dimension: 504 x 378
Output: 29538 bytes Y-U-V-All-PSNR 34.57 36.57 36.12 35.09 dB
(1.24 bpp)
block count: intra4: 750 (97.66%)
intra16: 18 (2.34%)
skipped: 0 (0.00%)
bytes used: header: 116 (0.4%)
mode-partition: 4014 (13.6%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 22%| 26%| 36%| 17%| 768
quantizer: | 52 | 42 | 33 | 24 |
filter level: | 16 | 9 | 6 | 26 |
Resmi başarıyla WebP'ye dönüştürdünüz.
Ancak cwebp
komutunun bu şekilde tek seferde bir resim çalıştırılması çok sayıda resmi dönüştürmek uzun sürer. Bunu yapmanız gerekiyorsa bunun yerine bir komut dosyası kullanabilirsiniz.
- Konsolda bu komut dosyasını çalıştırın (alt çizgileri unutmayın):
`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`
Bu komut dosyası, images/
dizinindeki tüm dosyaları 50
kalitesinde dönüştürür ve bunları aynı dizinde yeni bir dosya olarak (aynı dosya adı ancak bir .webp
dosya uzantısıyla) kaydeder.
✔︎ Check-in
Artık images/
dizininizde 6 dosya bulunmalıdır:
flower1.jpg
flower1.webp
flower2.jpg
flower2.webp
flower3.png
flower3.webp
Ardından, destekleyen tarayıcılara WebP resimleri sunmak için bu Glitch'i güncelleyin.
<picture>
etiketini kullanarak WebP resimleri ekleyin
<picture>
etiketi, eski tarayıcılara yönelik destek sunmaya devam ederken yeni tarayıcılara WebP'yi sunmanıza olanak tanır.
index.html
içindeki<img src="images/flower1.jpg"/>
değerini şu HTML ile değiştirin:
<picture>
<source type="image/webp" srcset="images/flower1.webp">
<source type="image/jpeg" srcset="images/flower1.jpg">
<img src="images/flower1.jpg">
</picture>
- Daha sonra,
flower2.jpg
veflower3.png
için<img>
etiketlerini<picture>
etiketleriyle değiştirin.
✔︎ Check-in
İşlem tamamlandığında, index.html
içindeki <picture>
etiketleri şöyle görünmelidir:
<picture>
<source type="image/webp" srcset="images/flower1.webp">
<source type="image/jpeg" srcset="images/flower1.jpg">
<img src="images/flower1.jpg">
</picture>
<picture>
<source type="image/webp" srcset="images/flower2.webp">
<source type="image/jpeg" srcset="images/flower2.jpg">
<img src="images/flower2.jpg">
</picture>
<picture>
<source type="image/webp" srcset="images/flower3.webp">
<source type="image/png" srcset="images/flower3.png">
<img src="images/flower3.png">
</picture>
Ardından, WebP resimlerini sitede doğru şekilde uyguladığınızı doğrulamak için Lighthouse'u kullanın.
WebP kullanımını Lighthouse ile doğrulama
Lighthouse'un Resimleri yeni nesil biçimlerde yayınlama performans denetimi, sitenizdeki tüm resimlerin WebP gibi yeni nesil biçimler kullanıp kullanmadığını öğrenmenizi sağlayabilir.
- 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 "Control+Üst Karakter+J" (veya Mac'te "Command+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örüntüleri yeni nesil biçimlerde yayınlayın denetiminin geçildiğini doğrulayın.
Başarıyla gerçekleştirildi. Artık sitenizde WebP resimleri sunuyorsunuz.