הקטנת משקל תמונה היא הדרך הכי מהירה לגרום לאתר להיטען מהר יותר, כי ברוב העמודים התמונות הן החלק הכבד ביותר. לא צריך תוכנה יקרה ולא צריך לוותר על איכות: מקטינים את המידות, דוחסים ובוחרים פורמט נכון. כאן אני מראה כמה זה חוסך בפועל ואיך עושים את זה.
אל תתנו למהירות לעכב אתכם. השאירו פרטים לשדרוג האתר.
למה משקל התמונה משנה לאתר
כל תמונה בעמוד היא קובץ שהדפדפן חייב להוריד לפני שהוא מציג אותה. כשהקובץ כבד, הגולש רואה מקום ריק או תמונה שמתמלאת לאט, ובטלפון עם קליטה חלשה הוא פשוט עוזב. התמונה הראשית בראש העמוד היא בדרך כלל גם האלמנט שגוגל מודדת כדי לקבוע כמה מהר העמוד נטען.
הטעות שאני רואה הכי הרבה היא תמונה שהועלתה ישר מהמצלמה או מהטלפון, ברוחב של 4,000 פיקסלים, בזמן שהאתר מציג אותה ברוחב של 700. גוגל מסבירה שתמונה גדולה מהגודל שבו היא מוצגת נראית בסדר, אבל מבזבזת לגולש נתונים ומאטה את העמוד.
כמה משקל אפשר לחסוך
לקחתי צילום ברוחב 2,544 פיקסלים, ששמור כמו שמצלמה או תוכנת עריכה שומרות בדרך כלל, באיכות גבוהה מאוד. אחר כך עשיתי עליו שני צעדים פשוטים ומדדתי את המשקל אחרי כל אחד מהם.
הקובץ המקורי שקל 269 קילובייט. רק הקטנת המידות לרוחב 1,200 פיקסלים הורידה אותו ל-93, כלומר פחות משליש. אחרי המרה לפורמט WebP הוא ירד ל-38 קילובייט, בערך שבעה אחוזים מהמשקל המקורי. בעין, שלוש הגרסאות נראות אותו דבר על מסך של מחשב נייד.
המשמעות פשוטה: הקטנת משקל תמונה לא דורשת פשרה על האיכות, אלא רק להפסיק לשלוח לגולש פיקסלים שהוא בכלל לא רואה. בעמוד עם עשר תמונות, ההבדל הוא בין שני מגה לחצי מגה.
ארבע פעולות שמקטינות את משקל התמונה
יש ארבעה דברים שמשפיעים על משקל הקובץ, והם עובדים יחד. הסדר חשוב: קודם מקטינים מידות וחותכים, ורק אחר כך דוחסים וממירים.
הקטנת המידות וחיתוך
זה הצעד שחוסך הכי הרבה. בודקים באיזה רוחב התמונה מוצגת באתר ומקטינים אותה לרוחב כפול מזה, כדי שתיראה חדה גם במסכים צפופים. אם יש בתמונה שוליים מיותרים או רקע ריק, חותכים אותם באותה הזדמנות, וכל פיקסל שנחתך הוא משקל שנחסך.
דחיסת התמונה
דחיסת תמונות מוותרת על פרטים זעירים שהעין לא קולטת. ברוב הכלים יש מחוון איכות, ובערכים של 75 עד 85 ההבדל לא נראה בכלל. דחיסה בלי אובדן שומרת כל פיקסל, אבל חוסכת הרבה פחות, ולכן היא מתאימה בעיקר ללוגו ולגרפיקה עם טקסט.
בחירת הפורמט הנכון
לצילומים מתאים JPEG, לגרפיקה עם שקיפות התאים פעם PNG, אבל היום פורמט WebP מחליף את שניהם ושוקל פחות מכל אחד מהם. צילום ששמור בפורמט PNG הוא הטעות הכי כבדה: באותה בדיקה הוא שקל יותר מחצי מגה.
הסרת המידע הנסתר
מצלמות וטלפונים שומרים בתוך הקובץ מידע שלא רואים, כמו דגם המצלמה, תאריך ולפעמים גם מיקום מדויק. בגולש זה לא נוגע, אבל זה מוסיף משקל וחושף פרטים שלא תמיד רוצים לפרסם. רוב כלי הדחיסה מוחקים את המידע הזה אוטומטית.
איך מקטינים תמונה במחשב בלי תוכנה
במחשב Windows אפשר לעשות את זה בצייר (Paint): פותחים את התמונה, בוחרים שינוי גודל, מסמנים פיקסלים ומקלידים את הרוחב הרצוי. כשהאפשרות לשמור על יחס גובה ורוחב מסומנת, התמונה לא נמתחת. בסרטון הקצר רואים את כל התהליך.
במק פותחים את התמונה באפליקציית Preview, בוחרים בתפריט הכלים את התאמת הגודל ומקלידים רוחב חדש. בשתי הדרכים שומרים את הקובץ בשם חדש, כדי שהמקור יישאר אצלכם אם תצטרכו אותו בגודל מלא.
כלים חינמיים להקטנת משקל תמונה
כשיש הרבה תמונות, עדיף כלי שעושה דחיסה והמרה בבת אחת. אלה שלושה שאני משתמש בהם או ממליץ עליהם ללקוחות.
Squoosh
Squoosh הוא כלי חינמי של צוות Chrome בגוגל שעובד בתוך הדפדפן. מעלים תמונה, רואים את המקור ואת הגרסה הדחוסה זה לצד זה, ומזיזים את מחוון האיכות עד שההבדל נעלם. התמונה לא נשלחת לשום שרת, וזה יתרון כשמדובר בתמונות פרטיות.
TinyPNG
TinyPNG דוחס קובצי JPEG, PNG וגם WebP בגרירה אחת, גם כמה תמונות יחד. הוא לא נותן לבחור איכות, אבל ברירת המחדל שלו טובה מאוד. זה הכלי שאני שולח אליו לקוחות שמעלים תמונות לאתר בעצמם ורוצים פתרון בלי הגדרות.
ImageOptim למק
ImageOptim היא תוכנה חינמית למק שמקטינה תמונות בגרירה לתוך החלון. היא מוחקת את המידע הנסתר ודוחסת בלי לשנות את המידות, ולכן כדאי להקטין את התמונה קודם, ורק אחר כך להעביר אותה דרך התוכנה.
באתר וורדפרס לא צריך לעשות הקטנת משקל תמונה ידנית. תוסף כמו שורט פיקסל מקטין, דוחס וממיר כל תמונה שמעלים לאתר, וגם את התמונות שכבר נמצאות בספריית המדיה.
שאלות ותשובות על הקטנת תמונות לאתר
באיזה גודל להעלות תמונה לאתר?
בגודל כפול מהרוחב שבו היא מוצגת. תמונה שמוצגת ברוחב 700 פיקסלים תעלה ברוחב 1,400 לכל היותר, ותמונת רקע שתופסת את כל המסך לא צריכה יותר מ-1,920. מעבר לזה הגולש לא רואה שום הבדל, והאתר רק נטען לאט יותר.
האם הקטנה של תמונה פוגעת באיכות שלה?
לא, כשעושים אותה נכון. הקטנת המידות לרוחב שבו התמונה מוצגת לא משנה דבר בעין, ודחיסה באיכות של 75 עד 85 לא מורגשת גם בהשוואה צמודה. האיכות נפגעת רק כשמגזימים בדחיסה, ואז מופיעים כתמים וטשטוש סביב קווים חדים.
כמה צריכה לשקול תמונה באתר?
אין מספר אחד, אבל כיוון טוב הוא עד 100 קילובייט לתמונה רגילה בתוך מאמר, ועד 200 לתמונה ראשית גדולה. תמונה שעוברת חצי מגה כמעט תמיד הועלתה במידות מקוריות ולא עברה דחיסה, וכדאי לטפל בה קודם.
מה עושים עם תמונות שכבר נמצאות באתר?
לא צריך להעלות אותן מחדש. תוסף דחיסה לוורדפרס עובר על כל ספריית המדיה בהרצה אחת, מקטין, דוחס וממיר, ושומר את הקבצים המקוריים בצד. אחרי ההרצה בודקים כמה עמודים מרכזיים, ואם הכל נראה טוב, ממשיכים הלאה.
מה עוד מאט תמונות באתר
גם תמונה קלה מאטה את העמוד אם הדפדפן מוריד אותה מוקדם מדי. טעינה עצלה דוחה את התמונות שמתחת לקו הגלילה עד שהגולש מגיע אליהן, וביחד עם הקטנת המשקל היא חוסכת את רוב זמן הטעינה של התמונות.
אם אתם לא בטוחים אילו תמונות באתר שלכם הכי כבדות, שלחו לי את הכתובת ואבדוק. אגיד לכם בדיוק מה לתקן קודם, ואם מספיק תוסף אחד או שצריך לטפל גם בדברים אחרים.
