jekyll webp下載 - jekyll webp原始碼下載

jekyll webp

其他類別

1.0.0

下載

Jekyll 的 WebP 產生器

Jekyll 網站的 WebP 影像產生器可以自動為靜態網站上的所有影像產生 WebP 影像，並在可能的情況下提供它們。在 rubygems.org 上查看。

在我的部落格 blog.sverrrirs.com 上了解有關此工具的更多信息

安裝

 gem install jekyll-webp

此版本包含執行所需的所有文件，包括 WebP 可再發行可執行文件。

目前該版本包括適用於 Windows、Linux 和 Mac OS X 10.9 (Mountain Lion) 的 WebP 實用程式 v0.6.1 版本。其他版本和發行版可以直接從 Google 頁面下載。

將 gem 新增至Gemfile和 Jekyll 的_config.yml中，然後再次執行jekyll serve ，您應該會看到產生器在網站產生期間執行。

配置

可以透過包含webp配置元素在網站的_config.yml檔案中配置該插件

 # ###########################################################
# 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
# ###########################################################

最簡單的使用：HTML

如果您無法控製網頁伺服器，那麼使用<picture>元素並指定所有可用的映像格式是最好的選擇。這樣瀏覽器就會根據自己的能力決定要使用哪一種格式。

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

進階使用：Web 伺服器配置

如果可以，那麼配置您的網頁伺服器以將新的.webp檔案提供給支援該格式的用戶端可能是問題最少的方法。這樣，您無需對 HTML 檔案進行任何更改，因為當用戶端支援 WebP 圖片時，您的網頁伺服器將自動提供 WebP 圖像。

以下是 Apache Web 伺服器中 .htaccess 設定部分的範例。只要有可能，它就會將使用者重新導向到 webp 映像。

 ####################
# 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