بهینه سازی تصاویر در لاراول

بهینه سازی تصاویر میتونه به شدت کارایی وب سایت رو بالا ببره, و این یکی از معمول ترین چالش های توسعه دهندگان هست. گاهی تصاویر میتونند تا 50 درصد یا حتی بیشتر کاهش پیدا کنند, این درمورد ابزارهای مختلف در زمینه ی وب فرق میکنه.

در این مقاله میخواهیم به معرفی پکیج image-optimizer بپردازیم :

"این پکیج میتونه فایل ها با فرمت های png, svg و gif رو با رد کردن از ابزارهای مختلف بهینه سازی, مناسب وب سایت شما کنه."

ما یک بررسی پایه ای از این پکیج و چند مثال عملی در فریمورک لاراول خواهیم داشت.

پایه ی بهینه سازی تصاویر

یکی از اهداف کسایی که از ابزارهای بهینه ساز تصویر استفاده میکنند اینه که تا جای ممکن سایر تصویر پایین بیاد و از کیفیتم تا جای ممکن کم نشه. درحالی که چالش بین کوچک شدن تصاویر و باقی ماندن کیفیت برای هرکسی متفاوته اکثر افراد دوست دارند کیفیت خوب تصاویر از بین نره. ابزارهای بهینه سازی تصاویر برای هرفرمتی موجوده, و به بهترین نحو بهینه سازی رو بدون مشکل خاصی انجام میدهند; بهرحال ما میخواهیم درمورد یک api یکپارچه که این ابزارها رو بهم وصل کنه یعنی پکیج spatie صحبت کنیم.

رابط پکیج Spatie's image-optimizer بسیار سادست :

use Spatie\ImageOptimizer\OptimizerChainFactory;

$optimizerChain = OptimizerChainFactory::create();

$optimizerChain->optimize($pathToImage);

این پکیج از بهینه سازهای زیر استفاده میکنه, شرطش اینه که این ها در سیستم موجود باشند :

• JpegOptim
• Optipng
• Pngquant 2
• SVGO
• Gifsicle

پروژه نمونه

بیایید یک پروژه کوچک لاراول بسازیم و بهینه سازی تصویر رو توسط پکیج انجام بدیم.

ابتدا با استفاده از دستورهای زیر یک پروژه خام بسازید :

laravel new image-optimizer

cd ./laravel-image-optimizer

valet link # use this if you are using Laravel valet

composer require spatie/laravel-image-optimizer

php artisan make:controller PhotosController

این دستورات یک پروژه خام لاراول میسازند, اگر از لاراول valet استفاده کنید این رو لینک میکنه و یک کنترلر بنام PhotosController برای نمونه میسازه.

حالا آموزش نصب رو برای راه اندازی پکیج laravel-image-optimizer ادامه میدیم. حالا نوبت راه اندازی provider, facade و middleware هست. بصورت زیر عمل کنید :

// config/app.php

'providers' => [

    ...

    Spatie\LaravelImageOptimizer\ImageOptimizerServiceProvider::class,

];



// config/app.php

'aliases' => [

    ...

    'ImageOptimizer' => Spatie\LaravelImageOptimizer\ImageOptimizerFacade::class,

];

command line

php artisan vendor:publish --provider="Spatie\LaravelImageOptimizer\ImageOptimizerServiceProvider"

فایل پیکربندی پکیج در مسیر config به شکل زیر هست :

use Spatie\ImageOptimizer\Optimizers\Svgo;

use Spatie\ImageOptimizer\Optimizers\Optipng;

use Spatie\ImageOptimizer\Optimizers\Gifsicle;

use Spatie\ImageOptimizer\Optimizers\Pngquant;

use Spatie\ImageOptimizer\Optimizers\Jpegoptim;



return [

    /**

     * When calling `optimize` the package will automatically determine which optimizers

     * should run for the given image.

     */

    'optimizers' => [



        Jpegoptim::class => [

            '--strip-all',  // this strips out all text information such as comments and EXIF data

            '--all-progressive'  // this will make sure the resulting image is a progressive one

        ],



        Pngquant::class => [

            '--force' // required parameter for this package

        ],



        Optipng::class => [

            '-i0', // this will result in a non-interlaced, progressive scanned image

            '-o2',  // this set the optimization level to two (multiple IDAT compression trials)

            '-quiet' // required parameter for this package

        ],

        

        Svgo::class => [

            '--disable=cleanupIDs' // disabling because it is know to cause troubles

        ],



        Gifsicle::class => [

            '-b', // required parameter for this package

            '-O3' // this produces the slowest but best results

        ],

    ],



    /**

     * The maximum time in seconds each optimizer is allowed to run separately.

     */

    'timeout' => 60,



    /**

     * If set to `true` all output of the optimizer binaries will be appended to the default log.

     * You can also set this to a class that implements `Psr\Log\LoggerInterface`.

     */

    'log_optimizer_activity' => false,

];

درنهایت برای middleware :

// app/Http/Kernel.php

protected $routeMiddleware = [

   ...

   'optimizeImages' => \Spatie\LaravelImageOptimizer\Middlewares\OptimizeImages::class,

];

بعد از اتمام راه اندازی پکیج مسیر زیر رو به routes/web.php بیافزایید :

Route::post('/photos', 'PhotosController@store')

    ->middleware('optimizeImages');

این مسیر از middleware که اضافه کردیم استفاده میکنه تا تصاویر آپلود شده رو بهینه کنه.

کد کنترلر :

namespace App\Http\Controllers;

class PhotosController extends Controller {

    public function store() {

        $this->validate(request(), [

            'photo' => 'required|image:jpeg '

        ]);



        request()->photo->storeAs('images', 'optimized.jpg');



        return response('OK', 201);

    }

}

حالا برای view از کد ساده فرم که بتونیم تصویر ثبت کنیم استفاده میکنیم. فایل welcome.blade.php

<form action="/photos" enctype="multipart/form-data" method="POST">
  {{ csrf_field() }}
  <div class="form-group">
    <label for="">Photo</label>
    <input class="form-control" name="photo" type="file" />
    <button type="submit">Upload</button>
  </div>
</form>

بعد از اینکه آپلود انجا شد فایل بهینه شده در مسیر storage/app/images/optimized.jpg قرار میگیره. شما میتونید به قدرت این بهینه سازها پی ببرید.

منبع