בקטע 'הזדמנויות' בדוח Lighthouse אפשר למצוא רשימה של כל קובצי ה-GIF עם אנימציה, לצד חיסכון משוער בשניות על-ידי המרת קובצי ה-GIF האלה לווידאו:
למה כדאי להחליף קובצי GIF מונפשים בסרטונים
קובצי GIF גדולים לא מעבירים תוכן אנימציה באופן יעיל. המרת קובצי GIF גדולים לסרטונים מאפשרת לחסוך בגדול על רוחב הפס של המשתמשים. כדי לצמצם את מספר הבייטים שמועברים ברשת, במקום קובצי GIF כדאי לשקול את האפשרות להשתמש בסרטוני MPEG4/WebM בשביל אנימציות ובקובצי PNG/WebP בשביל תמונות סטטיות.
יצירת סרטוני 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).
Drupal
כדאי לשקול העלאה של ה-GIF לשירות שיאפשר להטמיע אותו כסרטון.