בקטע 'הזדמנויות' בדוח 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.
הנחיות ספציפיות למקבץ
AMP
לתוכן אנימציה, כאשר התוכן לא מופיע במסך, כדאי להשתמש ב-amp-anim כדי לצמצם את השימוש במעבד (CPU).