Hugoのための応答画像

デモはhereです.ソースコードはhereです.

ビューポートに応じたサイズ変更

我々は多くの基本的な応答画像を構築する必要はありません.

<img src="..." alt="..." >

img {
  width: 100%;
  height: auto;
}

画像は、与えられたすべてのスペースを取り、ビューポートに比例してサイズを変更します.

寸法

イメージブラウザの寸法(比率)を知ることなく、最初に高さ0でそれを描画し、画像の負荷としてすぐに適切な高さで画像を再描画すると、ページが不快になる“ジャンプ”.これを避けるために、幅と高さを提供する必要があります

<img src="..." alt="..." width="{{ $img.Width }}" height="{{ $img.Height }}">

hugoでこれを行うには imageConfig を使う必要があります.

{{ $img := imageConfig (path to file) }}

srcset

現在の実装は、画像のサイズが画面のサイズで変化するという意味で応答しますが、サイズ変更はブラウザによって行われます.代わりに、小さな画面を持つクライアント(モバイルデバイスが最も可能性が高い)は、より小さな画像をダウンロードして少ないトラフィックを過ごすことができるように、我々はイメージのいくつかのサイズを提供することができます.
これを行うには、 srcset img属性とhugo組み込み機能を使用して画像をリサイズできます.たとえば、this article年のように.

{{ $src := .Page.Resources.GetMatch (printf "*%s*" (image path)) }}

{{ $tiny := $src.Resize $tinyw }}
{{ $small := $src.Resize $smallw }}
{{ $medium := $src.Resize $mediumw }}
{{ $large := $src.Resize $largew }}

<img
  srcset='
  {{ if ge $src.Width "500" }}
    {{ with $tiny.RelPermalink }}{{.}} 500w{{ end }}
  {{ end }}
  {{ if ge $src.Width "800" }}
    {{ with $small.RelPermalink }}, {{.}} 800w{{ end }}
  {{ end }}
  {{ if ge $src.Width "1200" }}
    {{ with $medium.RelPermalink }}, {{.}} 1200w{{ end }}
  {{ end }}
  {{ if ge $src.Width "1500" }}
    {{ with $large.RelPermalink }}, {{.}} 1500w {{ end }}
  {{ end }}'
  {{ if .Get $medium }}
    src="{{ $medium.RelPermalink }}"
  {{ else }}
    src="{{ $src.RelPermalink }}"
  {{ end }}
  ...

怠惰な読み込み

我々は、ビューポートにいる限り、画像を延期することによってさらに多くの帯域幅を保存することができます.これを達成するために lazysizes を使用できます.

import "lazysizes";

srcからdata-srcまでsrcsetまで、data-srcsetを加えてください

<img
  class="lazyload"
  data-sizes="auto"
  data-srcset=...

これをlazy-loadingと呼ぶ.

LQIP

我々が怠惰なローディングとユーザー・ネットワークを使用するならば、遅いか下のユーザーはイメージの代わりに空白の長方形を見ます.代わりに、我々は低品質の画像プレースホルダーを提供することができます-実際のコンテンツのぼやけたプレビュー.これを行うにはbase64 encoded small version of original imageにインラインできます.

{{ $lqip := $src.Resize $lqipw }}

<div class="img" style="background: url(data:image/jpeg;base64,{{ $lqip.Content | base64Encode  }}); background-size: cover">
  <svg width="{{ $img.Width }}" height="{{ $img.Height }}" aria-hidden="true"></svg>
  <img
    class="lazyload"
    ...

そして、少しのCSS

.img svg,
.img img {
  margin: 0;
  width: 100%;
  height: auto;
}

.img {
  position: relative
}

.img img {
  position: absolute;
  top:0;
  left:0;
}

ノスクリプト

怠惰な読み込みのもう一つの欠点は、イメージがJSなしで働かないということです.class="lazyload"にデフォルトのIMGを提供することでこれを修正しましょう

