pugでpictureタグのmixinを作成する

PCとSPでの画像の出しわけやwebpの対応でpugのmixinを作成する機会が度々あったので、作成方法をメモしておきます。

サンプルコード

まずはPCとSPで画像を出し分ける場合です。
_mixinディレクトリを作成して、その中に_picture.pugというファイル名で追加します。

//-
  options
    path: 'ファイルパス',
    pc: 'PCファイル名(拡張子あり)',
    sp: 'SPファイル名(拡張子あり)',
    alt: 'alt内容(オプション)',
    media: 切り替える画面サイズ(オプション)

mixin picture(options)
  - options = options || {};
  picture
    source(
      media="(min-width:" + (options.media || 768) + "px)"
      srcset=`${options.path}${options.pc}`
    )
    img(src=`${options.path}${options.sp}` alt=(options.alt || ''))

基本的に767px以下がSP画像、768px以上がPC画像という場合が多いので、そのルールをベースにしています。
使用する際はmixinのファイルをインクルードした上で、必要なオプションを設定して使用すればOKです。

include /_mixin/_picture.pug

+picture({
  path: '/img/',
  pc: 'pc.png',
  sp: 'sp.png'
})

以下のように出力されます。

<picture>
  <source media="(min-width:768px)" srcset="/img/pc.png"/>
  <img src="/img/sp.png" alt=""/>
</picture>

オプションでaltとmediaの切り替え位置を設定できます。

+picture({
  path: '/img/',
  pc: 'pc.png',
  sp: 'sp.png',
  alt: 'alt-text',
  media: 992
})

altとmediaを変更することができました。

<picture>
  <source media="(min-width:992px)" srcset="/img/pc.png"/>
  <img src="/img/sp.png" alt="alt-text"/>
</picture>

次にwebpを使用する場合です。
先ほどの_picture.pugを変更します。

//-
  options
    path: 'ファイルパス',
    name: 'ファイル名(拡張子なし。PCと画像を出し分ける場合はSPのファイル名)',
    type: '元の拡張子',
    pc: 'PCのファイル名(拡張子なし。オプション)',
    alt: 'alt内容(オプション)'

mixin picture(options)
  - options = options || {};
  picture
    if(!options.pc)
      source(type="image/webp" srcset=`${options.path}${options.name}.webp`)
    else
      source(
        type="image/webp"
        media="(max-width:767px)"
        srcset=`${options.path}${options.name}.webp`
      )
      source(
        type="image/webp"
        media="(min-width:768px)"
        srcset=`${options.path}${options.pc}.webp`
      )
      source(
        media="(min-width:768px)"
        srcset=`${options.path}${options.pc}.${options.type}`
      )
    img(src=`${options.path}${options.name}.${options.type}` alt=(options.alt || ''))

webpの出しわけのみ(PCとSPで同じ画像)の場合、画像パスとファイル名、元の拡張子を指定します。

+picture({
  path: '/img/',
  name: 'filename',
  type: 'png'
})

以下のように出力されました。

<picture>
  <source type="image/webp" srcset="/img/filename.webp"/>
  <img src="/img/filename.png" alt=""/>
</picture>

PCとSPで画像の出しわけもする場合は、PCの画像ファイル名の指定を追加します。
この場合、元々指定していたnameのファイルはSPで使用する画像になります。

+picture({
  path: '/img/',
  name: 'filename',
  type: 'png',
  pc: 'pc-filename',
  alt: 'alt-text'
})

これでwebpとPC・SPの画像出しわけができました。

<picture>
  <source type="image/webp" media="(max-width:767px)" srcset="/img/filename.webp"/>
  <source type="image/webp" media="(min-width:768px)" srcset="/img/pc-filename.webp"/>
  <source media="(min-width:768px)" srcset="/img/pc-filename.png"/>
  <img src="/img/filename.png" alt="alt-text"/>
</picture>