Mercury theme: Featured image uses the xxx_md.jpg, but shall use xxx_2xl.jpg

[3muchfun]

Hi, can I change the behavior of Publii, that the Featured image of a post is displayed in the browser is the -2xl version, not the -md. version. Currently the Featured image of the post is a bit blurry on the front-page. I think it is because the image is smaller than the size of the viewport. Safari Webinformation states the size as 1150x1150, but the featured image is 768 px, only.

[bobmitro]

I recommend this article https://getpublii.com/dev/how-images-work-in-publii/

[3muchfun]

Hi, Bob, if I understand the article correctly, the FeaturedImages size should be
"xl": {
"width": 1360,
"height": "auto",
"group": "post,cards"
},
if the measures are like in the screenshot

,right?

[bobmitro]

The -2xl version is larger than the -md version, so the browser should use this version to load the post's featured image, as it occupies the entire page width. I checked the Mercury theme in Safari, and it shows the -2xl version on the desktop.

Try reducing the image compression in the Site Settings; this should improve their quality.

In general, the browser decides which image to display depending on a few elements like the viewport, available space, high-density screens, etc.
Using the img element, we are not able to specify exactly what should be displayed but only instruct the browser on what we would like to display. The solution is a picture element that is much more precise, which we will ultimately have to implement in the future.

Also, I recommended using the very clever tool that I have been using for some time, called Lint Images, which can be helpful here, but it has a drawback in the case of themes: after changing the page width in the theme settings, we would have to re-generate the sizes, what we are not able to implement at this time (I mean automating this process).

[3muchfun]

I had a closer look, but still don't get it: Using Safari web information, it says imagename-2-xl.webp (No. 1 in the screenshot), but if I open the image in a new tab, the size of the image is smaller, imagename-2-sm.webp ... (No. 2 in the screenshot)

I use the standard Mercury theme 2.6.0.0 with no changes to the code

[bobmitro]

Provide url to you site.

[3muchfun]

Hi, Bob, I regenerated all thumbnails, just to be sure:
https://fluegge.net/fotos -> standard Mercury theme, blurry images
https://fluegge.net/fotos2 -> Mercury theme with override, sharp image

for the override I removed the below code from config.json. -> sharp images on ...fotos2, but I think the image files for mobile devices are much bigger than they need to be.

"xs": {
"width": 300,
"height": "auto",
"group": "post,cards"
},
"sm": {
"width": 480,
"height": "auto",
"group": "post,cards"
},
"md": {
"width": 768,
"height": "auto",
"group": "post,cards"
},
"lg": {
"width": 1024,
"height": "auto",
"group": "post,cards"
},

[bobmitro]

You are using only one column in the post listing (it's not a post page as you suggested in the previous message: "that the Featured image of a post is displayed"), so the recommended sizes for the featuredImages in your case can be:

"cards": "(min-width: 1340px) calc(-8.01vw + 1267px), calc(86.86vw + 15px)"

[3muchfun]

Well, you are right, I was somehow unprecisely.
What I did in the meantime:
I uninstalled the mercury theme using the uninstall function, quit the Publii app, restarted the app and installed mercury again. I set the frontage listing to 1 column.
Question is: What thumbnail shall I expect to be used on the frontage for the "Elbphilharmonie" post?
My expectation is, that opening the image in another tab would show me the 2xl version of the image. Am I right with this?

[HowToMeetLadies]

When you open an image in a new tab, it effectively opens the URL from the "SRC" attribute. The “SRCSET” specification is lost as a result. In order to see which image was loaded from an SRCSET - because "SRC" does not change - the "currentSrc" property must be evaluated.

By the way, -xl is displayed for me.

EDIT Small correction: If I right click on the image on the page itself and select open in new tab, then currentSrc is actually displayed in the new tab.

[HowToMeetLadies]

I would have continued writing sooner - but sometimes... facepalm

Okay, let's go back to the beginning.

sizes.cards is output on the front:

"cards": "(min-width: 75em) 25vw, (min-width: 56.25em) 33vw, (min-width: 37.5em) 50vw, 100vw",

This results in 25vw = 1440 * 0.25 = 360w. Since the 720 (x2) is closest to the 768 in the set, "md" is chosen.

To explain: 1em here is 19px (font-size) and the viewport is 1440px wide. The first query in sizes.cards is a minimum width of the viewport of 75em, which translates to 1425px. The condition therefore applies and no further queries are evaluated.

The 100vw at the end only occurs if the width is less than ~712px. This is different on the post pages: there the viewport width is used as w and capped at 1600px.

Back to the topic. Try using 57vw instead of 25vw. With a viewport width of 1425px or larger, this would result in 812w+ and therefore 2xl (1600w) should be chosen. (812x2=1624).

"cards": "(min-width: 75em) 57vw, (min-width: 56.25em) 33vw, (min-width: 37.5em) 50vw, 100vw",

[3muchfun]

Thanks for all the explanations you made, very interesting for understanding the issue. Fact is, I use the standard mercury settings, and I would expect it to behave like you described (57vw instead of 25) without any interaction from my side. Let's see what Bob answers ...

[bobmitro]

I have nothing more to add; I've already answered your question. The theme supports the default settings, and the other settings should also work well. It would be perfect to create a new group for each layout option (columns), considering the width of the theme, which can be changed in the theme settings. So, it's not possible to set thumbnails with such a large number of different variables. So, the best way is to play with them and set the optimal one in your case. In the previous reply, I wrote what sizes would best support your thumbnails. There's no point in wasting more time on this.

[3muchfun]

Understood. I neither wanted to bother you nor to waste your time.

[bobmitro]

Not mine, yours. :) I'm always willing to assist whenever possible.

[3muchfun]

@HowToMeetLadies, thanks for your private message, I will think about it.