Best practices for serving responsive images

I am just beginning work on a new MODx site and before I get too deep I want to set up a good system for serving images. I would like it to be:

  1. Responsive
  2. Lazy loaded
  3. Placeholder image will loading
  4. Easy client image upload

In the past I have used Adaptive Image and Lazysizes but am not sure how I could implement placeholder images with the combination of these, or if there is a better solution entirely.

What have you used? Are there any best practices I should be mindful of?

P.S I am also using Fred :slight_smile:


you could try pthumb for optimising and managing images.

Then there’s Lazyimage for lazy loading.

You could also look at the Smushit extra for more optiisation.

One final option is to use a service like cloudinary
It’s like a super smart cdn for images and assets.

It will size and compress images on the fly dependent on what device the end user is using.

It has a very generous free plan before you need to start paying.

1 Like

I like image+, here:
and Im currently investigating phpthumbsup.

Im actually searching for away to automatically generate responsive code when a client loads up an image… I will create another question on the forum for that :slight_smile: