WebP Me for Craft CMS

Simple function that returns a WebP formatted image url if the visitors browser and the server supports WebP, if not then it will fallback to a standard image url.

  • If both the server and visitors browser supports WebP, the passed image will be converted to WebP unless the passed image is a SVG.
  • If the visitors browser does not support WebP then the image will not be converted and will maintain its current format.
  • If the passed image is already a WebP image but the visitors browser does not support WebP then the image will be converted to a PNG (incase of transparency).

Usage

WebP Twig Function

Example:
<img src="{{ WebP(entry.image.one(), {'mode': 'crop', 'height': '600', 'width': '800'}) }}"/>

WebP(image asset, craft image transform params)

Using Preset Image Transforms

Example:
<img src="{{ WebP(entry.image.one(), {transform: 'headerImage'}) }}

Image Transform Params

Any craft support image parameters can be used See Docs

Possible Params:

{
  transform: 'headerImage', // (optional) pass to use preset image transform created in the CMS admin panel, optionally add other params in combination with this to override preset settings
  height: 300, // set height
  width: 800, // set width
  mode: 'crop', // set transform mode (crop, fit, letterbox, stretch)
  quality: 80, // ovveride quality settings
  position: 'top-center' // override default center position when no focal point (supported when using 'crop' or 'letterbox')
}

Optional Function Name Variations (for your preference)

WebP()
webp()
WebPMe()
webpMe()
webpme()

IsWebPSupported Twig Function

Useful for cache keys, to gnerate a cache version for webp support and one without when using {% cache %}

e.g. {% cache using key 'header-' ~ IsWebPSupported %} View Docs

IsWebPSupported

Return true or false depending on server and visitor browser support

Installation Instructions

To install this plugin, copy the command above to your terminal.

Active Installs
147
Version
1.1.2
License
MIT
Compatibility
Craft 4, Craft 5
Last release
February 20, 2024
Activity (30 days)
0
Closed Issues
0
Open Issues
0
Merged PRs
0
Open PRs