Responsive images

Hi guys,

I've some trouble regarding responsive images on Grav.
I've tried to use this code "derivatives(600,1200,500).sizes('(max-width:26em) 120vw, 50vw')", but I cannot have big images with this code (retina images). When I change the value of "1200" to get bigger image I get an error and I don't understand why...
(Allowed memory size of 134217728 bytes exhausted (tried to allocate 26684801 bytes))

I've also noticed that my pages are slowing down when I had this code to get responsive images even the value of the widest image is small... Can anyone help me ? :-)

Thank you so much !

This is a known problem with Gregwar, the image manipulation library Grav runs. It does not handle memory well enough, and so manipulating many or large images will halt PHP because memory is not continually flushed. This is a limitation, which you can either resolve by resizing only few and small images, or doing it yourself outside of Grav (with for example Node and Gulp, which is a popular workflow).

Thanks OleVik ! So there's no simple way to generate automatically these images ? Do you know if it will be a simple solution in the future ? Because using another tool to create all images it's hard for contributor/editor :-S

I will check Node and Gulp, but I don't think that an external solution will be simple for editors :-S

There is ongoing work on replacing Gregwar, or at least making it handle large/many images better, but as its a large part of the media-functionality of Grav this takes time. Depending on the technical capabilities of your contributors/editors, and your overall workflow, I've in the past just had them upload original images (large) and used Gulp before publishing so that writers can do what they normally do and then optimise assets before publishing.

Here's a Gulpfile used specifically to build images and content for staging (testing before pushing to live), which only needs a gulp command to run. I used it in conjunction with the ImgSrcset-plugin to deliver responsive images across devices.

I'm coming again in this post, just to know if you guys have find a way to achieve responsive images easily ? :-) Thank you so much :-)

BTW, it's not really a Gregwar problem directly, it's PHP's GD functions. These are not as memory efficient as Imagick which is the preferred approach but not supported in Gregwar. Also Imagick is not as widely available as GD, so there's no guarantee that you will be able to make use of it even if it were supported.

The secret is to optimize your images and compress them so they are not so large. You can still have a large 5k image that is ~2mb. If you start getting into 5,10, or even 15mb JPEGs you are definitely going to have issues. Just use JpegMIni or Kraken.io or something to ensure your images are a small size to start with and you'll have few problems.