תמונה שנראית מצוין בחלון של מחולל AI יכולה להיראות אחרת לגמרי בתוך אתר. הטאבלט שמסביר את הסצנה נחתך בכרטיס המאמר. הכותרת נבלעת ברקע. בנייד נשאר רק חלק מפנים. לפעמים הבעיה אינה באיכות התמונה אלא בכך שהיא נוצרה בלי לחשוב על המקום שבו ישתמשו בה.
יצירת תמונות לאתר מתחילה בהחלטה מה כל תמונה צריכה לעשות. האם היא מציגה מקום אמיתי? מסבירה רעיון? מדגימה פעולה בממשק? אחרי שמחליטים קל יותר לבחור בין צילום לבין המחשה שנוצרה ב־AI. גם הבקשה למחולל נעשית ממוקדת יותר ופחות תלויה בתיאורי אווירה כלליים.
ניקח כדוגמה עמוד של ספרייה שמסביר איך מתחילים לקרוא ספרים דיגיטליים. זו אינה גלריית תמונות. הקורא צריך להבין מה אפשר לעשות ואיפה להתחיל. התמונות יכולות לעזור לו להתמצא או להסיח את דעתו. נעבור מהרעיון לתמונה שמשתלבת בעמוד ועובדת גם במסך קטן.
שלוש תמונות עם שלושה תפקידים
בחלק שמציג את הספרייה עצמה מתאים צילום אמיתי של המקום. המבקר עשוי להשתמש בו כדי לזהות את הכניסה כשיגיע. הדמיה של מבנה נאה עם מדפי ספרים לא תעזור לו במשימה הזאת. גם אם אין בה שגיאה חזותית היא אינה מתעדת את המקום שעליו העמוד מדבר.
לפתיחת המדריך אפשר ליצור המחשה של קריאה בטאבלט בגינה. כאן המטרה היא להציג סיטואציה ולא אדם מסוים או אירוע שקרה. מחולל תמונות יכול לעזור לבחור קומפוזיציה שמתאימה לעמוד. חשוב שהצילום הריאליסטי לא יקבל כיתוב שמציג אותו כתיעוד של קוראי הספרייה.
לעומת זאת הוראה למציאת ספר בקטלוג צריכה צילום מסך של הממשק שבו משתמשים בפועל. אם מייצרים ממשק דמיוני עלולים לקבל כפתור משכנע שאינו קיים. הקורא ינסה למצוא אותו וייתקע. כאשר אין צילום מסך מתאים עדיף להסביר את הפעולה בטקסט מאשר להמציא תיעוד חזותי.
ההפרדה הזאת אינה אומרת שאסור לשלב כמה סוגי תמונות באותו עמוד. להפך. כל אחת יכולה לעשות את העבודה המתאימה לה. אין סיבה לייצר את כולן באותו כלי או לכפות עליהן אותה מידה של ריאליזם.
לפני הבקשה למחולל פותחים את העמוד
את המחשת הקריאה נרצה להציג בתחילת המדריך וגם בכרטיס שמוביל אליו. בעמוד המלא יש מקום לתמונה רחבה. בכרטיס השטח עשוי להיות כמעט מרובע. אם הדמות נמצאת בקצה אחד והטאבלט בקצה האחר קשה לשמור על שניהם בכל חיתוך.
לכן כדאי לזהות מראש מה חייב להישאר בתמונה. בדוגמה שלנו אלו הידיים והטאבלט. עץ או ספסל יכולים לעזור לאווירה אבל אינם הכרחיים להבנת הסצנה. את הפרטים החשובים ממקמים באזור שיוכל להישאר גלוי גם אם חותכים מעט מהצדדים.
בקשה התחלתית יכולה לתאר אדם בוגר קורא בטאבלט על ספסל בגינה באור יום. מוסיפים שהמכשיר והידיים נמצאים באזור המרכז ושסביבם נשאר מרווח לחיתוך. אם אין צורך בממשק קריא אפשר לציין זאת. אין סיבה לבקש מהמודל להמציא כותרת של ספר שתופיע בטעות כחלק מההסבר.
מספיק לתאר את הנושא ואת התפקיד של התמונה. רצף ארוך של תארים כמו מרהיב ומדהים אינו מחליף החלטה לגבי זווית המצלמה. כשיש מגבלת עיצוב אמיתית כדאי לתאר אותה במפורש. למשל אם הטקסט יופיע מחוץ לתמונה אין צורך לייצר בתוכה אזור ריק ענק.
אם הכותרת מונחת מעל התמונה היא צריכה להישאר טקסט של האתר. כך אפשר להגדיל אותה ולהתאים אותה לרוחב המסך. טקסט שנצרב בתוך התמונה אינו מגיב לגודל הגופן של המשתמש ועלול להיחתך יחד עם הרקע. גם היכולת של המחולל ליצור אותיות יפות אינה משנה את ההבדל הזה.
בודקים את המשמעות ולא רק אצבעות
לאחר יצירת התמונה כדאי לפתוח אותה בגודל שבו באמת תוצג. מבט מוקטן עלול להסתיר פרטים משובשים. הגדלה קיצונית יכולה לגרום להתמקד בפגמים זעירים שהקורא לא יראה. מתחילים בגודל השימוש ואז מתקרבים לאזורים שדורשים בדיקה.
בתמונת הקריאה בודקים את צורת הטאבלט ואת האחיזה בו. האם המסך פונה לכיוון שאפשר לקרוא ממנו? האם אצבע מכסה את רוב התצוגה? השאלה אינה רק אם מספר האצבעות נכון. תנוחה לא הגיונית יכולה להפוך את התמונה למוזרה גם כשכל חלק בנפרד נראה תקין.
כדאי לבחון גם פרטים שהמודל הוסיף בלי שהתבקש. לוגו דומה למותג מוכר או כיתוב על כריכת ספר עשויים לשנות את משמעות התמונה. אם אין להם תפקיד אפשר להסיר אותם או ליצור גרסה פשוטה יותר. פחות פרטים אקראיים מקלים על התמונה להשתלב בתוכן.
את צילום המסך בודקים בדרך אחרת. הוא צריך להתאים לגרסת הממשק שמתוארת במדריך. מסתכלים אם מופיעים בו פרטי חשבון או מידע אישי שאינו נחוץ להסבר. אפשר להכין את הצילום באמצעות נתוני הדגמה ולהשאיר בתמונה רק את אזור הפעולה. אין צורך להעלות צילום מלא של חשבון אמיתי למחולל כדי לשפר את המסגרת שלו.
בצילום מסך צפוף עדיף לפעמים להציג חיתוך ממוקד ולהוסיף לידו משפט שמסביר היכן הוא נמצא במערכת. כיווץ של מסך שלם לרוחב הטלפון עלול להפוך את כל הכיתובים לבלתי קריאים. אם צריך להראות גם את ההקשר וגם פרט קטן אפשר להשתמש בשני מבטים נפרדים במקום לצפות שהקורא ינחש.
כאשר משתמשים בתצלום של אדם מוכר או בחומר שהתקבל מאחרים צריך לברר שהשימוש והעריכה מתאימים להרשאה שניתנה. יצירת קובץ חדש באמצעות AI אינה פותרת מעצמה שאלות של הסכמה או זכויות בחומר המקורי. זו החלטה הנוגעת לחומר המסוים ולא תכונה אוטומטית של כלי העריכה.
תמונה רחבה אינה חייבת להצטמצם לאותו חיתוך
עכשיו מכניסים את התמונה לעמוד ולכרטיס המאמר. אם כרטיס מרובע חותך את הטאבלט אין טעם להקטין את כל הכרטיס כדי להחזיר אותו. אפשר לשנות את נקודת המוקד של החיתוך או להכין גרסה נפרדת שמדגישה את האזור החשוב.
צריך להבדיל בין שינוי גודל לשינוי קומפוזיציה. גרסה קטנה יותר של אותה תמונה שומרת על היחסים בין כל הפרטים. חיתוך אחר משנה מה רואים. באתר רספונסיבי שתי הפעולות יכולות להיות שימושיות אבל הן פותרות בעיות שונות.
באמצעות srcset ו־sizes אפשר להציע לדפדפן כמה גדלים של אותה תמונה. הוא בוחר מקור שמתאים לתנאי התצוגה שלו. כאשר רוצים להציג בנייד חיתוך שונה ולא רק קובץ קטן יותר משתמשים במבנה מתאים כמו picture. ההבחנה הטכנית חשובה גם למי שאינו כותב את הקוד: יצירת קובץ נוסף אינה מספיקה אם האתר לא מציג אותו במקום הנכון.
אם תהליך ההעלאה מייצר כמה מידות, בדקו שהממשק משתמש בגרסה המתאימה בכל מקום. גם ברכיב שנכתב ב־React אפשר בטעות להגיש את קובץ המקור לכל הכרטיסים. לטלפון עלול להגיע קובץ גדול מהנדרש. בחירה קטנה מדי תיצור טשטוש במסך חד.
איך בוחרים בין WebP ל־AVIF
פורמט התמונה הוא הדרך שבה המידע נשמר בקובץ. WebP ו־AVIF יכולים לאפשר קבצים יעילים יותר לתמונות רבות לעומת פורמטים ותיקים. שניהם נתמכים בחיפוש התמונות של Google. אין בכך הבטחה שקובץ מסוים יהיה קטן יותר בכל הגדרה או ייראה טוב יותר בכל תוכן.
לתמונת הקריאה כדאי להשוות את הקובץ המיוצא למקור. מתמקדים במעברי האור בין העלים ובקצוות המכשיר. דחיסה חזקה מדי עשויה לפגוע באזורים האלה גם כאשר הפנים עדיין נראות סבירות. בוחרים את התוצאה ששומרת על האיכות הנחוצה לעמוד ולא רק את הקובץ הקטן ביותר.
צילום מסך דורש תשומת לב אחרת. אותיות דקות וסמלים קטנים יכולים להיטשטש בדחיסה שמתקבלת היטב בתצלום. לפעמים קידוד ללא אובדן או פורמט אחר יתאימו יותר. אין צורך להמיר כל קובץ לאותה הגדרה רק כדי לייצר אחידות בספריית המדיה.
אין משקל יחיד שמתאים לכל תמונה. באנר גדול וצילום מסך קטן אינם אותה משימה. מתחילים ממידות שמתאימות לשימוש ובודקים את המשקל ואת המראה יחד. הגדלה של תמונה קטנה אינה משחזרת מידע שלא היה בה גם אם היא מייצרת קובץ בעל ממדים מרשימים.
חשוב לבדוק גם את מסלול ההצגה. מערכת שמייצרת AVIF צריכה לדעת להגיש אותו לדפדפנים המתאימים ולהציע חלופה כאשר היא נדרשת. שינוי הסיומת של שם הקובץ אינו המרה. התוכן עצמו צריך להיות מקודד בפורמט שהשם מציין.
הטקסט החלופי נקבע לפי התפקיד בעמוד
טקסט חלופי אינו רשימת כל העצמים שנמצאים בתמונה. הוא צריך להעביר את המידע שחשוב בהקשר הנוכחי. בתמונת פתיחה שמדגימה קריאה דיגיטלית אפשר לתאר אדם קורא ספר בטאבלט. אין צורך לפרט את מספר המדפים ברקע אם הם אינם חלק מההסבר.
אם התמונה היא רק קישוט והמשמעות כבר מופיעה בטקסט הסמוך ייתכן שמתאים להשאיר לה טקסט חלופי ריק. לעומת זאת תמונה שהיא התוכן היחיד של קישור צריכה להעביר את יעד הקישור או את הפעולה. שם של חפץ בתמונה אינו בהכרח שם שימושי לפעולה.
בצילום המסך של הקטלוג המידע החשוב עשוי להיות מיקום כפתור החיפוש. אפשר לתאר את מה שהוא מראה ולצרף הוראות בטקסט רגיל לידו. אם הצילום כולל רצף של כמה שלבים אין צורך לדחוס את כולם לתוך שדה אחד ארוך. ההסבר צריך להיות נגיש גם למי שאינו רואה את התמונה.
כלי AI יכולים להציע תיאור ראשוני. חלק מהמערכות לבניית אתרים עם AI משלבות עזרה כזאת בתוך עריכת התוכן. ההצעה עדיין צריכה לעבור בדיקה מול העמוד. המודל יכול לזהות טאבלט בלי להבין שהמדריך עוסק דווקא בקריאה ולא ברכישת מכשירים.
לצד הטקסט החלופי אפשר להוסיף כיתוב גלוי שמבהיר שמדובר בהמחשה שנוצרה ב־AI. הכיתוב צריך לעזור לקורא להבין מה הוא רואה. אין להציג סצנה שנוצרה כתמונה מתוך סדנה אמיתית או כצילום של אדם שהשתמש בשירות.
הבדיקה האחרונה נעשית באתר
Google נעזרת גם בטקסט הסמוך לתמונה כדי להבין את הנושא שלה. לכן צילום המסך שייך ליד ההוראה שהוא מסביר ולא בסוף העמוד אחרי דיון אחר. שם קובץ קצר ותיאורי יכול לעזור לארגון. דחיסת מילות מפתח לטקסט החלופי אינה הופכת תמונה לרלוונטית יותר.
תמונה בעלת תפקיד תוכני צריכה להיות מוטמעת באופן שהדפדפן ומנוע החיפוש יכולים לזהות. Google מגלה תמונות דרך רכיבי תמונה רגילים ואינה מאנדקסת תמונות רקע של CSS. זו סיבה נוספת שלא להפוך כל צילום מסך חשוב לרקע של תיבת עיצוב.
גם אופן הטעינה משנה. לתמונה המרכזית שכבר נראית בתחילת העמוד בדרך כלל לא מתאים להמתין לטעינה עצלה. תמונות בהמשך יכולות להיטען סמוך להגעה אליהן. הגדרת מידות לתמונה עוזרת לשמור לה מקום ומפחיתה את הסיכוי שהטקסט יקפוץ כשהקובץ מגיע.
פותחים את העמוד הציבורי בנייד ובמחשב ובוחנים את החיתוך ואת הקריאות. לא מסתפקים בתצוגת העריכה. גם במדריך על בדיקת אתר Lovable לחיפוש ההבדל הזה חשוב: מה שקובע הוא התוכן שהכתובת הסופית מחזירה. בתמונות בודקים גם איזה קובץ נטען בפועל.
שאלות על תמונות AI באתר
האם תמונה שנוצרה ב־AI תורמת לקידום יותר מתצלום?
עצם היצירה ב־AI אינה יתרון קידום מובטח. מה שחשוב לקורא הוא ההתאמה לעמוד והמידע שהתמונה מוסיפה. מבחינה טכנית צריך לדאוג שהיא תהיה ניתנת לגילוי ותיטען בצורה תקינה. גם תמונה מקורית ומוצלחת אינה מבטיחה הופעה בתוצאות חיפוש.
האם אפשר להשתמש באותה תמונה בכמה עמודים?
כן אם היא מתאימה לתפקיד שלה בכל אחד מהם. כדאי להשתמש באותה כתובת קובץ כשהמקור זהה ולא להעלות שוב עותקים מיותרים. הטקסט החלופי עשוי להיות שונה בהתאם להקשר. תמונה שמסבירה פעולה בעמוד אחד יכולה להיות קישוט בלבד בעמוד אחר.
מתי עדיף ליצור תמונה חדשה במקום לתקן את הקיימת?
אם החיתוך מסתיר פרט משני אפשר לרוב לתקן את ההצגה. אם הסצנה עצמה אינה מתאימה למסר עדיף לחזור לרעיון. סדרה של תיקונים קטנים לא תהפוך תיעוד דמיוני לצילום אמיתי ולא תהפוך קומפוזיציה עמוסה להסבר פשוט. לפעמים בקשה חדשה ומצומצמת חוסכת יותר עבודה מעוד סבב ליטוש.
