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

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. The resources of the Hugo team are limited, and so we are asking for your help. If this is a bug and you can still reproduce this error on the master branch, please reply with all of the information you have about it in order to keep the issue open. If this is a feature request, and you feel that it is still relevant and valuable, please tell us why. This issue will automatically be closed in the near future if no further activity occurs. Thank you for all your contributions.

[rnwst]

Still reproducible on v0.149.0.