jekyll webp

Generador WebP para Jekyll

WebP Image Generator para sitios Jekyll puede generar automáticamente imágenes WebP para todas las imágenes de su sitio estático y publicarlas cuando sea posible. Ver en rubygems.org.

Lea más sobre esta herramienta en mi blog en blog.sverrirs.com

Instalación

 gem install jekyll-webp

La versión incluye todos los archivos necesarios para la ejecución, incluidos los archivos ejecutables redistribuibles de WebP.

Actualmente, el lanzamiento incluye la versión v0.6.1 de las utilidades WebP para Windows, Linux y Mac OS X 10.9 (Mountain Lion). Otras versiones y lanzamientos se pueden descargar directamente desde la página de Google.

Agregue la gema a su Gemfile y al _config.yml de Jekyll, luego ejecute jekyll serve nuevamente y debería ver el generador ejecutándose durante la generación del sitio.

Configuración

El complemento se puede configurar en el archivo _config.yml del sitio incluyendo el elemento de configuración 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
# ########################################################### 

Uso más sencillo: HTML

En caso de que no tenga control sobre su servidor web, la mejor opción es utilizar el elemento <picture> y especificar todos los formatos de imagen disponibles. De esta forma, el navegador decidirá qué formato utilizar en función de sus propias capacidades.

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

Uso avanzado: Configuración del servidor web

Si puede, entonces configurar su servidor web para entregar sus nuevos archivos .webp a clientes que admitan el formato es probablemente el enfoque menos problemático. De esta manera, no necesita realizar ningún cambio en sus archivos HTML, ya que su servidor web proporcionará automáticamente imágenes WebP cuando el cliente las admita.

A continuación se muestra un ejemplo de una sección de configuración .htaccess en un servidor web Apache. Redirigirá a los usuarios a imágenes webp siempre que sea posible.

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

Dependiendo de otras configuraciones en su archivo .htaccess es posible que deba actualizar sus directivas ExpiresByType , ExpiresDefault y Header set Cache-Control para incluir también el formato webp.