או.. איזה פורמט מתאים לתמונה הזאת?
אחת הטעויות הנפוצות בבניה וניהול אתרי אינטרנט, היא משקל ופורמט התמונות המוצגות באתר. עורכי תוכן רבים טועים בכך, וביניהם גם מתכנתים וגרפיקאים עתירי ניסיון.
משקל נכון או שגוי של תמונה באינטרנט יכול להשפיע באופן ישיר על תפקוד האתר, חוויית המשתמש והציון שיקבל במנועי החיפוש השונים. (טוב, נו, בגוגל.. כל השאר לא מעניינים).
קיימים מספר פורמטים עיקריים בהם ניתן להציג תמונה באתר האינטרנט.
- PNG
- JPG
- GIF
- SVG
במאמר זה אסקור בקצרה (ובהרחבה) ככל האפשר את אופן השימוש בכל פורמט, ובאיזה סיומת קובץ כדאי לבחור. בנוסף, אשתף אותך בניסוי מעבדה קטן שערכנו כאן בדיגיטל-מרקט.
אז מה עדיף, JPG או PNG?
זאת שאלה ששמעתי כמעט מכל אדם שהתייעץ איתי לגבי פורמט לתמונות באתר האינטרנט שלו. מיד אשיב על השאלה הזאת. (אמ;לק – תלוי באופי התמונה), אבל קודם נסקור בקצרה את הפורמטים השונים ואת היתרונות והחסרונות שבכל אחד מהם.
תמונה בפורמט JPG
דחיסת תמונה, מתאים לתמונות בעלות פרטים רבים. בדרך כלל תצלומים (נוף, אנשים, חפצים וכו'). ניתן לקבוע את האיכות בערכים של 30-100, כאשר ככל שהמספר עולה – האיכות המקורית נשמרת, אך גם משקל התמונה מטפס.
יתרונות: הפחתת משקל לתמונות מורכבות מבלי לאבד הרבה מהאיכות.
חסרונות: לא תומך בשקיפות, מאבד מעט מאיכות התמונה.
תמונה בפורמט PNG
קיימים למעשה שני פורמטים של PNG. הראשון – PNG8, השני – PNG24. (מעטים המקרים בהם נדרש PNG8 ולכן אמנע מלכתוב על פורמט זה).
תמונה שנשמרת בפורמט PNG אינה מאבדת איכות, ולא עוברת שום דחיסה. אם נשמור תמונה שצילמנו במצלמה בפורמט PNG – מרב הסיכויים שהתמונה תהיה כבדת משקל להחריד, בשל פרטיה הרבים שאינם נדחסים.
הפורמט הזה יכול להיות שימושי כאשר נדרשת תמיכה בשקיפות, אך עיקר השימוש שלו יכול לבוא לידי ביטוי בתמונות בעלות אופי וקטורי (בדרך כלל תמונות שיצאו מתוכנה וקטורית כדוגמת אילוסטרייטור וכדו'). אלמנטים כמו לוגו, או באנר שאינו מבוסס על תמונה (תצלום).
יתרונות: תמיכה בשקיפות, משקל קל לתמונות וקטוריות, שמירה על איכות.
חסרונות: משקל כבד מאד לתצלומים.
תמונה בפורמט GIF
על פורמט זה לא ארחיב, רק אציין שעיקר השימוש בו הנו כאשר יש צורך בתמונה עם אנימציה. מלבד זה אני לא מוצא עניין להשתמש בפורמט הזה.
יתרונות: תמיכה בשקיפות, יכולת בניית אנימציה.
חסרונות: משקל. איכות גרועה (מכיל רק עד 256 גוונים).
תמונה בפורמט SVG
פורמט זה הנו פורמט וקטורי, כלומר – גם אם מגדילים את התמונה לממדים עצומים – האיכות לא תיפגע. כל זאת כמובן רק אם האלמנטים נוצרו בתוכנה וקטורית. המשקל של הפורמט הזה לאלמנטים כמו לוגו – שווה את המאמץ.
כמו כן, בפורמט זה ניתן גם לבצע אנימציה לאלמנטים. על כך בפעם אחרת.
מרבית האתרים אינם משתמשים עדיין ב-SVG מפני שאינו נתמך בדפדפנים ישנים (אקספלורר 8 ומטה).
יתרונות: תמיכה בשקיפות, יכולת בניית אנימציה, שמירה על איכות בכל גודל.
חסרונות: משקל (לפעמים). אין תמיכה לדפדפנים עתיקים.
PNG vs JPG. הניסוי:
ערכנו שני סשנים של ייצוא תמונות. כל אחת מהן לכל אחד מהפורמטים. מסקנות הניסוי יסבירו הכי טוב באיזה פורמט כדאי לבחור לכל תמונה.
סשן #01
התמונה: תמונה ש'עיצבנו' במיוחד לשם הניסוי. היא מורכבת מהרבה מאד ריבועים במספר גוונים.
ממדים: 1000×1000 פיקסלים.
פורמט: PNG24
משקל: 19kb
אותה תמונה – נשמרה בקובץ JPG באיכות מקסימלית (100).
הפעם המשקל הוא: 1.54mb [פי 81 מ-PNG!]
(לחיצה על התמונה תציג את התמונה בגודל מלא. זמן ההורדה עלול להיות איטי. תלוי במהירות האינטרנט שלך).
אותה תמונה נשמרה בקובץ JPG באיכות נמוכה מאד (10).
המשקל: 169kb (עדיין פי 10 מהמשקל של הקובץ שנשמר כ-PNG)
האיכות: נפגעה קשות, בשל הדחיסה הגבוהה.
סשן #02
התמונה: תמונת נוף בעלת פרטים רבים מאד.
ממדים: 1904×845 פיקסלים.
פורמט: JPG, האיכות הראשונית.
משקל: 1.54mb
(לחיצה על התמונה תציג את התמונה בגודל מלא. זמן ההורדה עלול להיות איטי. תלוי במהירות האינטרנט שלך).
אותה תמונה – נשמרה בקובץ JPG באיכות מינימלית (10).
הפעם המשקל הוא: 156kb
אותה תמונה נשמרה בקובץ JPG באיכות בינונית נמוכה.
המשקל: 258kb
ועכשיו לדובדבן שבקצפת – שמירת התמונה כ-PNG
משקל: 2.68mb
כלל אצבע לשמירת תמונה לאתר אינטרנט
PNG לאלמנטים וקטוריים. JPG לתצלומים.
(לכל כלל יש יוצא מן הכלל)
