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

Katie Hempenius
Katie Hempenius
X

Webp komut satırı aracı uygulaması sizin için zaten yüklendi, dolayısıyla aracı kullanmaya hazırsınız. Bu araç JPG, PNG ve TIFF resimleri 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 oluştur'u 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 kalitesinde (0 en kötü, 100 en iyi kalitedir) 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 komutunu her seferinde tek bir resimle çalıştırmak çok uzun sürdüğünü görebilirsiniz. Bunu yapmanız gerekirse 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/ klasöründeki tüm dosyaları 50 kalitesinde dönüştürür dizine ekler ve bunları yeni bir dosya olarak kaydeder (aynı dosya adıyla ancak bir .webp dosyasıyla) uzantısıyla aynı dizinde).

✔︎ Giriş

images/ dizininizde artık 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 ekleme

<picture> etiketi, bir yandan taramayı sürdürürken diğer yandan da yeni tarayıcılara WebP'yi sunmanıza olanak tanır. eski tarayıcıları destekler.

  • index.html içinde <img src="images/flower1.jpg"/>'yi 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>
  • Sonra, flower2.jpg ve flower3.png için <img> etiketlerini şununla değiştirin: <picture> etiket.

✔︎ Giriş

İş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 doğru şekilde uyguladığınızı doğrulamak için Lighthouse'u kullanın. girin.

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

Lighthouse'un Resimleri yeni nesil biçimlerde yayınlayın performans denetimi, sitenizdeki tüm resimlerin WebP gibi yeni nesil biçimleri 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.
  2. Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+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.

&quot;Resimleri yeni nesil biçimlerde yayınla&quot;yı geçirme Lighthouse&#39;da denetim

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