עלילות גיא ב-Nextland: מדריך קליל לקומפוננטת Image ב-Next.js

עלילות גיא בNextland. והפעם, נעבור על הפיצ'רים של תגית Image בקיצור נמרץ! 😎 הקדמה: החזון של Next הוא לעזור למפתחים (לנו) לשפר את הseo, ובקומפוננטת Image הם ממש התפרעו. (לשם הנוחות והמיקס המכוער של אנגלית ועברית נקרא לקומפוננטה בשם חיבה איימי) דרגת קושי : 2/10. 🤩 1. כבר הזכרנו את היתרון של מניעת קפיצות layout. שנגרמות בגלל שתמונה "ריקה" לא תופסת מקום ואחרי הטעינה שפתאום יש לה גודל היא קופצת ומקפיצה את כל האתר לאלף אלפי *&%$. 🤐 איימי תדאג לתפוס מקום גם לפני הטעינה לפי הwidth/height שהיא מקבלת בprops. 2. כיווץ של תמונות לגודל המבוקש והמרה לWebP (או AVIF). כדי להוריד את נפח התמונות ולקבל חוית טעינה מהירה יותר. 🐇 3. כברירת מחדל התמונות מוגדרות כlazy-loading מה שגם נשמע מעליב, וגם דואג שהתמונות לא יורדות עד שהם נכנסות לתצוגה - מה שמונע טעינה ראשונית ארוכה. 🐢 4. ניתן להגדיר אילו תמונות הם בחשיבות גבוהה יותר לטעינה מוקדמת (אבל אל תתפלאו שלשאר התמונות יתפתחו הפרעות פסיכולוגיות והרגשת דחיה). 😷 5. לטעינה ואופטימיזציה בטוחה של תמונות רק מדומיינים מורשים - נצטרך להגדיר בnext.config את המקור של התמונות שלנו (משרתים חיצוניים בלבד). 🚀 6. נסו לא לתת לתמונה alt או width ותראו איזה צרחות איימי נותנת... למרות שהיא עוזרת היא גם תופסת אותכם קצר. 😱 7. שליטה באיכות של התמונה בעזרת הprop שנקרא quality. 👑 * יש אפילו עוד, כמו תמיכה בתמונות רספונסיביות (srcset) ותצוגה של placeholder של תמונה מטושטשת עד שהתמונה עולה וכו'😎