JPEG, WEBP, HEIC, AVIF? מדריך זה יעזור לכם לבחור.
לאחר עשרות שנים של דומיננטיות ללא תחרות של JPEG, בשנים האחרונות עדים להופעתם של פורמטים חדשים - WebP ו- HEIC - המאתגרים עמדה זו. יש להם תמיכה חלקית בלבד, אך משמעותית, מצד שחקנים מרכזיים בקרב דפדפני אינטרנט ומערכות הפעלה סלולריות. פורמט תמונות חדש נוסף - AVIF - צפוי להיכנס למקום בשנת 2019 עם הבטחה לסחוף את כל הרשת.
במאמר זה נתחיל בתיקון קצר של הפורמטים הקלאסיים, ואחריו תיאור של WebP ו- HEIC / HEIF. לאחר מכן נעבור לחקור את AVIF, ונסיים בסיכום המרכיב את כל הנקודות העיקריות.
הערות על יתרונות וחסרונות מתבססות הן על סקירת דוחות סמכותיים זמינים והן על תצפיות ממקור ראשון במהלך פיתוח ופריסה של כלים לצינורות אופטימיזציה של תמונות בתהליכי עבודה של מסחר אלקטרוני.
פורמטים קלאסיים של תמונות לאינטרנט עם תמיכה אוניברסלית
בואו להזכיר לעצמנו, בסדר כרונולוגי, את שלושת הפורמטים הקלאסיים החשובים ביותר לתמונות רשת.
GIF
GIF תומך ב- LZW דחיסה ללא אובדן ומסגרות מרובות המאפשרות לנו לייצר אנימציות פשוטות.
המגבלה העיקרית של פורמט זה היא שהוא מוגבל ל 256 צבעים. זה היה סביר עוד כשהוא נוצר בסוף שנות ה -80, שכן אותה מגבלה חלה על תצוגות קיימות. עם זאת, עם שיפור טכנולוגיית התצוגה התברר כי היא אינה מתאימה לשחזר שיפועי צבע חלקים, כמו אלה שנמצאו בתמונות צילום. אנו יכולים לזהות בקלות את רצועות הצבעים שהוא מייצר.
עם זאת, GIF מאפשר אנימציה קלה עם תמיכה אוניברסלית. תכונה זו שמרה על הפורמט בחיים עד היום במקרי שימוש שאינם רגישים לבעיות איכות, והכי אופייניות הן תמונות אנימציה קטנות עם מעט צבעים או ללא צבעים.
JPEG
מלך הפורמטים לאינטרנט פותח כדי לתמוך בתהליכי עבודה בצילום דיגיטלי.
עם עומק רגיל של 24 סיביות, הוא מספק הרבה יותר רזולוציית צבעים (לא להתבלבל עם טווח או סולם) מכפי שהעין האנושית יכולה להבחין. הוא תומך בדחיסה אבודה על ידי ניצול מנגנונים ידועים של ראייה אנושית.
העיניים שלנו רגישות יותר לקשקשים בינוניים מאשר לפרטים עדינים. כתוצאה מכך, JPEG מאפשר לנו להשליך פרטים עדינים (תדרים מרחביים גבוהים), בכמות הנשלטת על ידי גורם איכות. פחות איכות משמעה פחות פרטים. חוץ מזה, אנו רגישים הרבה יותר לפרטים עם ניגודיות בהירות גבוהה מאשר לפרטים עם ניגודיות כרומטית בלבד.
לכן, JPEG משנה באופן פנימי תמונות RGB (אדום, ירוק וכחול) בהירות אחת ושני ערוצי כרומה. זה מאפשר לנו להשתמש בדגימת משנה כרומה כדי להשליך פרטים נוספים רק בערוצי הכרומה. ראוי לציין ש- JPEG מקודד תמונות בבלוקים של 8x8 פיקסלים.
כאשר אנו מפחיתים את גורם האיכות ו / או מיישמים דגימת משנה אגרסיבית יותר, אנו מתחילים לקבל חפצים הולכים וגדלים של צלצולים, הילות, חסימה או טשטוש. בעיה עם JPEG היא שתלוי בתוכן התמונה, חפצים עשויים להופיע בערכי פקטור איכות שונים. ההבדל הפרוע ביותר מופיע בהשוואה בין ההשפעות על צילום טבעי לבין ההשפעות על יצירות אמנות. מכיוון שגרפיקה (צורות, גופנים) מסתמכת בדרך כלל על קצוות חדים, הם מתחילים לייצר חפצים אפילו בכמויות קטנות של פרטים שנמחקים.
עבור תמונות, JPEG מספק בקלות הפחתת משקל הקובץ בגורם 10 עם חפצים בקושי מורגשים, בהשוואה לדחיסה ללא אובדן.
PNG
פורמט גרפיקה ללא אובדן זה פותח כדי להחליף את ה- GIF, ולטפל בבעיות פס צבע (ורישוי) שלו. היה צורך בתמונות עם כמות ניכרת של יצירות אמנות, שעבורן JPEG הפיק חפצים גדולים אפילו בשיעורי דחיסה מינימליים.
הוא תומך בשקיפות ודחיסה משופרת בהשוואה ל- GIF. מכיוון שהוא אינו זורק מידע, PNG אינו מייצר חפצים. כמובן, זה על חשבון משקל תמונה כבד יותר בנוכחות שיפועי צבע רבים ושונים, בהשוואה לדחיסה אובדת.
היא מצליחה לנצל מאפיין תכוף של יצירות אמנות: בניגוד לצילום - שמציע רצף צבעים עם וריאציות עדינות - תמונות יצירות אמנות בדרך כלל כוללות מעט צבעים מוגדרים היטב.
לכן, PNG דוחס תמונות על ידי מיפוי כמויות גדולות של פיקסלים לפלטה נפרדת פשוטה וחוסך הרבה סיביות כתוצאה מכך. בהשוואה ל- GIF, הוא מספק איכות גבוהה בהרבה עם בדרך כלל הרבה פחות בתים.
עולים חדשים עם תמיכה חלקית: WEBP ו- HEIC המבוססים על HEVC
מנגנונים המשמשים את קודקי הווידאו לצורך דחיסת זרמים יכולים להיות מסווגים לשני סוגים עיקריים: בין-מסגרת ותוך-מסגרת. בעוד שהראשון מנצל את הפיטורין לאורך זמן, מנגנוני פנים-מסגרת מתמקדים בהפחתת יתירות בתוך מסגרת נתונה, ללא כל תלות בשאר. מנגנון דחיסה זה עשוי להיות מיושם על תמונות סטילס.
התפוצצות שיתוף הווידיאו - עם רשתות סלולריות בלב ליבו - והעלייה המתמדת ברזולוציית התצוגה הניעה את המאמצים על תקני קידוד חדשים להשיג את היעילות הגבוהה ביותר האפשרית בדחיסה.
לכן, פורמטים חדשים של תמונות מופיעים כנגזרות לתקני קידוד הווידאו החדשים. פורמטי התמונה החדשים הללו מציעים ערכות תכונות גדולות יותר מ- JPEG ומבטיחות חיסכון רלוונטי במשקל הקובץ עם איכות חזותית משופרת.
WEBP
גוגל פיתחה פורמט זה במטרה לספק פורמט תמונה יחיד עם יכולת אינטרנט לטיפול בכל מקרי השימוש האופייניים.
חשוב לציין, שהיא מבקשת להשיג תמונות קלות יותר מ- JPEG, ללא קנסות על איכות חזותית. היא משתמשת בפעולות מורכבות יותר - כמו חיזוי בלוק - והיא נגזרת של codec הווידיאו VP8. הוא תומך בדחיסה ללא אובדן ובניגוד ל- JPEG, הוא מאפשר שקיפות ואנימציות שעשויות לשלב תמונות מקודדות עם דחיסה חסרת אובדן ואובדן.
באופן עקרוני, הוא אמור לשמש תחליף ל- JPEG, PNG ו- GIF. חסרון חשוב היה היעדר התמיכה האוניברסלית. עד לאחרונה, WebP הוגבלה לתוכנות בגיבוי גוגל כמו דפדפן Chrome ויישומי Android.
עם זאת, עם ההכרזה כי Edge ו- Firefox (למעט iOS Firefox) אמורות להציג תמיכה ב- WebP בשנת 2019, היא כנראה צוברת כוח. ראוי גם לציין שאפל - Safari ו- iOS - עדיין לא תומכת ב- WebP.
HEIC / HEIF
פורמט זה מביא להתפתחות משמעותית בשתי היבטים שונים.
ראשית, מיכל הקבצים תומך בערכת התכונות הגדולה ביותר מבין פורמטי התמונה הזמינים. הוא תומך, למשל, בתמונות מרובות מסגרות עם דחיסת מסגרות מרובות - תכונה מרכזית לתמונות HDR יעילות, רב מיקוד או רב תצוגה.
שנית, הוא תומך בסוגים רבים של נתונים שאינם תמונה עם גמישות מדהימה. נכון לעכשיו, רוב התמונות המשתמשות במיכל זה דחוסות עם נגזרת לתמונות מקודק הווידאו H265 / HEVC, שפותחו בכדי להתמודד ביעילות עם הרזולוציות 4k ו- 8k המוצגות בתצוגות הדור האחרון. קידוד HEVC כולל פעולות מורכבות יותר עם פחות הגבלות מ- JPEG. זה משיג יעילות דחיסה גבוהה בהרבה במחיר זמני קידוד מעט גבוהים יותר - לא בעיה בכלל בתהליכי העבודה באינטרנט.
כמו H265, HEIC המבוססת על HEVC מגובה על ידי אפל. יש לו תמיכה מקורית ב- iOS ו- macOS, אך - בעיקר בשל בעיות פטנטים ורישוי - הוא אינו נתמך על ידי שאר הפלטפורמות (אנדרואיד, Windows). אפילו ב- macOS, Safari אינו תומך בכך. אפליקציות iOS נראות כמקרה השימוש היחיד של HEIC באינטרנט.
אז נשאלת שאלה גדולה: האם עלינו להציע חלופות WEBP / HEIC ו- JPEG, עם גרסאות PNG כתגמול?
בואו נסתכל על כל מקרה ...
האם עלי לשרת נגזרות WEBP?
גוגל טוענת כי פורמט זה מייצר תמונות בהירות בהרבה מ- JPEG באיכות דומה. עם זאת, בדיקות עצמאיות הצביעו על כך שתוצאה זו אינה עקבית במדידות שונות של איכות, והפחתת משקל מאוזנת, ברוב המקרים, על ידי טשטוש גובר.
במבחנים שלנו עם תמונות מסחר אלקטרוני ראינו חיסכון בקבצים עבור WebP, אך במחיר של טשטוש יותר ופחות פרטים. אמנם, ראינו גם פחות סיכון לצלצול וחסימת חפצים, שנחשיב כמרגיזים יותר מבחינה ויזואלית מאשר לטשטוש.
מכיוון ש- WebP חסר תמיכה בדפדפני Apple ובמערכות אופרטיביות, אנו בדרך כלל לא ממליצים להגיש נגזרות WebP המתחרות ב- JPEG. מהלכים כאלה יגדילו את מורכבות ניהול התקשורת עם יתרונות מוגבלים.
מצב זה ישתנה אם אפל תתחיל לתמוך ב- WebP.
אם זה היה המקרה, ייתכן שמערכת התכונות המורחבת של WebP והתמונות הקלות יותר המופקות עשויות להיות שוות לשימוש, ובכך לפשט את תהליכי העבודה של ניהול תמונות.
כדי לנסות את WebP בעצמך, כלי קלאסי כמו ImageMagick הוא אפשרות טובה. זה הופך גרסאות תמונה קלות להשוואה עם הגדרות שונות של איכות ורזולוציה הן עבור WebP והן עבור JPEG. ניתן לצפות בתוצאות באמצעות Chrome.
# Convert to WEBP quality 60 convert input.jpg -quality 60 output_60.webp # Convert to JPEG quality 60 convert input.jpg -quality 60 output_60.jpg # Convert to WEBP quality 60 and width 450px convert input.jpg -resize 450 -quality 60 output_450_60.webpלשילובים שונים של איכות ורזולוציה יהיו השפעות שונות בכל מקרה, מכיוון שאלגוריתמי הדחיסה עובדים בצורה שונה. לכן, בדוק את גדלי הקבצים הרלוונטיים שלך בכמה תמונות כדי להבין את החיסכון הפוטנציאלי ואת ההגדרות הטובות ביותר למקרה שימוש נתון.
האם עלי לשרת נגזרות HEIC?
היתרון של HEIC (על פני JPEG) ברור. הפחתת משקל משמעותית באופן עקבי - כ -50% - ללא אובדן איכות הראייה. ערכת התכונות הנתמכת פשוט מדהימה.
הבעיה שוב היא תמיכה בדפדפן ובמערכת פעילה.
בהתחשב בסוגיות הפטנט של HEVC והתמלוגים הכבדים הקשורים לכך, אנו יכולים לצפות שהתמיכה תישאר מוגבלת לאלה בעולם אפל. מכיוון ש- JPEG כבר יעיל בדחיסת תמונות, 50% ממשהו קטן לא יכול להיות שווה מספיק כדי להוסיף מורכבות לתהליך העבודה שלנו בעיבוד התמונה.
Certain cases using large images, with a major interest in visual quality AND with a large percentage of Apple devices in their user base should consider serving this format.
Performing tests with HEIC is very easy with a Mac. Preview allows us to export an image to HEIC and JPEG with different quality values and different resolutions. You won’t need to run many tests to see the clear and systematic difference between them.
If you want to try something more flexible that may be integrated in a web image processing workflow, GPAC is worth a look.
What about AVIF?
AVIF is the last of our contenders.
Like WebP and HEIC based on HEVC, AVIF is a derivative of the latest efforts in video standards. It also uses HEIF containers and so supports a complete feature set, encompassing all the main formats available. It brings much higher efficiency in compression inherited from the use of AV1 intra-frame coding mechanisms. These advantages make this format compelling.
Another significant advantage comes from the Alliance for Open Media, the large consortium behind its development as a fully open approach, with an open license, free of royalties. Big players like Google, Netflix, Adobe, Mozilla, Microsoft, Facebook and Amazon — major actors in the web graphics and video scene — are backing this new format and making a case for a fast and wide adoption, both in software and hardware. While the stream format was frozen in March 2018 with a reference code available, the first devices with hardware support for AV1 are expected by the end of 2019.
At the time of writing this article, the open source implementation of AV1 available may be still considered experimental and not suitable for production.
Summary
JPEG will remain the king format for general images for web in 2019, and PNG will remain as a default option for images with significant artwork.
The reason? Universal support.
Anything that opens an image will open JPEG or PNG in 2019, just like in previous years and decades! So no doubt that these universal formats will remain in place for some time yet.
The benefits of WebP remain controversial. A clear advantage of WebP is its ability to also replace PNG, potentially simplifying image processing workflows. However, without universal support this advantage vanishes. This may change only if Apple changes their mind and WebP finally gets universal adoption, then it could be used as a replacement for all JPEG, PNG and GIF images.
In contrast, HEIC images based on HEVC do offer clear benefits, especially for large resolutions. If traffic of iOS users is relevant for a website with large heavy images, it may be worth considering serving HEIC alternatives for them, with potential UX improvements, especially for slow mobile connections. Besides speeding up, HEIC assures quality, almost free of the annoying blocking and ringing artifacts that plague aggressive JPEG policies.
Although AVIF is expected for 2019, support and adoption will take time. But for sure, it is an image format to keep under your radar for the near future.
Of course, the use of a cloud service -through an image optimization API or an image optimization plugin- will always remain an easy and straightforward alternative for getting the job done.