jekyll webp

Generator WebP untuk Jekyll

Generator Gambar WebP untuk Situs Jekyll dapat secara otomatis menghasilkan gambar WebP untuk semua gambar di situs statis Anda dan menyajikannya bila memungkinkan. Lihat di rubygems.org.

Baca lebih lanjut tentang alat ini di blog saya di blog.sverrirs.com

Instalasi

 gem install jekyll-webp

Rilis ini mencakup semua file yang diperlukan untuk dijalankan, termasuk file executable WebP yang dapat didistribusikan ulang.

Saat ini rilisnya mencakup utilitas WebP versi v0.6.1 untuk Windows, Linux dan Mac OS X 10.9 (Mountain Lion). Versi dan rilis lainnya dapat diunduh langsung dari halaman Google.

Tambahkan permata ke Gemfile Anda dan ke _config.yml Jekyll lalu jalankan jekyll serve lagi dan Anda akan melihat generator berjalan selama pembuatan situs.

Konfigurasi

Plugin dapat dikonfigurasi di file _config.yml situs dengan menyertakan elemen konfigurasi webp

 # ###########################################################
# Site configuration for the WebP Generator Plugin
# The values here represent the defaults if nothing is set
webp :
  enabled : true
  
  # The quality of the webp conversion 0 to 100 (where 100 is least lossy)
  quality : 75

  # List of directories containing images to optimize, nested directories will only be checked if `nested` is true
  # By default the generator will search for a folder called `/img` under the site root and process all jpg, png and tiff image files found there.
  img_dir : ["/img"]

  # Whether to search in nested directories or not
  nested : false

  # add ".gif" to the format list to generate webp for animated gifs as well
  formats : [".jpeg", ".jpg", ".png", ".tiff"]

  # File extensions for animated gif files 
  gifs : [".gif"]

  # Set to true to always regenerate existing webp files
  regenerate : false

  # Local path to the WebP utilities to use (relative or absolute)
  # Omit or leave as nil to use the utilities shipped with the gem, override only to use your local install
  # Eg : "/usr/local/bin/cwebp"
  webp_path : nil

  # List of files or directories to exclude
  # e.g. custom or hand generated webp conversion files
  exclude : []

  # append '.webp' to filename after original extension rather than replacing it.
  # Default transforms `image.png` to `image.webp`, while changing to true transforms `image.png` to `image.png.webp`
  append_ext : false
# ########################################################### 

Penggunaan paling sederhana: HTML

Jika Anda tidak memiliki kendali atas server web Anda maka menggunakan elemen <picture> dan menentukan semua format gambar yang tersedia adalah pilihan terbaik. Dengan cara ini browser akan memutuskan format mana yang akan digunakan berdasarkan kemampuannya sendiri.

 < picture >
  < source srcset =" /path/to/image.webp " type =" image/webp " >
  < img src =" /path/to/image.jpg " alt ="" >
</ picture > 

Penggunaan tingkat lanjut: Konfigurasi Server Web

Jika bisa, mengonfigurasi server web Anda untuk menyajikan file .webp baru Anda ke klien yang mendukung format tersebut mungkin merupakan pendekatan yang paling tidak menimbulkan masalah. Dengan cara ini Anda tidak perlu melakukan perubahan apa pun pada file HTML karena server web Anda akan secara otomatis menyajikan gambar WebP ketika klien mendukungnya.

Di bawah ini adalah contoh bagian konfigurasi .htaccess di server web Apache. Ini akan mengarahkan pengguna ke gambar webp bila memungkinkan.

 ####################
# Attempt to redirect images to WebP if one exists 
# and the client supports the file format
####################
# check if browser accepts webp
RewriteCond %{HTTP_ACCEPT} image/webp 

# check if file is jpg or png
RewriteCond %{REQUEST_FILENAME} (.*).(jpe?g|png)$

# check if corresponding webp file exists image.png -> image.webp
RewriteCond %1.webp -f

# serve up webp instead
RewriteRule (.+).(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]

AddType image/webp .webp

Bergantung pada konfigurasi lain di file .htaccess Anda, Anda mungkin harus memperbarui arahan ExpiresByType , ExpiresDefault dan Header set Cache-Control untuk menyertakan format webp juga.