PNG מול JPEG מול WebP: באיזה פורמט תמונה להשתמש?

רוב ההחלטות על פורמט תמונה מסתכמות בשתי שאלות. האם התמונה צריכה אזורים שקופים? והאם אובדן איכות קטן יהיה נראה? עונים על השתיים, והפורמט כמעט בוחר את עצמו. השאלה השלישית, לאן הקובץ הולך, קובעת אם הפורמטים החדשים בכלל מותרים, כי זירות מסחר ואפליקציות רבות עדיין מקבלות רק JPEG ו-PNG.

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

טבלת ההשוואה

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

עם אובדן ובלי אובדן, במילים פשוטות

דחיסה בלי אובדן מקטינה קובץ בלי לשנות אף פיקסל. מפענחים PNG ומקבלים בדיוק את מה שנשמר. זה הופך אותה לאידיאלית לכל דבר עם קצוות חדים וצבע אחיד, כמו טקסט, לוגואים, איורי קו, ממשקי משתמש וצילומי מסך, שבהם כל טשטוש או שוליים צבעוניים בולטים מיד.

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

מכאן שני כללים מעשיים:

• כל שמירה עם אובדן מאבדת עוד קצת. שמרו מאסטר בלי אובדן (קובץ המצלמה המקורי, PNG או הקובץ של העורך) וייצאו ממנו עותקים עם אובדן, במקום לערוך ולשמור שוב את אותו JPEG.
• דחיסה עם אובדן פוגעת הכי הרבה בקצוות חדים. לוגו שנשמר כ-JPEG מקבל "רעש יתושים" מרוח סביב האותיות, וצילום מסך מקבל טקסט מטושטש.

שקיפות: התכונה שמכריעה בגזירות

ל-JPEG אין ערוץ אלפא. אין דרך לשמור ב-JPEG את המידע "הפיקסל הזה שקוף", ולכן כשמסירים רקע ושומרים כ-JPEG, האזור הריק מתמלא בצבע אחיד, בדרך כלל לבן או שחור. אם רוצים שהגזירה תשב מעל תוכן אחר, צריך PNG, WebP או AVIF.

PNG שומר ערוץ אלפא מלא: כל פיקסל יכול להיות בכל דרגה בין אטום לגמרי לשקוף לגמרי, וזה מה ששומר על קצוות רכים כמו שיער, פרווה וצללים טבעיים. יש לו גם מצב פשוט יותר שבו צבע אחד בפלטה מסומן כשקוף, שמתאים לגרפיקה שטוחה אבל נותן קצוות משוננים בצילומים. לפרטים, קראו מהו ערוץ אלפא.

WebP תומך בשקיפות גם במצב בלי אובדן וגם במצב עם אובדן. התיעוד של Google ל-WebP אומר ש-WebP בלי אובדן מוסיף שקיפות בתמורה לכ-22% בייטים נוספים, וש-WebP עם אובדן ועם שקיפות קטן בדרך כלל בערך פי 3 מ-PNG מקביל. לכן WebP עם אובדן הוא הדרך היעילה ביותר להציג תמונת מוצר שקופה באתר שלכם.

גודל קובץ

לאותה תמונה, הסדר המשוער מהגדול לקטן הוא PNG, JPEG, WebP, AVIF, עם הסתייגות גדולה: PNG "גדול" רק בצילומים. בגרפיקה שטוחה עם מעט צבעים, PNG לעיתים קרובות קטן מ-JPEG ותמיד חד יותר.

הנתונים ש-Google פרסמה על WebP הם נקודת ייחוס שימושית:

• קובצי WebP בלי אובדן קטנים ב-26% מקובצי PNG.
• קובצי WebP עם אובדן קטנים ב-25 עד 34% מקובצי JPEG דומים באותו ציון איכות SSIM.

ההמלצה של MDN לתמונות רסטר ברשת היא להעדיף WebP או AVIF, שבדרך כלל דוחסים טוב יותר מ-PNG, JPEG ו-GIF. AVIF תומך גם בצבע של 10 ו-12 ביט, מה שעוזר במעברי צבע חלקים. נקודת התורפה שלו היא תמיכה מחוץ לדפדפנים: אפליקציות וטופסי העלאה רבים עדיין דוחים אותו.

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

