Forum
How should I be using density on images?
Hi Guys,
Quick question as I can't get my head around this. But how should I be using density on images? Here is a template I setup as part of an article block.
<img src="<perch:content type="image" id="image" label="Image" density="1" />"
srcset="<perch:content type="image" id="image" label="Image" density="1" /> 1x, <perch:content type="image" id="image" label="Image" density="2" /> 2x"
alt="<perch:content type="text" id="alt" label="Description" required="true" help="e.g. Photo of MD John Smith with his best wig on" title="true" />"
/>
it is supposed to create the normal image and @2x image. This would particular template allows for user to upload any sized image and not have the system resize it (like I would do with a full size image or an inline image). It is for instances like logos/graphics etc and such where you might to just upload an image at a pre-created size. However, I was still hoping to create a @2x sized image.
So for example I am uploading a ISO logo at 400x80px I would expect this to form the 2x and then the system to create a 1x version of this at 200x40px. But it only seems to create the original uploaded 400px version.
Am I missing something in my code? Or have I misunderstood how density should be used in templates.
Thanks, Terry
If you don't set dimensions for the image field tag, Perch won't resize the image. Creating a 1x version at 200px would be resizing the image, but Perch doesn't know you want it to do that.
If I set the width="720" though it just creates the 1x version and the 2x version at the same size 400x80px. What I am trying to achieve is to allow user to upload any sized image and perch will use that size image and create a version half the size for the 1x so essentially you are uploading the 2x version. The reason for this is to be flexible in the images/graphics you upload and not forcing them to a set dimension.
I adjusted my template as follows;
But when I upload the logo (original size 400px by 80px) it just gerneates both the 1x and @2x version as the same 400px by 80px image.
I must be missing a trick?
Thanks, Terry
Edit; the reason the width is set to 720px is to allow images up to the full width of this content area.
We size by pixels, not proportions. It's not possible to scale an image to 50% without knowing what size you want to target.
I thought that's what the density would do? So would I need to set the width as 200 and then a 400 and 200 would be generated, what's the difference between the density and just settings widths? Whats the benefit of using density?
Thanks.
Density uses the uploaded image as density
1. A density setting of2would double the values.So is there no way you can think of that would allow user to upload image at any size (below the maximum width set on the tag) and then generate a @2x version. I would always have to set a fixed width that would resize the image?
Can you see what I am trying to achieve?
I wanted to have a little flexibility over the size used, but to generate a 2x version for srcset.
Thanks.
If the image is below the width set on the tag then Perch won't resize it. It certainly won't upscale it for a 2x version so that the browser than then downscale it again. That would waste bandwidth and lose quality.
The presumption is that your source images are larger than you'll want to use on a web page. If that's not the case then image resizing is not going to help you.