Komut Satırıyla WebP Görüntüleri Oluşturma

Katie Hempenius
Katie Hempenius
X

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

  1. Projeyi düzenlenebilir hale getirmek için Düzenlemek için 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. 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 ve flower3.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.

  1. Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran tam ekran düğmesine basın.
  2. Geliştirici Araçları'nı açmak için "Control+Üst Karakter+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. Görüntüleri yeni nesil biçimlerde yayınlayın denetiminin geçildiğini doğrulayın.

Lighthouse&#39;ta &quot;Görüntüleri yeni nesil biçimlerde yayınlayın&quot; denetimini geçme

Başarıyla gerçekleştirildi. Artık sitenizde WebP resimleri sunuyorsunuz.