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, Docs

Compressive & Responsive Images

I noticed two separate Docs for compressive (https://docs.grabaperch.com/perch/content/templates/compressive-images/) images and one for responsive images (https://docs.grabaperch.com/perch/content/templates/how-do-i-use-responsive-images-in-perch/). I decided I would combine the two of them into one. My question is does this make sense to do? My main goal is to have the server put up the image that has the best resolution based on the size of the screen, but still compress the image sizes. Any suggestions or comments would be appreciated.

<picture class="casesPic">
                            <img src="<perch:content type="image" id="image" label="Image" help="Upload or select an image" width="1000" density="2" quality="30" sharpen="2" />" alt="<perch:content type="text" id="alt" label="Description" required="true" help="Description of this image" />"
                            sizes="(min-width: 640px) 60vw, 100vw"
                            srcset="<perch:content type="image" id="image" label="Image" width="200" density="2" quality="30" sharpen="2" /> 200w,
                                    <perch:content type="image" id="image" label="Image" width="400" density="2" quality="30" sharpen="2" /> 400w,
                                    <perch:content type="image" id="image" label="Image" width="800" density="2" quality="30" sharpen="2" /> 800w,
                                    <perch:content type="image" id="image" label="Image" width="1200" density="2" quality="30" sharpen="2" /> 1200w">
                        </picture>
Matt Holovach

Matt Holovach 0 points

  • 2 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

What end markup are you trying to get to?

Trying combine the compressive and responsive documentation into one template. I want the images to serve based on the screen size. So larger screens will get a larger compressed image and smaller screens will get a smaller compressed image.

All I did was copy one of the responsive examples from the responsive documentation and I added the compressive features to it.

Does that code accomplish that goal? Or is there a better approach?

Drew McLellan

Drew McLellan 2638 points
Perch Support

I'm not sure if you're asking in terms of content management or frontend development.

I guess I don't understand. The code that I listed above works properly. I upload one image and it is compressed and it creates 5 separate images as listed above that are all compressed and double the density. So the CMS appears to be working properly in that regard.

I guess I'm asking from a development standpoint. Questions: * How do I know if Perch is serving the correct image? (I want to serve the closest image to what is required by the screen size) * Is there a better way to do what I'm trying to do? * Is it okay to add the compressive features with the responsive features?
* Does anyone else do something different that might be a better choice?

Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

How do I know if Perch is serving the correct image?

Perch will link all these images because that's what you're doing in your template. The browser is the one that determines which image to serve.

Here's a simple example for using the picture element:

<picture>
  <source media="(min-width: 1366px)" srcset="laptop.jpg">
  <source media="(min-width: 768px)" srcset="tablet.jpg">
  <img src="default.jpg" />
</picture>

In the above example:

  • default.jpg loads by default
  • tablet.jpg loads if the viewport is at least 768px wide
  • laptop.jpg loads if the viewport is at least 1366px wide

If you would like to check whether the browser is serving the correct image, you can do so through the browser's developer tools.

Is it okay to add the compressive features with the responsive features?

Yes, it is.

The "compressive features" is Perch generating different versions of your image on upload (based on the tags you add to your template).

The "responsive features" is just using HTML5's <picture> element.

  • Does anyone else do something different that might be a better choice?

Whether you use the <picture> element to serve different versions of an image based on the layout is up to you. And if you do decide to use the <picture> element, whether you upload each version manually or let Perch generates the other versions is also up to you.

In your example you would be required to upload three separate images into Perch. In the example given in the responsive documentation it appears that you only have to upload one and then Perch will serve the right image based on the size of the screen. At least that is my understanding from the responsive documentation page.

Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

In your example you would be required to upload three separate images into Perch.

The example was to demonstrate the <picture> element, not Perch's ability to generate multiple versions of an image.

But you sure can:

<picture>
<!-- Upload large image of logo for >1366px viewport -->
<source media="(min-width: 1366px)" srcset="<perch:content id="logo" type="image" label="Logo" />">

<!-- Generate an 80x80 version of logo for >768px viewport -->
<source media="(min-width: 768px)" srcset="<perch:content id="logo" type="image" width="80" height="80" />">

<!-- Generate a 40x40 version of logo for default image -->
<img src="<perch:content id="logo" type="image" width="40" height="40" />" alt="<perch:content id="logoalt" type="text" label="Alt text" />" />
</picture>

Perch will serve the right image based on the size of the screen

Perch can't serve the image based on the screen size. The browser does this for you if you write the appropriate code. In case you have not used the <picture> element before, here's a quick demo. Play with the window's width to see the image change.

Thanks Hussein