HUGO

IMAGES / WEBP just convert solely

Continuing from Image conversion without resizing
(assuming one is using “Hugo >=0.83.0-extended”)
I would like to convert JPG images to WEBP in two ways:

  1. lossless (q100 without resize etc)
  2. lossy (q75without resizes etc)

But according to Image Processing | Hugo I must know the target width or height. Which I dont know always and dont need as I sometimes just want to convert between formats.

Example:

{{ $img  := resources.Get "/images/image.jpg" }}
{{ $imgWebp = $img.Convert "webp picture q100" }}

In the end I want to use both in a overloaded <picture> Tag. Like:

    <picture>
        <source srcset="/images/picture.webp" type="image/webp">
        <img src="/images/picture.jpg" type="image/jpeg" width="640" height="809">
    </picture>

The Hugo Template could look like this:

    {{ $img  := resources.Get "/images/picture.jpg" }}
    {{ $imgWebp = $img.Convert "webp picture q100" }}  //standard quality is 75 therefore q100 is lossless
    //{{ $imgWebp = $img.Convert "webp picture" }}  standard quality is 75 so this Tag would be for lossly conversion

    <picture>
        <source srcset="{{ $imgWebp.RelPermalink }}" type="{{ $img.Type }}">
        <img src="{{ $img.RelPermalink }}" type="{{ $img.Type }}" width="{{ $img.Width }}" height="{{ $img.Height }}">
    </picture>

Problems/questions so far:

  1. Can not convert solely without any other resize etc
  2. Can not get Type of Image automatically but is required/wished
  3. What is the difference at Image Hint between a “picture” and a “photo” as for me its the same but maybe there are differences which I do not understand.
  4. last questions: would that template work so far or am I missing something?

Best regards and thank you so much for the WEBP feature :heart:

EDIT:

can you please bump be some levels so I can use discourse like elsewhere as I can not paste more then 2 Links etc, thanks!
As a fix-release for i18n is planned for today (Release v0.83.0 · gohugoio/hugo · GitHub) maybe this little feature (convert instead of resize) can make it into this aswell?

If you get the image as a resource then it has .Width and .Height parameter that you can use for sizing. If you get the image from the static folder, then you can use imageConfig for this information:

Right… as per the doc it seems that the new WEBP feature is only available through the .Resize method and not as a standalone convert method.

Only the Hugo maintainer can answer you questions.

P.S. Regarding the level-up request, the forum software has been set up like so by the admins due to the influx of spam. If you participate in this forum, I think that the limits will be lifted automatically after a few days.

Thats exactly what I request not having to do as not needed

Also the resize method for WEBP?

I hope so aswell, but I dont even know who could do that, but really strange a Google-Programminglanguage does not natively support Googles featured Imageformat … LOL

I updated my reply above, please discard my previous one.

Thanks.

I will kindly try to tag him bep

@M4rt1n

No need to tag the maintainer in this topic. (I removed the above tag).

I think that your request is valid so I have just opened the following issue:

Let’s continue the discussion on GitHub.

P.S. I have set a timer to auto-close this topic.

1 Like

@M4rt1n

There was already another issue that covered your request.

See here:

So, there is a related GitHub issue that may fix some of these issues.

As to lossless Webp: There is currently no way to do lossless Webp, as I think you need to pass a quality between 1 and 100. I think a quality of 0 would have done the trick.

1 Like

When do you not know the width/height?

When I convert many little icons for example. They all vary a little bit in width/height. Then I just want to convert them and not having to stick around with width and height for example.

But internally the function can just get the width and height and keep it the same if I do not specify anything.

In cwebp there is a separate argument that is called “lossless” as q100 is not lossless. But I can see the q0 as a good alternative here.

Also the controll over the filesize in some cases can be important instead of quality.
On some onlineconverters you are able to specify a % or a direct target filesize which are optional to the quality settings. Like:

{{ $imgWebp = $img.Convert "webp q100" }}
{{ $imgWebp = $img.Convert "webp 30%" }}
{{ $imgWebp = $img.Convert "webp 70kb" }}

Then should all be valide.

q100 aims to produce the highest quality (non lossless)
30% aims to produce a picture with about 30% of its original filesize
70kb aims to produce a image with about 70kb size

Also a setting should be there to prevent the creation of the conversion if the new file is bigger then the original one. This mostly happens at lossless settings. If converted size is bigger then original size then you dont need the conversion, but you rather would be better if you stick with the original PNG/JPEG.

That I understand, but you can do:

{{ $width := $icon.Width }}

Etc.

Yes thats also a possible way. But I think if something is not needed it must not be required

Anyway I accept this approach

Yes, I agree about that, which is why I created that GitHub issue. But that issue will not resolve itself today, so currently you need to use some less-than-perfect workarounds.

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.