pugを使用して、imageを管理する

imgタグ、sourceタグ、pictuireタグなど画像を表示するだけでもいろいろなものがあるので、それを管理しやすいように、pugでmixinを作成したので、その時のメモ

結果

まず、はじめに結果から

通常の画像ディレクトリ

webpの画像ディレクトリ

pugのコード

//- 呼び出し
+sourceImg("sample", "png", 'ダミー画像')

//- mixin
- var pcSize = 1025
- var imgPath = `${path}assets/img/`
- var imgWebpPath = `${path}assets/img-webp/`
mixin sourceImg(fileName, extension = 'png', altName = '', type = 'multi', pagePath = imgPath, pageWebpPath = imgWebpPath)
  - if (type == 'multi')
    picture
      source(
        type='image/webp',
        media=`(min-width:${pcSize}px)`,
        srcset=`
        ${pageWebpPath}${fileName}.webp 1x,
        ${pageWebpPath}${fileName}@2x.webp 2x
        `
      )
      source(
        type='image/webp',
        media=`(max-width:${pcSize - 1}px)`,
        srcset=`
        ${pageWebpPath}${fileName}-sp.webp 1x,
        ${pageWebpPath}${fileName}-sp@2x.webp 2x
        `
      )
      source(
        media=`(min-width:${pcSize}px)`,
        srcset=`
          ${pagePath}${fileName}.${extension} 1x,
          ${pagePath}${fileName}@2x.${extension} 2x
        `
      )
      source(
        media=`(max-width:${pcSize - 1}px)`,
        srcset=`
          ${pagePath}${fileName}-sp.${extension} 1x,
          ${pagePath}${fileName}-sp@2x.${extension} 2x
        `
      )
      img(src=`${pagePath}${fileName}.${extension}`, alt=altName)
  - else
    picture
      source(
        type='image/webp',
        srcset=`
        ${pageWebpPath}${fileName}.webp 1x,
        ${pageWebpPath}${fileName}@2x.webp 2x
        `
      )
      img(
        srcset=`
          ${pagePath}${fileName}.${extension} 1x,
          ${pagePath}${fileName}@2x.${extension} 2x
        `,
        src=`${pagePath}${fileName}.${extension}`,
        alt=altName
      )

内容

行っていること

• pc,spで画像を分ける場合、画像を変更(ブラウザ幅で設定)
• retinaディスプレイ・通常のディスプレイに応じて適切な解像度の画像を表示する
• webpに対応しているブラウザの場合、webp画像を表示

mixinの引数について

mixin sourceImg(fileName, extension = 'png', altName = '', type = 'multi', pagePath = imgPath, pageWebpPath = imgWebpPath)

1つ目(fileName)

default: なし ファイル名の宣言。 今回の場合「sample」のファイル名の部分を記載する

2つ目(extension)

default:'png' 拡張子の宣言。 デフォルトはpngファイルにして、jpgの場合はjpgで宣言する

3つ目(altName)

default:空白 altに入れる名前の宣言。

4つ目(type)

default: 'multi' pc,spで画像を分けるか共通化で行うかの宣言。

分ける場合は、

picture
  source(
    type='image/webp',
    media=`(min-width:${pcSize}px)`,
    srcset=`
    ${pageWebpPath}${fileName}.webp 1x,
    ${pageWebpPath}${fileName}@2x.webp 2x
    `
  )
  source(
    type='image/webp',
    media=`(max-width:${pcSize - 1}px)`,
    srcset=`
    ${pageWebpPath}${fileName}-sp.webp 1x,
    ${pageWebpPath}${fileName}-sp@2x.webp 2x
    `
  )
  source(
    media=`(min-width:${pcSize}px)`,
    srcset=`
      ${pagePath}${fileName}.${extension} 1x,
      ${pagePath}${fileName}@2x.${extension} 2x
    `
  )
  source(
    media=`(max-width:${pcSize - 1}px)`,
    srcset=`
      ${pagePath}${fileName}-sp.${extension} 1x,
      ${pagePath}${fileName}-sp@2x.${extension} 2x
    `
  )
  img(}${fileName}.${extension}`, alt=altName)

分けない場合は、

picture
  source(
    type='image/webp',
    srcset=`
    ${pageWebpPath}${fileName}.webp 1x,
    ${pageWebpPath}${fileName}@2x.webp 2x
    `
  )
  img(
    srcset=`
      ${pagePath}${fileName}.${extension} 1x,
      ${pagePath}${fileName}@2x.${extension} 2x
    `,
    src=`${pagePath}${fileName}.${extension}`,
    alt=altName
  )

の部分が適応される。

5つ目(pagePath)

default: imgPath 通常画像のディレクトリの宣言。 基本的に1つのページに1つのディレクトリの宣言で行うため、記載を行う場所はページ上で宣言して、それで統一で行うため、後ろの方に記載。

6つ目(pageWebpPath)

default: imgWebpPath webp用の画像ディレクトリの宣言。 webp用の画像作成方法については以下を参考。 github.com

タグについて

基本的な画像の切り分けについては、pictureタグを使用。

developer.mozilla.org

読み込みを行っている順番については、 「webp - PC用」 → 「webp - SP用」→ 「通常画像 - PC用」→「通常画像 - SP用」。

また、1x, 2x用などの切り替えについてはsourceタグを使用。

developer.mozilla.org

pictureタグをIEにも対応したい場合

pictureタグがIEには対応していない(2020/08時点)ため、IEにも対応させる場合、picturefillのnpmパッケージを使用。

www.npmjs.com

記載の方法

import Picturefill from 'picturefill'
Picturefill()

以上でIEでもpictureタグを使用することができます。