jekyll webp

Générateur WebP pour Jekyll

WebP Image Generator for Jekyll Sites peut générer automatiquement des images WebP pour toutes les images de votre site statique et les servir lorsque cela est possible. Voir sur rubygems.org.

En savoir plus sur cet outil sur mon blog à blog.sverrirs.com

Installation

 gem install jekyll-webp

La version inclut tous les fichiers nécessaires à l'exécution, y compris les fichiers exécutables redistribuables WebP.

Actuellement, la version inclut la version v0.6.1 des utilitaires WebP pour Windows, Linux et Mac OS X 10.9 (Mountain Lion). D'autres versions et versions peuvent être téléchargées directement à partir de la page Google.

Ajoutez la gemme à votre Gemfile et au _config.yml de Jekyll, puis exécutez à nouveau jekyll serve et vous devriez voir le générateur fonctionner pendant la génération du site.

Configuration

Le plugin peut être configuré dans le fichier _config.yml du site en incluant l'élément de configuration 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
# ########################################################### 

Utilisation la plus simple : HTML

Si vous n'avez pas de contrôle sur votre serveur Web, utiliser l'élément <picture> et spécifier tous les formats d'image disponibles est la meilleure option. De cette façon, le navigateur décidera quel format utiliser en fonction de ses propres capacités.

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

Utilisation avancée : Configuration du serveur Web

Si vous le pouvez, configurer votre serveur Web pour qu'il serve vos nouveaux fichiers .webp aux clients prenant en charge le format est probablement l'approche la moins problématique. De cette façon, vous n'avez pas besoin d'apporter de modifications à vos fichiers HTML, car votre serveur Web servira automatiquement les images WebP lorsque le client les prendra en charge.

Vous trouverez ci-dessous un exemple de section de configuration .htaccess dans un serveur Web Apache. Il redirigera les utilisateurs vers les images Webp autant que possible.

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

En fonction d'autres configurations dans votre fichier .htaccess vous devrez peut-être mettre à jour vos directives Header set Cache-Control ExpiresByType , ExpiresDefault et Header pour inclure également le format webp.