Picture Perfect – מהו פורמט התמונה המתאים לכם

כנראה שלא תופתעו לגלות ש-60% ממרכיבי דף אינטרנט (לפחות) הן תמונות מסוגים שונים. בעוד דפדפנים אינם מוגבלים במסגרת רמת המקביליות האפשרית להורדת תמונות והצגתן (למעט הרמה המוכתבת על ידי הדפדפנים, קרי עד 6 תהליכים מקביליים אל מול hostname), לסוג התמונה יש משמעות לגבי מהירות ההורדה עצמה.

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

פורמטי תמונות – תזכורת

GIF

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

JPG

פורמט JPG הינו הנפוץ ביותר בקרב התמונות באתרים אינטרנט. נכון לתחילת יוני, 44% מהתמונות בקרב 200,000 אתרים שונים (רובם הנפוצים ביותר בדירוג אלקסה) היו בפורמט זה. פורמט זה מאפשר עד מיליוני צבעים בתמונה ויעיל ביותר מבחינת רמת הכיווץ שלו עבור תמונות גדולות. בכל קובץ מסוג זה נשמר מידע אודות התמונה, ובכך נוצרת תקורה מסויימת בגודל התמונה. בנוסף, פורמט זה אינו מאפשר שקיפות בתמונות.

 PNG

פורמט ה-PNG פותח כתחליף לפורמט ה-GIF ויכול להחליפו כמעט תמיד (למעט כאשר נדרשת אנימציה). תמונות בפורמט זה יכולות להיות באחת משתי רמות צבע: PNG-8 שומר 256 צבעים ואילו PNG24 מאפשר צבעים אמיתיים. פורמט ה-PNG שומר את המידע בנפחים קטנים יותר מאשר קבצי GIF והופך להיות פופולארי יותר ויותר. לראיה: בשנה האחרונה 7% מהתמונות באתרים שינו את סוגם מ-GIF ל-PNG. חשוב לדעת כי בדפדפנים ישנים מאד דוגמת Internet Explorer 6, קיימת בעיית הצגת תמונות בפורמט זה הכוללות שקיפות, אולם הדבר ניתן לתיקון באמצעות קוד JavaScript.

 המלצות

  • אלא אם מדובר בתמונה עם אנימציה, תמיד העדיפו PNG על GIF. שימו לב, ברוב המוחלט של המקרי