העולם שאנחנו חיים בו הוא עולם ויזואלי מאוד, ובהתאם אין אתרים בלי תמונות. אי אפשר לכתוב מאמרים, גם של 300 מילה, בלי להוסיף להם תמונות. אי אפשר למכור מוצרים באתרי איקומרס בלי תמונות שלהם. יש תחומים כמו יצירה או מתכונים, שבהם ויזואליה היא חלק אינטגרלי מהאופן בו מעבירים את המידע.
מאחר שתמונות הן חלק חשוב מאוד מכל אתר, כדאי שהן ישקלו מעט.
למה תמונות באתר צריכות לשקול מעט?
משקל אתר
לאתר שלכם יש משקל. כל דבר בו – לתוספים, לתבנית, וכמובן – קבצים. ככל שהאתר שלכם שוקל יותר, הוא תופס יותר מקום באיחסון. יצא לי לחסוך ללקוחה את הצורך לשדרג את האחסון כי נגמר לה המקום – רק באמצעות אופטימיזציה לגודל התמונות, וגם לי זה קרה פעם אחת. אפשר לקרוא על משקל אתר במאמר על איך לצמצם משקל אתר.
זמן טעינת אתר
הסיבה הקודמת היא קצת אנקדוטלית ולא הסיבה הכי חשובה. הסיבה החשובה באמת היא מהירות האתר. כשהתמונות שלכם כבדות, לוקח להן המון זמן לעלות. במחשב ביתי עם וייפיי טוב, תמונות יכולות לעלות מהר מאוד. כשאתם לא מחוברים לוייפיי, תמונות יכולות לעלות לאט יותר בנייד – ומרבית הגלישה נעשית היום דרך הניידים. אם אתם לא מאמינים לי, אתם מוזמנים לבדוק בגוגל אנליטיקס את נתוני הגלישה באתר שלכם לפי מכשיר.
מצד הגולשים, אין סבלנות להמתין עד שהאתר שלכם יטען, האתר שלכם נראה לא טוב אסתטית וחוויית המשתמש נפגעת מאוד. מאחר שמדובר בכרטיס הביקור שלכם, עדיף להימנע מזה.
מצד גוגל, דירוג האתר הוא בהתאם. גוגל נוטה לתעדף אתרים שהתמונות בהם עולות מהר.
טיפול במשקל התמונות הוא אחד הדברים שהכי קל לטפל בהם בבדיקות מהירות אתר
איך להקטין משקל תמונה?
ההנחה במאמר הזה היא שאתם עובדים או בעצמכם או עם מעצבת שיכולה לשלוח לכם חומרים גרפיים. אם אתם עובדים בעצמכם על האתר – כדאי לדעת את הדברים האלו כדי שתוכלו לשפר בעצמכם את זמן הטעינה של העמודים שלכם והוחות הקורא ולטובת קידום האתר שלכם בגוגל.
אם אתם עובדים עם מעצבת, כדאי שתדעו את זה כי תמיד הרבה יותר קל לעבוד עם אנשי מקצוע כשאתם יודעים מה לשאול, מה לבקש וקצת בקיאים בטרמינולוגיה.
הקטנת תמונה באמצעות שינוי פורמט התמונה
מילת הקסם שלכם היא JPG.
לתמונות יש כמה פורמטים נפוצים, שנבדלים במידת הדחיסות שלהם. ברוב רובם המכריע של האתרים – מידת הדחיסות לא אמורה לשנות לכם כלום.
שני הפורמטים העיקריים של תמונות הם png ו-jpg. לפעמים תיתקלו גם בתמונות בפורמט gif. כדאי לדעת שקבצי jpg שוקלים פחות מקבצי png, כך שאם תשמרו שתי תמונות זהות – אחת בפורמטpng והשניה בפורמט jpg – התמונה ב-jpg תשקול פחות. אם אתם יוצרים את התמונות שלכם בצייר, בקאנבה או ב-Crello (דומה מאוד לקאנבה, פחות חרוש ויותר זול), אפשר להוריד אותן ישירות בפורמט jpg.
אם יש לכם תמונות באתר שהן ב-png, תעבירו אותן פורמט. אפשר לעשות את זה בצייר באמצעות "שמירה בשם". אם יש לכם כמה תמונות ואתם לא רוצים להתחיל להעביר אותן אחת-אחת, אפשר להשתמש באתרים כמו זה.
יוצאי דופן פה הן תמונות עם רקע שקוף, כמו לוגואים. במצב שכזה, jpg יהפוך את הרקע השקוף ללבן – וזה לא משהו שאתם רוצים. כדי להקטין משקל תמונות עם רקע שקוף, תשמרו אותו (או בקשו מהמעצבת לשמור) בפורמט SVG.
הקטנת תמונה באמצעות הקטנת מידות התמונה
לצד פורמט התמונה, גודל התמונה, כלומר מידות התמונה בפיקסלים, משפיע מאוד על המשקל שלה. תמונות, בעיקר מאתרי סטוק, גדולות יותר משבאמת צריך – וכשמקטינים את המידות, המשקל יורד פלאים. כבר יצא לי להוריד תמונות ששקלו בערך 10MB והיו במידות של 5000*6000 פיקסל ל-500*600 פיקסל. המשקל שלהן השתנה לפחות מ-100KB.
הקטנת קובץ jpg בצייר
מדריך קצרצר (פחות מדקה) ופשוט מאוד להקטנת גודל תמונה עם תוכנה שלכולם יש במחשב: צייר. בסרטון הזה שיניתי גודל תמונה מ-8192*5461 פיקסל ל-900*600 פיקסל, מה שהוריד את המשקל שלה מ-12.3 מגהבייט ל-159 קילובייט. במילים אחרות, שינוי המידות הפשוט הזה הקטין את משקל התמונה פי 77!
זה עוזר מאוד אם אתם מחזיקים מאגרים של תמונות במחשב שלכם וזה סותם לכם את הדרייב, או שאתם רוצים לשנות את גודל התמונה לפני העלאה לאתר.
הקטנת תמונה בוורדפרס
אם יש לכם אתר וורדפרס, אתם לא צריכים להקטין את התמונות בצייר לפני העלאה. אתם יכולים להעלות אותן כמו שהן להקטין אותם ישירות בעורך המדיה באתר שלכם:
בוחרים בספריית מדיה -> הקובץ הרצוי -> עריכת תמונה ->מתחת ל"שינוי גודל" משנים למידות התמונה הרצויות -> לוחצים על "קנה מידה" כדי לשמור את השינויים -> חזרה
בסרטון הזה (20 שניות) הראיתי איך אני מקטינה את התמונה למידות הרגילות של תמונות באתר שלי: 900 רוחב על 600 גובה. מ-154 קילובייט, התמונה הפכה ל-36 קילובייט:
הקטנת תמונה באמצעות כיווץ התמונה
דרך נוספת להקטין משקל של תמונה באתר הוא באמצעות כיווץ תמונה: העברת תמונה באתרים שמכווצים את המשקל שלה עוד. יש הרבה תוצאות טובות בעמוד הראשון בגוגל, כל מה שצריך הוא לחפש minimize image או compress image. אני אוהבת את האתר הזה. כדאי לשים לב שהמשקל נובע לא רק מהגודל ומהפורמט, אלא גם מאיכות התמונה. חשוב מאוד לבדוק שאתרים שמכווצים לכם את התמונות לא פוגמים להם באיכות.
איך בודקים אם איכות התמונה נפגעה? נכנסים לתמונה ורואים בעצמכם.
הקטנת תמונה באתר: תוסף אופטימיזציה לתמונות בוורדפרס
לוורדפרס יש המון תוספים שונים שנועדו לכווץ לכם את משקל התמונות עוד קצת בלי לפגוע בגודל או באיכות שלהם. חלקם בחינם, חלקם בתשלום, חלקם Freemium – כלומר בחינם עד שאתם עוברים מכסה מסוימת, למשל של העלאת תמונות בחודש, ואז בתשלום.
בעבר השתמשתי ב-Compress JPEG & PNG images של TinyPNG שהוא תוסף חינמי עושה לי עבודה סבבה באתר. רק צריך אחרי שמתקינים את התוסף, לפתוח חשבון באתר שלהם ולעקוב אחרי ההנחיות הפשוטות.
עכשיו אני משתמשת בתוסף שנקרא Imagify, שגם הוא Freemium, מבית WpRocket. צריך לפתוח משתמש באתר שלהם, לקבל קוד (שנקרא API Key), להכניס אותו באתר והתוסף עושה יופי של עבודה לבד. אני מעלה תמונות ולא מתערבת, ורוב הזמן שוכחת שהוא קיים.
מה המצב באתר שלכם?
אם אתם כבר יודעים שהאתר שלכם יכול להיטען מהר יותר – העצות פה פשוטות מאוד ליישום ואני ממליצה להתחיל.
אם אתם לא בטוחים מה המצב באתר האישי שלכם, אתם יכולים להיכנס לכלי בדיקת מהירות האתר של גוגל, להזין בו את כתובת האתר שלכם – ולהתחיל לשפר ביצועים! ותמיד אפשר גם לדבר איתי.
