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

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

פורסם בתאריך: 1/2/2017

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

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

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

​

שלב א' – התאמת גודל התמונה לגודל המיועד לה באתר.

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

הבעיה הנפוצה ביותר בהעלאת תמונות כבדות לאתר, נובעת מהעלאת תמונה בגודל גדול משמעותית יותר מהגודל הנדרש להצגה באתר.

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

• על מנת להבין מה גודל התמונה הדרוש במקום נרצה בו להחליף או להוסיף תמונה, נתייעף ונבדוק זאת מול צוות התמיכה של ארמדיל - כדי להבין מהן מידותיו של שטח התמונה המבוקש. מטרתינו היא להבין מה גודל התמונה הרצוי בפיקסלים לטובת העלאתו לאתר. למשל: 500 פיקסלים לרוחב על 350 פיקסלים לאורך. בכל מקרה נקפיד לא להעלות לאתר תמונות בעלות מידות העולות על 1800 פיקסל רוחב/אורך במקרה המקסימלי.
• נבדוק מה גודל התמונה שלנו אותה אנו רוצים להעלות לאתר, על ידי הצגת קובץ התמונה בתיקייה, לחיצה ע"י לחצן ימני על התמונה, בחירה באפשרות "מאפיינים" או "Properties", ומכאן בחירה בלשונית "פרטים" או "Details". תחת לשונית זו, נוכל לראות בקלות מה גודל התמונה ומידותיה בפיקסלים (ראו תמונה מצורפת מטה). במידה וגודל התמונה גדול מגודל המקום המיועד לה במערכת, עלינו להקטין את גודלה בהתאם. לטובת המחשה, נדגים את התהליך על גבי תמונה אשר מידותיה כרגע הן 1920 רוחב על 1440 אורך. התמונה שלנו כרגע שוקלת 889 קילו-בייטים.

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

• בסרגל הכלים של מערכת עריכת האתר, נפתח את התמונה ע"י לחיצה על לשונית File, ובחירה באפשרות Open Image. נבחר את התמונה המבוקשת להקטנה והתאמה לצורך שילוב באתר.

• לאחר שפתחנו את התמונה דרך מערכת עריכת התמונות Pixlr, נלחץ על לשונית Image, ובה נבחר על אפשרות Image Size. זו למעשה האפשרות שמציגה את מידות התמונה, ומאפשרת שינוי מידות התמונה בהתאם. לצורך שינוי גדלי התמונה, נעדכן באחד משדות – רוחב או אורך, את הגודל כפי שנדרש בהתאם לשטח המוקצה עבור התמונה לשילובה באתר. יש לעדכן רק את אחת מהפמטרים (רוחב או אורך) בהתאם לגדול מבניהם, הפרמטר הקטן יותר יתעדכן בהתאם ללא צורך בטיפול נוסף מצידנו. במסגרת הדוגמא שלנו, מידות התמונה המקסימאליות לשילוב בהאתר הן 500 על 350.

• עלינו להקטין את מידות התמונה המקורית מ- 1920 רוחב על 1440 אורך, למידות שמתאימות לגודל של 500 רוחב על 350 אורך המיועד לשילוב באתר. יש להקפיד שהסמן Constrain proportions נשאר פעיל. סמן זה יקפיד על שמירת הפרופורציות של התמונה וימנע ממנה מלהתעוות. לסיום נקליק על OK.

• לאחר שעדכנו את גודל התמונה בהתאם ע"י שינוי הרוחב (הגובה התעדכן בהתאם), נבצע שמירה שלה כעותק המתאים לשילוב באתר. נלחץ על לשונית File בתוכנת העריכה Pixlr, ונבחר באפשרות Save. בחלונית שנפתחה, נבחר את שם הקובץ המיועד לשמירה (יש להקפיד על שם קובץ באנגלית) וכן נגדיר את ה- Format. ה- Format שנבחר יהיה Jpeg בלבד. נקפיד שלא להעלות תמונות בפורמט אחר שכן Jpeg הוא הפורמט האופטימאלי לשילוב באתר.

שלב ב' – צימצום משקל התמונה למינימום האפשרי ע"י מערכת כיווץ תמונות

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

• ישנן מערכות On-line רבות לכיווץ משקל תמונה. אנו ממליצים על המערכת Compressjpeg. נכנס למערכת Compressjpeg.
• נלחץ על הכפתור הירוק "Upload Files", ונבחר את קובץ התמונה בה אנו מטפלים – קובץ התמונה ששמרנו בסיום השלב הקודם. ניתן לבצע בחירה מרובה והעלות מספר רב של קבצים לצימצום משקל בו זמנית ובבת אחת.

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

סיימנו! התאמנו את גודל התמונה לגודל הדרוש לשילוב באתר וכן צימצמנו את משקלה למינימום והצלחנו להוריד את משקל התמונה מ-889 קילו-בייטים ל- 56.7 קילו-בייטים בלבד!

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

בהצלחה!

יש לכם פרוייקט שתרצו להתניע? תנו לצוות שלנו לייצר לכם חזות ברשת.