Images with higher density

Archive
1

Hi,

I’m currently building up my new website with Grav after having a fiasko with Wordpress. For the moment I’m using Antimatter as my default theme, however, I’m having some trouble with images and density.

I’m pretty much confused with the way Grav works with high density files. I just uploaded a file myimagename@2x.jpg (dimension 1.500px x 1.800px x 96dpi) and inserted it to a single page. According to my understanding whenever I access the page with a computer having a Retina display, it should show the higher density image. In fact it does not.

Example:
<img src="/images/1/f/9/e/5/1f9e57c1186935a0d434518971bc5707fcab03a7-201703 -sinndeslebens20171x.jpeg"
srcset="/images/d/3/f/b/e/d3fbe9d374729c35b0ec98bc7e62bc2cf83b0c86-20 1703-sinndeslebens20172x.jpeg 1500w,
/images/1/f/9/e/5/1f9e57c1186935a0d434518971bc5707fcab03a7-201703-sin ndeslebens20171x.jpeg 750w"
sizes="100vw" />

Expected image to be shown on a Retina ready display should be /images/d/3/f/b/e/d3fbe9d374729c35b0ec98bc7e62bc2cf83b0c86-201703-sin ndeslebens20172x.jpeg, in fact shown is the fi le /images/1/f/9/e/5/1f9e57c1186935a0d434518971bc5707fcab03a7-201703-sin ndeslebens20171x.jpeg, but with the resolution 750px × 900px (scaled to 1.216px × 1.459px) according to Firefox.

I really don’t get it. Any hints, what I may do wrong here?

Many thanks in advance to anyone for the answer.

Btw, wouldn’t it be easier to implement a script like Retina.js?

Regards, Thomas

2

I worked a little on this and found out that if I look into the media information of Firefox I see that it shows up the file in the normal dimension (750x900px), but scaled up to almost the double size. Now when doing right-click -> show image, I see that in fact it’s the retina image (ending with 2x).
Do view the retina file in the right dimension, I added ?sizes=50vw in the image string in the posting and it’s working - the retina image shows up in 750x900px.

However, this still does not solve my issue completely, my question is still open - why isn’t the retina image shown in the correct size and fills up the complete width of my screen?

Regards, Thomas