Looking between Hugo and Gatsby: image optimization

1

Hello!

I’m now looking between Hugo and Gatsby. I’m like Hugo because with Hugo I’m getting a clean HTML-code without much javascript.

But now I have a question about Image optimization. Gatsby can automatically optimize images. For example, create responsive images (srcset), WebP-generation etc.

Please, tell me. Can I create similar Workflow with Hugo? Can I automatically optimize my Images on Hugo? Creating responsive images with srcset or something else?

Maybe I should use Gulp or Webpack? Can it help me to optimize images? I’m never working before with Gulp, but I’m now good with javascript, and I can learn Gulp if it necessary.

Sorry for bad English, I believe that you understand me.

2

there are 2 parts

create a hook template for rendering images

use Image Processing

my render-image.html looks like

{{ $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) }}
{{ if $image -}}
{{ $alt := .PlainText | safeHTML }}{{ $caption := "" }}{{ with .Title }}{{ $caption = . | safeHTML }}{{ end }}
{{ $iw := $image.Width }}{{ $ih := $image.Height }}{{ $ms   := site.Params.Images.maxSize | default 1024}}
{{ if or (ge $iw $ms) (ge $ih $ms) }}{{ $image = $image.Fit (print $ms "x" $ms) }}{{end}}
{{ $srcset := slice }}{{ range site.Params.Images.setSizes -}}
  {{ if lt (mul . 1.2) $iw }}{{ $thumb := $image.Fit (print  . "x" .) }}{{ $srcset = $srcset | append (printf ("%s %dw") $thumb.RelPermalink . ) }}{{ end }}
{{- end }}

<figure><a href={{ $image.RelPermalink }}>
<img   class=foto sizes=600px  loading=lazy  src={{ $image.RelPermalink }}
{{ if gt (len $srcset) 0 }}{{ $sl := delimit $srcset ", "}}srcset="{{$sl}}" {{ end }}
width={{ $image.Width }} height={{ $image.Height }} alt="{{ if $alt }}{{ $alt }}{{ else if $caption }}{{ $caption | markdownify | plainify }}{{ else }}&nbsp;{{ end }}" ></a>{{ with $caption }}<figcaption>{{ . | markdownify }}</figcaption>{{ end }}
</figure>
{{- else -}}
  {{- warnf "Unable to find '%s' -- ensure image exists alongside document in page bundle" .Destination -}}
{{- end }}

my complete samples are here

3

Currently not supported. But it will eventually happen, so I would just follow @ju52 's advice for starters.

A general note: There will be some stuff that Gatsby can do, with its endless NPM plugins, that Hugo cannot do. These are known tradeoffs that I’m more than happy to live with. We fill fill some of those, eventually.