העלאת תמונות לאתר בגודל נכון
לתמונות יש תפקיד מרכזי וחשוב בניהול השוטף של אתרי אינטרנט מודרניים. תמונות מסייעות לנו להמחיש לגולש פרטים שקשה היה לתאר באמצעות טקסט בלבד, לסקרן את הגולש ולשבור פסקאות טקסט ארוכות ומייגעות. תמונות מוסיפות צבעוניות לאתר, הופכות אותו למקום שנעים יותר להיות בו, והן גם כלי עזר מצוין שמעודד שיתוף תכנים ברשתות חברתיות.
ליתרונות האלו של שימוש בתמונות יש כמובן גם מחיר: כאשר התמונות אינן נבחרות בקפידה ואינן עוברות תהליך של אופטימיזציה, הן עלולות להאט את זמני טעינת העמודים השונים באתר, להשפיע לרעה על קידום בגוגל של האתר, לספק חווית משתמש לא טובה לגולשים המגיעים לאתר ולגרום לנטישה של מבקרים באתר.
זאת הסיבה, שבכל תהליך של תכנון או בניה של אתר – יש להקצות משאבים גם לתכנון והטמעה נכוה של תמונות באתר.
איך לבנות אתר בחינם בשעה וחצי?
יש לי הצעה מעניינת עבורך, יצרתי הדרכה מלאה של למעלה משעה וחצי שתלמד אותך איך לבנות אתר מ-0 בחינם כולל רכישת אחסון ודומיין. נשמע מעניין? אשמח לשלוח לך אותה למייל.
האתגר המרכזי: איזון בין משקל התמונה וגודל התמונה
שני מושגים שחשוב להכיר בכל הקשור להטמעת תמונות באתר הוא גודל התמונה ומשקל התמונה. גודל התמונה הוא פרמטר אשר נמדד בפיקסלים. ככל שהתמונה גדולה יותר היא תכל יותר פיקסלים, כלומר, תתואר על ידי כמות גדולה יותר של נקודות. המושג השני שחשוב להכיר בהקשר הזה הוא משקל התמונה. משקל התמונה הוא, למעשה, גודל הקובץ שבו שמורים נתוני התמונה. גודל הקובץ מושפע מן הפורמט שבו נשמרה התמונה (כלומר, שיטת הייצוג של התמונה באמצעות ביטים), מגודל התמונה, מכמות הצבעים השונים הקיימים בתמונה ומפרמטרים שונים נוספים.
מה שחשוב לדעת בכל הקשור למשקל התמונה – הוא שלזו יש השפעה מכרעת על זמני הטעינה של העמוד הרלוונטי באתר בו היא מוטמעת. ככל שמשקל התמונה יהיה גדול יותר, כך גם זמן הטעינה יתארך. מקובל יהיה לומר שברוב המוחלט של אתרי האינטרנט, אפשר להסתפק בתמונות שמשקלן לא עולה על 100KB.
טעות נפוצה: העלאת תמונה גדולה יותר מן הדרוש
אחת הטעויות הנפוצות בכל הקשור להטמעת תמונות באתר היא העלאה של תמונה אשר הגודל שלה בפיקסלים אינו נדרש, וגדול משמעותית מן הגודל הדרוש בפועל להצגת התמונה בעמודי האתר השונים. במקרה כזה, "בזבזנו", למעשה, משאבי משקל של התמונה על צורך שכלל לא קיים – הצגת התמונה ברזולוציה שאינה טבעית לעמוד באתר.
כיצד בודקים את גודל התמונה בפיקסלים? פשוט מאוד. ניגשים לקובץ בו שמורה התמונה, עוברים עליו עם העכבר, ובבועית שתיפתח יוצגו לכם ממדי האורך והרוחב של התמונה. לחיצה על הקש הימני של העכבר כאשר אתם עומדים על הקובץ ובחירה באופציה אפשרויות, תגלה לכם מהו משקל הקובץ בו שמורה התמונה.
התשובה במקרה הזה היא פשוטה: עלינו להקטין את התמונה למשקל המינימלי המאפשר לצפות בתמונה מבלי לוותר על האיכות הנדרשת, בגודל הנדרש בעמודי האתר.
אם ניקח לדוגמה תמונה שאמורה להופיע רק כאייקון על כפתור באתר, ולא אמורה להיות מוצגת בשום דרך אחרת באתר, אין שום טעם לשמור את התמונה בגודל המאפשר הצגתה על מסך שלם מלכתחילה.
ישנם לא מעט כלים ושירותי אונליין שיאפשרו לכם להקטין ולכווץ תמונות בגודל ובמשקל תוך שמירה על האיכות הנדרשת. כל שתצטרכו לעשות הוא להזין את הפרמטרים הנחוצים לכן, והתוכנה או שירות האונליין יחולל עבורכם תמונה עם המאפיינים הדרושים.
היבטים נוספים באופטימיזציה של תמונות
כאמור, אופטימיזציה של תמונות היא תהליך שנוהגים מקדמי אתרים לבצע לא רק לצורך שיפור זמני הטעינה, אלא גם על מנת לשפר את הנראות של עמודי האתר בדפי תוצאות החיפוש, במנועי החיפוש המובילים. שני היבטים חשובים שצריך יהיה לשים אליהם לב בביצוע האופטימיזציה הזאת הוא עדכון שם קובץ התמונה ועדכון תגית ה – alt של התמונה.
שם קובץ התמונה
שם הקובץ שבו שמורה התמונה, הוא פרמטר שנוהגים מקדמי אתרים לערוך על מנת ללמד את מנועי החיפוש על המידע המצוי בתמונה. באופן טבעי, למנועי חיפוש קל הרבה יותר להבין ולנתח טקסט, ושמירת התמונה בשם קובץ המסייע להבין מה יש בתוכה, הוא מתודה שבהחלט יכולה לסייע בהקשר הזה למנוע החיפוש.
תגית ה - Alt
לתגית ה – alt יש חשיבות מיוחדת בכל הקשור לקידום אתרים. ראשית, תגית האלט נסתרת אמנם מן העיניים של המשתמש במקרה שהתמונה נטענה באופן תקין, אולם היא תוצג בשדה שיועד לתמונה על המסך במקרה שזו לא נטענה. בתגית ה – alt נהוג לתאר במספר מילים מה מוצג בתמונה כדי שמנוע החיפוש יבין את ההקשר שבו הוטמעה התמונה בעמוד. אולם מעבר לשני אילו, לתגית ה – Alt יש משמעות גדולה בכל הקשור להנגשת אתרים לבעלי לקויות ראיה: תוכנות עזר המשמשות בעלי לקויות שונות מסוגלות להקריא את הטקסט המצוי בתגית זו, כחלופה להצגת התמונה.
הנגשת אתרים
אם בחרתם להנגיש את האתר שלכם לבעלי לקויות שונות, ולטייב את התגיות של תמונות רלוונטיות באתר, תוכלו ליהנות ממספר לא מבוטל של יתרונות: ראשית, ומעל הכל – אתם תעמדו בדרישות החוק המסדיר את הדרישות בנוגע להנגשת אתרים.
שנית, להנגשת אתרים ישנה חשיבות בכל הקשור ל – SEO – מנועי החיפוש היו רוצים להציג למשתמשים, ובטח ובטח משתמשים בעלי לקויות שונות, אתרי אינטרנט המותאמים לשימוש שלהם.
הנגשת אתרים היא פעולה שיש לה כמובן גם חשיבות מוסרית. הרעיון שצריך לייצר הזדמנות שווה לכלל הגולשים המגיעים לאתר הוא רעיון נכון. בנוסף, להנגשת אתרים ובפרט לשימוש בתגיות ה – alt בתמונות ישנה גם חשיבות עסקית: חלק לא מבוטל מן האוכלוסייה הוא בעל לקויות שונות וויתור עליו מראש באמצעות ויתור על הנגשת האתר, הוא ויתור על חלק גדול באוכלוסייה שיכול לפוך ללקוח נאמן של האתר. דחיקה של החלק הזה באוכלוסייה אל המתחרים עלולה להתברר כשגיאה עסקית בטווח הארוך.
עוד לא צפיתם בהדרכה? זה בחינם!
אני רוצה ללמד אתכם לבנות אתר אחד בחינם. מדובר על הדרכה של למעלה משעה וחצי שבה אני אלמד אותך מ-0 לבנות אתר כולל רכישת אחסון ודומיין. לקבלת ההדרכה למייל באופן מיידי יש להשאיר פרטים מתחת.
יוחאי ירמיהו
נעים מאוד, שמי יוחאי ירמיהו ואני עוסק בתחום של עיצוב גרפי, בניית אתרים ובכל העולם הדיגיטלי למעלה מעשור וחצי.
נכון להיום ההתמחות שלי היא בניית אתרים בוורדפרס. אני מפתח אתרים מ-0 עם תבנית בפיתוח אישי, יש לי למעלה מ-15 תוספים לוורדפרס שפיתחתי ושחררתי בחינם (תורידו אותם) ואם אתה מחפשים נינג'ה מומחה לוורדפרס זה אני :-).
אם אהבתם את המדריך ואתם רוצים לשתף אותו ניתן לעשות זאת על ידי לחיצה על כפתורי השיתוף מתחת:
מאמרים נוספים שעשויים לעניין אתכם:
