איך להקטין את גודל התמונות בלי לפגוע באיכות התמונה

על מנת לשפר את חווית הלקוח באתר של העסק שלך מומלץ מאוד בהוספת תמונות איכותיות ומענינות אשר ימתגו את העסק שלך בדיוק במקום שתרצה. כפי שהיה נהוג להגיד בעבר שתמונות שוות אלף מילים, היום בכל דף אינטרנט כמעט משולבות תמונות משכנעות שאמורות לשפר את החוויה של הלקוחות שלנו. הבעיה היא שתמונות איכותיות שוקלות הרבה והן משפיעות על מהירות עליית האתר לאוויר וזה האחרון אחד הגורמים המשפיעים ביותר על נטישת אתרים ואיבוד לקוחות. אם כך, כל מה שנותר לנו הוא לצמצם את גודל התמונה על מנת שיכנס נכון למקום המתאים הן בגודל הפיזי שלה והן במשקל ובכך לשפר את ביצועי האתר.

אז מה בעצם משפיע על גודל הקובץ של התמונה?

תמונה דיגיטלית המיוצגת בקובץ bitmap בנויה מנקודות הנקראות פיקסלים. לכל פיקסל יש צבע שמיוצג משילוב של שלושה צבעים: אדום, ירוק, כחול.  כל פיקסל מאוחסן בשלושה Bytes. כל תמונה כזאת מכילה מיליוני פיקסלים שמאוחסנים במיליוני Bytes על המחשב שלנו ובאתר. כאשר אנחנו מצלמים במצלמה או בטלפון המכיל מצלמה של כ- 10MP (מגה פיקסל),, למעשה אני מייצרים קובץ של 10 מיליון פיקסלים שזה אומר כ- 30 מיליון בייטס (Bytes). כדי לאחסן קובץ כזה, זה גוזל מאיתנו מקום רב אבל יותר מזה זה משפיע על ביצועי האתר שלנו כאשר אנחנו צרכים לשלוף את התמונה הזאת מהזיכרון מהשרת של האתר שלנו, בכל פעם שהדף בו הוא מופיע עולה מחדש.

אז מה אנחנו יכולים לעשות על מנת לשפר את מהירות העליה של התמונה מהשרת ולשפר את ביצועי האתר?

להלן  5 דרכים להקטנת תמונות ללא פגיעה משמעותית באיכות התמונה:

1. הקטנת גודל התמונה בהתאם לגודל המתאים באתר

רוב המצלמות המודרניות כיום מכילות מעל 5 מיליון פיקסלים, מה שאומר שבמקרים רבים גודל הקבצים גדול מ- 5 מיליון פיקסלים. תצוגה של הקבצים שלנו במחשב האישי לא מצריך יותר מ – 2-3 מיליון פיקסלים לכל המסך (Full HD מכיל 1980*1080 פיקסלים שזה כ-2 מיליון פיקסלים) ולכן ברוב המקרים לא צריך תמונה כל כך גדולה (גודל התמונה מותאם לגודל הקובץ). בוודאי אם לוקחים בחשבון שלמעלה מ-50 אחוז מהלקוחות שלנו נכנסים לאתר שלנו דרך הטלפון הנייד בו המסך קטן יותר ולכן מצריך קובץ קטן יותר. חשוב לבדוק את גודל התמונה הסופית באתר ובהתאם לזה להקטין הקובץ. ברוב המקרים רוחב התמונה באתר בסביבות 500-800 פיקסלים כשמדובר על תמונה איכותית שתופסת את כל רוחב המסך של מחשב נייד איכותי מדובר על גודל שעד 1980 פיקסלים. הדרך הטובה ביותר להקטין את התמונה היא בעזרת תוכנות גרפיות כמו Photoshop Adobe  או תוכנות מקוונות באינטרנט כמו https://resizeimage.net/ ואחרות. ניתן למצוא עוד תוכנות רבות מתאימות באינטרנט.

