Image rezise, fit and cache best practice on .htaccess, intervention image, laravel

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

During my years of development of custom websites, online stores, online and mobile games, cms, CRM systems I always have this issue of uploading, storing, resizing and caching images.
The best approach so far is this:

1. Add your website to Cloudflare, to be able to use your images through CloudFlares CDN, this way your images will be delivered to your clients by Cloudflare, this will speed up the load speed and will give your system a breath.

2. Add to your .htaccess file:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]

This will allow any request to not existing file to go through a controller, no matter whatever this is laravel or custom controller.

Code for the route (laravel routes.php)

Route::get('/assets/uploads/{type}/{w}x{h}/{file}', 'AssetsUploadsController@index');

3. Scenarios and mechanics
When a request arrives at address /assets/uploads/news/278×170/test.jpg, and the file does not exist in the directory
The request will be handled by Media or AssetsController, the controller will load the image from the image location /assets/uploads/news/test.jpg, will get the required size params from the URL, which in our case are /assets/uploads/news/278x170/test.jpg
Will copy the image with fit operation from /assets/uploads/news/test.jpg to /assets/uploads/news/278×170/test.jpg and will read out the image to output.
This will happen only once when the image is not found, which is the best part.

4. The next request, on the same address will now be directly sent to the image, because the .htaccess directive will not work and the image will be sent directly

5. Caching – the image will be cashed as a static resource, if you want to reactivate the process and rebuild the image cache, you just have to delete the image from the directory or just truncate all directory images, after this, the process will recreate the image as described upper in the document.

6. Code for Assets Controller
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Intervention\Image\ImageManagerStatic as Image;
class AssetsUploadsController extends Controller {
public function index(Request $request = null, $directory = null, $width = null, $height = null, $file = null) {
$im = new Image();
$filename = public_path() . '/assets/uploads/' . $directory . '/' . $file;
$img = $im->make(file_get_contents($filename))->fit($width, $height === 'auto' ? null : $height);
// mkdir
if (!is_dir(public_path() . '/assets/uploads/' . $directory . '/' . $width . 'x' . $height . '/')) {
@mkdir(public_path() . '/assets/uploads/' . $directory . '/' . $width . 'x' . $height . '/');
}
// save
$img->save(public_path() . '/assets/uploads/' . $directory . '/' . $width . 'x' . $height . '/' . $file, 100);
return $img->response('jpg', 100);
}
}

This code is for laravel framework controller, but the same principle of caching, resize can be applied to any type of web system.

Leave a Reply

Back to Top