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

משך זמן קריאה: דקה אחת

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

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

Know Your File Types: When to Use JPEG, GIF, & PNG - Via Who Is Hosting This: The Blog

Source: WhoIsHostingThis.com

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

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

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

pngOriginal

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

pngTinyPNG

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

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

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