יצירת תמונות ממוזערות בצד השרת: WebP, AVIF, תורים

פתרון בעיות LCP ומשקל דף: יצירת תמונות ממוזערות אוטומטית

האתר שלך עמוס בתמונות ואיטי? כל דף מגיש את התמונות המקוריות בגודל 4000x3000 פיקסלים – LCP מזנק והמשתמשים עוזבים. הניסיון שלנו מראה שיצירה אוטומטית של תמונות ממוזערות בצד השרת היא הדרך היחידה לשמור על Core Web Vitals בשליטה ללא עיבוד ידני של כל קובץ. אנו מיישמים פתרון סוהר תוך 2–3 ימים: הגדרת תור, פורמטים WebP/AVIF, קאשינג CDN. זה מקטין את נפח העברת הנתונים ב-40–60% ומשפר את LCP ב-30–50%, מה שמשפיע ישירות על המרות.

איך עובדת יצירת תמונות ממוזערות מבוססת תור

יצירה אסינכרונית היא הסטנדרט לפרויקטים מודרניים עם עומס העלאות גבוה. לאחר שהמשתמש מעלה מקור ל-S3 או לאחסון מקומי, משימה נשלחת לתור (Laravel Job, BullMQ, או AWS SQS). היא יוצרת מספר גדלים: thumb (200x200) לרשימות, medium (600x400) לכרטיסים, large (1200x800) לגלריות. המשתמש לא מחכה – התגובה מגיעה מיד, והתמונות הממוזערות מופיעות שניות לאחר מכן. התור לא חוסם את שרת האינטרנט; העיבוד מתרחש ברקע.

למה לבחור WebP/AVIF?

פורמטי דחיסה מודרניים עם אובדן נתונים חוסכים 25–50% בגודל ללא אובדן איכות ניכר. עבור דפדפנים שאינם תומכים ב-AVIF, WebP מוגש אוטומטית דרך רכיב <picture>. זה מקטין את LCP ב-30–50%. AVIF (המבוסס על AV1) מציע דחיסה טובה ביותר אך דורש יותר משאבי CPU לקידוד. WebP הוא בחירה אוניברסלית, נתמך על ידי 96% מהדפדפנים.

בחירת אסטרטגיית יצירה: תור לעומת יצירה עצלה

לאתרים עם תדירות העלאה גבוהה (גלריות תמונות, מרקטפלייסים), תור אסינכרוני הוא האפשרות היחידה – הוא לא חוסם תגובות ומאפשר קנה מידה אופקי. יצירה עצלה באמצעות Glide מתאימה לפרויקטים עם העלאות נדירות או כשגדלי התמונות הממוזערות לא ידועים מראש. היא יוצרת את התמונה בבקשה הראשונה ומאחסנת אותה בקאש. עם זאת, המבקר הראשון חווה השהיית יצירה. אנו עוזרים לבחור אסטרטגיה על סמך המדדים שלך: מספר העלאות יומי, גודל תמונה ממוצע, תקציב תשתית.

מה כלול בעבודה שלנו

• בדיקת מערכת האחסון והעיבוד הנוכחית של תמונות
• בחירת אסטרטגיה: תור או יצירה עצלה
• הטמעת יצירת תמונות ממוזערות עם הגדלים והפורמטים הנדרשים
• הגדרת קאשינג (CDN, Cache-Control)
• אינטגרציה עם API ואחסון קיימים (S3, שרת ענן)
• תיעוד לשימוש ותחזוקה

למה Sharp עולה על מתחרים

ספריית Sharp (המבוססת על libvips) מבצעת פעולות 4–5 פעמים מהר יותר מ-ImageMagick או GD למשימות טיפוסיות. זה מושג על ידי עבודה עם התמונה בזיכרון RAM ללא קבצי ביניים ושימוש יעיל בקאש CPU. עבור פרויקטים ב-Node.js, Sharp הוא הסטנדרט דה פקטו. עבור פרויקטים ב-PHP, אנו ממליצים על Intervention Image עם תורים או Glide ליצירה עצלה.

פורמטים ואופטימיזציה: השוואה

// Выбор формата по поддержке браузером
const output = sharp(buffer)
  .resize(800)
  .toFormat(supportsAvif ? 'avif' : supportsWebp ? 'webp' : 'jpeg', {
    quality: supportsAvif ? 60 : supportsWebp ? 80 : 85,
  });

AVIF נותן חיסכון של עד 50% לעומת JPEG באותה איכות. WebP נתמך על ידי כל הדפדפנים המודרניים. לתאימות מקסימלית, השתמש ב-// Выбор формата по поддержке браузером const output = sharp(buffer) .resize(800) .toFormat(supportsAvif ? 'avif' : supportsWebp ? 'webp' : 'jpeg', { quality: supportsAvif ? 60 : supportsWebp ? 80 : 85, }); עם מספר פורמטים.

Laravel: Intervention Image + תור

