כיווץ תמונות לאתר אינטרנט

מדריך קצר לשינוי מידות תמונה לשימוש באתרי אינטרנט וכיווץ נפח/משקל התמונה לאופטימיזציה של הדף

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

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

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

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

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

לאחר מכן נעבור לאתר pixlr.com ונלחץ על כפתור פתיחת התוכנה.

באפשרויות בתפריט file  או בחלון הפתיחה נבחר באפשרות open ונפתח בתוכנה את התמונה הנבחרת.

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

נבחר מתוך הרשימה בחלונית השמאלית הנקראת constraint באפשרות output size המאפשרת לנו להתאים את מימדי כלי החיתוך למידה המדויקת הסופית. כל שנותר לנו הוא למתוח את הכלי על פני התמונה, לארגן את רשת/גריד החיתוך באופן הרצוי לנו וללחוץ על מקש Enter. בסיום נשמור את התמונה.

השלב הבא, הוא העלאת התמונה לאתר tinypng.com כיווץ התמונה והורדת קובץ סופי שאותו נעלה לאתר האינטרנט לאחר שביצענו התאמה אופטימלית של התמונה.