Mix tasks for installing and invoking webp.
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}
]
endHowever, if your assets are precompiled during development, then it only needs to be a dev dependency:
def deps do
[
{:webp, ">= 0.0.0", only: :dev}
]
endUsage: 3 ways to use: static_compressors, mix task or library -- compressor and mix task usage detailed below
Note that installation requires that Phoenix watchers can accept MFArgs
tuples – so you must have Phoenix > v1.5.9.
config :phoenix,
static_compressors: [Webp.Compressor]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.
First add it as a dependency in your mix.exs:
def deps do
[
{:phoenix, "~> 1.6.0"},
{:webp, ">= 0.0.0", runtime: Mix.env() == :dev}
]
endNow 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 soesbuildstops 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"
]]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 following 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>you can cleanup old webp assets by invoking
mix webp.cleanThis package is based on the excellent esbuild by Wojtek Mach and José Valim.
Copyright (c) 2022 mithereal.
webp source code is licensed under the MIT License.