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

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

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

קודם כל: צילום או גרפיקה?

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

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

מתי כדאי להשתמש ב-WebP?

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

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

ומה לגבי AVIF?

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

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

האם JPG עדיין רלוונטי?

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

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

מתי PNG דווקא כן מתאים?

‏PNG הוא פורמט שאנחנו רואים הרבה יותר מדי פעמים בצילומים. מישהו מייצא תמונה, רואה ש-PNG נשמע "איכותי", מעלה אותה לאתר ואז מגלה שקובץ אחד שוקל כמה מגה־בייט.

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

למה SVG מתאים במיוחד ללוגואים ואייקונים?

‏SVG שונה מכל הפורמטים שדיברנו עליהם עד עכשיו כי הוא וקטורי. זה אומר שלוגו ששמור כ-SVG יכול להיות ברוחב 40px בתפריט או 1000px במסך ענק ועדיין להישאר חד. לא צריך לייצא גרסת Retina, לא צריך להכין PNG ענק ולא צריך לדאוג שהקצוות יתחילו להיראות מטושטשים.

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

אז מה לבחור בפועל?

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

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

ומה עם GIF?

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

לא כל דבר שזז צריך להפוך ל-GIF רק כי זו הדרך הישנה והמוכרת לעשות את זה.

הפורמט הוא רק חלק מהמשקל של התמונה

אפשר לקחת תמונה, להמיר אותה ל-WebP ועדיין לקבל קובץ כבד מאוד. אם התמונה ברוחב 6000px והיא מוצגת באתר ברוחב 500px, שינוי הסיומת לא פתר את הבעיה האמיתית. הרזולוציה, רמת הדחיסה והתוכן שבתמונה משפיעים יחד על המשקל.

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

ומה אם האתר כבר עושה אופטימיזציה אוטומטית?

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

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

האם שינוי פורמט פוגע באיכות?

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

זו בדיוק הנקודה שבה אנחנו חושבים שקל להיות טכניים מדי. אם הורדתם תמונה מ-900KB ל-180KB ואתם צריכים לעשות Zoom של 400% כדי למצוא את ההבדל, כנראה שהגרסה הקטנה יותר עושה עבודה מצוינת באתר. אם העור של בן אדם מתחיל להיראות כמו פלסטיק, הטקסט נהיה מלוכלך או שהגרדיאנט מתפרק, הלכתם רחוק מדי. המטרה היא לא להשיג את הקובץ הקטן ביותר שאפשר, אלא את הקובץ הקטן ביותר שעדיין נראה כמו שצריך.

לא צריך להמיר הכול רק כי אפשר

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

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

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

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

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

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