כל מעצב חייב לצבור מספר מיומנויות שיסיעו לו בתזרים העבודה ויישפרו את התוצרים שלו. אחת מהן קשורה לאופטימיזציה של תמונות. אתרי אינטרנט חייבים לכלול תמונות כדי להוסיף עניין ולגרום למבקרים באתר לשהות בו ככל האפשר. הבעיה היא שתמונות שלא עברו מיטוב (אופטימיזציה) לא רק שייאטו את האתר, אלא יזיקו לחוויית המשתמש ולדירוג במנועי החיפוש. במדריך זה נלמד אודות סוגי פורמטים של קבצים ונסביר כיצד למטב תמונות לאינטרנט באמצעות כלים וטכניקות דחיסה.
למה אופטימיזציה כל כך חשובה
לפני שניגש לכלים למיטוב תמונות לרשת כדאי לדעת מדוע נושא זה חשוב.
זמן טעינה מהיר - קבצים גדולים ייאטו את האתר שלכם ויגדילו משמעותית את הסיכוי לנטישה עוד לפני הטעינה שלו.
דירוג במנועי חיפוש - עמודים שנטענים מהר מדורגים גבוה יותר במנועי חיפוש.
חוויית משתמש משופרת - גלילה מהירה וחלקה באתר תגדיל את הסיכוי שמבקרים יישארו באתר זמן רב יותר.
על פורמטים לקבצים
פורמט של תמונה קובע את איכות ונפח הקובץ. באינטרנט משתמשים בארבעה פורמטים עיקריים של תמונות: JPEG, PNG ,GIF, ו-WebP. JPEG - פורמט לדחיסת תמונות שנחשב לאחד הנפוצים והיעילים. הפורמט מכיל אלגוריתם יעיל ביכולתו לשמר מידע, אך הדחיסה גם גורמת לאיבוד נתונים. הפורמט מתאים לשמירת תמונות בעלות טווח צבעים רחב. PNG - פורמט נפוץ התומך בשקיפות ובדחיסה ללא איבוד איכות. הפורמט יעיל בעיקר בתמונות בעלות שטחי צבע רציפים רבים. מתאים בין היתר לשמירת סמלים וסמלילים ומאפשר שמירה בטווח צבעים נמוך לחיסכון בנפח. ניתן לצמצם את נפח הקובץ בעזרת ייצוא ל-8 סיביות המצמצם את טווח הצבעים, אך בפועל פוגע באיכות התמונה. כדי לייצא את הקובץ באופן זה, בחלון הייצוא בפוטושופ יש לסמן את האפשרות Smaller File (8 Bit). באילוסטרייטור, בחלון Export for Screens יש לבחור בפורמט PNG8. GIF - פורמט ותיק זה תומך בשקיפות ומתאים בעיקר לתמונות פשוטות עם מעט צבעים מאחר והוא מוגבל ל-255 צבעים בלבד. קובצי GIF בעלי נפח קטן ותומכים באנימציה, מה שהופך אותם לאידיאליים לשימוש באינטרנט.
מאמר מפורט אודות פורמטים אלה ופורמטים אחרים. WebP - פורמט בקוד פתוח מבית Google שתומך בשקיפות, אנימציה טווח צבעים רחב. פורמט זה מהווה תחרות ישירה לפורמטים GIF, PNG ו-JPEG מאחר והוא מייצר קבצים הקטנים פי 3 ויותר מפורמטים אלה.
מאמר מפורט אודות פורמט זה.
בחירה בפורמט הנכון לשמירה לרשת
כאמור, לכל פורמט יתרונות וחסרונות בעוד GIF תומך באנימציה ושקיפות הוא מוגבל ל-255 צבעים ולכן נפח הקבצים שהוא מייצר נמוך ובהתאם איכות הקבצים. פורמט PNG מאפשר לייצר קבצים באיכות גבוהה מ-GIF אך לא תומך, נכון לכתיבת שורות אלו, באנימציה. כאמור, ניתן לשמור קובצי PNG באיכות גבוהה (אך על חשבון נפח הקובץ) ובאיכות נמוכה יותר התומכת בטווח צבעים מצומצם, אך בעל נפח קטן יותר. פורמט JPEG לעומת זאת אינו תומך בשקיפות אך מאפשר דחיסה גבוהה ועדיין על חשבון איכות. פורמט WebP נחשב לפורמט העתיד מאחר והוא תומך בשקיפות ובאנימציה ובדחיסת קובץ עם וללא איבוד נתונים. בנוסף, חברת Google נוטה לקדם דפים בהם נעשה שימוש בפורמט זה. יחד עם זאת פורמט זה לא מספיק נפוץ כמו שאר הפורמטים. מאמר נרחב אודות פורמט זה.
בשורה התחתונה: הנטייה האוטומטית לשמור קבצים בפורמט JPEG היא טעות של חובבנים. הדחיסה של הפורמט מיושנת ופחות יעילה מלמשל WebP והוא אינו תומך בשקיפות ובעומק צבע גבוה מ-8 סיביות. מעבר לפינה מספר מחליפים איכותיים לפורמט זה (למשל JPEG XL). הסיבה היחידה שהפורמט עדיין שולט היא שכל התוכנות תומכות בו ולכן נחשב לסטנדרט. האידיאל הוא פורמט בעל דחיסה גבוהה תוך שימור האיכות - אבל לשם כך צריך גישה שונה אותה מנסים ליישם בפיתוחים שיוצגו בקרוב.
תמונה מרובת פרטים - נפח הקובץ במקור 10.3 Mb בפורמט JPEG באיכות מירבית
PNG8 | PNG24 | GIF | WebP | JPEG-XL | JPEG |
12 | 30.5 | 7.2 | 1.8 | 2.4 | 3.7 |
כלים לדחיסת קבצים
רשת האינטרנט מציעה דוחסי תמונה מקוונים וגם מספר אפליקציות שאינן תלויות בחיבור לאינטרנט. על אף שתוכנות adobe יודעות לייצא קבצים ברמות דחיסה ובאיכויות שונות - הן עדיין לא משתוות לכלים חיצוניים. האתרים הבאים ייספקו מענה מלא לאופטימיזציית קבצים לאתרי אינטרנט. Dmarketingacademy - אתר חינמי זה תומך בכל הפורמטים הנפוצים ומאפשר דחיסה גבוהה תוך פגיעה מינימלית באיכות התמונה. Squoosh - כלי זה בפיתוח Google מציג גישה אחרת וידיותית לדחיסת קבצים. ראשית ניתן לבחור בין מגוון רחב יותר של פורמטים, לבחור במידת הדחיסה ובאפשרויות נוספות שיכולות לצמצם את נפח הקובץ, כמו צמצום צבעים. במרכז החלון פס גרירה המאפשר להציג את התמונה לפני ואחרי הדחיסה. האתר מצליח לצמצם את נפח הקבצים באופן מרשים למדי ולשמר את איכות הקובץ עד לסף מסויים. לאתר קיימת גירסת תוכנה למק, חלונות ולינוקס להורדה חופשית.
מאמר מלא על כלים לדחיסת תמונות