Forum
Density in rwd images
I was wondering how I integrate the density into the image size use case. If I just want to target on large screens, where do I have to set density? The following code just generates the image twice the size not both (retina.js is on board). And if I add density to the image tag is will not be chosen...
<img src="<perch:content type="image" id="image" label="Image" help="Upload or select an image" />" alt="<perch:content type="text" id="alt" label="Description" required="true" help="Description of this image" title="true" />"
sizes="(min-width: 640px) 60vw, 100vw"
srcset="<perch:content type="image" id="image" label="Image" width="200" /> 200w,
<perch:content type="image" id="image" label="Image" width="400" /> 400w,
<perch:content type="image" id="image" label="Image" width="800" /> 800w,
<perch:content type="image" id="image" label="Image" width="1200" /> 1200w,
<perch:content type="image" id="image" label="Image" width="1200" density="2" /> 1200w">
Your help is much appreciated!
When you set the density attribute, it's used as a multiplier for the dimensions you set. So a 200px width at a density of 2 will resize the image to 400px but display it at 200px wide.
Yes, I know. But how I achieve to have both available in rwd images? Where do I put the density attribute?
You mean the same image at 1200px wide @1x and at @2x?
Exactly. What we need is to have both that the browser can choose, right?
If you're telling me that's what you need, then yes. I'll have a look into it and see if that's something we can either already do or add.
If we can't, a workaround might be to specify the size at e.g. 1px difference.
Here's an example of how it is used outside perch:
How would you code this in Perch? Many thanks!
I would do this currently:
Look at my first post, that's exactly what I did and didn't work as expected... Can you test once yourself, please?
What result do you get?
If you need me to test it I won't be able to do that today.
Drew, I have it. I just had to add density to the first of the two images. Now Perch generates as expected both.
Ah, perfect.