Hugo degrades image quality even with disabling image processing options

support
1

I’m using the Academic theme. I’ve used a featured image for a blog post. Here are my problems:
1- The image size is not the original size of the image I pointed it to show.
relevant line of code
2- The quality of image is automatically degraded even with me specifically disabling any filters or compressions in config.toml (here). Here is the only config available for automatic image processing:

[imaging]
  resampleFilter = "lanczos"
  quality = 100
  anchor = "smart"  # Anchor for cropping. Options include Smart and Center.

(I’ve tested different filters or disabled that line. Doesn’t fix the problem)

As you can see, the right-one (the 100% target size, already compressed by me manually) is of much higher quality than the left one (generated by hugo). Also the left one is zoomed out at 0.7x size of the rendered image for comparison. The rendered one in the website is larger than what I told it to)

1490×624

2

If the image is 200px wide, do you expect it to be 200px when rendered?

4

Yes.
Also in my case here is the info of the image:
JPEG 465x596 465x596+0+0 8-bit sRGB 39.6KB 0.000u 0:00.019
The rendered image is not 465px wide

5

Setting the CSS width property does not do what you think it does. See:

https://jsfiddle.net/0zfp1e4n/

1 Like
6

ha! Didn’t know that! A bit unintuitive IMO…
So if I override it to max-width: 100% it would mess the page if the referenced image is bigger that what the designer set the div width to…Can I make it conditionally? Like if the image is smaller, use its dimension instead of the parent…
Also do you have any idea about the quality degradation?

7

No, it would not. See Edit fiddle - JSFiddle - Code Playground.

8

Here is the inspect element on that image:
<div class="article-header article-container featured-image-wrapper mt-4 mb-4" style="max-width: 465px; max-height: 596px;"> <div style="position: relative"> <img src="[/post/first-post/featured.jpg](view-source:http://localhost:1313/post/first-post/featured.jpg)" alt="From Wikipedia: Wanderer above the Sea of " class="featured-image"> <span class="article-header-caption"><a href="">Wanderer above the Se</a></span> </div> </div>

Here is part of my custom.scss:


.featured-image {
  position: relative;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

It still doesn’t work (rendered image is larger than 465px and quality is degraded)

9

Please post a link to the public repository for your site. See:
https://discourse.gohugo.io/t/requesting-help/9132

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.