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

Katie Hempenius
Katie Hempenius
X

webp komut satırı aracı sizin için zaten yüklenmiş olduğundan başlamak için 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ü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. Şu komutu yazın:
cwebp -q 50 images/flower1.jpg -o images/flower1.webp

Bu komut, images/flower1.jpg dosyasını 50 kalitesinde (0 en kötüsü; 100 en iyi kalitede) dönüştürür ve images/flower1.webp olarak kaydeder.

Bunu yaptıktan sonra, konsolda şuna benzer bir şey 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 komutunu bu şekilde tek seferde bir resim olarak çalıştırmak, çok sayıda resmi dönüştürmek uzun zaman alır. Bunu yapmanız gerekiyorsa bunun yerine bir komut dosyası kullanabilirsiniz.

  • Bu komut dosyasını konsolda çalıştırın (vurgu işaretlerini 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 .webp dosya uzantısıyla) kaydeder.

✔️ Check-in

Artık images/ dizininizde 6 dosyanız olmalı:

flower1.jpg
flower1.webp
flower2.jpg
flower2.webp
flower3.png
flower3.webp

Daha sonra, bu Glitch'i, destekleyen tarayıcılara WebP resimleri sunacak şekilde güncelleyin.

<picture> etiketini kullanarak WebP resimleri ekleyin

<picture> etiketi, eski tarayıcılar için desteği korurken WebP'yi yeni tarayıcılara sunmanıza olanak tanır.

  • index.html içinde <img src="images/flower1.jpg"/> ifadesini aşağıdaki 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>
  • Ardından, flower2.jpg ve flower3.png için <img> etiketlerini <picture> etiketleriyle değiştirin.

✔️ Check-in

Tamamlandığında, index.html içindeki <picture> etiketleri şu şekilde 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 görüntülerini sitede doğru şekilde uyguladığınızı doğrulamak için Lighthouse'u kullanın.

Lighthouse ile WebP kullanımını doğrulama

Lighthouse'un Resimleri yeni nesil biçimlerde sunma performans denetimi, sitenizdeki tüm resimlerin WebP gibi yeni nesil biçimleri kullanıp kullanmadığını bilmenizi sağlayabilir.

  1. Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a tam ekran 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 yeni nesil biçimlerde sunma denetiminin başarılı olduğunu doğrulayın.

Lighthouse&#39;daki &quot;Resimleri yeni nesil biçimlerde sunma&quot; denetimini geçme

Başarıyla gerçekleştirildi. Şu anda sitenizde WebP resimleri sunuyorsunuz.