אופטימיזציית תמונות: WebP, AVIF, טעינה עצלה – מדריך מלא

תמונות מהוות 50–70% ממשקל העמוד הממוצע — לפי HTTP Archive. תמונות שאינן מותאמות הן הגורם המוביל לטעינה איטית ולתוצאות גרועות ב-Core Web Vitals. אנו מטפלים בנושא זה בעשרות פרויקטים מדי שנה, ובאופן עקבי רואים שיפור של 30–50% ב-LCP לאחר יישום דחיסה וטעינה עצלה.

מקרה טיפוסי: חנות מסחר אלקטרוני עם 10,000 מוצרים. לפני האופטימיזציה, משקל העמוד הממוצע היה 3.5 MB, ו-LCP היה 4.2 שניות. לאחר המרה ל-WebP, הגדרת srcset, וטעינה עצלה של תמונות מחוץ למסך, המשקל ירד ל-1.2 MB ו-LCP ל-1.6 שניות. שיעור ההמרה עלה ב-12%. כיצד השגנו זאת מפורט להלן.

למה לבצע אופטימיזציה לתמונות?

גוגל כוללת את LCP ו-CLS בגורמי הדירוג. כל מגה-בייט נוסף מפחית את ההמרה ב-2–3%. אופטימיזציה נכונה היא הדרך המהירה ביותר לשפר את המהירות ולעבור את Core Web Vitals. הניסיון הרב שלנו מראה שתמונות מוגדרות היטב מחזירות את ההשקעה תוך שבוע עד שבועיים. אנו מבטיחים שיפור במדדי LCP ו-CLS לאחר העבודה שלנו.

מה מציעים WebP ו-AVIF

WebP דוחס JPEG ללא אובדן ב-20–30%, ועם אובדן ב-25–35%. AVIF יעיל אף יותר: 40–60% בהשוואה ל-JPEG. AVIF תומך גם ב-HDR ובעומק צבע של 10 ביט. לצילומי מוצר, AVIF מספק חיסכון משמעותי. לאיורים עם מעברי צבע חדים, WebP עדיף (AVIF עלול ליצור חפצים בקצוות מנוגדים).

לצורך תאימות, אנו משתמשים באלמנט <picture> עם גיבוי:

<picture>
  <source type="image/avif" srcset="/images/product-400.avif 400w, /images/product-800.avif 800w, /images/product-1200.avif 1200w" sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 400px">
  <source type="image/webp" srcset="/images/product-400.webp 400w, /images/product-800.webp 800w, /images/product-1200.webp 1200w" sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 400px">
  <img src="/images/product-800.jpg" width="800" height="800" alt="Название продукта" loading="lazy" decoding="async">
</picture>

כיצד להגדיר נכון טעינה עצלה

<picture> <source type="image/avif" srcset="/images/product-400.avif 400w, /images/product-800.avif 800w, /images/product-1200.avif 1200w" sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 400px"> <source type="image/webp" srcset="/images/product-400.webp 400w, /images/product-800.webp 800w, /images/product-1200.webp 1200w" sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 400px"> <img src="/images/product-800.jpg" width="800" height="800" alt="Название продукта" loading="lazy" decoding="async"> </picture> המקורי נתמך בכל הדפדפנים המודרניים. לפרטים, ראו MDN על מאפיין loading. הוא עובד מצוין לתמונות מתחת לקו הגלילה. עבור אלמנט LCP (בדרך כלל ה-hero), השתמשו תמיד ב-loading="lazy" וב-loading="eager".

<img src="photo.webp" loading="lazy" alt="Описание изображения"> <!-- LCP-изображение — НИКОГДА не lazy -->
<img src="hero.webp" loading="eager" fetchpriority="high" alt="...">

לתמונות רקע, אנו משתמשים ב-Intersection Observer עם טעינה מוקדמת. חשוב: אין להחיל טעינה עצלה על תמונות גלויות — זה פוגע ב-LCP. כמו כן, הימנעו משימוש ב-fetchpriority="high" יחד עם <img src="photo.webp" loading="lazy" alt="Описание изображения"> <!-- LCP-изображение — НИКОГДА не lazy --> <img src="hero.webp" loading="eager" fetchpriority="high" alt="..."> (הם מתנגשים).

