Skip to content
Grav 2.0 is officially stable. Read the announcement →
Archive

Images with higher density

Started by Muut Archive 9 years ago · 1 replies · 508 views
9 years ago

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 [email protected] (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

9 years ago

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

Suggested topics

Topic Participants Replies Views Activity
Archive · by Deleted User, 9 years ago
0 1345 9 years ago
Archive · by Muut Archive, 9 years ago
2 932 9 years ago
Archive · by Muut Archive, 9 years ago
2 4059 9 years ago
Archive · by Muut Archive, 9 years ago
1 2945 9 years ago
Archive · by Muut Archive, 9 years ago
3 1117 9 years ago