אופטימיזציה לתמונות – מה זה ואיך עושים?

שתף בפייסבוק

טוויטר

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

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

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

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

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

בתוכנות כמו פוטושופ, למשל, ניתן לפתוח תמונה, להגדיר את גודלה ולשמור אותה לאינטרנט (Save for web) לפי איכות רצויה.

עתה, משיש לנו את הכלים לאופטימיזציה, נפרט את העקרונות לאופטימיזציה של תמונות:

גודל פיסי של תמונה

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

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

כלל לא מומלץ להעלות תמונה בגודל פיסי מסוים, למשל 700 פיקסל על 450 פיקסל, ולהקטין אותה באמצעות קוד הדף כדי שתאים למיקומה בתוכן הדף. גם אם תשנו את אותה התמונה באמצעות קוד הדף, לגודל של 200 פיקסל על 100 פיקסל, משקלה יישאר כמשקל המקורי.

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

חיתוך (Crop) חלקים מיותרים מהתמונה

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

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

למתקדמים - ניתן להוריד גם ממספר צבעי התמונה לצורך צמצום משקל.

הורדת משקל קובץ התמונה על חשבון איכות התמונה

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

במהלך השמירה ננסה להוריד את איכות התמונה, לבדוק אם היא עדיין נראית טוב ובמסגרת משקל היעד של קובץ התמונה

מהו משקל סביר של תמונה לדף אינטרנט?

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

איך לבדוק אם הדף או האתר שלי ותוכנם אופטימלי?

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

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

שתף בפייסבוק

טוויטר