View Source ExWebp

Mix tasks for installing and invoking webp.

installation

Installation

If you are going to build assets in production, then you add webp as a dependency on all environments but only start it in dev:

def deps do
  [
    {:webp, "~> 0.1", runtime: Mix.env() == :dev}
  ]
end

However, if your assets are precompiled during development, then it only needs to be a dev dependency:

def deps do
  [
    {:webp, "~> 0.1", only: :dev}
  ]
end

usage-there-are-2-ways-to-use-as-a-mix-task-or-as-a-library-mix-task-usage-detailed-below

Usage: there are 2 ways to use as a mix task or as a library -- mix task usage detailed below

$ mix webp default "assets/images/"

profiles

Profiles

The first argument to webp is the execution profile. You can define multiple execution profiles with the current directory, the OS environment, and default arguments to the webp task:

config :webp,
  default: [
    location: Path.expand("../priv/static/images/", __DIR__),
    destination: Path.expand("../priv/static/images/", __DIR__)
  ]

When mix webp default is invoked, the task arguments will be appended to the ones configured above.

adding-to-phoenix

Adding to Phoenix

To add webp to an application using Phoenix, you need only four steps. Note that installation requires that Phoenix watchers can accept MFArgs tuples – so you must have Phoenix > v1.5.9.

First add it as a dependency in your mix.exs:

def deps do
  [
    {:phoenix, "~> 1.6.0"},
    {:webp, "~> 0.1", runtime: Mix.env() == :dev}
  ]
end

Now let's configure webp to use assets/images/ as the input file and compile CSS to the output location priv/static/assets/images/:

config :webp,
       default: [
         location: Path.expand("../priv/static/images/", __DIR__),
         destination: Path.expand("../priv/static/images/", __DIR__)
       ]

Note: if you are using esbuild (the default from Phoenix v1.6), make sure you remove the import "../css/app.css" line at the top of assets/js/app.js so esbuild stops generating css files.

Note: make sure the "assets" directory from priv/static is listed in the :only option for Plug.Static in your endpoint file at, for instance lib/my_app_web/endpoint.ex.

For development, we want to enable watch mode. So find the watchers configuration in your config/dev.exs and add:

webp: {Webp, :run, [:default, ~w(--watch)]}

Note we are embedding source maps with absolute URLs and enabling the file system watcher.

Finally, back in your mix.exs, make sure you have an assets.deploy alias for deployments

["assets.deploy": [
  "esbuild default --minify",
  "webp default",
  "phx.digest"
]]

css-webp-support

css webp support

you will need to create webp styles in css and toggle then with some js, i load modernizer with webp support in the layout below is an example css

.no-webp .img-class {
background-image: url("../images/img.png");
background-repeat: no-repeat;
left: 100px;
position: absolute;
height: 411px;
width: 745px;
}  
.webp .img-class {
background-image: url("../images/img.webp");
background-repeat: no-repeat;
left: 100px;
position: absolute;
height: 411px;
width: 745px;
}

and the corresponding added to the layout

<html class="no-js" lang="en">
<script type="text/javascript">
        document.documentElement.classList.remove("no-js");
</script>

<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/modernizr_webp.js") %>"></script>
</html>

acknowledgements

Acknowledgements

This package is based on the excellent esbuild by Wojtek Mach and José Valim.

license

License

Copyright (c) 2022 mithereal.

webp source code is licensed under the MIT License.