This is something I really can't make my mind up on. I come from a WordPress background and the way it works there is you specify your image sizes in advance (for example, small, medium, large, xl) and the dimensions for each size. Then, when you upload an image it gets resized into all 4 sizes.
In my Laravel app I have taken the same approach. The image sizes and dimensions are specified in a config file.
The downside to this is that all images throughout the entire app share the same sizes and dimensions. Let's say on the front end of the website you want to show an image 300 x 300 pixels, but the stored small version is 150 x 150 and the stored medium version is 400 x 400, you would have to show the 400 x 400 version, which is 100 pixels bigger than you need it to be. In other words, there is no 300x300 size so you're always left serving the next largest size up.
I have seen some sites store a single image in its largest size, and then dynamically resize the image on the fly based on a width and height parameter (i.e. /images/supercar.jpg?width=400&height=400). I am guessing that the dynamically resized images would be cached so that the image doesn't need resizing on a subsequent request. The beauty about this is on the front-end I would be able to use specific and in some cases very unique image sizes, without being constrained to a set of particular sizes in advance. You can also change your image sizes later on and not have to resize every single image.
There are a lot of downsides though:
-
If a page has 50 images on it, that's a lot of images to resize on the first request. I think there is going to be a performance hit on the first page view for the first visitor.
-
On a big and busy website, the above point could have an adverse effect on the server load. Imagine the site owner adds 1,000 new products - those images would need to be resized and it would likely happen at a time not of your choosing.
-
To check if there is a cached version would by default require the whole framework to be booted for every single image on every single page, every time.
-
I guess you could get around the above point with a rule in the .htaccess file to check whether a physical file exists before passing the request to Laravel, or if you use a proxy such as Cloudflare the images would be cached there in a static form. But this approach seems fiddly to setup, and in the case of Cloudflare or similar CDN your app is then reliant on a third party.
So, what do you think? Is my current approach the best way? Should I switch to dynamic resizing or is it doomed to failure? Anything else I haven't thought of?
Thanks,