תמונות – איזה, מתי ואיך?

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

בכנס smashing magazine  שהייתי בו עם לאה במרץ 2014, אחת ההרצאות הייתה של גיא פודג’רני ודיברה על נתוני שימוש בתמונות באתרי אינטרנט, הסוגים השונים של פורמטים של תמונות ואפשרויות הכיווץ שלהם (אפשר לקרוא פה על ההרצאה). עברה מאז כמעט שנה והנה לפני כמה שבועות נתקלתי באינפוגרופיקה שמתארת את סוגי הפורמטים השונים של התמונות ואופן השימוש בהם למטרות השונות:

Source: WhoIsHostingThis.com

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

לכיווץ קבצי PNG תמיד השתמשתי ב tinypng. הכלי חינמי, מאוד קל לשימוש – פשוט גוררים את הקובץ לעמוד ומקבלים קובץ חדש דחוס והרבה יותר קל. הקובץ שומר על האיכות שלו והתצוגה שלו באתר האינטרנט נראה זהה לקובץ הלא מכווץ. שימו לב – כשפותחים את ה PNG המכווץ בפוטושופ הוא נראה רע מאוד (אין לי מושג למה זה קורה), כדאי לשמור גם את המקורי אם רוצים לעשות עוד שינויים (או פשוט לשמור את ה PSD :-)).

תצוגה של קובץ PNG לפני כיווץ בפוטושופ:

תצוגה של קובץ PNG אחרי כיווץ בפוטושופ:

מאותו בית יוצר יש מעכשיו גם את tinyjpg המיועד לכיווץ תמונות JPEG. כמו אחיו, גם הוא עושה עבודה טובה מאוד. התמונות שומרות על איכות אבל מכווצות בחצי לפחות. כמו כן – בתהליך הדחיסה התמונה נשמרת בצורת רינדור progressive דבר שמקל על טעינת העמוד (ישנן 2 שיטות רינדור base-line – טעינה של התמונה לאט לאט מלמעלה; ו-progressive – טעינה של כל התמונה באיכות ירודה ואז חידוד שלה).

פה יש מאמר מעניין על שיטות של עיבוד תמונה עוד לפני שלב השמירה שלה כדי להגיע למשקל מינימאלי בטעינת תמונות. טיפול שכזה דורש מיומנויות שליטה מתקדמת בפוטושופ.

אחרון חביב, כדי לא לקפח את ה GIF – פה יש מאמר על דרכים לעיצוב אנימציות GIF.