// Модель с автоматической генерацией миниатюр
class Image extends Model {
    const SIZES = [
        'thumb' => [200, 200],
        'medium' => [600, 400],
        'large' => [1200, 800],
    ];
}

// Job для асинхронной генерации
class GenerateImageThumbnails implements ShouldQueue {
    use Dispatchable, InteractsWithQueue, Queueable;

    public function __construct(private Image $image) {}

    public function handle(): void {
        $originalPath = Storage::disk('s3')->path($this->image->path);
        $img = \Intervention\Image\Facades\Image::make($originalPath);

        foreach (Image::SIZES as $size => [$width, $height]) {
            $resized = clone $img;
            $resized->fit($width, $height); // crop по центру
            $thumbPath = str_replace('original/', "{$size}/", $this->image->path);
            Storage::disk('s3')->put($thumbPath, $resized->encode('webp', 85)->__toString());
        }

        $this->image->update(['processed' => true]);
    }
}

// Контроллер загрузки
public function store(Request $request): JsonResponse {
    $path = Storage::disk('s3')->putFile('original', $request->file('image'));
    $image = Image::create([
        'path' => $path,
        'user_id' => auth()->id(),
        'processed' => false,
    ]);

    GenerateImageThumbnails::dispatch($image);

    return response()->json(['id' => $image->id]);
}

Node.js: Sharp

Sharp היא ספריית Node.js המהירה ביותר לעיבוד תמונות (המבוססת על libvips).

import sharp from 'sharp';
import { S3Client, GetObjectCommand, PutObjectCommand } from '@aws-sdk/client-s3';

const SIZES = {
  thumb: { width: 200, height: 200 },
  medium: { width: 600, height: 400 },
  large: { width: 1200, height: 800 },
} as const;

async function generateThumbnails(s3Key: string): Promise<Record<string, string>> {
  const s3 = new S3Client({ region: 'eu-west-1' });

  // Скачать оригинал
  const { Body } = await s3.send(new GetObjectCommand({
    Bucket: process.env.S3_BUCKET!,
    Key: s3Key,
  }));
  const buffer = Buffer.from(await (Body as any).transformToByteArray());

  const results: Record<string, string> = {};

  await Promise.all(
    Object.entries(SIZES).map(async ([name, { width, height }]) => {
      const thumbnail = await sharp(buffer)
        .resize(width, height, { fit: 'cover', position: 'centre' })
        .webp({ quality: 85 })
        .toBuffer();

      const thumbKey = s3Key.replace('original/', `${name}/`).replace(/\.[^.]+$/, '.webp');

      await s3.send(new PutObjectCommand({
        Bucket: process.env.S3_BUCKET!,
        Key: thumbKey,
        Body: thumbnail,
        ContentType: 'image/webp',
        CacheControl: 'public, max-age=31536000',
      }));

      results[name] = thumbKey;
    })
  );

  return results;
}

יצירה עצלה באמצעות Glide (PHP)

Glide יוצר תמונות ממוזערות לפי בקשה עם URL חתום:

// Маршрут для изображений
Route::get('/img/{path}', function (Request $request, string $path) {
    $server = League\Glide\ServerFactory::create([
        'source' => Storage::disk('s3')->getDriver(),
        'cache' => Storage::disk('local')->getDriver(),
        'cache_path_prefix' => '.cache',
        'base_url' => '/img',
        'max_image_size' => 2000 * 2000,
    ]);

    // Проверка подписи URL
    League\Glide\Signatures\SignatureFactory::create(config('app.key'))
        ->validateRequest('/img/' . $path, $request->all());

    return $server->getImageResponse($path, $request->all());
})->where('path', '.*');

// Генерация подписанного URL
$url = (new League\Glide\Urls\UrlBuilderFactory)
    ->create('/img', config('app.key'))
    ->getUrl('uploads/photo.jpg', ['w' => 400, 'h' => 300, 'fit' => 'crop']);

לוח זמנים ועלות

יצירת תמונות ממוזערות מבוססת תור (Laravel Job או BullMQ Worker) עם אחסון S3: 2–3 ימים. יצירה עצלה באמצעות Glide עם קאשינג CDN: 3–4 ימים. פרויקטים מורכבים עם אינטגרציות CMS מרובות: עד 5 ימים. העלות מחושבת באופן אישי לפי מורכבות וטכנולוגיה. צור קשר לייעוץ ולוח זמנים מדויק. הזמן בדיקה ואופטימיזציה של תמונות – נבחר את האסטרטגיה האופטימלית לפרויקט שלך.

למהנדסים שלנו יש ניסיון של 5+ שנים באופטימיזציה של אתרים בעלי עומס גבוה. יותר מ-30 פרויקטים עם ארכיטקטורה דומה רצים בהצלחה בסביבת ייצור. קבל ייעוץ – נבחן את הפרויקט שלך ונציע פתרון סוהר, עם הבטחה להפחתת LCP של 30–50% לאחר ההטמעה.