Responsive images with Hugo

tips & tricks
1

Little trick I’m posting for my future self.

To make responsive images with Hugo, simply use the image filters, then pimp it up with CSS.

My version has a category and section, so my image path looks like:

RESPONSIVE IMAGES (kind of)

We have large (1700x900 or something) images everywhere on the website. No need to download those on mobile phones. We need the scaled version, right?

IMAGES:

Desktop: 1700x900 x 100% quality on jpg
Mobile: 500x270 x 75% quality on jpg

(note: a huge bee tried to sting me just now, I had to go full caveman on a fight to the death situation here. Adrenaline pumping through my veins. I’m the man.)

Now, here’s what my image path looks like. Depending on your project, yours may vary.

On my .MD file:

featured_image: "die_bee.jpg"

That’s it, no path, no anything. I just call the filename and its extension.

I save the image here:

http://localhost:1313/news/universe/img/this_is_my_img.jpg

Here’s the magic:

some_template.htmml

{{ $cat := .Params.categories | anchorize }}
{{ $base := print .Section "/" $cat "/img" }}
{{ $path := print .Params.featured_image }}
{{ $url := print $base "/" $path }}

{{ $image := resources.Get $url }}   										
{{ $scaled := $image.Fill "500x270 center q75" }}

<img src="{{ $image.Permalink }}" class="d-none d-sm-block"> <-- mobile= off, desktop= on-->
<img src="{{ $scaled.Permalink }}" class="d-block d-sm-none"> <-- mobile= on, desktop= off -->

That’s it. The CSS is simple enough. I use Bootstrap to hide and show divs.

If you don’t use bootstrap and have no idea how media queries work, try something like this.

1 Like
2

I recommend you checkout this article (contains some code examples which are useful too):

I think the way you are using display:none (basically what the class d-none does), the hidden image will still download. (see this article)

1 Like
3

You are right, I didn’t knew that hiding the images with CSS alone didn’t force the browse not to download them. That’s a huge bug… I know some will say it isn’t, but I just ran a search after your pointed that out to me and lots of people are making the same mistake and asking why, why, oh god why d-none doesn’t actually prevents the browser from download the images…

Anyway, thanks Jonathan. Great catch.

4

Found online. I’m not sure if this will help someone, but here you go.

Responsive images for Hugo: https://dev.to/stereobooster/responsive-images-for-hugo-dn9

2 Likes