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

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

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

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

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

(לקריאה על אופטימיזצית וורדפרס וטיפים נוספים קראו את המאמר הבא)

אלו הגורמים המרכזיים למשקל התמונה:

  1. גודל התמונה הפיזי
  2. איכות

 

גודל פיזי

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

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

תמונה קטנה = תמונה קלה

אז איך אנחנו מקטינים תמונות?

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

כלי 1 - Image resizer for windowsלעמוד התוכנה לחצו כאן

זו תוכנה קטנה וממש יעילה. אתם לא תרגישו אותה ותזכרו בה רק כשבאמת תצטרכו אותה.

כל מה שצריך לעשות אחרי ההתקנה, זה לעמוד מעל התמונה שאותה תרצו להקטין, ללחוץ קליק ימני לבחור מהתפריט "Resize pictures" ואז יפתח חלון צף שניראה כך:

עכשיו נותר לכם לבחור את הגודל אותו אתם צריכים וללחוץ "Resize"

שימו לב שיש גדלים מוכנים large, medium, small, mobile ושדה להכנסת גודל ידני.

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

אפשר לבצע את הפעולה הזו על תמונה בודדת או על מספר תמונות בבת אחת.

כלי 2 – Photoshop

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

לאחר העלאת תמונה לפוטושופ נכנס ל"שמירת תמונה לאינטרנט" או נלחץ על ctrl+alt+shift+s (ובמחשבי מק: Command-Option-Shift-T).

יפתח לנו חלון כזה

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

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

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

 

איכות התמונה

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

ישנה אפשרות "להוריד" כמה פיקסלים מהתמונה ללא השפעה על האיכות שלה.

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

אז בואו נמשיך את ההסבר על כלי שמירת התמונות לאתרים של פוטושופ

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

ניתן לבצע זום אין/אאוט על התמונות ובכך לבחון איך נראית התמונה על כל אלמנט בתמונה.

  1. בתפריט דרופדאון הזה ניתן לבחור בפורמט של התמונה.

א. Jpg מתאים לכל התמונות מלבד תמונות עם רקע שקוף – אנחנו לרוב נבחר להשתמש ב jpg  מכיוון שלאחר מכן יש לנו יותר אפשרויות לקביעת איכות התמונה.

ב. Png מתאים לתמונות בעלות רקע שקוף (כמו לוגואים אבל לא רק)

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

בתמונה הזו ניתן לראות את ההבדל בין האיכויות השונות (התמונות לאחר זום אין)

מתחת לכל תמונה נוכל למצוא את הפרטים הבאים:

  1. פורמט התמונה
  2. משקל התמונה
  3. איכות התמונה (בין 1 ל 100)

בחלון המפוצל לארבעה מסכים ניתן להבחין בין

א. התמונה המקורית (שמאל עליון)

ב. לבין התמונה עם ההגדרות שבחרנו (ימין עליון)

ג. ירידה באיכות התמונה ב 50% עד לאיכות של 30 (שמאל תחתון)

ד. ושוב ירידה של עוד 50% עד לאיכות של 15 (ימין תחתון)

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

לאחר ששמרתם את התמונה בספריית היעד נותר עוד כלי אחד חינמי בו נשתמש (אם אין לכם פוטושופ תוכלו להשתמש בו מיד אחרי השלב הראשון של הקטנת התמונה)

אופטימיזציית התמונה

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

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

הדרכת וידאו כ4 דקות על השימוש בכלי שמירת התמונות לאתרים של פוטושופ

יש לכם עוד שאלות בנושא? פנוי אלינו בלייב צ'אט.

Eytan Tesler
מחבר:
איתן הוא יזם אינטרנט עם מעל 4 שנים בבניית אתרים בווורדפרס, אוהב לחקור ולגלות דברים חדשים בוורדפרס ועלם האינטרנט.
משפט המוטו של איתן בעסקים הוא "תהיה טוב ויהיו טובים אליך"

Share this post

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

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