Image Opti­mize

Link Optimize your Images

Ima­geOp­ti­mize allows you to auto­mat­i­cal­ly cre­ate & opti­mize respon­sive image trans­forms from your Craft 3 assets.

It works equal­ly well with native Craft image trans­forms, and image ser­vices like Imgix, Thum­bor, or Sharp with zero tem­plate changes.

You use the native Craft UI/UX to cre­ate your image trans­forms, whether in the Con­trol Pan­el or via your templates.

Ima­geOp­ti­mize takes care of the rest, opti­miz­ing all of your image trans­forms auto­mat­i­cal­ly by run­ning a vari­ety of image opti­miza­tion tools on them.

Link Picture and srcset Made Easy

Ima­geOp­ti­mize also comes with an Opti­mized­Im­ages Field that makes cre­at­ing respon­sive image sizes for <img srcset=""> or <picture> ele­ments sub­lime­ly easy. These respon­sive image trans­forms are cre­at­ed when an asset is saved, rather than at page load time, to ensure that fron­tend per­for­mance is optimal.

Because Ima­geOp­ti­mize has already pre-gen­er­at­ed and saved the URLs to your opti­mized image vari­ants, no addi­tion­al data­base requests are need­ed to fetch this infor­ma­tion (unlike with Assets or Transforms).

As con­fig­ured by default, all of these are loss­less image opti­miza­tions that remove meta­da­ta and oth­er­wise opti­mize the images with­out chang­ing their appear­ance in any way.

Link Automatic Placeholder Images

Image Opti­mize offers three dif­fer­ent fla­vors of place­hold­er images you can dis­play while the actu­al image is being lazy loaded via ​‘lazy­sizes‘.

All of the place­hold­er images are stored in the Opti­mized Image field itself, so no http request is need­ed to fetch it, and the inline data used to gen­er­ate them is very small.

The image place­hold­ers can be a sim­ple SVG box col­ored with the dom­i­nant back­ground col­or of the image, a Low Qual­i­ty Image Place­hold­er (LQIP) that rep­re­sents the image, or an auto-traced SVG image.