Base image for responsive images

[Gazley]

Hi there,

I'm getting reasonably familiar with the approach of using srcset and sizes. However, I'm still somewhat confused about the base/reference image to use in PW. So, here's my use-case:

I have an image in Photoshop that has been airbrushed and post-processed called gazley.psd. The layers are flattened into a JPEG that may be 15 -> 30 mb in size and the pixel width may be circa 3000, so now, we have gazley_flat.jpg, not web optimized.

If I save that image "for web", it might reduce the image size by some 50% giving me gazley_web.jpg. However, this is obviously still way too big to use in an image tag!

So, I might want to use an AR of 3:4 where the maximum rendered image will only ever be, say, 960px wide. However, I need 2x and 3x density depending on the device/screen that the image is ultimately rendered on.

Considering the above requirement/use-case, what would be the correct approach to give me what I need? Many thanks!

 

[abdus]

Check out Pageimage::size() method

https://processwire.com/api/ref/page-image/size/

<?php namespace ProcessWire;

$img = $page->images->first;
$img1x = $img->size(300, 400)->url;
$img2x = $img->size(600, 800, ['quality' => 70])->url;
$img3x = $img->size(1200, 1600, ['quality' => 60])->url;

?>
<img src="<?= $img1x ?>" 
     srcset="<?= $img1x ?> 1x, 
             <?= $img2x ?> 2x, 
             <?= $img3x ?> 3x" 
     alt="">

 

[Gazley]

Hello @abdus - many thanks for your code and I understand where you are coming from with this.

What I am basically trying to understand is with respect to the image represented by $page->images->first, which image from my example scenario would I put into ProcessWire in the first place - gazley_flat.jpg or gazley_web.jpg?

I hope I'm making some sense here

[abdus]

It doesn't really matter, but high quality source gives you higher quality thumbnails. However, in both cases, unless _web is an very low quality version of _flat, the difference between the results wouldn't even be noticable. 

One thing to note, however, lower resolution images take less time & cpu to work on, so I guess you should go with _web version.

[Gazley]

Thank you @abdus - you're the man!