Serve images in next-gen formats

[Mryuksel101]

How can I do that? I am using github pages not netlify

[rmdhnreza]

1. You can convert images manually to WebP, for example with squoosh.app
2. Automatically using render-image hooks.
   Edit layouts/_default/_markup/render-image.html and add webp to line 21-22

hugo-theme-stack/layouts/_default/_markup/render-image.html

Lines 21 to 22 in 5869a7a

	{{- $small := $image.Resize `480x` -}}
	{{- $big := $image.Resize `1024x` -}}

like this

...

 {{- $small := $image.Resize `webp 480x` -}} 
 {{- $big := $image.Resize `webp 1024x` -}}

...

make sure you enable imageProcessing on config.yaml

hugo-theme-stack/config.yaml

Lines 139 to 143 in 5869a7a

	imageProcessing:
	cover:
	enabled: true
	content:
	enabled: true

AFAIK, Hugo still not support AVIF for target format, so WebP is the best option for now.

[Mryuksel101]

hi, i solved that problem. Thank you so much.
But my picture doesn't look good and I don't know what to do

[rmdhnreza]

Did you mean blurry? Default quality for image processing is 75, you can add q100 after webp