שלושה פורמטים מכסים כמעט כל תמונה ברשת כיום.JPG כבר ברירת המחדל במשך שלושה עשורים.WebP הגיע בשנת 2010 והוא מוצג כעת על ידי כל דפדפן הנוכחי.AVIF הוא החדש ביותר מבין השלושה, בנוי על codec וידאו, והוא בדרך כלל עושה את הקבצים הקטנים ביותר ביקורת ביצועים תגיד לך " לשרת תמונות בפורמטים מודרניים", ולאחר מכן טופס העלאה או לקוח דואל יסרב לקובץ המודרני שעשית.
הבחירה ביניהם היא פחות על איזה פורמט הוא הטוב ביותר ויותר על לאן התמונה הולכת. תמונת גיבור בדף נחיתה, תמונת מוצר ברישום שוק ותמונה המצורפת למייל יש תשובות שונות מדריך זה משווה בין שלוש התכונות שמחליטות על זה: גודל קובץ, איכות, שקיפות, עומק צבע, אנימציה, עלות קידוד ותמיכה מחוץ לדפדפן ואז הוא נותן טבלת החלטות ומראה כיצד להמיר ביניהם.
TL;DR: עבור תמונות באתר אינטרנט, שרת תחילה את AVIF עם WebP בתור ה-fallback ו-JPG כמוצא האחרון, באמצעות
<picture>משא ומתן על אלמנט או שרת; AVIF הוא בדרך כלל הקטן ביותר, WebP קרוב מאחור ומהיר יותר לקידוד, ו-JPG נפתח בכל מקום לתמונות שעוזבות את הדפדפן (דואר אלקטרוני, העלאות, הדפסה, תוכנות משרדיות), השתמש ב-JPG או PNG כאשר השקיפות חשובה. כדי לגרום לקבצים שתוכניות אחרות יקבלו, ה ממיר AVIF ל-JPG ו-webp ל-JPG מפעילים את צד הלקוח, שום דבר לא הועלה, בחינם, אין הרשמה; JPG ל-WebP ו-PNG ל-WebP הולכים לכיוון השני.
מה הם AVIF, WebP ו-JPG?
שלושתם הם פורמטים של תמונת רסטר לצילומים, והם נבדלים בעיקר בגיל ובעיצוב הדחיסה שלהם.
JPG (JPEG) היא שיטת תמונת הסטילס הסטנדרטית ב המלצת ITU-T T.81 בשנת 1992. הוא מחלק את התמונה לבלוקים של 8x8 פיקסלים, הופך כל אחד עם טרנספורמציה קוסינוס בדיד, ומשליך את הפרטים בתדר הגבוה שהעין מבחינה בו הכי פחות. קבצים עטופים בדרך כלל במיכל JFIF מ ITU-T T.871.
WebP הוא פורמט Google's, שצוין כעת ב RFC 9649. מצב האובדן שלו משתמש בקידוד מסגרת המפתח של ה-Codec הווידאו VP8, ויש לו מצב נפרד ללא הפסדים, בתוספת שקיפות ואנימציה. המדריך על מה זה WebP ולמה תמונות שמורות יוצאות כ.webp מכסה את זה לעומק.
AVIF האם פורמט קובץ התמונה AV1, שפורסם על ידי הברית למדיה פתוחה בתור מפרט AVIF. הוא מאחסן תמונות מקודדות עם AV1 וידאו codec בתוך מיכל HEIF, אותו מבנה תיבה iPhone HEIC תמונות להשתמש.AV1 מוצע תחת רישיון פטנט ללא תמלוגים מן הברית עבור מדיה פתוחה, וזו אחת הסיבות דפדפנים אימצו AVIF מהר יותר מאשר HEIC.
AVIF לעומת WebP לעומת JPG: טבלת ההשוואה
AVIF מוביל על דחיסה ויכולת, JPG מוביל על תאימות ומהירות קידוד, ו-WebP יושב ביניהם כמעט בכל שורה.
| תכונה | AVIF | WebP | JPG |
|---|---|---|---|
| מפרט Specification | AOMedia AVIF, AV1 codec | IETF RFC 9649 | ITU-T T.81 ו-T.871 |
| הוצג | 2019 | 2010 | 1992 |
| דחיסה | מפסידים או חסרי הפסדים | מפסידים או חסרי הפסדים | לוסי |
| גודל תמונה טיפוסי | הקטן ביותר | קטן | הגדול מבין השלושה |
| עומק סיביות | 8, 10 או 12 סיביות לערוץ | 8 סיביות לערוץ | 8 ביטים לערוץ בפועל |
| HDR וצבע רחב | כן | לא | לא |
| שקיפות Transparency | אלפא מלא | אלפא מלא | אף אחד |
| אנימציה | רצפי תמונות | כן | לא |
| מהירות קידוד | איטי, כבד מעבד במאמץ גבוה | בינוני | מהיר |
| תצוגת דפדפן | Chrome 85, Firefox 93, Safari 16, Edge 121 ואילך | כל הדפדפנים הנוכחיים | יוניברסל |
| אפליקציות לשולחן עבודה, אימייל, טפסי העלאה | החלש ביותר | טלאי | יוניברסל |
| שימוש הטוב ביותר | תמונות האינטרנט הגדולות ביותר שבהן בתים חשובים ביותר | תמונות אינטרנט כלליות, נפילה רחבה | כל דבר שיוצא מהדפדפן |
השורה שמפתיעה אנשים היא מהירות קידוד.AVIF's קבצים קטנים מגיעים מקודד שמחפש קשה את הדרך הטובה ביותר לקודד כל בלוק, וכי חיפוש לוקח זמן שלב בנייה הממיר אלפי תמונות מוצר ל - WebP בדקות יכול לקחת הרבה יותר זמן עבור AVIF בהגדרת מאמץ גבוהה עבור אתר שמקודד פעם אחת ומשרת מיליוני פעמים, המסחר בדרך כלל שווה את זה עבור תמונות שנוצרו על לטוס לכל בקשה, זה לא יכול להיות.
איזה פורמט מייצר את הקבצים הקטנים ביותר?
AVIF בדרך כלל עושה את הקבצים הקטנים ביותר באיכות חזותית דומה, WebP הוא הבא, ו JPG הוא הגדול ביותר גודל הפער תלוי במידה רבה על התמונה ואת הגדרות המקודד.
עבור WebP יש נקודת התייחסות שפורסמה: Google's סקירת WebP מדווח על קבצי WebP עם אובדן קטנים ב-25 עד 34% מ-JPEG דומה באיכות SSIM שווה ערך, ו-WebP ללא אובדן קטן ב-26% מ-PNG. AVIF בדרך כלל משתפר שוב ב-WebP עבור תמונות, עם הרווחים הגדולים ביותר בשיפועים חלקים, שמיים ועור, כאשר JPEG' בלוקים בגודל 8x8 מופיעים ראשונים.
שלוש אזהרות שומרות על המספרים האלה כנים.
- מספרי איכות אינם תואמים בין פורמטים. JPG באיכות 80, WebP ב-80 ו-AVIF ב-80 אינם אותה איכות חזותית, וגם מקודדים שונים לאותו פורמט אינם מסכימים. השווה קבצים על ידי הסתכלות עליהם, או לפי מדד כגון SSIM, לעולם לא לפי ערך המחוון.
- תמונות עם פרטים נמוכים חוסכות פחות. לאיור שטוח או ל-JPEG דחוס כבר נותר מעט לסחוט.
- קידוד מחדש של קובץ אובדן מערם הפסדים. המרת JPG ל-AVIF או WebP מתחילה מתמונה שכבר איבדה פרטים. מקודד מקובץ המצלמה המקורי, PNG או מאסטר איכותי בכל פעם שאתה יכול.
כמה חשובה בחירת הפורמט למשקל העמוד?
זה הכי חשוב בדפים כבדי תמונות, מכיוון שתמונות הן בדרך כלל הנתח הגדול ביותר ממה שמבקר מוריד. החשבון הוא פשוט. דף קטלוג עם 40 תמונות מוצר בסביבות 400 KB כל אחת נושאת 16 מגה-בייט של תמונות כ-JPG. ב-25 עד 34% שמירת דוחות Google עבור WebP, אותה קבוצה נוחתת איפשהו בין כ-10.5 ל-12 מגה-בייט. AVIF בדרך כלל חותך יותר על זה.
בחיבור מהיר לשולחן העבודה ההבדל צנוע בטלפון דרך רשת סלולרית איטית, מספר מגה-בייט הוא הפער בין דף שמתיישב במהירות לבין אחד שהמבקרים נוטשים, לבין תמונות ליד החלק העליון של הדף מוזנות ישירות לכמה מהר האלמנט הנראה לעין הגדול ביותר מציג.
פורמט הוא לא המנוף היחיד, ולעתים קרובות לא הגדול ביותר. שליחת תמונה ברוחב 4000 פיקסלים לחריץ של 400 פיקסלים מבזבזת הרבה יותר בתים מאשר בחירה ב-WebP על פני AVIF. שנה את הגודל לגודל המוצג תחילה, ספק srcset גרסאות למסכים שונים, תמונות בעצלתיים מתחת לקפל ולאחר מכן בחר את הפורמט. לעשות את זה בסדר השני מייעל את הדבר הלא נכון.
איך הם שונים באיכות ובחפצים?
כל פורמט נכשל בדרכו שלו כאשר הוא נדחף לגדלים קטנים, והכרת הכישלון עוזרת לך לבחור.
JPG פורץ לבלוקים גלויים בגודל 8x8 ו-"ringing", אדוות חלשות סביב קצוות חדים כגון טקסט בתמונה. WebP' מצב אובדן מרכך פרטים ומכיוון שהוא מאחסן צבע בחצי רזולוציה, יכול להשאיר שוליים צבעוניים סביב קווים אדומים או כחולים דקים. AVIF נוטה לטשטש מרקם עדין ולא לחסום, כך ש-AVIF דחוס בכבדות נראה חלק ומעט שעווה, וזה פחות מעורר התנגדות בתמונות ויותר בולט בבד, שיער ועלווה.
עבור גרפיקה עם קצוות קשיחים, צבע שטוח וטקסט, אף אחד מהמצבים האובדניים אינו אידיאלי. PNG או WebP ללא אובדן שומרים על הקצוות מדויקים.
גם התנהגות הטעינה שונה.T.81 מגדיר מצב פרוגרסיבי עבור JPEG, שבו גרסה מטושטשת של התמונה כולה מופיעה ראשונה ומתחדדת ככל שמגיעים יותר נתונים, כך ש-JPG פרוגרסיבי גדול מרגיש מהיר בחיבור איטי עוד לפני שהוא מסתיים. WebP ו-AVIF כפי שמגישים בדרך כלל מציירים רק ברגע שהגיע מספיק מהקובץ, שגודלם הקטן יותר מפצה בדרך כלל על תמונות גיבורים גדולות מאוד על פני חיבורים גרועים, ההבדל הזה יכול להיות גלוי, וזו עוד סיבה לשנות את הגודל לפני בחירת פורמט.
היכן מתאימים PNG ו-GIF?
גם לא פורמט תמונה, וגם לא מתחרה ישירות עם השלושה לעיל. PNG, המוגדר ב- מפרט W3C PNG, הוא ללא הפסדים: הבחירה הנכונה עבור צילומי מסך, דיאגרמות, לוגו ומאסטרים לעריכה, והטועה עבור תצלומים, אותם הוא מאחסן בגודל פי כמה מ-JPG. GIF מוגבל ל-256 צבעים לכל פריים ושורד בעיקר עבור אנימציות קצרות במקומות שלא ישחקו שום דבר חדש יותר.
באתר אינטרנט, שניהם בדרך כלל מוגשים טוב יותר כ-WebP או AVIF: lossless או באיכות גבוהה lossy עבור גרפיקה בסגנון PNG, WebP מונפש עבור קליפים בסגנון GIF. מחוץ לדפדפן, PNG נשאר הפורמט הבטוח לכל דבר עם שקיפות, מכיוון ש-JPG לא יכול להחזיק אותו.
איזה פורמט תומך בשקיפות, HDR ואנימציה?
AVIF תומך בשלושתם, WebP תומך בשקיפות ואנימציה אך לא ב-HDR, ו-JPG לא תומך באף אחד מהם.
שקיפות Transparency. AVIF מאחסן אלפא כתמונת עזר, ול-WebP יש ערוץ אלפא הן במצב אובדן והן במצב ללא אובדן. כל אחד מהם יכול להחזיק גזרת מוצר עם קצה רך בשבריר של PNG' גודל. ל-JPG אין שקיפות, ולכן כל אזור שקוף חייב להיות מלא בצבע אחיד בעת ההמרה אליו.
HDR וצבע רחב. AVIF יכול להשתמש 10 או 12 סיביות לכל ערוץ, וזה מה תמונות HDR מטלפונים ומצלמות האחרונות צריך כדי למנוע banding בשמים בהירים.WebP ו JPG הם 8 סיביות.
אנימציה. אנימציות WebP נמצאות בשימוש נרחב כתחליף קטן יותר ל-GIF. AVIF מגדיר רצפי תמונות, אם כי התמיכה ב-AVIF מונפש בתוכנה מחוץ לדפדפנים דקה יותר.
איפה כל פורמט עדיין נכשל?
תמיכה בתוך דפדפנים נוכחיים נפתרה עבור שלושתם תמיכה בכל מקום אחר היא המקום שבו הבחירה נוגסת.
AVIF מציג בכרום מגרסה 85, פיירפוקס מ-93, ספארי מ-16, ואדג' מ-121 דפדפנים ישנים יותר, צופי תמונות ישנים יותר של מערכת הפעלה, חבילות משרדיות רבות, ורשימה ארוכה של טפסי העלאה אינם מקבלים זאת שמירת AVIF מדף אינטרנט ושחרורו למצגת הוא הכישלון הקלאסי.
WebP הוא בהמשך כל דפדפן נוכחי מציג אותו ורוב מערכות ההפעלה המודרניות פותחות אותו, אך חלק מלקוחות הדואל, שירותי ההדפסה ותוכנות שולחן עבודה ישנות יותר עדיין מסרבים לכך.
JPG נפתח בעצם בכל מכשיר, אפליקציה וטופס. לכן זה נשאר הפורמט הנכון עבור כל תמונה שאינך שולט ביעד שלה.
באיזה פורמט כדאי להשתמש? טבלת החלטות
החליטו תחילה לפי יעד, ולאחר מכן לפי תוכן.
| מצב | להשתמש | למה |
|---|---|---|
| תמונות גיבורים ומוצרים באתר שלך | AVIF, עם נפילות WebP ו-JPG | הבתים הקטנים ביותר בתמונות הכבדות ביותר |
| תמונות אתר כלליות, צינור פשוט | WebP, עם JPG fallback | תמיכה בדפדפן כמעט אוניברסלי, מהיר לקידוד |
| תמונות שנוצרו לפי בקשה | WebP או JPG | עלות קידוד AVIF מוסיפה חביון |
| תמונות עם HDR או צבע רחב | AVIF | רק אחד מהשלושה עם 10 ו-12 סיביות |
| גרפיקה שקופה באינטרנט | AVIF או WebP | אלפא בשבריר של PNG's גודל |
| קבצים מצורפים לדואל | JPG | כל לקוח פותח אותה |
| העלה טפסים, שווקים, פורטלי זיהוי | JPG | רשימות מאפשרות כוללות רק לעתים רחוקות AVIF או WebP |
| הדפסה ומסמכים משרדיים | JPG, או PNG לגרפיקה | תמיכה בתוכנה |
| עריכת מאסטרים וארכיונים | פורמט מקורי, PNG או TIFF | הימנע מקידוד אובדן חוזר |
הדפוס פשוט: פורמטים מודרניים למשלוח, JPG להחלפה, ללא הפסדים למאסטרים.
איך מגישים AVIF ו-WebP עם JPG fallback?
השתמש ב <picture> אלמנט. the browser walks the <source> רשום לפי הסדר ולוקח את הסוג הראשון שהוא תומך בו, נופל בחזרה ל- <img>, כפי שהוגדר על ידי WHATWG HTML picture אלמנט:
<picture>
<source srcset="hero-1600.avif" type="image/avif">
<source srcset="hero-1600.webp" type="image/webp">
<img src="hero-1600.jpg" width="1600" height="900" alt="Mountain lake at sunrise">
</picture>
דפדפן עם תמיכה ב-AVIF מוריד רק את ה-AVIF. אחד בלי AVIF אבל עם WebP מוריד את ה-WebP, וכל השאר מקבל את ה-JPG. אין הורדת פורמט פעמיים.
האלטרנטיבה היא משא ומתן בצד השרת: הדפדפן שולח א Accept כותרת כגון image/avif,image/webp,*/*, והשרת או CDN מחזירים את הפורמט הטוב ביותר שיש לו מכתובת URL אחת. זה שומר על סימון פשוט אך מחייב את המטמון להשתנות בכותרת זו, כמתואר ב-HTTP' כללי משא ומתן על תוכן ב RFC 9110.
כדי ליצור את שלוש הגרסאות בשלב בנייה, ספריית Node.js sharp כותבת את כולן:
import sharp from 'sharp'
const input = sharp('hero-master.png').resize(1600)
await input.clone().avif({ quality: 50 }).toFile('hero-1600.avif')
await input.clone().webp({ quality: 80 }).toFile('hero-1600.webp')
await input.clone().jpeg({ quality: 82, mozjpeg: true }).toFile('hero-1600.jpg')
ערכי האיכות שונים בכוונה, מכיוון שהסולמות אינם תואמים בין פורמטים. בדוק את הפלט חזותית לפני שתסתפק במספרים.
איך ממירים בין AVIF, WebP ו-JPG בלי להעלות?
השתמש ממיר בצד הלקוח, אשר מפענח ומקודד מחדש את התמונה בתוך הכרטיסייה דפדפן כך הקובץ לעולם לא עוזב את המכשיר שלך ממירי Toolz מפוצלים לפי כיוון.
מ-AVIF למשהו שתוכניות אחרות מקבלות. ה ממיר AVIF ל-JPG האם התיקון ל-AVIF נשמר מאתר שמסמך או טופס מסרבים אזורים שקופים מלאים בלבן, והערה מתחת לתוצאה אומרת זאת המחוון Quality פועל מ-10 עד 100 ומתחיל ב-90 כאשר לתמונה יש רקע שקוף שחייב לשרוד, המר את ה-AVIF ל-PNG במקום זאת, ששומר על ערוץ האלפא ומאחסן את הפיקסלים המפוענחים ללא אובדן.
פענוח AVIF משתמש בדפדפן' מפענח AVIF משלו, כך שהממיר זקוק לדפדפן המציג AVIF: Chrome, Edge, Firefox או Safari 16 ואילך. אם הדפדפן אינו יכול לפתוח את הקובץ, השורה אומרת זאת. AVIF מונפש נקרא כתמונת סטילס.
מ-WebP ל-JPG. מאותן סיבות, WebP ל-JPG הופך .webp שהורד לקובץ שנפתח בכל מקום, עם אותו מילוי לבן לשקיפות.
מ-JPG ו-PNG ל-WebP. הולך לכיוון השני, JPG ל-WebP מכווץ תמונות לפרסום, ו PNG ל-WebP עושה את אותו הדבר עבור צילומי מסך וגרפיקה שקופה תוך שמירה על ערוץ אלפא קידוד משתמש בדפדפן & #39;s מקודד קנבס. הנוכחי Chrome, Edge ו - Firefox יכול לכתוב WebP; דפדפן שאינו יכול לקבל שגיאה ברורה במקום PNG שונה ל.webp.
מה שהממירים לא עושים. Toolz קורא AVIF אבל לא כותב את זה, כי דפדפנים לא לחשוף באופן אמין מקודד AVIF לדפי אינטרנט כדי לייצר קבצי AVIF, להשתמש בכלי לבנות כגון הדוגמה החדה לעיל.The ממיר תמונה מקבל JPG, JFIF, PNG, WebP, AVIF, GIF, BMP, ICO, HEIC, TIFF, PSD, SVG, CR2, DNG ו-PDF וכותב JPG, PNG, WebP, GIF, ICO, PDF ו-SVG, המכסה קבוצות מעורבות.
כל המרה נמשכת דרך קנבס, כך נתוני EXIF, קואורדינטות GPS ופרופילי צבע אינם מועתקים לפלט תמונות מעל 100 מגה פיקסל מסורבות בהודעה במקום לקרוס את הכרטיסייה הכלים הם בחינם, ללא הרשמה, עם מגבלת המרה יומית.
האם המרה בין AVIF, WebP ו-JPG מאבדת איכות?
המרה לפורמט חסר אובדן מאבדת פרטים בכל פעם, והמרה לפורמט ללא אובדן לא מאבדת דבר נוסף הכיוון מחליט מה חל.
| המרה | צעד אבוד? | מה משתנה |
|---|---|---|
| AVIF ל-JPG | כן | קידוד אובדן שני; שקיפות מלאה בלבן; הקובץ בדרך כלל גדול יותר |
| AVIF ל-PNG | לא | פיקסלים מפוענחים נשמרו בדיוק; שקיפות נשמרה; קובץ הרבה יותר גדול |
| WebP ל-JPG | כן | קידוד אובדן שני; שקיפות מלאה בלבן |
| JPG ל-WebP | כן | קידוד אובדן שני על גבי JPEG's; קובץ בדרך כלל קטן יותר |
| PNG ל-WebP | בדרך כלל, עם WebP אובדני | שקיפות נשמרת; הקובץ בדרך כלל הרבה יותר קטן |
| כל אחד מהם ל-AVIF | כן, בשימוש טיפוסי | הקובץ הקטן ביותר; הקידוד האיטי ביותר |
שתי השלכות מעשיות בהמשך קובץ שעבר מספר המרות אובדניות מתדרדר מעט בכל שלב, אז הימנע מנסיעות הלוך ושוב כגון JPG ל-WebP ל-JPG. וגודלו של קובץ שהומר אומר לך מעט על איכותו: AVIF שהומר ל-JPG גדל מבלי להשתפר, מכיוון שמקודד ה-JPG מוציא יותר בתים בתיאור אותה תמונה שכבר דחוסה.
בהגדרת איכות בסביבות 90, קשה מאוד לראות צעד אובדן נוסף בתמונות רגילות. ההפסדים הופכים גלויים עם המרות חוזרות ונשנות, הגדרות באיכות נמוכה או תמונות עם טקסט עדין וקצוות חדים.
למה זכה 't AVIF או WebP שמור פתוח?
התוכנית הפותחת אותו אין מפענח עבור הפורמט דפדפן נוכחי מציג את התמונה כי זה ניהל משא ומתן על פורמט זה עם השרת, אבל הקובץ על דיסק מועבר לאחר מכן לתוכנה עם רשימה ישנה או צרה יותר של פורמטים: חבילת משרד, מציג תמונות ישן יותר, לקוח דואל או טופס העלאה 's לאפשר-רשימה.
שינוי שם הקובץ ל .jpg לא עוזר הבתים עדיין מתחילים ב-AVIF ftyp תיבה או WebP RIFF כותרת, ותוכנית מצפה JPEG לא מוצא נתונים JPEG.המרת הקובץ היא התיקון, וזה גם שווה לבדוק אם האתר מציע קישור להורדה ישירה, אשר לפעמים משרת את JPG המקורי או PNG ולא את הגרסה משא ומתן.
האם JPG מיושן?
מס 'JPG מיושן רק כמו הפורמט אתר צריך לשלוח לדפדפן הנוכחי, וגם שם זה נשאר fallback בכל <picture> אלמנט. כפורמט החלפה, עבור דואר אלקטרוני, טפסים, הדפסה, מסמכים משרדיים וכל דבר שמופנה לתוכנה שאינך שולט בה, זו עדיין ברירת המחדל הנכונה, ולא AVIF ולא WebP החליפו אותה.
אותו היגיון חל על הפורמט האחר שמבלבל אנשים מחוץ לדפדפן תמונות אייפון הן HEIC, אח של AVIF באותו מיכל HEIF, וההשוואה של HEIC נגד JPG מסביר מדוע קבצים אלה לא מצליחים להיפתח ב-Windows. כל ממיר תמונה מופיע ב- רכזת כלי תמונה.
