יצירת תמונות ממוזערות: הגדרת גדלים מרובים ו-WebP

יצירת תמונות ממוזערות במספר גדלים

תמונות שהועלו צריכות להופיע בהקשרים שונים — כרטיס מוצר, תצוגה מקדימה של מאמר, אווטאר, תגית OG. שמירת התמונה המקורית ושינוי גודלה בכל בקשה היא רעיון גרוע: המעבד (CPU) עובד קשה, זמן ההשהיה גדל, ו-LCP נפגע. הגישה הנכונה היא ליצור קבוצה של גדלים קבועים בזמן ההעלאה ולהגיש קבצים סטטיים.

אנו מתמחים באופטימיזציה של תמונות. הגישה שלנו היא יצירת תמונות ממוזערות סוהר באמצעות כלים מוכחים. להלן נסביר כיצד ליישם זאת ב-Laravel/PHP או Node.js/sharp. אנו מבטיחים שהדפים שלך ייטענו מהר ויעברו את Core Web Vitals.

בעיות טיפוסיות בטיפול בתמונות

ללא מערכת ליצירת תמונות ממוזערות, מתרחשות שגיאות כמו 'hydrate-mismatch' עקב גדלים שונים בצד הלקוח והשרת, LCP גבוה מטעינת מקוריים, ובזבוז תעבורה. אנו פותרים זאת עם קונפיגורציית גדלים מוגדרת מראש והמרה ל-WebP.

יצירה מיידית (Eager) לעומת יצירה עצלה (Lazy)

יצירה מיידית — כל הגדלים נוצרים מיד עם העלאת הקובץ. מתאים כאשר קבוצת הגדלים יציבה. לוגיקת הגשה פשוטה יותר, ללא החטאות מטמון.

יצירה עצלה — הגודל נוצר בבקשה הראשונה, ואז נשמר במטמון. מתאים לפרויקטים דינמיים שבהם הגדלים הנדרשים אינם ידועים מראש.

עבור רוב הפרויקטים, יצירה מיידית עם קונפיגורציה קבועה מספיקה.

מחסן טכנולוגיות

עבור PHP/Laravel — ספריית Intervention Image על GD או Imagick. Imagick מועדף: טיפול טוב יותר ב-EXIF, תמיכה רחבה יותר בפורמטים, פרופילי צבע מדויקים יותר.

composer require intervention/image 

// config/image.php return [ 'driver' => 'imagick', // или 'gd' ]; 

עבור Node.js — sharp (libvips מתחת למכסה המנוע), האפשרות המהירה ביותר הקיימת:

npm install sharp 

השוואה: Intervention Image לעומת sharp

למה ליצור תמונות ממוזערות ב-WebP מיד?

WebP נתמך על ידי כל הדפדפנים המודרניים — Chrome, Firefox, Safari (מאז 2020). הוא חוסך 25–35% במשקל לעומת JPEG באותה איכות חזותית. עבור תגיות OG וכרטיסי מוצר, זה מפחית את LCP ב-10–20%. לפי Google Web Fundamentals, החלפת JPEG ב-WebP מקצרת את זמן הטעינה ב-30% בממוצע.

קונפיגורציית גדלים

שמור גדלים בקובץ קונפיגורציה נפרד, לא מפוזרים בקוד:

// config/thumbnails.php
return [
    'sizes' => [
        'thumb' => ['width' => 150, 'height' => 150, 'fit' => 'crop'],
        'small' => ['width' => 320, 'height' => null, 'fit' => 'width'],
        'medium' => ['width' => 640, 'height' => null, 'fit' => 'width'],
        'large' => ['width' => 1280, 'height' => null, 'fit' => 'width'],
        'og' => ['width' => 1200, 'height' => 630, 'fit' => 'crop'],
    ],
];

composer require intervention/image — חיתוך מרכזי תוך שמירת פרופורציות. // config/image.php return [ 'driver' => 'imagick', // или 'gd' ]; — קנה מידה לפי רוחב, הגובה מחושב מחדש.

שירות יצירה

אנו מיישמים שירות שיוצר את כל הווריאציות לפי קונפיגורציה:

namespace App\Services;

use Illuminate\Http\UploadedFile;
use Illuminate\Support\Facades\Storage;
use Intervention\Image\Facades\Image;

class ThumbnailService
{
    public function generateAll(UploadedFile $file, string $basePath): array
    {
        $original = Image::make($file);
        $sizes = config('thumbnails.sizes');
        $paths = [];

        // Сохраняем оригинал
        $ext = $file->getClientOriginalExtension();
        $hash = sha1_file($file->getRealPath());
        $originalPath = "{$basePath}/{$hash}.{$ext}";
        Storage::disk('public')->put($originalPath, (string) $original->encode());
        $paths['original'] = $originalPath;

        foreach ($sizes as $name => $params) {
            $img = clone $original;
            if ($params['fit'] === 'crop') {
                $img->fit($params['width'], $params['height'], function ($constraint) {
                    $constraint->upsize();
                });
            } else {
                $img->resize($params['width'], $params['height'], function ($constraint) {
                    $constraint->aspectRatio();
                    $constraint->upsize();
                });
            }
            $sizePath = "{$basePath}/{$hash}_{$name}.webp";
            Storage::disk('public')->put($sizePath, (string) $img->encode('webp', 85));
            $paths[$name] = $sizePath;
        }

        return $paths;
    }
}

אנו יוצרים ישירות ב-WebP — איכות 85 נותנת איזון טוב בין גודל לאיכות.

אינטגרציה עם מודל ובקר

במודל Media, שמור נתיבים לכל הווריאציות בשדה JSON npm install sharp . בבקר ההעלאה, קרא לשירות ושמור את התוצאה. צור קשר עבור רשימת הקוד המלאה.

טיפול בשינויי קונפיגורציה

כאשר קבוצת הגדלים משתנה, יש ליצור מחדש קבצים ישנים. אנו יוצרים פקודת artisan עם עיבוד מקובץ (100 רשומות בכל קבוצה) שעוברת על כל קבצי המדיה ויוצרת מחדש תמונות ממוזערות. הפקודה רצה פעם אחת וניתנת לאוטומציה.

// Artisan command
public function handle()
{
    Media::chunk(100, function ($mediaItems) {
        foreach ($mediaItems as $media) {
            $this->thumbnailService->regenerate($media);
        }
    });
}

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

• פיתוח קונפיגורציית גדלים מותאמת לפרויקט שלך
• יישום שירות היצירה (מיידית או עצלה)
• אינטגרציה עם מודל ובקר העלאה
• הגדרת תור ליצירה ברקע (אופציונלי)
• יצירה מחדש של תמונות ממוזערות קיימות בעת שינוי קונפיגורציה
• תיעוד ומסירת גישה למאגר הקוד

המומחיות שלנו

מעל 5 שנות ניסיון בפיתוח אתרים, יותר מ-100 פרויקטים מוצלחים של אופטימיזציית תמונות. אנו מוסמכים ב-Laravel ו-Node.js. איכות ועמידה בלוחות זמנים מובטחות.

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

התקנת ספריות, קונפיגורציית גדלים, שירות יצירה — 4–6 שעות. אינטגרציה עם מודל, טיפול בהעלאה, פקודת יצירה מחדש — עוד 3–4 שעות. אם נדרש תור (Job ברקע) — בתוספת שעתיים.

הזמן יישום סוהר: צור קשר להערכת פרויקט. נכין הצעת מחיר מותאמת ללא עמלות נסתרות.