Tooleem

תמונות

WebP, JPG או PNG: איזה פורמט מתי

איזה פורמט תמונה לבחור לצילום, לצילום מסך וללוגו, עם גדלי קבצים שמדדנו בפועל, תאימות של WebP ו-AVIF, והגדרות איכות מומלצות.

מאת Tooleemפורסם העובדות נבדקו

התשובה בקצרה

לתמונות, WebP באותה הגדרת איכות קטן בדרך כלל בכרבע מ-JPG: בבדיקה שלנו צילום ברוחב 1600 פיקסלים שקל 306KB כ-JPG ו-222KB כ-WebP (‎−27%). לצילומי מסך, לוגואים וכל דבר עם טקסט או צבע אחיד, עדיף PNG או WebP ללא אובדן, ולא JPG באיכות נמוכה; WebP ללא אובדן יצא קטן ב-42% מ-PNG ממוטב. AVIF קטן עוד יותר, אבל המנוע של Chrome לא יודע ליצור אותו מתוך דף אינטרנט. JPG נשאר הבחירה כשהקובץ חייב להיפתח בכל מקום: תוכנות ישנות, מיילים וטופסי העלאה.

לחישוב בעצמכם

המרת WebP ל-JPG

המירו תמונת WebP ל-JPG בדפדפן, בחרו איכות והורידו קובץ שנפתח בכל מקום.

לכלי
בעמוד הזה
  1. איזה פורמט לאיזו תמונה
  2. מדדנו: צילום אחד בכל פורמט
  3. מדדנו: צילום מסך
  4. מדדנו: לוגו עם רקע שקוף
  5. תאימות: איפה WebP עדיין עושה בעיות
  6. הגדרות מעשיות

איזה פורמט לאיזו תמונה

בחירת פורמט לפי סוג התמונה והיעד שלה
תמונההבחירה המומלצתלמה
צילום באתרWebP (עם אובדן), או AVIF עם גיבויהקבצים הקטנים ביותר באותה איכות נראית; כל הדפדפנים העדכניים מציגים את שניהם
צילום למייל, להדפסה או להעלאה לכל מקוםJPGנפתח בכל אפליקציה, מצלמה, מדפסת וטופס
צילום מסך, גרף, טקסט, ממשקPNG או WebP ללא אובדןקצוות חדים נשארים חדים; JPG מוסיף טשטוש והילות סביב טקסט
לוגו או אייקון עם רקע שקוףSVG אם הוא וקטורי; אחרת PNG או WebPל-JPG אין שקיפות בכלל
אנימציהWebP או AVIF במקום GIFקטן בהרבה מ-GIF עם אותם פריימים

מדדנו: צילום אחד בכל פורמט

צילום אוויר, ‎1600 × 1071 פיקסלים, קידוד בדפדפן (Chromium 148)
פורמט והגדרהגודל קובץלעומת JPG באיכות 80
PNG3.75MBפי 12.5
JPG, איכות 92503KB‎+64%
JPG, איכות 80306KBנקודת ייחוס
WebP, איכות 92423KB‎+38%
WebP, איכות 80222KB‎−27%
באיכות 92 קובץ ה-WebP קטן ב-16% מה-JPG באיכות 92. מספרי האיכות אינם באותו סולם בין פורמטים, לכן משווים לפי התוצאה שרואים ולא לפי המספר.

עם מקודד ייעודי הפער גדל: AVIF באיכות 65 יצא 218KB לעומת 455KB ל-JPG באיכות 90, עם שגיאה מדודה כמעט זהה (PSNR של ‎39.1dB לעומת ‎39.4dB), כלומר בערך חצי מהגודל. Google מדווחת ש-WebP עם אובדן קטן ב-25% עד 34% מ-JPG דומה; ה-‎−27% שלנו נמצא בטווח הזה.

מדדנו: צילום מסך

