scale images on small and large screens

[spi43984]

I embed images by ![xxx](images/image.png).

Based on the screen size, the text is adjusted, but the image is not. On small screens it is then too large in relation to the text.

Is there some additional parameter to scale the image (like 30% of text width or something)?

[spi43984]

ok, after some digging I found an approach, see https://werat.dev/blog/automatic-image-size-attributes-in-hugo/ for details.

Basically it just need a file render-image.html in layouts/_default/_markup with the following content:

{{- $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) -}}
<img
    src="{{ .Destination | safeURL }}" alt="{{ .Text }}"
    {{ with $image }}
    width="{{ $image.Width }}" height="{{ $image.Height }}"
    {{ end }}
    {{ with .Title}} style="width: 100%; max-width: {{ . }};"{{ end }}
    />

Then one need to add an image in a markdown file by ![AltText](images/image.png "50%") to scale the image to 50%.

Am still hunting for an easy way to distinguish between image size on e. g. a PC browser and a mobile device.

[zjedi]

We could make it a shortcode for reuse.

[spi43984]

We could make it a shortcode for reuse.

I am really a rookie right now if it comes to hugo and themes. I read about shortcodes but can't really get them at the moment. I saw on hugo markdown render hooks something about render-image.html, that's why I specifically looked for that.

But whatever is cleaner and easier to maintain is good for me - my goal is to have some additional parameters to control images. There is an example on hugo image processing based on shortcodes but I haven't figured that out yet.

[spi43984]

We could make it a shortcode for reuse.

Can you please advise how to proceed further?

[zjedi]

@spi43984 Can you attach an image expalining the problem? I just had a look and the image is downscaled correctly in my browser.

[spi43984]

I took one of the pictures, removed the background and added it to the homepage. It looks huge, so I want it to scale (and not to scale the image directly to not lose quality). That's why I added the scale factor. But I am not fundamentally satisfied as with the scale factor it is scaled down the same way on large or small screens - it might make sense to use different values on different screen sizes. Like 60% on large screens and 70% on small ones. Or something more automatic like use 60% as a general value but add something in steps up to 70% if the screen size gets smaller - or whatever.

[spi43984]

I created an example (#160) - there's a section with different scaled images.

[spi43984]

Just stumbled across hugo's default shortcodes - there is a figure one which can scale images too... Maybe that one is just sufficient...

{{< figure src="images/woman-pouring-juice-on-glass-3184192.jpg" width="50%">}}

[zjedi]

If figure covers the issue, can we close it?

[spi43984]

If figure covers the issue, can we close it?

let me run some tests first... I come back to you soon.

[spi43984]

I run some tests. The figure function renders per default smaller pictures - they are not column-filling. Please see the example site.

My own function creates the following html code:

<p><img src="images/happy-ethnic-woman_2000x2000_transparent.png" alt="Jane Doe" style="width: 100%; max-width: 60%;">
</p>

whereas the figure function does:

<figure><img src="images/happy-ethnic-woman_2000x2000_transparent.png" width="60%">
</figure>

What do you think - is it a drawback if the figure function doesn't render column-filling images? In that case one could just use ![Jane Doe](images/happy-ethnic-woman_2000x2000_transparent.png) instead...

[zjedi]

Isn't it just matter of styling the figure with CSS? Embedding big images on single page is not ideal from performance perspective, but it's up to you :⁠-⁠)

[spi43984]

Isn't it just matter of styling the figure with CSS? Embedding big images on single page is not ideal from performance perspective, but it's up to you :⁠-⁠)

I wasn't concerned of the resolution (i. e. file size) but the actual rendered size on screen. Sure, that can be pretty much tweaked by CSS. As figure does what I was looking for, we can close this pull request.

[zjedi]

I'll have a look at the pr still, it could be useful to have an example for other users

[zjedi]

<p><img src="images/happy-ethnic-woman_2000x2000_transparent.png" alt="Jane Doe" style="width: 100%; max-width: 60%;">
</p>

What sense does it make to specify width 100% and max-width 60% aren't those two contradicting?

[spi43984]

<p><img src="images/happy-ethnic-woman_2000x2000_transparent.png" alt="Jane Doe" style="width: 100%; max-width: 60%;">
</p>

What sense does it make to specify width 100% and max-width 60% aren't those two contradicting?

Good question - honestly I don't know. It works with or without width: 100%.

It can easily be dropped in layouts/_default/_markup/render-image.html in the line

{{ with .Title}} style="width: 100%; max-width: {{ . }};"{{ end }}

[zjedi]

I'm not convinced this is to be prioritized. Images should be already scaled for optimal performance. Transferring big image and scaling it in browser seems not ideal. Closing for now, we can reopen, revisit later, if more people encounter similar needs.

[spi43984]

I'm ok with archiving that - but again it wasn't about transmitting large files and scale them in the client. It's about how to get the right scale of images on large and small screens. Per default on small screens images seem far too big. And as there is no fixed resolution in either case one would need scaling after all.