<noscript>
  <img
    loading="lazy"
    ...

and

.nojs .img .lazyload {
  display: none;
}

ファイナルバージョン

ショートコードを作りましょう

{{/* get file that matches the filename as specified as src="" in shortcode */}}
{{ $src := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}

{{/* set image sizes, these are hardcoded for now, x dictates that images are resized to this width */}}

{{ $lqipw := default "20x" }}
{{ $tinyw := default "500x" }}
{{ $smallw := default "800x" }}
{{ $mediumw := default "1200x" }}
{{ $largew := default "1500x" }}

{{/* resize the src image to the given sizes */}}

{{ $lqip := $src.Resize $lqipw }}
{{ $tiny := $src.Resize $tinyw }}
{{ $small := $src.Resize $smallw }}
{{ $medium := $src.Resize $mediumw }}
{{ $large := $src.Resize $largew }}

{{/* only use images smaller than or equal to the src (original) image size, as Hugo will upscale small images */}}
{{/* set the sizes attribute to (min-width: 35em) 1200px, 100vw unless overridden in shortcode */}}

{{ $img := imageConfig ($src.RelPermalink | printf "content/%s" ) }}

<div class="img" style="background: url(data:image/jpeg;base64,{{ $lqip.Content | base64Encode  }}); background-size: cover">
  <svg width="{{ $img.Width }}" height="{{ $img.Height }}" aria-hidden="true"></svg>
  <img
    class="lazyload"
    data-sizes="auto"
    data-srcset='
    {{ if ge $src.Width "500" }}
      {{ with $tiny.RelPermalink }}{{.}} 500w{{ end }}
    {{ end }}
    {{ if ge $src.Width "800" }}
      {{ with $small.RelPermalink }}, {{.}} 800w{{ end }}
    {{ end }}
    {{ if ge $src.Width "1200" }}
      {{ with $medium.RelPermalink }}, {{.}} 1200w{{ end }}
    {{ end }}
    {{ if ge $src.Width "1500" }}
      {{ with $large.RelPermalink }}, {{.}} 1500w {{ end }}
    {{ end }}'
    {{ if .Get $medium }}
      data-src="{{ $medium.RelPermalink }}"
    {{ else }}
      data-src="{{ $src.RelPermalink }}"
    {{ end }}
    width="{{ $img.Width }}" height="{{ $img.Height }}"
    {{ with .Get "alt" }}alt='{{.}}'{{ end }}>
  <noscript>
    <img
      loading="lazy"
      {{ with .Get "sizes" }}sizes='{{.}}'{{ else }}{{ end }}
      srcset='
      {{ if ge $src.Width "500" }}
        {{ with $tiny.RelPermalink }}{{.}} 500w{{ end }}
      {{ end }}
      {{ if ge $src.Width "800" }}
        {{ with $small.RelPermalink }}, {{.}} 800w{{ end }}
      {{ end }}
      {{ if ge $src.Width "1200" }}
        {{ with $medium.RelPermalink }}, {{.}} 1200w{{ end }}
      {{ end }}
      {{ if ge $src.Width "1500" }}
        {{ with $large.RelPermalink }}, {{.}} 1500w {{ end }}
      {{ end }}'
      {{ if .Get $medium }}
        src="{{ $medium.RelPermalink }}"
      {{ else }}
        src="{{ $src.RelPermalink }}"
      {{ end }}
      width="{{ $img.Width }}" height="{{ $img.Height }}"
      {{ with .Get "alt" }}alt='{{.}}'{{ end }}>
  </noscript>
</div>

代わりに

![test](./image.jpg)

書く必要がある

{{< img src="image.jpg" alt="test" >}}

PS

以前

その後

悲しい部分は、私がショートコードの代わりにイメージのために伝統的な構文を使うのを許すMarkdownプリプロセッサがないということです😞.
I can't use shortcodes inside theme files、その結果、私はショートコードからペーストファイルをテーマファイルにコピーします😞.