הרבה בעלי אתרים מבצעים הקטנת גודל תמונה. והיום נעבור על דרכים שונות לבצע דחיסת תמונות (אונליין, וורדפרס, פוטושופ) ומדוע כדאי לעשות זאת.
לפני שנתחיל אני רוצה להזכיר שני מאמרים רלוונטיים:
תוכן עניינים
סוגי דחיסת תמונות
דחיסת תמונות ניתן לחלק לשני סוגים:
- Lossless compression – מריצים אלגוריתם כיווץ (למשל: Huffman encoding) כך שלא מעבדים מידע. היתרון שלא פוגעים באיכות תמונה, החיסרון הוא שסוג דחיסה זה פחות יעיל.
- Lossy compression – בסוג דחיסה מריצים אלגוריתם (למשל: Transform coding) שמקריב איכות כדי להשיג כיווץ יעיל יותר.
באיזה סוג דחיסה לבחור?
היום מרבית הגולשים משתמשים בטלפונים ולכן הם יתקשו להבחין באיכות התמונות. בנוסף מהירות טעינת אתר הופכת לחשובה יותר (ומשפיעה על דירוג אורגני). לפיכך באתרים אני משתמש ב-Lossy compression. יחד עם זאת, חשוב שיהיו לכם התמונות המקוריות באיכות גבוהה.
פורמטים של קבצי תמונה
אחד הדרכים הפשוטות לבצע כיווץ היא לעבור/להשתמש בפורמט שדוחס את המידע בצורה יותר יעילה. כך למשל מעבר מ-png ל-jpg יכול להקטין את הקובץ בסדר גודל. ונכון להיום jpg הוא הפורמט הנפוץ באינטרנט. אבל כבר יש דור הבא של פורמטי קבצי תמונות. כך למשל, לפי המחקר של גוגל, קבצים בפורמט webp היו ב-34%-25% קטנים יותר ממקביליהם ב-jpg.
היום בהדרגה עוברים לפורמטים יותר מתקדמים, אבל נכון לאפריל 2022, עדיין לא כל הדפדפנים תומכים בפורמטים חדשים. הפתרון לזמן הביניים ש-ShortPixel (תוסף כיווץ תמונות לוורדפרס) ואחרים מימשו הוא בדיקה האם הדפדפן תומך ב-webp, אם כן מציג אותו, אחרת מציג jpg (כמובן שלכל קובץ jpg שמעלים, אוטומטית נוצר עותק webp).
הקטנת קובץ תמונה
אחרי שהבנו איזה סוגי דחיסה קיימים ומה החשיבות של פורמט קבצי תמונות אנו כנראה נרצה Lossy compression של קבצי jpg. ישנם מספר דרכים לעשות זאת. בואו נעבור על 3 דרכים נפוצות:
שינוי גודל תמונה בפוטושופ
ב-Photoshop ו-Lightroom אפשר לקבוע הגדרות יצוא המאפשרות הקטנת איכות ורזולוציה. בחלק הזה נראה את Save for Web של פוטושופ.
נכנסים לתפריט File, בוחרים Export ואז בוחרים ב-Save for Web. אחרי שבחרנו יופיע החלון הבא:
בצד שמאל למטה ניתן לראות את גודל ופורמט הקובץ. ובצד ימין אפשר לקבוע את איכות הקובץ ואת הרזולוציה של התמונה. ואחרי כל שינוי בפרמטרים תוכלו לראות את גודל הקובץ המעודכן.
כיווץ תמונות אונליין
כתבתי כלי לשינוי גודל תמונה אונליין ובכלי הזה אפשר לחתוך תמונה, להקטין רזולוציה ואיכות של תמונות. קישור לכלי שינוי גודל של תמונות.
הקטנת גודל תמונה בוורדפרס
יש מגוון תוספים לוורדפרס שמציעים הקטנת גודל תמונה. הם נוחים מאוד מכיוון שהכל אוטומטי. ברגע שמעלים תמונה התוסף יוצר עותקים מוקטנים (לפי סוג וכמות דחיסה שנבחרו) והם אלו שיופיעו למשתמשים. בנוסף אם באתר כבר יש הרבה תמונות, אתם יכולים להקטין את כולם. ופונקציונליות נוספת היא תמיכה ב-webp (יצירת קבצי webp ותצוגתם כאשר יש תמיכה).
התוספים הפופולריים הם ShortPixel ו-Smush. התוספים הם בתשלום עם גרסה חינמית מצומצמת. אני משתמש ב-ShortPixel באתרים עם הרבה תמונות וזה יוצא לא יקר (סדר גודל של 20$ ל-credits שמספיקים בממוצע לחצי שנה).
האם צריך לבצע שינוי רזולוציה של תמונה?
לא תמיד. צריך להבדיל בין הקטנת קובץ תמונה ע"י מעבר לפורמט יעיל יותר ודחיסה לבין הקטנת רזולוציה. וזאת מכיוון שמרבית האתרים היום הם רספונסיביים (אתר בעל תצוגה המותאמת לכל גודל מסך).
מכיוון שמרבית הגולשים היום בעולם משתמשים בטלפון, אתר שהוא רספונסיבי הפך לחובה. ואין סיבה להציג תמונה ברזולוציה זהה במחשב ובטלפון (במיוחד כאשר האינטרנט בטלפון בדרך כלל איטי יותר). לכן פלטפורמות לבניית אתרים עשו התאמות. בואו נסתכל לדוגמא על וורדפרס. מכיוון שהזכרנו את המאמר על רספונסיביות, נפתח אותו ונלחץ F12 כדי לפתוח developer tools.
כאשר נבחר את אחד התמונות עם הכלי לבחירת אלמנטים בעמוד נוכל לראות את הקוד. הנה דוגמא:
כל הקוד המסומן באפור זהו קוד של תמונה אחת בתוך פוסט. אם תסתכלו מקרוב הקוד ארוך מכיוון שיש בו הגדרות מה להציג עבור כל רוחב מסך. כך למשל בדוגמא כתוב מה להציג כאשר רוחב המסך הוא עד 1024, 300, 768, 1536 ו-1920 פיקסלים.
ברירת מחדל של וורדפרס היא 3 גדלים שונים (קטן, בינוני, גדול) בהגדרות מדיה. זאת בנוסף לגודל המקורי ותמיד אפשר לשנות את שלושת הגדלים ולהוסיף עוד גדלים. לכן אם מערכת ניהול תוכן (CMS) שאתם משתמשים בה דואגת להצגת תמונה ברזולוציה המתאימה לגודל מסך, הרזולוציה שבה מעלים את התמונות פחות משנה מכיוון שהיא אולי בכלל לא בשימוש. ובכל זאת אין טעם להעלות תמונות ברזולוציות גבוהות כגון 6,000 על 4,000. זה מוביל אותנו לשאלה הבאה:
באיזה רזולוציה להעלות תמונות לוורדפרס?
בוורדפרס תמונות רקע הם בדרך כלל בגודל 1920×1080 פיקסלים ותמונות ראשיות של מאמרים הם בדרך כלל בגודל 1200×900 פיקסלים. לכן אחרי קביעת תמונת רקע, בדרך כלל אין צורך להעלות תמונות שאורך של הצלע הארוכה גדולה מ-1200 פיקסלים.
יש גישה נוספת שבה הרזולוציה עצמה פחות חשובה וקובעים את הרזולוציה ואיכות תמונה לפי גודל הקובץ. לפי מקור זה, ההצעה היא שגודל תמונות גדולות באיכות גבוהה יהיו עד 100KB, ותמונות קטנות צריכים להיות בסביבות 30KB.
למה כדאי לבצע הקטנת גודל תמונה?
עד כה דיברנו על הקטנת תמונות ועכשיו בואו נעבור על סיבות מרכזיות מדוע כדאי לעשות זאת.
- מהירות – ככל שקבצי התמונות קטנים יותר כך כל הדף קטן יותר ונטען מהר יותר. כך למשל בגוגל קונסול ניתן לראות Core Web Vitals המציגים בין השאר בדיקות מהירות. וגודל תמונה ראשית של מאמר משפיע על מדד LCP (Largest Contentful Paint).
גוגל מציגים את הנתונים לא במקרה והם הכריזו בעבר שמהירות האתר משפיעה על הדירוג שלו. - גודל האתר – ככל שאתר גדול יותר כך זה מצריך יותר משאבים משרת אחסון אתרים (hosting). זה משפיע לא רק על גודל הכוננים אלה בסופו של דבר גם על המהירות. כך למשל אם אתם מבצעים גיבויים כל יום, ככל שהאתר גדול יותר כך הגיבוי יקח יותר מקום, זמן ובזמן הגיבוי השרת יעבוד יותר לאט.