2. שינוי הפורמט של התמונה שיתאים למטרה הסופית ויאפשר הקטנה של הקובץ

ישנם מספר סוגים של קבצי תמונות מסוג Bitmap המקובלים בשוק:

• JPEG– קובץ תמונה הניתן לדחיסה ברמות שונות, מיוצר ע"י רוב המצלמות, מאפשר דחיסה באיכות טובה עם מינימום איבוד איכות
• BMP– קובץ תמונה לא דחוס של ה- Windows
• TIFF– קובץ תמונה לא דחוס
• Gif – קובץ דחיסה ללא איבוד מידע אבל איכותו מוגבלת בגלל 256 הצבעים שהוא מכיל
• PNG– דומה לקובץ GIF אבל ללא זכויות יוצרים, קובץ דחיסה ללא איבוד מידע

לכל אחד מהקבצים יש את היתרונות והחסרונות מבחינת חדות, איכות הצבעים אבל לכל אחד מהם יש משקל שונה של הקובץ ולכן ניתן להשתמש בהם בהתאם למטרה הסופית של הקובץ. כאשר מדובר על קבצים של צילומים איכותיים עדיף להשתמש בקבצי JPEG  אותם ניתן לדחוס בצורות שונות ולהגיע לקבצים קלים ובאיכות טובה מאוד תוך כדי איבוד איכות מינימלית של קובץ המקור (תלוי כמובן ברמת הדחיסות). ניתן לדחוס קובץ JEPG עד עשירית מגודל קובץ המקור. מצד שני כאשר יש לנו קבצים גרפיים או תמונות עם פחות צבעים ניתן בהחלט להשתמש בקבצי PNG או GIF. קבצי PNG הם בעלי יכולת לדחיסה ללא איבוד מידע, אך יכולת הדחיסה שלהם מוגבל ובסופו של דבר גודל הקובץ יכול לקטון עד חצי מגודלו המקורי. לכן, בחירת הפורמט בהחלט יכול להשפיע על הגודל הסופי של הקובץ.

3. הקטנת הרזולוציה

הקטנת רזולוציה של התמונה היא הדרך הטובה ביותר להוריד משקל וגודל של תמונה. כפי שכתבתי למעלה, רוב המצלמות כיום מספקות תמונות עם רזולוציה מאוד גבוהה וגודל סופי גדול בהרבה מהגדלים הנצרכים באתרי האינטרנט. אם ניקח תמונה בגודל 3000   X 1800  ונקטין אותה לחצי 1500 X 900 נקטין את גודל הקובץ לחצי ועדיין נקבל תמונה באיכות גבוהה מאוד גם בגודל של מסך מלא.

4. הקטנת עומק הצבע

עומק צבע מייצג את מספר הגוונים של התמונה המיוצגים במחשב ולכן הוא גם משפיע על גודל הקובץ. עומק צבעים של 16 או 32 ביט יכולים מאוד לעזור לאיכות תמונות הצבע שלנו כאשר אנחנו עומדים להדפיס אותם על נייר צילום לגדלים של A4 ומעלה ובוודאי כשמדובר על פוסטרים אבל כאשר מדובר על תמונות לאתר אינטרנט, ברוב המקרים לא צריך עומק צבע יותר מ-8 ביט דבר שיכול לחסוך נפח ומשקל רב של הקובץ. את עומק הצבע ניתן לשנות בעזרת ה – Photoshop Adobe או תוכנות גרפיות נוספות.  

5. חיתוך התמונה לחידוד המסר והקטנת התמונה

אופציה נוספת להקטנת גודל התמונה ומשקלה הוא לחתוך את התמונה בצורה מדוייקת יותר, אפילו מעט. חיתוך כזה גם יקטין אותה וגם יחדד את המסר. במקרה כזה, איכות התמונה לא תשתנה, מצד שני החיתוך שלכם יכול לחדד את המסר או החוויה של התמונה.

לבניית אתרים מעוצבים עם חווית משתמש מדהימה לחץ כאן