צילום מסך של דף כלי, ‎1280 × 900 פיקסלים
פורמט והגדרהגודל קובץללא אובדן?
PNG מהדפדפן (דחיסה מהירה)117KBכן
PNG ממוטב (דחיסה מרבית)61KBכן
WebP ללא אובדן35KBכן
JPG באיכות 80 (דפדפן)56KBלא, קצוות הטקסט מיטשטשים
WebP באיכות 80 (דפדפן)27KBלא
AVIF באיכות 5015KBלא
מקודד ה-PNG של הדפדפן מעדיף מהירות, ולכן אותו PNG יכול לרדת לחצי אחרי כלי אופטימיזציה. WebP ללא אובדן יצא קטן ב-42% מה-PNG הממוטב; הנתון של Google עצמה הוא 26% בממוצע.

תאימות: איפה WebP עדיין עושה בעיות

  • Chrome, Edge, Firefox, Opera ו-Safari מציגים כולם WebP ו-AVIF, לפי מדריך פורמטי התמונה של MDN.
  • הבעיות מגיעות בדרך כלל מחוץ לדפדפן: תוכנות עריכה ישנות, חלק מתוכנות המשרד, תוכנות דואר וטופסי העלאה שמקבלים רק JPG או PNG.
  • להציג AVIF זה לא כמו ליצור אותו. כשביקשנו AVIF ממקודד ה-canvas של Chromium 148 (המנוע של Chrome ו-Edge), קיבלנו PNG, ולכן ממיר שרץ בדפדפן לא יכול להבטיח פלט AVIF.
  • המרת WebP עם אובדן ל-PNG לא מחזירה פרטים שאבדו; היא רק מגדילה את הקובץ. ממירים ל-PNG רק כשאפליקציה דורשת פורמט ללא אובדן.

הגדרות מעשיות

  1. קודם משנים גודל. צילום ברוחב 4000 פיקסלים שמוצג ב-1200 מבזבז את רוב הבייטים שלו; הקטינו אותו לפני שבוחרים פורמט.
  2. לצילומים, מתחילים באיכות 75 עד 85 ובודקים את התוצאה בזום 100%.
  3. לצילומי מסך, בוחרים PNG או WebP ללא אובדן ומעבירים בכלי אופטימיזציה.
  4. כדי ליצור קובצי WebP לאתר, השתמשו בממיר התמונות ל-WebP; כדי לשלוח תמונה למי שהאפליקציה שלו לא פותחת WebP, המירו אותה חזרה ל-JPG.

הערה

איך מדדנו

הגדלים מהדפדפן נמדדו במקודדי ה-canvas של Chromium 148, אותה דרך שבה עובדים ממירים בדפדפן. PNG ממוטב, WebP ללא אובדן ו-AVIF נוצרו עם libvips 8.17 (sharp 0.34.5). השגיאה היא PSNR מול המקור אחרי שינוי הגודל. התוצאות שלכם ישתנו לפי התמונה: צילומים רועשים נדחסים פחות, גרפיקה שטוחה יותר.

לחישוב בעצמכם

המרת WebP ל-JPG

המירו תמונת WebP ל-JPG בדפדפן, בחרו איכות והורידו קובץ שנפתח בכל מקום.

לכלי

כלים שמופיעים במדריך

מקורות

הנתונים והכללים במדריך הזה לקוחים מהמקורות האלה.

  1. An image format for the Web (WebP)Google for DevelopersWebP ללא אובדן קטן ב-26% מ-PNG; WebP עם אובדן קטן ב-25% עד 34% מ-JPG דומה.
  2. Image file type and format guideMDN Web Docsתמיכת דפדפנים ושימושים מומלצים ב-WebP, AVIF, PNG ו-JPG.
  3. KSC-2009-3194: aerial view of the Rocket GardenNASA Image and Video Libraryצילום הבדיקה ששימש למדידות (קרדיט: NASA/Kim Shiflett).

העובדות נבדקו

כל המדריכים