החלפת קובצי GIF מונפשים בסרטון תאפשר טעינה מהירה יותר של דפים

Houssein Djirdeh

Jeremy Wagner

ראיתם פעם קובץ GIF מונפש בשירות כמו Imgur או Gfycat, בדקתם אותו בכלי הפיתוח וגיליתם שהוא למעשה סרטון? יש לכך סיבה טובה. קובצי GIF מונפשים יכולים להיות עצומים.

למרבה המזל, זהו אחד מהתחומים של ביצועי הטעינה שבהם אפשר לבצע עבודה יחסית קטנה כדי להשיג שיפורים משמעותיים. המרת קובצי GIF גדולים לסרטונים יכולה לחסוך משמעותית ברוחב הפס של המשתמשים.

מדידה ראשונה

אתם יכולים להשתמש ב-Lighthouse כדי לבדוק אם יש באתר שלכם קובצי GIF שאפשר להמיר לסרטונים. ב-DevTools, לוחצים על הכרטיסייה 'ביקורות' ומסמנים את התיבה 'ביצועים'. לאחר מכן מריצים את 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 על 240px. אם לקובץ ה-GIF בקלט יש מידות מוזרות, אפשר לכלול מסנן חיתוך כדי למנוע מ-FFmpeg להציג את השגיאה 'height/width not divisible by 2':

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>

כדאי לנסות: החלפת קובץ GIF מונפש בסרטון.

הערה: הדפדפנים לא משערים איזה <source> הוא אופטימלי, ולכן הסדר של <source> חשוב. לדוגמה, אם מציינים קודם סרטון MP4 והדפדפן תומך ב-WebM, הדפדפנים ידלגו על WebM <source> וישתמשו במקום זאת ב-MPEG-4. אם אתם מעדיפים שהמערכת תשתמש קודם ב-WebM <source>, צריך לציין אותו קודם.

ההשפעה על Largest Contentful Paint (LCP)

חשוב לציין שלמרות שאלמנטי <img> הם מועמדים ל-LCP, אלמנטים מסוג <video> ללא תמונה מסוג poster הם לא מועמדים ל-LCP. הפתרון במקרה של הדמיה של קובצי GIF מונפשים הוא לא להוסיף את המאפיין poster לאלמנטים <video>, כי לא ייעשה שימוש בתמונה הזו.

מה המשמעות מבחינת האתר שלכם? מומלץ להמשיך להשתמש ב-<video> במקום ב-GIF מונפש, אבל עם ההבנה שמדיה כזו לא תהיה מועמדת ל-LCP, ובמקום זאת ישתמש בנכס המדיה הגדול הבא. קובצי GIF ו-<video> בדרך כלל גדולים יותר וההורדה שלהם איטית יותר. לכן, מעבר למועמד LCP אחר צפוי לשפר את ה-LCP של האתר.