Pugのimgタグでavif webp一緒に書き出すmixin
目次
画像貼るたびにpictureで囲んでavifとwebp書くとか面倒なので作っといた。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //- | |
| SVG以外はavif webpをセットで書き出すimgタグ用mixin | |
| decoding=async と loading=lazy を変数化して埋め込むのやり方わからぬえ | |
| mixin pic(filepath, type, alt, width, height, loading) | |
| if type == `svg` | |
| if loading == `async` | |
| img(src=`${dirpassTop}img/${filepath}.svg` alt=`${alt}` decoding=`async`) | |
| else | |
| img(src=`${dirpassTop}img/${filepath}.svg` alt=`${alt}` loading=`lazy`) | |
| else | |
| if loading == `async` | |
| picture&attributes(attributes) | |
| source(type=`image/avif` srcset=`${dirpassTop}img/${filepath}.avif`) | |
| source(type=`image/webp` srcset=`${dirpassTop}img/${filepath}.webp`) | |
| img(src=`${dirpassTop}img/${filepath}.${type}` alt=`${alt}` decoding=`async`) | |
| else | |
| picture&attributes(attributes) | |
| source(type=`image/avif` srcset=`${dirpassTop}img/${filepath}.avif`) | |
| source(type=`image/webp` srcset=`${dirpassTop}img/${filepath}.webp`) | |
| img(src=`${dirpassTop}img/${filepath}.${type}` alt=`${alt}` width=`${width}` height=`${height}` loading=`lazy`) |
SVGは単品でいいので分けるとして、 decoding=async と loading=lazy を変数化して入れる方法がわからんのでｸｯｿ冗長な見た目になってる。