ראיתם פעם קובץ GIF מונפש בשירות כמו Imgur או Gfycat, בדקתם אותו בכלים למפתחים וגיליתם ש-GIF הוא באמת סרטון? יש סיבה טובה לכך. קובצי GIF מונפשים יכולים להיות ממש ענקים.
למרבה המזל, זהו אחד מהתחומים שבהם יש לכם עומסי ביצועים, שבו אפשר לעבוד מעט יחסית כדי להשיג רווחים עצומים. המרת קובצי GIF גדולים לסרטונים מאפשרת חיסכון משמעותי ברוחב הפס של המשתמשים.
קודם מודדים
ניתן להשתמש ב-Lighthouse כדי לחפש באתר קובצי GIF שאפשר להמיר לסרטונים. בכלי הפיתוח, לוחצים על הכרטיסייה Audits ומסמנים את התיבה Performance. לאחר מכן מפעילים את Lighthouse ובודקים את הדוח. אם יש לכם קובצי GIF שאפשר להמיר, אמורה להופיע ההצעה "שימוש בפורמטים של וידאו לתוכן אנימציה":
יצירת סרטונים בפורמט MPEG
יש כמה דרכים להמיר קובצי GIF לסרטונים, הכלי FFmpeg הוא הכלי במדריך הזה.
כדי להשתמש ב-FFmpeg כדי להמיר את קובץ ה-GIF, my-animation.gif צריך להריץ את הפקודה הבאה במסוף:
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 פיקסלים על 240 פיקסלים. אם לקובץ ה-GIF של הקלט יש מימדים אי-זוגיים, תוכלו לכלול מסנן חיתוך כדי למנוע הטלת השגיאה 'גובה/רוחב לא מתחלק ב-2' של קובץ ה-GIF:
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 בסרטון
לקובצי 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>
ההשפעה על Largest Contentful Paint (LCP)
חשוב לציין שרכיבי <img> אמנם מועמדים ל-LCP, אבל רכיבי <video> בלי תמונה של poster הם לא מועמדים של LCP. הפתרון במקרה של אמולציה של קובצי GIF מונפשים הוא לא להוסיף את המאפיין poster לרכיבי <video>, כי התמונה לא תהיה בשימוש.
מה המשמעות מבחינת האתר שלך? ההמלצה היא להמשיך להשתמש ב-<video> במקום בקובץ GIF מונפש, אבל מתוך הבנה שמדיה מסוג זה לא תהיה מועמדת ל-LCP, ובמקום זאת ייעשה שימוש במועמד הבא בגודלו. קובצי GIF ו-<video> הם בדרך כלל גדולים יותר וההורדה שלהם איטית יותר, ולכן מעבר למועמד LCP אחר כנראה ישפר גם את ה-LCP באתר.