האם ראית פעם GIF מונפש בשירות כמו Imgur או Gfycat, בבדיקה בכלי הפיתוח, רק לגלות ש-GIF הוא באמת סרטון? יש סיבה טובה לכך. קובצי GIF מונפשים יכולים להיות עצומים.
למרבה המזל, זה אחד מהתחומים של ביצועי הטעינה שבהם אפשר לעשות עבודה מועטה יחסית כדי להשיג רווחים עצומים! באמצעות המרת קובצי GIF גדולים אפשר לחסוך בגדול רוחב פס.
מדידה ראשונה
ב-Lighthouse אפשר לחפש קובצי GIF שאפשר להמיר לסרטונים. לחשבון כלי פיתוח, לוחצים על הכרטיסייה 'ביקורות' ומסמנים את התיבה 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 כ-input, שמסומן ב-
סימון -i, ולהמיר אותו לסרטון בשם my-animation.mp4.
מקודד libx264 פועל רק עם קבצים במידות זהות, כגון 320px על 240 פיקסלים. אם לקובץ GIF הקלט יש מידות אי-זוגיות, אפשר לכלול מסנן חיתוך כדי להימנע מהטלת 'גובה/רוחב' שלא ניתן לחלוקה ב-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 בסרטון
לקובצי 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 של האתר.