Suggestions for image optimisation strategies?
Hi there,
I've recently deployed my first MVP into production, shuzzle.me is the name of the app. It is somewhat of a challenging tile sliding game
and a new way to have fun with your Instagram pictures.
You can try it out here -- >> https://www.shuzzle.me
Note: you will need to login with your Instagram credentials in order to access the app
Anyhow's the reason for my post is I'm struggling to find a way to optimise the delivery of images to the end users in particular mobiles users on first load with a 3G connection. I need an approach or strategy that will scale if my application see's an increase in users and drastically reduce the size of images being pushed to the end user's device.
The Problem
My problem is that the images returned via the Instagram Basic Display & Graph API are super large in file size and dimension.
For example, upon first load of a profile view, 28 images are pulled from the API. The image size per picture pulled into the shuzzle users profile is between 500kb and 750kb. This could be an initial load of 14Mb to 21Mb which on a 3G mobile connection is dire and renders a poor overall UX.
In addition to that, the IG Graph API does not provide a way to call an image resource of a smaller size.
Possible Approaches
I've tried lazy loading the images into the browser, various PHP image optimisation libraries / frameworks but alas to no increase in performance and reduction in per picture file size or dimension.
I suspect I need to save or cache the images then process / resize them and then delivery them to the end user.
Constraints
As this is a side hobby, I have a very limited budget so hoping to achieve this with a solution or approach that is very wallet friendly / cost effective, therefore I wish to avoid using a third party image optimising service or something of that nature.
Any suggestions or best approach to my problem would be greatly appreciated?
Thanks
Unless you can convince the IG API to give you smaller versions of the pics, you're going to need to pull in the full sized images to the server, resize, save the smaller versions, then send those out to the end users. I can't fathom you're trying to pull via the API and pass them thru to somebody directly. For the best results, I'd generate two versions, one that will be sliced for the puzzle and another, smaller thumbnail.
That said, you should also have some screen shots, videos, etc. of what your app does. Right now, there's nothing at all to make a user want to grant auth access. That's a big deal for many people. Best of luck!
Hi @PHPDreams Happy new year! Hope you had a great festive season! So with 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');
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 ?
This comment was deleted 5 years ago