I have an image column in the database contains the images paths of my posts table, I'm using that column in two different places one for a single post page with a width of 800px and height of 400px, in my blog page I wanna use these images but this time with different width and height (thumbnails for posts).. I have two options and I'm not sure which one is better! The first one I call a function with the image path, width and height, therefore it returns the optimized version, and to be honest, I didn't try to do this and I don't know what's happening behind the scenes I think it's creating a thumbnail version on the server?
<img src="{{ resizeImage( url('images/posts/' . $post->image) ), '400', '250') }}" />
The second one is when I upload a post image I made a second version for thumbnails and call it like this THUMBNAIL_1562572708.jpg for example.
my question is about performance and best practices of doing this, any recommendations and if there is a better way than that please share it I'm using Laravel, thanks.
I think that the second one is better because we don't need to call a function or processes something when sending the request. but this way also has a disadvantage which is duplicating files, I am confused, actually :(
ـــــــــــــــــــــــــــــــــــــــ
Well! here is an update with a real example I want to share with anyone who need help.
you will need to install these awesome packages
composer require intervention/image intervention/imagecache
Please read about URL based image manipulation mechanism http://image.intervention.io/use/url
after publishing the configuration files you will need to edit the imagecache config file like so:
I suppose your images are in the public/images!
so we will read from the public directory.
...
'route' => 'thumbnails',
...
'paths' => array(
// From public
public_path(),
),
...
<img src="{{ 'http://127.0.0.1:8000/your_route_name_that_was_setted_in_imagecache_config_file/your_template_name/images/1.png' }}" />
Notice you have three default templates small, medium, and large, and of course, you can make your own template.
The answers to this question may be highly opinionated, but here are my two cents.
In general, you should go for separate thumbnails that are generated during upload of images or, which is way better, in the background after uploading an image. With Laravels queue system, this is pretty straight forward. The reasons are very simple and already mentioned in the comments:
Identication of thumnails can either be done by storing the filename of the thumbnail or, as you already suggested, by using some logic to resolve thumbnails based on the original file. Personally, I would use a folder structure that allows you to generate a wide variety of different thumbnails, e.g.:
images/
original/
123456789.jpg
thumbnail/
100x100/
123456789.jpg
200x200/
123456789.jpg
The directory names 100x100 and 200x200 can of course be changed to something that suits you. Using the suggested ones would mean to me that a thumbnail is not wider than 100px and not higher than 100px either. It doesn't mean every thumbnail is exactly 100x100 pixels, although you can also implement such a thumbnail generator if you need.
Be careful that you might need some fallback logic to display thumbnails while they are still being generated if you utilize the background workers for this. A fallback could be a default image or the original resized via HTML.
By the way, if you implement a thumbnail generator, you can consider implementing an image optimizer as well. Most images can be minified without users noticing a (significant) difference. Whether such a system is worth it or not, depends on the amount of images you display and how much traffic there is on your site. For heavily used websites, this may be a good idea to save some traffic. An existing solution for this is spatie/image-optimizer (I'm not associated with spatie in any way).