Jump to content
Gazley

Base image for responsive images

Recommended Posts

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! :)

 

Share this post


Link to post
Share on other sites

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="">

 

  • Like 1

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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.

  • Thanks 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...