כנראה שלא תופתעו לגלות ש-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. שימו לב, ברוב המוחלט של המקרים עליכם לוודא שאתם עושים שימוש ב-PNG8 אחרת הקובץ יהיה גדול יותר ויכיל מידע מיותר.
• עבור תמונות הדורשות צבעים רבים, בחרו ב-JPEG.
• קבצי PNG שומרים את המידע בקבוצות המייצרות תקורה מסויימת. חלק מקבוצות אלה ניתנות למחיקה אולם מרבית התוכנות אינן עושות זאת באופן אוטומטי. עשו שימוש בכלים כגון PNGCrush או OptiPNG.
• בעת שמירת תמונה בפורמט JPEG מתוך תוכנות גרפיות, לעיתים רבים אנו נשאלים על "איכות" התמונה בעת השמירה. במקרים רבים ראינו כי ברירת המחדל שמציעים כלים אלה עומדת על 80. אין משמעות הדבר שתאבדו 20% מאיכות התמונה. גופים כמו Adobe, ממליצים לשמור תמונות באיכות שנעה בין 70 ל-80 ובכך לחסוך משמעותית בגודל הקובץ בלי לפגוע כמעט באופן שבו עין רגילה תזהה את איכות התמונה.
• קבצי JPEG מכילים מידע רב שנועד לשמש כתיאור התמונה. מומלץ בטרם העלאת התמונות לאתר לעשות שימוש בתוכניות שירות כגון JPEGtran.

Google הינה ללא ספק אחת החברות הפעילות ביותר לשיפור מהירות אתרי אתרים ומשקיעה בכך מליוני דולרים אם לא יותר. על מנת לאפשר לבעלי האתרים למדוד את מהירות אתריהם מספקת Google שתי דרכים לצפות במה שנקרא Real User Monitoring – זמני… לסיפור המלא ←