איך לשמור תמונות לאתר על מנת להימנע מזמן טעינה ארוך?

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

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

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

להפחית נפח, לצמצם זמן

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

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

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

רזולוציה

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

פלטת הצבעים האופטימלית

sRGB הוא מנעד הצבעים המשמש כברירת מחדל לשימוש בתמונות ברשת. פירוש ראשי התיבות הוא Standart Red Green Blue, והשימוש בו מבטיח שימוש בצבעים האופטימליים לרשת. 

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

המידע שבקובץ

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

איך שומרים תמונה לרשת?

אם אתם משתמשים בפוטושופ, תוכלו לשמור את התמונות בהתאם לשלושת הפרמטרים שציינו. 

פתחו את התמונה שאתם רוצים להעלות לאתר, בדקו במאפיינים שלה שהיא שמורה ב-72dpi לכל היותר, ושסט הצבעים שלה הוא RGB. 

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

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

PNG, GIF או JPEG?

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

JPEG

פורמט JPEG או JPG מצמצם חלק מהצבעים הקיימים בתמונה. הצמצום לא מורגש בידי עין אנושית והרווח המושג הוא בהקטנת נפח התמונה. 

מתי נשתמש בו? בתמונות סטטיות (להבדיל מתמונות הכוללות אנימציה, ועל כך בהמשך, בהסבר על קבצי gif); בתמונות עם מגוון צבעים רחב, ובתמונות עם חשיבות לצללים. בכל המצבים האלה jpeg יודע לצמצם את המידע הלא חשוב ועדיין לשמור על הדקויות החשובות בתמונה.

GIF

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

מתי משתמשים בו? בקבצים שיש בהם אנימציה, לקבצי גרפיקה עם צבעים בודדים (כמו אייקונים), ולתמונות פשוטות כמו איורים או עיצובים קלים.

PNG

PNG מגיע בשני פורמטים עיקריים - PNG-8, שדומה לקובץ gif, ו-PNG-24 הדומה לקובץ JPEG. 

מתי נשתמש ב-PNG? את השימוש בקבצים האלה נעשה כשנרצה להציב אותם על כל רקע מבלי לאבד דבר מכושר התצוגה שלהם. 

השימוש העיקרי בשמירת תמונות ב-PNG עבור הרשת יהיה בשמירת לוגואים.

שמרתם? גלשו ובדקו

אחרי שבדקתם היטב את התמונות באתר ולמדתם כיצד לשמור אותן, בדקו את האתר שלכם. כשאתם עורכים את הבדיקה ומודדים את זמן טעינה האתר, עשו זאת בכלים מקצועיים (כמו google page speed test או Pingdom speed test) וגם נסו את המדידה במכשירי הקצה - מחשב, טאבלט וטלפון חכם. כך תדעו מהי חוויית הגלישה האמיתית מהאתר שלכם אצל הגולשים.