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@example.com (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.
<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"
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?