For example
<picture>
<source media=”(min-width: 900px)”
srcset=“image-lg_1x.webp 1x, image-lg_2x.webp 2x”
type=“image/webp” > <source media=”(min-width: 601px)”
srcset=“image-md_1x.webp 1x, image-md_2x.webp 2x” type=“image/webp” > <source media=”(max-width: 600px)”
srcset=“image-sm_1x.webp 1x, image-sm_1x.webp 1x” type=“image/webp” > <img src=“image-lg_1x.jpg” type=“image/jpeg” ”>
</picture>
If you add the HTML, not sure why it wouldn’t.
You have a few errors,
Using either a template, shortcode or render hook you can output HTML for images however you’d like it.
…and there’s no alt attribute on your image element!
I noticed it the browser picks whatever size is the last inside srcset. Hence the question.
The browser picks whichever image best fits the context, including display pixel density and images it has already downloaded. If it has the largest image cached and no others, it might show the largest image and not bother to download the others. The exact behavior is unspecified.
Regarding Hugo specifically, Hugo can resize images, so if you give it a 3x image, you can write code to have it generate 2x, 1x, whatever-x versions as you like. I recently added this functionality to a shortcode myself.
This might help you as well: Resize all images | Hugo Codex
And then specifically this trick: Image compression for the lazy | Hugo Codex
In all my tests, only the second link appears in the source code despite srcset=“image-md_1x.webp 1x, image-md_2x.webp 2x” with this being generated via image processing (Do math functions take decimals? - #8 by jmooring). I am starting to question if Hugo really supports Retina Images.
Hugo does not support retina images. The browser/HTML does. Hugo outputs HTML. Does that help you?
I gave up on this after struggling with it. I decided to go with full quality resized images.
What does full quality resized images mean though?
If you want an iPad to have 2x retina images, you need approx 2000px wide images (for full screen width, depending on model and margins).
So serving an image that large for non retina desktops and phones will likely be using a file four times bigger or more than really required.
It is a problem worth solving.
If you want more control than srcset sizes the picture element allows sources to specify two media queries e.g. (large and retina screen):
media="(min-width: 1023px) and (-webkit-min-device-pixel-ratio: 1.9)"
Also useful is that you can usually reuse certain images also like a desktop 1000px wide image doubles up for a 360@x3 / 1080px wide phone screen.
I have pretty complex image processing on my hugo site, to do things like collaging three images together it does the maths to work out how big each needs to be and provides retina versions.
I’ll take a look at your code if you like, send me a message.
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.
