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

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

18 ינואר 2012

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

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

כדי לנצל את הכוח שטמון בשיתוף התמונות, הנה כמה קוים מנחים:
שימו לב – בחלק מהמאפיינים קיים עדכון בעקבות שינוי התצוגה של תמונות (7/2/2012):

תמונות בפרופורציה של 4:3 מוצגות הכי גדול על הפיד

התמונות נדחסות בפיד לתוך מסגרת מקסימלית של 300×225 פיקסלים. כל פרופורציה אחרת תגרום לתמונה להיראות צרה יותר ו/או נמוכה יותר.

 

התמונות על הפיד גדולות מספיק כדי להכיל הרבה טקסט קריא

הגודל המקסימלי של תמונה הוא כמעט גודל של באנר ריבועי קלאסיץ זה ענק.
בזמן שפייסבוק מגבילים את גובה הסטטוס הטקסטואלי ל-7 שורות – התמונה יכולה להכיל 16 שורות של טקסט באותו גודל פונט.
אם המסר קצר – הוא יכול להיות מ-א-ד גדול. באתר FunStat.us (שלי) אפשר ליצור סטטוסים ענקיים ע"י שימוש בתמונות. אני מתנצל בשם כל מי שמנצל את התכונה הזו לרעה.
אם בתמונה יש מסר טקסטואלי, גם אם הוא רק משני – אפשר לוודא שהוא קריא גם בתמונה המוקטנת על הפיד.

התמונות הגדולות – 720×960

התמונות לא עוברות את רוחב 960, ולפי כלל הפרופורציה 4:3 – מתקבלת המידה האופטימלית.
אם מעצבים תמונה מדוייקת ברמת הפיקסל או לגודל פונט מסויים – הגודל המירבי המומלץ הוא 960×550. למה? כי פייסבוק מקטינים את גובה התמונה לפי גודל הדפדפן, כך שיישאר קצת רווח למעלה וגם למטה כדי שיראו את התגובה הראשונה. נכון להיום כ-40% משתמשים ברזולוציה 768. עבורם – תמונות בגובה מעל 550 פיקסלים (בסינון הרווחים וסרגלי הדפדפן וכו) יצומצמו בגובהן, ולכן וגם ברוחבן, כדי לשמור על פרופורציה.

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

רקע לבן מתמזג עם המסגרת

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


בתמונה הגדולה, אם תוודאו שרוחבה המקורי הוא 960 ומעלה, והגובה מתחת ל-550 – אצל רוב המשתמשים התמונה הגדולה תוצג בלי הרקע האפור, והאימפקט מרשים.

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

 

היזהרו מהפינות

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

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

אפשר לספר סיפור בהמשכים

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

Thumbnails של עמודי אתר – ריבועיים

כשמישהו משתף עמוד מהאתר שלכם, פייסבוק מוצאים בעמוד תמונה המתאימה לשיתוף. אם מכוונים את פייסבוק לתמונה הנכונה – היא זו שתופיע כברירת מחדל.  כך עושים את זה.
התמונות של שיתופי עמודים חיצוניים מוצגות בגודל מקסימלי של 90×90, אז כדאי שהמקור יהיה ריבועי אם רוצים שיתפוס כמה שיותר שטח.

אם למישהו יש עוד טיפים – ספרו ואשתף.

תגובות

מאת De-Panther:

סחטיין על העבודת חקר.

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

מאת ענת:

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

מאת הילה:

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