Der WebP-Bildgenerator für Jekyll-Sites kann automatisch WebP-Bilder für alle Bilder auf Ihrer statischen Site generieren und diese nach Möglichkeit bereitstellen. Auf rubygems.org ansehen.
Lesen Sie mehr über dieses Tool in meinem Blog unter blog.sverrirs.com
gem install jekyll-webp
Die Version enthält alle zum Ausführen erforderlichen Dateien, einschließlich der weiterverteilbaren ausführbaren WebP-Dateien.
Derzeit enthält die Version die Version 0.6.1 der WebP-Dienstprogramme für Windows, Linux und Mac OS X 10.9 (Mountain Lion). Weitere Versionen und Releases können direkt von der Google-Seite heruntergeladen werden.
Fügen Sie den Gem zu Ihrer Gemfile
und zu Jekylls _config.yml
hinzu und führen Sie dann jekyll serve
erneut aus. Sie sollten sehen, dass der Generator während der Site-Generierung ausgeführt wird.
Das Plugin kann in der _config.yml
Datei der Site konfiguriert werden, indem das webp
Konfigurationselement eingefügt wird
# ###########################################################
# 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
# ###########################################################
Falls Sie keine Kontrolle über Ihren Webserver haben, ist die Verwendung des <picture>
-Elements und die Angabe aller verfügbaren Bildformate die beste Option. Auf diese Weise entscheidet der Browser basierend auf seinen eigenen Fähigkeiten, welches Format er verwenden möchte.
< picture >
< source srcset =" /path/to/image.webp " type =" image/webp " >
< img src =" /path/to/image.jpg " alt ="" >
</ picture >
Wenn Sie können, ist die Konfiguration Ihres Webservers für die Bereitstellung Ihrer neuen .webp- Dateien an Clients, die das Format unterstützen, wahrscheinlich der am wenigsten problematische Ansatz. Auf diese Weise müssen Sie keine Änderungen an Ihren HTML-Dateien vornehmen, da Ihr Webserver automatisch WebP-Bilder bereitstellt, wenn der Client sie unterstützt.
Unten finden Sie ein Beispiel für einen .htaccess-Konfigurationsabschnitt in einem Apache-Webserver. Benutzer werden nach Möglichkeit auf WebP-Bilder umgeleitet.
####################
# 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
Abhängig von anderen Konfigurationen in Ihrer
.htaccess
Datei müssen Sie möglicherweise IhreExpiresByType
,ExpiresDefault
undHeader set Cache-Control
Anweisungen aktualisieren, um auch das WebP-Format einzubeziehen.