תמונות הן חלק מרכזי בעיצוב ובתוכן של אתרים, אך הן גם אחד הגורמים המשפיעים ביותר על מהירות הטעינה של האתר. אתר שנטען לאט יכול לפגוע בחוויית המשתמש ולגרום למבקרים לעזוב, וגם לפגוע בציון הדירוג של האתר בגוגל. לכן, חשוב לבצע אופטימיזציה לתמונות לפני העלאתן לאתר, כדי להבטיח שהן יהיו איכותיות מצד אחד, וקלות לטעינה מצד שני.
כיום ישנם כלים רבים בוורדפרס שיודעים לכווץ תמונות אוטומטית ולהציג אותן בפורמטים יעילים כמו WebP, וכל זאת מבלי לפגוע באיכות בצורה ניכרת. בין התוספים המובילים לכך ניתן למצוא את ShortPixel ו-Imagify, שניהם תוספי פרימיום בתשלום שנותנים מענה מצוין לשיפור משמעותי של מהירות טעינת האתר ע״י כיווץ משקל התמונות באתר.
טיפ מיוחד ללקוחות KFIR DIGITAL:
אם האתר שלכם נבנה אצלנו, סביר להניח שכבר מותקן אצלכם תוסף לכיווץ תמונות אוטומטי, כך שאין צורך לכווץ ידנית לפני ההעלאה. עם זאת, אם התמונות צולמו במצלמה מקצועית והן גדולות מאוד, מומלץ לבצע כיווץ בעזרת כלי כמו CompressImage.io לפני ההעלאה, כדי להבטיח גרסה קלה יותר.
למה צריך לכווץ תמונות?
ישנם מקרים שבהם אין תוסף כיווץ תמונות מותקן באתר, או שהתמונות שמעלים הן גדולות מאוד (למשל תמונות שצולמו על ידי צלמים מקצועיים). תמונות אלו יכולות להגיע לגדלים של 10MB ואף יותר – מה שגורם לאתר להיטען לאט מאוד.
מומלץ שהתמונות שיועלו לאתר יהיו בגודל של עד מקסימום 500KB. כלומר, תמונות של צלמים מקצועיים הן לעיתים פי יותר מ-20 (!) מהמומלץ ויכבידו מאוד על האתר.
במקרים כאלה, יש צורך לכווץ את התמונות לפני ההעלאה לאתר. הכיווץ לא רק משפר את מהירות טעינת האתר אלא גם תורם לחוויית משתמש טובה יותר ולדירוג טוב יותר בגוגל.
איך מכווצים תמונות בצורה נכונה?
במדריך הזה נלמד איך לכווץ תמונות בצורה מהירה ויעילה באמצעות אתר חינמי שנקרא CompressImage.io. התהליך פשוט מאוד, וניתן לכווץ את התמונות לגודל אידיאלי לאתר מבלי לפגוע באיכות.
- היכנסו לאתר CompressImage.io
- פתחו את חלון ההגדרות ע״י לחיצה על והפעילו את ״Convert to WebP״ (אפשר לשנות את שאר ההגדרות לפי ״כלל ברזל לכיווץ תמונות״ שנמצא בהמשך המדריך)
- לחצו על כפתור “Select Files” ובחרו אתהתמונות שברצונכם לכווץ מהמחשב
- המתינו שכל התמונות יסיימו לעבור כיווץ
- לחצו על "Download Zip" כדי להוריד את כל התמונות המכווצות
- סיימתם! עכשיו אפשר להעלות את התמונות המכווצות לאתר שלכם
כלל ברזל לכיווץ תמונות באתר:
כדי להבטיח שתמונות באתר שלכם יהיו גם איכותיות וגם יעזרו לשמור על מהירות האתר, אני ממליץ להגדיר את הכיווץ כך:
- כיווץ של 85%: זהו אחוז דחיסה שמקטין את גודל התמונה מבלי לפגוע יותר מדי באיכותה.
- רוחב מקסימלי של 1920 פיקסלים: זהו הרוחב המומלץ עבור תמונות בגודל מלא באתרים.
- המרה לפורמט WebP: פורמט זה יעיל מאוד עבור דפי אינטרנט, והוא משפר את מהירות הטעינה בצורה משמעותית.
איך לוודא שהתמונות אחרי הכיווץ בגודל המתאים לאתר
לפעמים, גם לאחר כיווץ התמונות, המשקל שלהן עדיין יכול להיות גבוה מדי ולפגוע במהירות טעינת האתר. במקרים כאלה, חשוב לבדוק אם המשקל והגודל של התמונות שלכם עומדים בהמלצות המומלצות לאתרים. אם המשקל גבוה מדי, תוכלו לשנות את ההגדרות – למשל, להקטין את הרוחב המקסימלי או להעלות את אחוזי הדחיסה כדי להקטין עוד את התמונות.
גדלי תמונה מומלצים:
סוג תמונה | רוחב מקסימלי (פיקסלים) | גודל קובץ מומלץ (KB) |
---|---|---|
תמונה בגודל מלא | עד 1920 | 300KB-500KB |
תמונה בתוך פוסט | 800-1200 | 100KB-300KB |
תמונה קטנה (לוגו/אייקון) | 100-300 | 30KB-100KB |
- תמונות בגודל מלא (Full-screen): רוחב של עד 1920 פיקסלים יספק איכות טובה מבלי להכביד על מהירות האתר.
- תמונות בתוך פוסטים: עדיף לבחור רוחב של 800-1200 פיקסלים עבור תמונות בפוסטים, כדי לוודא שהן לא גדולות מדי.
- תמונות קטנות (לוגו או אייקון): יש להקפיד על גודל קטן יותר – 100-300 פיקסלים.
מה עושים אם התמונה עדיין גדולה מדי?
אם לאחר הכיווץ התמונה עדיין כבדה ולא עומדת בהמלצות, תוכלו לשנות את ההגדרות:
- שינוי גודל: הפחתת הרוחב המקסימלי יכולה להקטין את משקל התמונה מבלי לפגוע משמעותית באיכות.
- הגברת הדחיסה: אם התמונה עדיין גדולה, אפשר להגדיל את אחוזי הדחיסה. שימו לב שככל שהדחיסה גבוהה יותר, כך המשקל קטן – אך האיכות יכולה להיפגע. המלצה: לא לעבור את ה-70%, כלומר לא פחות מ70% באיכות התמונה.
מומלץ לשמור על דחיסה באזור ה-80%, ואם יש צורך להגדיל את הדחיסה, עדיף לא לרדת מתחת ל-70%. חשוב מאוד לוודא שהתמונה עדיין נראית טוב וברורה. איכות התמונה היא קריטית לחוויית המשתמש, ולא כדאי לפגוע בה יותר מדי.
טיפ לסיום לאחר שביצעתם כיווץ והגדרות, תמיד מומלץ לבדוק את התוצאה: אם התמונה נראית טוב והקובץ קטן מספיק, היא מוכנה להעלאה לאתר!