כיצד אנו מגדירים המרה

בפרויקט Laravel טיפוסי, אנו משתמשים בחבילת loading="lazy". היא יוצרת המרות אוטומטית בעת ההעלאה. אנו מציינים פורמטים, גדלים ואיכות.

class Product extends Model {
    use InteractsWithMedia;

    public function registerMediaConversions(?Media $media = null): void
    {
        $this->addMediaConversion('thumb')
            ->width(400)
            ->height(400)
            ->format('webp')
            ->quality(80)
            ->performOnCollections('images');

        $this->addMediaConversion('medium')
            ->width(800)
            ->height(800)
            ->format('webp')
            ->quality(82)
            ->performOnCollections('images');

        $this->addMediaConversion('avif-medium')
            ->width(800)
            ->height(800)
            ->format('avif')
            ->quality(65)
            ->performOnCollections('images');
    }
}

אם לא משתמשים ב-Laravel, אנו ממירים מראש דרך CLI או בצד השרת. ניתן להגדיר את Nginx לשרת WebP אוטומטית בהתבסס על כותרת fetchpriority="high":

map $http_accept $webp_suffix {
    default "";
    "~*webp" ".webp";
}

location ~* \.(jpg|jpeg|png)$ {
    add_header Vary Accept;
    try_files $uri$webp_suffix $uri =404;
    expires 30d;
}

למה AVIF עדיף על WebP למשימות מסוימות

AVIF מספק דחיסה טובה יותר ב-15–25% באותה איכות ויזואלית. הוא תומך ב-HDR ובעומק צבע של 10 ביט, מה שחיוני לתמונות מוצר. עם זאת, ל-WebP יש תמיכה רחבה יותר (96% לעומת 88%), ולכן אנו משתמשים בשניהם עם גיבוי. לאיורים עם ניגודיות גבוהה, WebP עדיף בשל פחות חפצים.

טעויות נפוצות באופטימיזציית תמונות

• שימוש בפורמט אחד בלבד (למשל, רק WebP) — דפדפנים ישנים לא יציגו את התמונה.
• היעדר מאפייני spatie/laravel-medialibrary/class Product extends Model { use InteractsWithMedia; public function registerMediaConversions(?Media $media = null): void { $this->addMediaConversion('thumb') ->width(400)->height(400) ->format('webp') ->quality(80) ->performOnCollections('images'); $this->addMediaConversion('medium') ->width(800)->height(800) ->format('webp') ->quality(82) ->performOnCollections('images'); $this->addMediaConversion('avif-medium') ->width(800)->height(800) ->format('avif') ->quality(65) ->performOnCollections('images'); } } — גורם ל-CLS.
• טעינה עצלה על תמונות LCP — מחמירה את LCP.
• דחיסה מתחת לאיכות 60 עבור WebP ומתחת ל-50 עבור AVIF — חפצים גלויים.
• גדלי map $http_accept $webp_suffix { default ""; "~*webp" ".webp"; } location ~* \.(jpg|jpeg|png)$ { add_header Vary Accept; try_files $uri$webp_suffix $uri =404; expires 30d; } שגויים (למשל, תמונות גדולות מדי למובייל).

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

אנו מציעים אופטימיזציית תמונות במפתח מלא:

• ביקורת: מדידת משקל, ממדים ופורמטים של כל התמונות.
• הגדרת המרה: WebP/AVIF עם איכות מוגדרת.
• תמונות רספונסיביות: יצירת srcset לרזולוציות שונות.
• טעינה עצלה ו-LQIP (מציין מיקום מטושטש).
• פריסה ושילוב CDN.
• תיעוד והדרכה לצוות שלכם.

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

אילו תוצאות תקבלו

• הפחתה של 50–70% במשקל העמוד.
• שיפור של 30–50% ב-LCP.
• עמידה ב-Core Web Vitals.
• המרה גבוהה יותר בזכות המהירות.

אנו מבטיחים שיפור במדדים. מעל 200 פרויקטים הושלמו. צרו קשר לביקורת אתר וקבלו המלצות ראשוניות עוד היום.