Responsive Image Workflow In ProcessWire

[Gazley]

Hi there,

After using a number of image services that have very nicely taken care of responsive image handling for me, I have now put together code that will output image elements in a variety of ways dependent on their definition in the back-end of the PW system. So, things like Viewport width,  DPR and Art Direction (Picture) based representations.

In the past, I just loaded the largest, highest quality image to the image service provider and the client-side JS decided, based on runtime condition, what size and pixel density image version were required.

I haven't used ProcessWire's image handling capabilities, other than just loading images into the "images" field which has provided the original path used by the responsive image services.

Here is the nub of the gist. If I start with the same source image provided by the photographer, as referred to earlier, is there anything in ProcessWire that will either automatically or manually, help me to create the various versions of the images that I want to include in my image element's srcset attribute? Or, does this have to be done outside of ProcessWire, say, in Photoshop or Lightroom?

I really appreciate your thoughts, ideas and comments around best practice in this regard, within the context of ProcessWire.

Cheers!

[Robin S]

is there anything in ProcessWire that will either automatically or manually, help me to create the various versions of the images that I want to include in my image element's srcset attribute?

For images in an images field, you can create any sizes you need via PW's native resizing methods.

For images inside an RTE field you can use a textformatter module. The idea would be to detect images in the RTE block and replace them with your own custom srcset markup. The Image Interceptor module is a good one to look at if you want to get ideas for a custom module.

But there is already the TextformatterImageSRCSET module ready to go.

And also check out the ImageToPicture module.

[Gazley]

Thanks Robin for some great tips and pointers. They have helped immensely!

[horst]

For images in an images field, you can create any sizes you need via PW's native resizing methods.

for help with the native resizing methods, there is also PIA available

[Gazley]

Hey @horst - you have created a beautiful lady! Thanks for giving me her number !