Skip to content

Commit

Permalink
* Added support for automatic webp image variant creation
Browse files Browse the repository at this point in the history
  • Loading branch information
@khalwat
khalwat committed Aug 7, 2017
1 parent d42afff commit 07e3f21
Show file tree
Hide file tree
Showing 7 changed files with 366 additions and 110 deletions.
28 changes: 26 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,16 @@ ImageOptimize works equally well with both local and remote assets such as Amazo

## Configuring ImageOptimize

The only configuration for ImageOptimize is in the `config.php` file, which is a multi-environment friendly way to store the default settings. Don't edit this file, instead copy it to `craft/config` as `ImageOptimize.php` and make your changes there.
The only configuration for ImageOptimize is in the `config.php` file, which is a multi-environment friendly way to store the default settings. Don't edit this file, instead copy it to `craft/config` as `image-optimize.php` and make your changes there.

The `activeImageProcessors` array lets you specify which of the image optimization tools to use for which file types.

The `imageProcessors` array specifies the path and options for each of the image optimization tools.

The `activeImageVariantCreators` array lets you specify which of the image variant creators to use for which file types.

The `imageVariantCreators` array specifies the path and options for each of the image optimization tools.

See each image optimization tool's documentation for details on the options they allow you to use.

## Using ImageOptimize
Expand All @@ -52,10 +56,30 @@ If you have `devMode` on, ImageOptimize will log stats for images that it optimi
2017-03-12 07:49:27 [192.168.10.1][1][-][info][nystudio107\ImageOptimize\services\Optimize::handleGenerateTransformEvent] zappa.png -> Original: 129.5K, Optimized: 100.8K -> Savings: 28.4%
```

## Image Variants

ImageOptimize can also automatically create image variants for transformed images. Whenever an image transform is created, ImageTransform can create the same image in multiple file formats.

This is especially useful when implementing [webp images](https://developers.google.com/speed/webp/), so that you can make `.webp` images available to browsers that support them, while falling back on traditional `.png` and `.jpg` images for browsers that don't.

Here's an example of what it looks like for images with the transform `Some Transform` applied to them:

![Screenshot](img/image-variants.png)

The savings from using `.webp` can be significant, without sacrificing image quality:

![Screenshot](img/image-variants-filesize.png)

`webp` also supports transparency, so it can be used as a viable substitute for both `.jpg` and `.png`

For `.webp` image variants, the suffix `.webp` is simply added to the name of the transformed image, so `painted-face.jpg` becomes `painted-face.jpg.webp`. So you can display the URL via `{{ entry.someAsset.first().getUrl('someTransform') ~ '.webp' }}`

To serve up `.webp` variant images, you can either use the HTML5 [<picture> element](https://www.html5rocks.com/en/tutorials/responsive/picture-element/#toc-file-type) to let browser choose what to display, or you can have your web server [serve them up automatically](https://github.com/uhop/grunt-tight-sprite/wiki/Recipe:-serve-WebP-with-nginx-conditionally). Some CDNs even support [serving up .webp images automatically](https://www.maxcdn.com/blog//how-to-reduce-image-size-with-webp-automagically/).

## ImageOptimize Roadmap

Some things to do, and ideas for potential features:

* Add support for addition image optimization tools
* Add support for additional image optimization tools

Brought to you by [nystudio107](https://nystudio107.com)
2 changes: 1 addition & 1 deletion composer.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "nystudio107/craft3-imageoptimize",
"description": "Automatically optimize images after they've been transformed",
"type": "craft-plugin",
"version": "1.0.10",
"version": "1.1.0",
"keywords": [
"craft",
"cms",
Expand Down
Binary file added img/image-variants-filesize.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/image-variants.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
123 changes: 70 additions & 53 deletions src/config.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,86 +14,103 @@
* This file exists only as a template for the ImageOptimize settings.
* It does nothing on its own.
*
* Don't edit this file, instead copy it to 'craft/config' as 'imageoptimize.php'
* and make your changes there to override default settings.
* Don't edit this file, instead copy it to 'craft/config' as
* 'imageoptimize.php' and make your changes there to override default
* settings.
*
* Once copied to 'craft/config', this file will be multi-environment aware as
* well, so you can have different settings groups for each environment, just as
* well, so you can have different settings groups for each environment, just
* as
* you do for 'general.php'
*/

return [

// Active image processors
"activeImageProcessors" => [
"jpg" => [
"jpegoptim",
'activeImageProcessors' => [
'jpg' => [
'jpegoptim',
],
"png" => [
"optipng",
'png' => [
'optipng',
],
"svg" => [
"svgo",
'svg' => [
'svgo',
],
"gif" => [
"gifsicle",
'gif' => [
'gifsicle',
],
"webp" => [
"cwebp",
],

// Active image variant creators
'activeImageVariantCreators' => [
'jpg' => [
'cwebp',
],
'png' => [
'cwebp',
],
'gif' => [
'cwebp',
],
],

// Preset image processors
"imageProcessors" => [
'imageProcessors' => [
// jpeg optimizers
"jpegoptim" => [
"commandPath" => "/usr/bin/jpegoptim",
"commandOptions" => "-s",
"commandOutputFileFlag" => "",
'jpegoptim' => [
'commandPath' => '/usr/bin/jpegoptim',
'commandOptions' => '-s',
'commandOutputFileFlag' => '',
],
"mozjpeg" => [
"commandPath" => "/usr/bin/mozjpeg",
"commandOptions" => "-optimize -copy none",
"commandOutputFileFlag" => "-outfile",
'mozjpeg' => [
'commandPath' => '/usr/bin/mozjpeg',
'commandOptions' => '-optimize -copy none',
'commandOutputFileFlag' => '-outfile',
],
"jpegtran" => [
"commandPath" => "/usr/bin/jpegtran",
"commandOptions" => "-optimize -copy none",
"commandOutputFileFlag" => "",
'jpegtran' => [
'commandPath' => '/usr/bin/jpegtran',
'commandOptions' => '-optimize -copy none',
'commandOutputFileFlag' => '',
],
// png optimizers
"optipng" => [
"commandPath" => "/usr/bin/optipng",
"commandOptions" => "-o7 -strip all",
"commandOutputFileFlag" => "",
'optipng' => [
'commandPath' => '/usr/bin/optipng',
'commandOptions' => '-o7 -strip all',
'commandOutputFileFlag' => '',
],
"pngcrush" => [
"commandPath" => "/usr/bin/pngcrush",
"commandOptions" => "-brute -ow",
"commandOutputFileFlag" => "",
'pngcrush' => [
'commandPath' => '/usr/bin/pngcrush',
'commandOptions' => '-brute -ow',
'commandOutputFileFlag' => '',
],
"pngquant" => [
"commandPath" => "/usr/bin/pngquant",
"commandOptions" => "--strip --skip-if-larger",
"commandOutputFileFlag" => "",
'pngquant' => [
'commandPath' => '/usr/bin/pngquant',
'commandOptions' => '--strip --skip-if-larger',
'commandOutputFileFlag' => '',
],
// svg optimizers
"svgo" => [
"commandPath" => "/usr/bin/svgo",
"commandOptions" => "",
"commandOutputFileFlag" => "",
'svgo' => [
'commandPath' => '/usr/bin/svgo',
'commandOptions' => '',
'commandOutputFileFlag' => '',
],
// gif optimizers
"gifsicle" => [
"commandPath" => "/usr/bin/gifsicle",
"commandOptions" => "-O3 -k 256",
"commandOutputFileFlag" => "",
],
// webp optimizers
"cwebp" => [
"commandPath" => "/usr/bin/cwebp",
"commandOptions" => "",
"commandOutputFileFlag" => "",
'gifsicle' => [
'commandPath' => '/usr/bin/gifsicle',
'commandOptions' => '-O3 -k 256',
'commandOutputFileFlag' => '',
],
],

'imageVariantCreators' => [
// webp variant creator
'cwebp' => [
'commandPath' => '/usr/bin/cwebp',
'commandOptions' => '',
'commandOutputFileFlag' => '-o',
'commandQualityFlag' => '-q',
'imageVariantExtension' => 'webp',
],
],

Expand Down
72 changes: 51 additions & 21 deletions src/models/Settings.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,21 @@ class Settings extends Model
'gif' => [
'gifsicle',
],
'webp' => [
];

/**
* Active image variant creators
*
* @var array
*/
public $activeImageVariantCreators = [
'jpg' => [
'cwebp',
],
'png' => [
'cwebp',
],
'gif' => [
'cwebp',
],
];
Expand All @@ -55,44 +69,58 @@ class Settings extends Model
public $imageProcessors = [
// jpeg optimizers
'jpegoptim' => [
'commandPath' => '/usr/bin/jpegoptim',
'commandOptions' => '-s',
'commandPath' => '/usr/bin/jpegoptim',
'commandOptions' => '-s',
'commandOutputFileFlag' => '',
],
'mozjpeg' => [
'commandPath' => '/usr/bin/mozjpeg',
'commandOptions' => '-optimize -copy none',
'commandPath' => '/usr/bin/mozjpeg',
'commandOptions' => '-optimize -copy none',
'commandOutputFileFlag' => '-outfile',
],
'jpegtran' => [
'commandPath' => '/usr/bin/jpegtran',
'commandOptions' => '-optimize -copy none',
'commandPath' => '/usr/bin/jpegtran',
'commandOptions' => '-optimize -copy none',
'commandOutputFileFlag' => '',
],
// png optimizers
'optipng' => [
'commandPath' => '/usr/bin/optipng',
'commandOptions' => '-o7 -strip all',
'commandPath' => '/usr/bin/optipng',
'commandOptions' => '-o7 -strip all',
'commandOutputFileFlag' => '',
],
'pngcrush' => [
'commandPath' => '/usr/bin/pngcrush',
'commandOptions' => '-brute -ow',
'commandPath' => '/usr/bin/pngcrush',
'commandOptions' => '-brute -ow',
'commandOutputFileFlag' => '',
],
'pngquant' => [
'commandPath' => '/usr/bin/pngquant',
'commandOptions' => '--strip --skip-if-larger',
'commandPath' => '/usr/bin/pngquant',
'commandOptions' => '--strip --skip-if-larger',
'commandOutputFileFlag' => '',
],
// svg optimizers
'svgo' => [
'commandPath' => '/usr/bin/svgo',
'commandOptions' => '',
'commandPath' => '/usr/bin/svgo',
'commandOptions' => '',
'commandOutputFileFlag' => '',
],
// gif optimizers
'gifsicle' => [
'commandPath' => '/usr/bin/gifsicle',
'commandOptions' => '-O3 -k 256',
'commandPath' => '/usr/bin/gifsicle',
'commandOptions' => '-O3 -k 256',
'commandOutputFileFlag' => '',
],
// webp optimizers
'cwebp' => [
'commandPath' => '/usr/bin/cwebp',
'commandOptions' => '',
];

public $imageVariantCreators = [
// webp variant creator
'cwebp' => [
'commandPath' => '/usr/bin/cwebp',
'commandOptions' => '',
'commandOutputFileFlag' => '-o',
'commandQualityFlag' => '-q',
'imageVariantExtension' => 'webp',
],
];

Expand All @@ -106,7 +134,9 @@ public function rules()
{
return [
['activeImageProcessors', 'required'],
['activeImageVariantCreators', 'required'],
['imageProcessors', 'required'],
['imageVariantCreators', 'required'],
];
}
}
Loading

0 comments on commit 07e3f21

Please sign in to comment.