Suggestions for image optimisation strategies?

Hey everyone ( @inhuofficial, @izio38 , @ravavyr )

Happy new year! Hope you all had a great festive season! So with all of your advice I refactored my approach to outputting resized IG photos back to the user using the Image Intervention library.

My approach was to loop thorough the first set of pictures, detect the original width & height and therefore work out the original ratio of each picture.

Then apply a resize reduction factor of either third, a quarter or 22.5% depending on if the image width was less than 800px, in between 800 and 1200 px or greater than 1200px. After this reduction conversion was done, my approach then applies the original ratio to either the width or height dependent on which one is bigger than the other. I then converted the resized image into base64 image url and echoed the output along with html and css for styling.

' if ($width / $height > $ratio_orig) {
$width = $height * $ratio_orig;
} else {
$height = $width / $ratio_orig;
}

                        $width = intval(round($width)); 
                        $height = intval(round($height));

                        $img_base64 = $manager->make($image_link)->resize($width, $height)->encode('data-url');' 

Note, my image size went from circa 250kb per image down to 20-30kb per image.

All in all this did see a marked overall improvement. Currently the page download size of the images alone is 11MB and its overall page download is 18 - 20 MB taking 58.15s or nearly 1 minute to render on screen.

With the new approach the page download size went from a 18-20MB down to 4.8MB or 11MB with the first pull of images down to 4.1MB and a total render time of 28.76s to download.

However, due to how I've implemented this approach, the image conversion and output of the new image blocks the page rendering in full until the foreach loop within this script has completed. (i.e. the script does all this work in the background and then spits out to the front end all 28 converted images at once.

Is there an approach I can take with my PHP script that outputs each image as it is processed?

Ideally I would like to dynamically inject a resized image into the output HTML as soon as the image is processed?

Perhaps I could wrap the base64 image url as as json payload and push a processed image to the front end in this manner?

Or is it possible to implement web sockets with PHP ?

I suspect I need to save or cache the images then process / resize them and then delivery them to the end user.

Yes that is the technique that you will need to employ if you are unable to call smaller versions of the images from the API, trying to resize them "on the fly" will be both slow and computationally expensive so you only want to do it once!

If you are doing this you should also try and convert the images to .webp format at the same time as resizing as that will also decrease the file size.

WebP is built in if you have Imagick installed with imagewebp function.

You can also resize with $finalImage = imagecreatetruecolor($finalWidth, $finalHeight); and then use imagecopyresized to copy the large image to the new image you created ready for saving.

The only down side to using webP is you need to cache both a .webp and a .jpg and use either browser sniffing in JS (if you are loading the images dynamically) or the <picture> element to ensure you still serve .jpg images to browsers that don't support .webp

Hi !

Have you tried to make 2 version of your images, one blurred and on full, I used this technique before, and it reduces the first image size by ~20, I think it depends on the image, but.. doable!

While the second image is loading, you show the blurred version. That's not perfect, but this help user experience in my opinion.

Another way is to make an IP filter to only accept people coming from big cities with good connection. Joke.

Good luck with your project ! 👋