Best practices for serving responsive images

Development
1

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:

2

Well,

you could try pthumb https://modx.com/extras/package/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
3

I like image+, here: http://jako.github.io/ImagePlus/usage/
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: