איך לכווץ תמונות לאתר?




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

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

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


לפני שמתחילים

כבסיס להשוואת שיטות כיווץ שונות, נשתמש בתמונה בגודל 393KB עם מימדים של 150x150 פיקסלים, ונבחן את תוצאות הכיווץ שלה ע"י התוכנות הגרפיות השונות.
הנה התמונה המקורית שעליה נבצע את שיטות הכיווץ השונות -




נכיר את הכלים


1. פוטושופ (Adobe)


ניתן לייצר תמונות מותאמות לאתרי אינטרנט ע"י שימוש בפעולה "Save for web". שימוש בפונקצייה הזו בתוכנת פוטושופ תייצר קובץ בעל גודל מוקטן אך עם איכות מספקת להצגה באתרי אינטרנט.
בדוגמה שלנו השתמשנו באופצייה של כיווץ ברמה של "High Quality" ששוות ערך ל-60% מאיכות התמונה המקורית.
לאחר הכיווץ, גודל הקובץ הוא 95KB.

התמונה לאחר הכיווץ -


2. אדובי פיירורקס (Adobe Fireworks)


תוכנה פופולרית לעריכת תמונות, גם של חברת אדובי. שימוש בפונקציית הכיווץ שלה הניבה תמונה באיכות של 80% מהתמונה המקורת ובגודל קובץ של 85KB.

התמונה לאחר הכיווץ -


3. תוכנת GIMP (תוכנה חינמית לעריכת תמונות)


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

אם אתם משתמשים בתוכנה זו כדי לכווץ תמונות שצילמתם עם מצלמה ביתית, כדאי לסמן בתוכנה את האופצייה של "Strip EXIF". פעולה זו תסיר מהתמונות את מידע המטא (meta data) ותחסוך לכם עוד כ-10KB לכל תמונה.

התמונה לאחר הכיווץ -


4. ImageMagick


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

הפקודה שעליכם להכניס היא - convert original.jpg -quality 80 after_image.jpg כאשר המשתנה - original.jpg הוא שם הקובץ המקורי שלכם והמשתנה after_image.jpg הוא השם שאתם מבקשים לתת לתמונה שהיא התוצאה של פעולת הכיווץ.
הפעלה של הכלי הזה על התמונה שלנו יצרה תמונה מכווצת באיכות של 80% מהתמונה המקורית וגודל קובץ של 89KB.

התמונה לאחר הכיווץ -


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


לסיכום

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


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

צוות קופיף.