Resizing Images

[Ipstenu]

Is there a way to define the image dimensions in the shortcode/asset file to make them smaller?

Basically I want to show a grid of thumbnails (say ... 250x250) and have the smaller sized files load first, so my site is.. well ... faster :)

Longer explanation follows :)

I've been working on mini-galleries with lightbox and while I have all the code working for that, I realized that the images aren't being properly resized. Or rather, not resized how I would think.

If you look at https://gethinode.com/docs/content/images-and-figures/ the first image returned the html of

<img class="img-fluid rounded" src="/img/flowers-2800x1200.png" srcset="/img/flowers-576x247.webp 576w, /img/flowers-768x329.webp 768w, /img/flowers-992x425.webp 992w, /img/flowers-1200x514.webp 1200w, /img/flowers-1400x600.webp 1400w, /img/flowers-2800x1200.webp 2800w" sizes="100vw" height="1200" width="2800">

But at its widest, it's really 814px. Now it has srcset so that's kind of okay, but not really since it's loading the big image on desktop and that gets real slow.

If you look at the example on that page a little further down: {{< image src="https://picsum.photos/id/56/2880/1920" ratio="1x1" class="rounded" wrapper="mx-auto w-25" >}}

again you get the BIG image:

<img class="img-fluid rounded" src="/img/28801920-2800x2800.png" srcset="/img/28801920-576x576.webp 576w, /img/28801920-768x768.webp 768w, /img/28801920-992x992.webp 992w, /img/28801920-1200x1200.webp 1200w, /img/28801920-1400x1400.webp 1400w, /img/28801920-2800x2800.webp 2800w" sizes="100vw" height="2800" width="2800">

While the application of the w-25 wrapper does it's job on render, I found myself wondering why this isn't using that to auto-display a smaller version of the file and save on bandwidth.

[d-oit]

I had the same problems with hugo at the beginning.
I do not after any huge images on my website - only use the hugo blog personal for testing. On other systems i do this with markdown editor.

Your question about css: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#why_cant_we_just_do_this_using_css_or_javascript

ATM I resize the image via command line locally.
You could do this with https://github.com/imazen/imageflow or ps / powertoys (windows) / [IrfanView] / https://localwp.com/image-optimizer/

my wip: implement something like this:

https://www.mailslurp.com/blog/hugo-responsive-images-srcset/

Best case: user could see direct the result - like https://ghost.org/help/using-the-editor

[Ipstenu]

Alas I need the huge (well… larger) versions. I’ve started working on a solution to resize on build.

[d-oit]

Adjust the thumbnail with the auto ratio - defined in image.yml, but not used:
https://d-oit.github.io/en/blog/2024-11-13-enhanced-image-handling-on-d-oitgithubio/

[d-oit]

Made a prototype on the weekend for the resize
https://github.com/d-oit/d-oit.github.io/blob/main/adminEditor/main.go

handleProcessMedia

Copy and resize the image and create a thumbnail. Size see config.json

Only prototype, not production!

[markdumay]

Thanks for sharing!

[markdumay]

My two cents here... Image optimization can be difficult to get right, especially when using a responsive design. I do believe image sets are the right approach, at it lets the client (browser) decide which resolution is best. It does require server-side processing, as you'd need the same image in various resolutions (and possibly ratios too). Hugo does a fair bit of caching, however, on larger sites it can still become a bottleneck. (I'm currently using Cloudinary as a Digital Asset Manager to take care of the server-side processing for one of the (commercial) sites I'm working on.)

The example that @Ipstenu shared is not fully optimized yet. The sizes=100vw instructs the browser to render a full-width image and ignores the w-25 setting, which should be sizes=25vw (if the image in rendered at 25% width on all screens). Please note that on high-resolution screens (retina in Apple speak), the actual downloaded resolution is twice as high as the pixel resolution.

<img class="img-fluid rounded" src="/img/flowers-2800x1200.png" 
srcset="/img/flowers-576x247.webp 576w, /img/flowers-768x329.webp 768w, /img/flowers-992x425.webp 992w, /img/flowers-1200x514.webp 1200w, /img/flowers-1400x600.webp 1400w, /img/flowers-2800x1200.webp 2800w"
sizes="100vw" height="1200" width="2800">

IMHO, the image optimization should be done by preparing a rich image set that caters for most common resolutions and viewport sizes. The sizes attribute should be carefully defined and align to the image size on the defined viewports. Not all of the Hinode components are fully optimized yet, so feel free to share your feedback. For the image shortcode we could consider an additional attribute (e.g. width) that accepts a percentage between 1-100%. It should also consider the breakpoints xs, sm, md, lg, xl, xxl.

[d-oit]

Agree with you. But I need the option to run the website complete offline. For commercial, I would also use a DAM.

For my understanding @Ipstenu try to use the css like this: https://github.com/future-wd/hugo-responsive-images

Hugo / Hinode already do a good job, but it's not full optimized in all places.
As described in the issue, atm thumbnail images are always crop without an option... and a few other little nice-to-haves

e.g. <img loading="lazy" on
https://demo.gethinode.com/en/ and not on the exampleSite

https://demo.gethinode.com/en/

demo

For my current need I only need to adjust my images to the max width 2800 for my images (like wordpress concept of the max width https://wordpress.com/support/media/image-optimization/) and copy them with a proper name to the assets folder

I do not want to redesign all with an editor. But it was nice in hexo for same jobs. Could not find a hugo frontend editor for my needs. So i started to design one on my own.
In the end i only need a editor / media select / linker between hugo pages or special shortcodes who i only use in hugo and have to search for in the documentation.

For commercial i would use https://github.com/pqina/pintura-example-javascript to editor like this:
https://ghost.org/help/using-the-editor/

[Ipstenu]

Oh for sure my code wasn't fully optimized yet. I've been playing with it in my 'free time' all week :) It's changed a lot since original post.

The example that @Ipstenu shared is not fully optimized yet. The sizes=100vw instructs the browser to render a full-width image and ignores the w-25 setting, which should be sizes=25vw (if the image in rendered at 25% width on all screens). Please note that on high-resolution screens (retina in Apple speak), the actual downloaded resolution is twice as high as the pixel resolution.

That's actually copied directly from the docs here - https://gethinode.com/docs/components/image/#aspect-ratio - if you view source, that's what you see.

[markdumay]

Apologies for the confusion, I meant that the Hinode code wasn't fully optimized yet. ;-)

[d-oit]

@markdumay

or one of the (commercial) sites I'm working on

Already live with same hinode websites?

[markdumay]

Hopefully within the next 2-4 weeks...

It's loosely based on https://theme-agency.gethinode.com/en/

[d-oit]

Looks good. Good luck with going live

If you need a German translation/testing you could drop me a line 🙂