Compressive & Responsive Images

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?

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?

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.

Thanks Hussein