בקטע 'הזדמנויות' בדוח Lighthouse מפורטים כל קובצי ה-GIF המצוירים, יחד עם החיסכון המשוער בשניות שאפשר להשיג על ידי המרת קובצי ה-GIF האלה לסרטונים:
למה כדאי להחליף קובצי GIF מונפשים בסרטונים
קובצי GIF גדולים לא מעבירים תוכן אנימציה באופן יעיל. המרת קובצי GIF גדולים לסרטונים יכולה לחסוך בגדול רוחב פס. מומלץ להשתמש בסרטוני MPEG4/WebM בשביל אנימציות ובפורמט PNG/WebP לתמונות סטטיות במקום GIF כדי לחסוך בייטים ברשת.
יצירת סרטוני MPEG
יש כמה דרכים להמיר קובצי GIF לווידאו.
FFmpeg הוא הכלי שמשמש במדריך הזה.
כדי להשתמש ב-FFmpeg כדי להמיר את קובץ ה-GIF, my-animation.gif, לסרטון MP4, מריצים את הפקודה הבאה במסוף:
ffmpeg -i my-animation.gif my-animation.mp4
הפקודה הזו מורה ל-FFmpeg להשתמש ב-my-animation.gif כקלט, כפי שמצוין בדגל -i, ולהמיר אותו לסרטון בשם my-animation.mp4.
יצירת סרטוני WebM
סרטוני WebM קטנים בהרבה מסרטוני MP4, אבל לא כל הדפדפנים תומכים ב-WebM, לכן מומלץ ליצור את שניהם.
כדי להשתמש ב-FFmpeg כדי להמיר את my-animation.gif לסרטון WebM,
מריצים את הפקודה הבאה במסוף:
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
החלפת קובץ ה-GIF בסרטון
לקובצי GIF מונפשים יש שלוש תכונות עיקריות שסרטון צריך לשכפל:
- הם מופעלים באופן אוטומטי.
- הם חוזרים על עצמם בלי הפסקה (בדרך כלל, אבל אפשר למנוע את החזרה על עצמם).
- הם שקטים.
למרבה המזל, אפשר ליצור מחדש את ההתנהגויות האלה באמצעות הרכיב <video>.
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm" />
<source src="my-animation.mp4" type="video/mp4" />
</video>
שימוש בשירות שממיר קובצי GIF לסרטוני HTML5
הרבה רשתות CDN של תמונות תומכות בהמרת וידאו בפורמט GIF ל-HTML5. מעלים קובץ GIF ל-CDN של התמונות, ו-CDN של התמונות מחזיר סרטון HTML5.
הנחיות ספציפיות ל-stack
AMP
להצגת תוכן באנימציה, כשהתוכן לא מוצג במסך כדאי להשתמש ב-amp-anim כדי לצמצם את השימוש ביחידת העיבוד המרכזית (CPU).