מדריך לעבודה עם תמונות

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

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

ישנן שלושה סוגי אופטימיזציה לתמונות:

• עריכת התמונה במעבדות דיגיטליות שונות על מנת שתראה טוב יותר.

• כיווץ הנפח שלה על מנת שתטען מהר יותר ולא תכביד על טעינת האתר.

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

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

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

התחילו מראש עם תמונות באיכות גבוהה

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

ישנן עשרות תוכנות, אני אוהבת להשתמש ב pixabay, unsplash, little visuals ועוד.

מאגרי תמונות חינמיים

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

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

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

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

קובץ מסוג JPEG יכול להתמודד עם כל הצבעים בתצלום בגודל קובץ קטן ויעיל יחסית.

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

קבצי ה PNG איכותיים יותר אך בדרך כלל שוקלים יותר. אני ממליצה לשמור PNGs בתבנית "24 סיביות" ולא "8 סיביות" בגלל האיכות הטובה והמערך העשיר יותר של הצבעים הנתמכים.

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

שנו את גודל התמונות כדי לייעל את מהירות טעינת הדף והמראה שלהן

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

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

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

אז איך תמצאו את האיזון הנכון בין גודל לאיכות?

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

• גודל קובץ אופטימלי: מספר הבתים שהקובץ תופס במחשב. זה הגורם שיכול להאט את טעינת האתר. תמונה של 15Mb היא ענקית. תמונה של 125Kb סבירה בהרבה. אני ממליצה לא להעלות תמונות גדולות מ 40Kb, בטח כאשר מדובר באתר עמוס תמונות כמו גלריה או חנות.

• גודל תמונה: הממדים בפועל של התמונה נמדדים בפיקסלים ממש כמו האופן בו נבנה האתר ובו נמדד רוחב ואורך המסך שלכם, כך למשל תמונה טיפוסית באתר או בבלוג עשויה להיות 795 × 300 פיקסלים.

• רזולוציה לתמונות אינטרנט: הרזולוציה בעולם הדפוס וצפיפותה, שנמדדת בנקודות לאינץ (dpi) תדרוש מאיתנו לשמור תמונות באיכות של לפחות 300 dpi, אך מרבית צגי המחשבים מציגים רק 72 dpi או 92 dpi , כך שכל רזולוציה גבוהה מאלו תהיה מיותר ותכביד על האתר.

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

איך נדע מה גודל הקובץ, גודל התמונה והרזולוציה של התמונה?

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

מציאת הרזולוציה דורשת תוכנה מתקדמת יותר לעיבוד תמונה דיגיטלית צילום כמו פוטושופ, אך רוב תוכנות עריכת התמונות הבסיסיות ישמרו אוטומטית תמונות ב dpi נמוך יותר וידידותי לאינטרנט שזו רזולוציה טובה יותר לתמונות עבור אתרי אינטרנט. תוכלו להשתמש בתוכנות חינמיות לכיווץ נפחי התמונה כמו Tiny Jpeg, Tiny Png, Pixlr ועוד.

תמונות בעולם ה SEO

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

שמות לקובץ התמונה

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

טקסט אלטרנטיבי לתמונה

מנוע החיפוש של גוגל הוא אוסף שורות קוד.

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

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

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

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

בואו נעשה את התהליך יחד:

בחרתי אתר שעוסק במסעדה איטלקית.

לשם כך אשתמש כמו שהבטחתי בתוכנות חינמיות בלבד.

נכנס לאתר של pexels ונחפש תמונה.

אתרים חינמיים למאגרי תמונות

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

בחירת תמונה מאתר מאגרי תמונות

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

תהליך הקטנת תמונה בפיקסלר

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

תהליך הקטנת תמונה בפוטושופ

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

• גודל קובץ אופטימלי: תמונות גדולות או תמונות רקע מלאות צריכות להיות לא יותר מ- 300 Kb.

• תמונות אחרות מומלץ שיהיו קטנות מ 100 KB אפילו פחות.

• אם משתמשים ברקע במסך מלא, מומלץ להעלות תמונה ברוחב של 2000 פיקסלים.

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

• התחילו עם הקטנת הרזולוציה ל 72 או מקסימום 96 dpi .

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

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

היי, לא לדאוג.....

עמית צוק עורכת מגזין קידום אתרים

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

צרו עימי קשר (מבטיחה לא לשלוח ספאם).....