بهینه سازی تصاویر در لاراول
ﺯﻣﺎﻥ ﻣﻄﺎﻟﻌﻪ: 3 دقیقه

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

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

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

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

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

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

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

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

use Spatie\ImageOptimizer\OptimizerChainFactory;

$optimizerChain = OptimizerChainFactory::create();

$optimizerChain->optimize($pathToImage);

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

پروژه نمونه

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

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

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 قرار میگیره. شما میتونید به قدرت این بهینه سازها پی ببرید.

منبع

چه امتیازی برای این مقاله میدهید؟

خیلی بد
بد
متوسط
خوب
عالی
در انتظار ثبت رای

دیدگاه و پرسش

برای ارسال دیدگاه لازم است وارد شده یا ثبت‌نام کنید ورود یا ثبت‌نام

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

در حال دریافت نظرات از سرور، لطفا منتظر بمانید