מידע ומאמרים

מידע ומאמרים בתחומי ניהול, בנייה ותחזוקת אתרי וורדפרס.

אופטימיזציה לתמונות (עבור אתרי אינטרנט)

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

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

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

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

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

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

tinyjpg.com
tinypng.com
compressor.io
kraken.io/web-interface
www.imageoptimizer.net/Pages/Home.aspx
imageoptim.com

תוסף שניתן להתקין באתרי וורדפרס, התוסף דואג לכווץ את התמונות כאשר מעלים אותם לאתר + ניתן גם לתקן תמונות קיימות:

wordpress.org/plugins/wp-smushit