images: Opacity problem with Resize + Padding with PNG output

[rnwst]

What version of Hugo are you using (hugo version)?

$ hugo version
hugo v0.126.1+extended linux/amd64

Does this issue reproduce with the latest release?

Yes.

Report

The images.Padding function currently ignores the transparency setting when padding a PNG image. While the documentation does state 'conversion to WEBP is required to support transparency' (under Other recipes), I can't see a reason why PNG shouldn't be supported, given that it has an alpha channel. For the moment I have resorted to first converting the image to WEBP, then applying transparent padding, and then converting it back to PNG, but this does not feel like an elegant solution.

[rnwst]

It may be worth noting that the images.Overlay function does not require conversion to WEBP and works fine when overlaying two transparent PNGs.

[jmooring]

This works as expected:

{{ with resources.Get "a.png" }}
  {{ $filter := images.Padding 20 "#ff000055" }}
  {{ with . | images.Filter $filter }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

So you must be doing something different. Please provide example.

Here's a minimal example that does not reproduce the problem:

git clone --single-branch -b hugo-github-issue-12536 https://github.com/jmooring/hugo-testing hugo-github-issue-12536
cd hugo-github-issue-12536
hugo server

[rnwst]

Many thanks for putting together the minimal example, that's awesome!

I spent the last 3 hours trying to work out what's going on. While I still have no idea why this is happening, I submitted a PR which hopefully includes some examples that don't work as expected: jmooring/hugo-testing#10

Results seem to be dependent on what size the image is resized to. Problems also seem to go away when using the WEBP format instead of PNG.

[jmooring]

This works as expected (border is ~ 50% opaque blue):

{{ $i := resources.Get "a.jpg" }}
{{ $filters := slice
  (images.Process "resize x200 png")
  (images.Padding 20 "#00f7")
}}
{{ $i = images.Filter $filters $i }}
<img src="{{ $i.RelPermalink }}" width="{{ $i.Width }}" height="{{ $i.Height }}" alt="">

This does not work as expected (border is some other transparent color):

{{ $i := resources.Get "a.jpg" }}
{{ $i = $i.Resize "x200 png" }}
{{ $filters := slice
  (images.Padding 20 "#00f7")
}}
{{ $i = images.Filter $filters $i }}
<img src="{{ $i.RelPermalink }}" width="{{ $i.Width }}" height="{{ $i.Height }}" alt="">

But this (convert to webp using second construct) works fine:

{{ $i := resources.Get "images/a.jpg" }}
{{ $i = $i.Resize "x200 webp" }}
{{ $filters := slice
  (images.Padding 20 "#00f7")
}}
{{ $i = images.Filter $filters $i }}
<img src="{{ $i.RelPermalink }}" width="{{ $i.Width }}" height="{{ $i.Height }}" alt="">

So, for now, use the first construct.

Example:

git clone --single-branch -b hugo-github-issue-12536 https://github.com/jmooring/hugo-testing hugo-github-issue-12536
cd hugo-github-issue-12536
hugo server