jekyll webp

Генератор WebP для Джекилла

Генератор изображений WebP для сайтов Jekyll может автоматически генерировать изображения WebP для всех изображений на вашем статическом сайте и обслуживать их, когда это возможно. Посмотреть на сайте Rubygems.org.

Подробнее об этом инструменте читайте в моем блоге blog.sverrirs.com.

Установка

 gem install jekyll-webp

Релиз включает в себя все необходимые для запуска файлы, включая распространяемые исполняемые файлы WebP.

В настоящее время выпуск включает версию v0.6.1 утилит WebP для Windows, Linux и Mac OS X 10.9 (Mountain Lion). Другие версии и выпуски можно загрузить прямо со страницы Google.

Добавьте драгоценный камень в свой Gemfile и в _config.yml Jekyll, затем снова запустите jekyll serve , и вы увидите, как генератор запускается во время создания сайта.

Конфигурация

Плагин можно настроить в файле _config.yml сайта, включив элемент конфигурации 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
# ########################################################### 

Самое простое использование: HTML.

Если у вас нет контроля над своим веб-сервером, лучшим вариантом будет использование элемента <picture> и указание всех доступных форматов изображений. Таким образом, браузер будет решать, какой формат использовать, исходя из своих возможностей.

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

Расширенное использование: конфигурация веб-сервера

Если вы можете, то настройка вашего веб-сервера для обслуживания ваших новых файлов .webp клиентам, поддерживающим этот формат, вероятно, будет наименее проблематичным подходом. Таким образом, вам не нужно вносить какие-либо изменения в ваши HTML-файлы, поскольку ваш веб-сервер будет автоматически обслуживать изображения WebP, если клиент их поддерживает.

Ниже приведен пример раздела конфигурации .htaccess на веб-сервере Apache. Он будет перенаправлять пользователей на изображения 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

В зависимости от других конфигураций в вашем файле .htaccess вам, возможно, придется обновить директивы ExpiresByType , ExpiresDefault и Header set Cache-Control чтобы они также включали формат webp.