ראיתם פעם קובץ 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>
ההשפעה על Largest Contentful Paint (LCP)
חשוב לציין שלמרות שאלמנטי <img>
הם מועמדים ל-LCP, אלמנטים מסוג <video>
ללא תמונה מסוג poster
הם לא מועמדים ל-LCP. הפתרון במקרה של הדמיה של קובצי GIF מונפשים הוא לא להוסיף את המאפיין poster
לאלמנטים <video>
, כי לא ייעשה שימוש בתמונה הזו.
מה המשמעות מבחינת האתר שלכם? מומלץ להמשיך להשתמש ב-<video>
במקום ב-GIF מונפש, אבל עם ההבנה שמדיה כזו לא תהיה מועמדת ל-LCP, ובמקום זאת ישתמש בנכס המדיה הגדול הבא. קובצי GIF ו-<video>
בדרך כלל גדולים יותר וההורדה שלהם איטית יותר. לכן, מעבר למועמד LCP אחר צפוי לשפר את ה-LCP של האתר.