פורמט AV1 Image File Format (AVIF) הוא קידוד שמבוסס על קודק הווידאו AV1 בקוד הפתוח. פורמט AVIF חדש עוד יותר – מ-WebP, נתמך רק ב-Chrome וב-Opera מאז 2020, ב-Firefox ב-2021 וב-Safari בשנת 2022. כמו ב-WebP, המטרה של AVIF היא לטפל בכל תרחישי שימוש אפשרי עבור תמונות רסטר באינטרנט: אנימציה דמוית GIF, שקיפות דמוית PNG ושיפור איכות התפיסה בקבצים קטנים יותר מ-JPEG או WebP.
עד כה, AVIF נראה מבטיח. מסגרת בדיקה שפותחה על ידי Netflix – אחת החברות המייסדות ב-Alliance for Open Media, הקבוצה שאחראית על פיתוח קודק AV1 – מציגה הפחתה משמעותית בגודל הקבצים בהשוואה ל-JPEG או WebP. במחקרים נוספים של Cloudinary ושל צוות ה-codecs של Chrome הבחינו בטובה ביחס לתקני הקידוד הקיימים.
השימוש בכלים הוא מוגבל יחסית, אבל אתם יכולים להתחיל להתנסות ב-AVIF כבר היום, כיוון שאחת מהקידודים ש-Squoosh מציעה:
תמיכת דפדפן
אם אתם תוהים למה השקענו כל כך הרבה זמן בדיון על JPEG, כש-AVIF ו-WebP יכולים לספק לנו תוצאות באיכות גבוהה יותר וקבצים קטנים בהרבה, הסיבה לכך היא שהם, וכל קידוד תמונה חדש, תופס מקום חשוב. התמיכה ב-GIF, PNG ו-JPEG מובטחת בכל הדפדפנים, והיא קיימת כבר עשרות שנים. בהשוואה לפורמטים הקודמים של תמונות, AVIF הוא חדש לגמרי, ולמרות שהתמיכה ב-WebP מצוינת בדפדפנים מודרניים, היא לא קיימת בכל האינטרנט.
כפי שאתם יכולים לראות, השקענו מאמצים רבים בפיתוח של פורמטים חדשים של תמונות שנועדו לשפר גם את האיכות וגם את גודל ההעברה. פורמטים כמו WebP, AVIF ו-JPEG XL (לא נתמך באף דפדפן) נועדו להפוך לפתרון המאוחד לתמונות רסטר באינטרנט, כיוון ש-SVG הוא לווקטורים. תוספים אחרים, כמו JPEG 2000 (נתמכים רק ב-Safari), נועדו לתת מענה לכל אותם תרחישי השימוש כמו בקובץ JPEG בסיסי, אבל לשפר את שיטות הדחיסה כדי לספק תמונה דומה מבחינה חזותית, אבל הרבה יותר קטנה.
על אף שחלק מהפורמטים החדשים האלה חולקים את שם ה-JPEG, הקידוד שלהם שונה במהותו כמו JavaScript כמו Java. דפדפן שלא תומך בקידוד מסוים לא יוכל לנתח את קובץ התמונה בכלל - כאילו הוריתי לכם למלא את רשת הפיקסלים של נייר התרשים בשפה שאתם לא מבינים. הדפדפן יבקש את נתוני התמונה, ינסה לנתח אותם, ואם ייכשל, הוא ימחק אותם בלי לעבד שום דבר. מקור תמונה שלא מצליח לעבד תוכן מחוץ לדפדפנים מודרניים מהווה נקודת כשל אדירה לתוכן שלנו, וגם לאינטרנט באופן כללי - תמונה לא תקינה ורוחב פס מבוזבז למספר עצום של משתמשים ברחבי העולם. לא כדאי לוותר על אינטרנט עמיד יותר כדי ליהנות מביצועים טובים יותר.
במשך תקופה ארוכה, חברנו, <img>, החליט שקשה מאוד להשתמש בפורמט תמונה חדש, גם אם הוא נראה מבטיח. חשוב לזכור ש-<img> תמך רק בקובץ מקור יחיד, והותאם במיוחד להעברת הקובץ הזה במהירות – למעשה כל כך מהר שלא הצלחנו ליירט את הבקשה באמצעות JavaScript. עד לאחרונה, האפשרות הטובה היחידה הייתה להציג לכל המשתמשים תמונות מהסוג החדש, ולבקש את אחד מהפורמטים "קודמים" כשהדפדפן הפעיל שגיאה, וכתוצאה מכך הקובץ הראשון מבוזבז.
בגלל הסיבה הזו ועוד, <img> כפי שהוא היה קיים במשך עשרות שנים היה צריך להשתנות. במודול הבא, תמונות רספונסיביות, נלמד על התכונות שנוספו למפרט ה-HTML כדי לטפל בבעיות האלה, ואיך להשתמש בהן בעבודה היומיומית.