נתקלתם פעם ב-GIF מונפש בשירות כמו Imgur או Gfycat, בדקתם אותו בכלי הפיתוח וגיליתם שבעצם מדובר בסרטון? יש לכך סיבה טובה. קובצי GIF מונפשים יכולים להיות ענקיים.
למזלנו, זה אחד מהתחומים שקשורים לביצועי הטעינה שבהם אפשר להשקיע יחסית מעט מאמץ כדי להשיג שיפורים משמעותיים. המרת קובצי GIF גדולים לסרטונים מאפשרת לחסוך משמעותית ברוחב הפס של המשתמשים.
מדידה קודמת
אפשר להשתמש ב-Lighthouse כדי לבדוק אם יש באתר קובצי GIF שאפשר להמיר לסרטונים. בכלי פיתוח, לוחצים על הכרטיסייה Audits (ביקורות) ומסמנים את תיבת הסימון Performance (ביצועים). לאחר מכן מריצים את Lighthouse ובודקים את הדוח. אם יש לכם קובצי GIF שאפשר להמיר, תראו את ההצעה 'שימוש בפורמטים של וידאו לתוכן מונפש':
יצירת סרטוני MPEG
יש כמה דרכים להמיר קובצי GIF לסרטונים, ובמדריך הזה נשתמש בכלי FFmpeg.
כדי להשתמש ב-FFmpeg להמרת קובץ ה-GIF, my-animation.gif לסרטון MP4, מריצים את הפקודה הבאה במסוף:
ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
הפקודה הזו אומרת ל-FFmpeg לקחת את my-animation.gif כקלט, שמסומן בדגל -i, ולהמיר אותו לסרטון בשם my-animation.mp4.
מקודד libx264 פועל רק עם קבצים שהמידות שלהם הן מספרים זוגיים, כמו 320 x 240 פיקסלים. אם קובץ ה-GIF שמוזן כולל מידות אי-זוגיות, אפשר לכלול מסנן חיתוך כדי למנוע את השגיאה 'height/width not divisible by 2' (הגובה או הרוחב לא מתחלקים ב-2) שמוחזרת על ידי FFmpeg:
ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
יצירת סרטוני WebM
פורמט MP4 קיים מאז 1999, אבל WebM הוא פורמט קובץ חדש יחסית, שהושק לראשונה בשנת 2010. סרטונים בפורמט 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 המקורי הוא 3.7MB, לעומת גרסת ה-MP4 שהיא 551KB, וגרסת ה-WebM שהיא רק 341KB.
החלפת תג ה-GIF img בסרטון
יש שלושה מאפיינים עיקריים של קובצי GIF מונפשים שסרטון צריך לשכפל:
- הם מושמעים אוטומטית.
- הם חוזרים על עצמם בלולאה (בדרך כלל, אבל אפשר למנוע את הלולאה).
- הם שקטים.
למזלכם, אפשר ליצור מחדש את ההתנהגויות האלה באמצעות הרכיב <video>.
<video autoplay loop muted playsinline></video>
אלמנט <video> עם המאפיינים האלה פועל אוטומטית, חוזר על עצמו ללא הפסקה, לא משמיע אודיו ופועל בתוך התוכן (כלומר, לא במסך מלא). אלה כל ההתנהגויות האופייניות שצפויות מקובצי GIF מונפשים. 🎉
לבסוף, רכיב <video> דורש רכיב צאצא <source> אחד או יותר שמפנים לקובצי וידאו שונים שהדפדפן יכול לבחור מתוכם, בהתאם לתמיכה בפורמט של הדפדפן. כדאי לספק גם WebM וגם MP4, כדי שאם דפדפן לא תומך ב-WebM, הוא יוכל לחזור ל-MP4.
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm">
<source src="my-animation.mp4" type="video/mp4">
</video>
ההשפעה על המהירות שבה נטען רכיב התוכן הכי גדול (LCP)
חשוב לציין שרכיבי <img> הם מועמדים ל-LCP, אבל רכיבי <video> בלי poster תמונה הם לא מועמדים ל-LCP. הפתרון במקרה של הדמיית קובצי GIF מונפשים הוא לא להוסיף מאפיין poster לרכיבי <video>, כי התמונה הזו לא תשמש אתכם.
מה המשמעות מבחינת האתר שלכם? מומלץ להשתמש ב-<video> במקום ב-GIF אנימטיבי, אבל צריך להבין שהמדיה הזו לא תהיה מועמדת ל-LCP, ובמקומה ישמש המועמד הגדול הבא. קובצי GIF ו-<video> בדרך כלל גדולים יותר ולכן ההורדה שלהם איטית יותר. לכן, מעבר למועמד אחר ל-LCP כנראה ישפר עוד יותר את ה-LCP של האתר.