We are transitioning over to a new forum platform. Please post new issues there. Existing threads will be dealt with here unless you choose to move them over. Visit the new forum

Forum

Thread tagged as: Question

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

Terry Upton

Terry Upton 0 points

  • 5 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

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;


<img src="<perch:content type="image" id="image" label="Image" width="720" density="1" />" srcset="<perch:content type="image" id="image" label="Image" width="720" density="1" /> 1x, <perch:content type="image" id="image" label="Image" width="720" 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" />" />

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.

Drew McLellan

Drew McLellan 2638 points
Perch Support

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.

Drew McLellan

Drew McLellan 2638 points
Perch Support

Density uses the uploaded image as density 1. A density setting of 2 would 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.

Drew McLellan

Drew McLellan 2638 points
Perch Support

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.