Understanding image processing

support
1

I am new to hugo, and am trying to use it to make a small personal website. As part of this I want to include photos in some of my posts. So far so simple.

I got this working with the standard markdown thing of

![alttext](filename.jpg)

Which is great, but given it looks like hugo can do so much more I jumped into a rabbit hole.

Laura Kalbag’s post about responsive imaging has been great. I now get a photo that changes size with browser window etc…

But I think I have misunderstood how the image processing subsystem works. My original photo is about 7MB. Which is big to be delivering to a website, for it to resize it to the right size for the screen. I was expecting that when I configured sizes in the code I copied from Laura, that the image processing in hugo would actually take the original image file, and create smaller images, that could be delivered to the user when they view the page. Rather than shipping a big file over the wire, and then resizing it on the browser.

Is this a fundamental misunderstanding of what the image processing in Hugo can actually do? is this possible in anyway shape or form?

Thanks

J

2

This sound like you tried to use html tags to resize the images, but that will download the huge image and resize in your html. So 5 times if you have five sizes to display.

The important chapter is under caption “Images” in her post.

She’s talking about image processing.

  • uses a Hugo shortcode to resize the images at build time
  • then uses the HTML <img> attributes sizes and srcset to target them

This won’t be solvable simple by markdown, you’ll need to dig deeper into hugo and html.

  • read about HTML img srcset and sizes attributes. There are some posts in the forum and of course plenty of resources in the WEB for this

  • check out the Hugo docs for Image processing with some examples at the end.

and dependning on your setup, you will need some more stuff like templating, image-render-hooks, …

1 Like
3

I’ve read that page multiple times, and looked at the examples. And the one thing it entirely leaves out and I can’t make sense. Is where do I put that short code ?

Do I put it in every markdown page everytime I want to use an image? 46 lines of markdown. That’s a lot of typing every time.

J

4

Sorry, but this looks like you are at the very beginning of your journey with Hugo.

The Requesting Help article talks a little bit about that. please spend the time to read it and take it literally.

Before you start with such things you will have to get the basic understanding of how the peces can be put together.

  • markdown for content
  • layouts for the HTML skeleton
  • partials are like functions for templates
  • shortcodes like functions for markdown
  • …
  • at that stage its coding/programming not text editing

The docs are quite technical and not tutorials but if you spend some time…

start here: Content management | Hugo (at least the first four chapters
and read about Templates | Hugo (at least up to chapter seven.

The community is eager to help and assist with any technical problems

that all let me close with citation from requesting help:

The bottom line is, if you are unwilling to invest the time required to learn these things, then Hugo is not for you.
…
It is really a worthwhile investment to put the time in, to learn the basic building blocks well.

4 Likes
5

Hugo is not for me.

J

6

Hugo is not for the faint of heart, and I like they acknowledge that in requesting help write-up. I spent 80-100 hours setting up my first website, but the second took less than 24 hours. The learning curve is steep (and sometimes frustrating), but the rewards are sweet.

2 Likes