שמירת תמונות לאתר אינטרנט

זמן הטעינה של דף אינטרנט מהווה גורם משמעותי בהחלטתו של הגולש האם לעזוב את הדף מיד לאחר הגיעו (Bounce Rate),

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

גוגל מודדת את הנתון הזה ואת הזמן הממוצע של הגולש באתר שלכם, אם הזמן הממוצע יהיה קצר מאוד וגולשים רבים יצאו מהאתר כאשר ביקרו דף אחד בלבד,

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

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

ישנם מספר פורמטים לקבצי תמונות :

JPEG

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

פורמט זה מומלף לשמירה של תמונות עם הרבה צבעים, צללים ומעברי צבע.

GIF

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

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

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

PNG

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

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

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

1. פיתחו את התמונה בפוטושופ.

2. בתפריט FILE ביחרו Save for Web או (Alt+Shift+Ctrl+S) – בתוכנות אחרות יתכן והפקודה תיקרא Export.

מכאן נמשיך עבור כל סוג תמונה בנפרד

תמונה עם הרבה צבעים:

3. ביחרו בפורמט JPEG

4. Progressive – אין השפעה על איכות התמונה, אולם סימון V לצד אפשרות זאת יטען את התמונה מיד באופן מטושטש ויחדד אותה לאחר מכן, ללא סימון אפשרות זאת התמונה תיטען

שורה אחר שורה.

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

- תמונה לתצוגה בדף אינטרנט צריכה לשקול 20-30KB

- תמונת רקע צריכה לשקול עד 5KB

- תמונה לתפריט עליון צריכה לשקול כ-40KB

- תמונות של אמנות או צילומים מיוחדים יכולים להיות כבדים יותר כי הגולש מצפה לתמונות גדולות ואיכותיות.

6. לאחר שמצאתם את האיכות הרצויה ליחצו על Save

תמונה עם מעט צבעים או גרפים:

3. ביחרו בפורמט GIF

4. אם חלקים בתמונה שקופים סמנו V ליד האפשרות Transparency (אם לא תסמנו חלקים אלו יהפכו ללבנים).

5. ביחרו את מספר הצבעים הנמוך ביותר שעדיין יאפשר להציג את התמונה באופן סביר.

6. אם התמונה תשמש לרקע באתר נסו להוסיף מעט lossy אך עדיין לשמור על איכות תמונה סבירה.

7. לאחר שמצאתם את האיכות הרצויה ליחצו על Save