איפה כל פורמט מתקבל

דפדפנים הם החלק הקל. זירות מסחר ואפליקציות הן המקום שבו פורמטים נדחים. אלה הפורמטים המקובלים לפי התיעוד של כל פלטפורמה, כפי שבדקנו באוקטובר 2026:

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

איזה פורמט לכל משימה נפוצה

לוגואים

השתמשו ב-SVG כשיש מקור וקטורי; MDN ממליצה עליו ללוגואים ולאייקונים. כשצריך קובץ רסטר, השתמשו ב-PNG עם רקע שקוף, או ב-WebP בלי אובדן באתר שלכם. אף פעם לא JPEG: הוא מוסיף טשטוש סביב הקצוות ולא יכול להיות שקוף.

תמונות מוצר

לתמונות ראשיות בזירות מסחר, השתמשו ב-JPEG על רקע לבן טהור. הבלוג של Amazon למוכרים מגדיר את JPEG כפורמט המועדף, וכל זירה בטבלה למעלה מקבלת אותו. ייצאו בהגדרת איכות גבוהה (בערך 85 עד 92 ברוב הכלים) ממאסטר בלי אובדן.

בחנות שלכם, העלו JPEG או PNG באיכות גבוהה ותנו לפלטפורמה להמיר. Shopify, למשל, אומרת ששירות התמונות שלה מגיש אוטומטית לכל מבקר את הפורמט הטוב ביותר שהדפדפן שלו תומך בו.

תמונות רגילות

JPEG הוא ברירת המחדל הבטוחה לשיתוף ולהעלאות. באתר שבשליטתכם, WebP או AVIF עם JPEG כגיבוי נותנים אותו מראה בפחות בייטים. אם הטלפון שומר קובצי HEIC, המירו אותם ל-JPEG לפני שמעלים לכל מקום שלא מציין HEIC.

גזירות ותמונות שקופות

השתמשו ב-PNG כשהקובץ חייב לעבוד בכל מקום: במצגות, במסמכים, בכלי עיצוב וברוב טופסי ההעלאה. השתמשו ב-WebP כשאתם מציבים את התמונה בדף אינטרנט שלכם ורוצים שתהיה קטנה. השתמשו ב-JPEG רק אם מילאתם את הרקע בכוונה בצבע אחיד, למשל לבן לזירת מסחר.

צילומי מסך ודיאגרמות

PNG, או WebP בלי אובדן. פורמטים עם אובדן מטשטשים טקסט.

הגשת פורמטים מודרניים עם גיבוי

אם אתם מנהלים אתר משלכם, לא חייבים לבחור פורמט אחד. האלמנט picture ב-HTML נותן לדפדפן לבחור את הפורמט הראשון שהוא מבין:

<picture>
  <source srcset="product.avif" type="image/avif">
  <source srcset="product.webp" type="image/webp">
  <img src="product.png" alt="Leather wallet, front view" width="1200" height="1200">
</picture>

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

המרה בין פורמטים בלי הפתעות

• מ-PNG או WebP ל-JPEG: אזורים שקופים משוטחים. בחרו את צבע המילוי בעצמכם (בדרך כלל לבן) ואל תתנו לכלי לבחור, כי יש כלים שברירת המחדל שלהם היא שחור.
• מ-JPEG ל-PNG: הקובץ גדל אבל לא משתפר. האיכות שאבדה ב-JPEG לא חוזרת.
• מכל פורמט ל-WebP או AVIF: בדקו שהשקיפות שרדה ושהצבעים נראים נכון; המירו קודם לפרופיל הצבע sRGB אם התמונה תוצג ברשת.
• שמירה חוזרת של JPEG: כל שמירה באיכות נמוכה יותר מצטברת לאובדן גדול יותר. ייצאו פעם אחת מהמאסטר.

אפשרות מהירה יותר לגזירות

אם אתם מסירים רקעים בכמויות, removebackground.dev מייצא את הגזירה כ-PNG או WebP שקוף, או כ-JPG על כל צבע אחיד, כך שמאותה העלאה אפשר להפיק JPEG על לבן לזירת המסחר ו-PNG שקוף לאתר שלכם.