עזרה
התחברות

העלאת תמונות

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

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

בדף זה

העלאת תמונה בעורך ערכות הנושא

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

שלבים:

מחשב שולחני

  1. ממנהל Shopify, עבור אל חנות מקוונת > ערכות נושא.

  2. לחץ על עריכת ערכת נושא עבור ערכת הנושא שאליה אתה מעוניין להעלות תמונה.

  3. אופציונלי: אם ברצונך להוסיף תמונה לדף אחר בחנות שאינו דף הבית, לחץ על התפריט הנפתח דף הבית ובחר את התבנית שברצונך לערוך.

  4. בסרגל הצד של עורך ערכות הנושא, לחץ על המקטע או הבלוק שאליו ברצונך להוסיף תמונה.

  5. בשדה תמונה, בצע את אחת מהפעולות הבאות:

    • כדי להעלות תמונה מהמחשב שלך, השלם את השלבים הבאים:
      1. לחץ על בחר תמונה > הוסף תמונות.
      2. אתר ופתח את התמונה במחשב שלך.
      3. לחץ על סיום.
    • כדי להשתמש בתמונת מאגר חינמית מתוך Burst, השלם את השלבים הבאים:
      1. לחץ על עיין בתמונות חינמיות.
      2. אתר תמונה שבה ברצונך להשתמש.
      3. לחץ על בחר.

  6. לחץ על שמירה.

מכשיר נייד

  1. מתוך אפליקציית Shopify, הקש על הסמל תפריט.

  2. במקטע ערוצי מכירה, הקש על חנות מקוונת.

  3. הקש על נהל את כל ערכות הנושא.

  4. הקש על עריכת ערכת נושא עבור ערכת הנושא שאליה אתה מעוניין להעלות תמונה.

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

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

  7. בשדה תמונה, בצע את אחת מהפעולות הבאות:

    • כדי להעלות תמונה מההתקן שלך, השלם את השלבים הבאים:
      1. הקש על בחר תמונה > הוסף תמונות.
      2. אתר ופתח את התמונה בהתקן שלך.
      3. הקש על סיום.
    • כדי להשתמש בתמונת מאגר חינמית מתוך Burst, השלם את השלבים הבאים:
      1. הקש על עיין בתמונות חינמיות.
      2. אתר תמונה שבה ברצונך להשתמש.
      3. הקש על סיום.

  8. הקש על שמירה או על ✓.

הוספת תמונות באמצעות מטא שדות

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

הגדרת נקודת מיקוד בתמונה

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

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

תאימות נקודות מיקוד לערכות הנושא החינמיות של Shopify

אפשר להגדיר נקודת מיקוד בגרסאות הבאות של ערכות הנושא החינמיות של Shopify:

  • כל ערכות הנושא ממשפחת Horizon
  • Colorblock בגרסה 3.0.0 ואילך
  • Craft בגרסה 5.0.0 ואילך
  • Crave בגרסה 5.0.0 ואילך
  • Dawn בגרסה 7.0.0 ואילך
  • Origin בגרסה 1.0.0 ואילך
  • Publisher בגרסה 1.0.0 ואילך
  • Refresh בגרסה 2.0.0 ואילך
  • Ride בגרסה 3.0.0 ואילך
  • Rise בגרסה 1.0.0 ואילך
  • Sense בגרסה 5.0.0 ואילך
  • Spotlight בגרסה 0.0.1 ואילך
  • Studio בגרסה 4.0.0 ואילך
  • Taste בגרסה 4.0.0 ואילך
  • Trade בגרסה 1.0.0 ואילך

אם אתה משתמש בערכת נושא של צד שלישי, יש לבדוק בתיעוד של ערכת הנושא כדי לברר אם היא תומכת בשימוש בנקודות מיקוד.

הוספת נקודת מיקוד לתמונה

אם תוסיף נקודת מיקוד לתמונה, ואז תשתמש בתמונה בכמה מקומות בחנות המקוונת שלך, אותה נקודת מיקוד תחול בכל מקום שבו התמונה בשימוש.

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

שלבים:

  1. לחץ על תמונה באחד מהמיקומים הבאים במנהל Shopify:
    • במקטע תוכן > קבצים.
    • בעורך ערכות הנושא.
    • במקטע מדיה של רישומי המוצרים שלך, תחת המקטע מוצרים.
    • בעורך הדוא"ל של Shopify Messaging.
    • במקטע מטא שדות של כל משאב שיש לו מטא שדה מסוג הפניה לקובץ המיועד להוספת תמונה.
  2. כדי לבחור את החלק בתמונה שבו תרצה להגדיר נקודת מיקוד, יש ללחוץ על התמונה או לגרור את הנקודה הכחולה.
  3. לחץ על שמירה.

הסרת נקודת מיקוד מתמונה

שלבים:

  1. לחץ על תמונה באחד מהמיקומים הבאים במנהל Shopify:
    • במקטע תוכן > קבצים.
    • בעורך ערכות הנושא.
    • במקטע מדיה של רישומי המוצרים שלך, תחת המקטע מוצרים.
    • בעורך הדוא"ל של Shopify Messaging.
    • במקטע מטא שדות של כל משאב שיש לו מטא שדה מסוג הפניה לקובץ המיועד להוספת תמונה.
  2. לחץ על הסרה.
  3. לחץ על שמירה כחדש.

פורמטים של תמונות

הפורמטים הבאים של תמונות נתמכים:

  • JPEG
  • Progressive JPEG
  • PNG
  • GIF
  • HEIC
  • WebP

שימוש בתמונות JPEG

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

  • מוצרים
  • באנרים או מצגות
  • דפים ופוסטים בבלוג

שימוש בתמונות PNG

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

  • סמלי לוגו
  • סמלים
  • גבולות ועיטורים

דחיסת תמונות ובחירת פורמט אוטומטיות

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

  • כשתמונות מוצגות דרך ערכת הנושא של החנות, ייתכן שהן יעברו דחיסה שנועדה לשמור על איכות תמונה גבוהה
  • Shopify קובעת אוטומטית מהו פורמט הקובץ הטוב ביותר לשימוש בעת הצגת התמונות שלך
  • כאשר דפדפן האינטרנט של הלקוח תומך בפורמטים מודרניים של תמונות, כגון WebP ו-AVIF‏ (AV1 Image File Format), התמונות יוצגו בפורמטים אלה
  • קובצי GIF מומרים אוטומטית לפורמט WebP מונפש כדי לשפר את הביצועים על-ידי הקטנת גודל הקובץ

כדי לקבל את איכות התמונה הטובה ביותר, מומלץ לבצע את הפעולות הבאות:

  • העלאת תמונות ברזולוציה גבוהה יותר, עד 5000x5000 פיקסלים או 25 מגה-פיקסל
  • בחירת סוגי תמונות עם פחות אובדן נתונים בדחיסה, כגון PNG, עבור שרטוטי קווים, טקסט וגרפיקת סמלים עם שקיפות
  • שימוש ב-JPEG עבור תמונות מוצר או מצגות
  • קובצי SVG נתמכים אך חלות עליהם מגבלות - לא ניתן לבצע בהם טרנספורמציה (כגון שינוי גודל, חיתוך וכדומה) מבלי לבקש פורמט מרוסטר (JPEG, WebP, PNG)

סוגי קבצים אחרים כגון PSD (Photoshop Document), TIFF (Tagged Image File Format) ו-BMP (Bitmap) מתקבלים, אך יומרו ל-JPEG/PNG בעת ההעלאה.

מגבלות על העלאת תמונות

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

תמונות שמועלות ל-Shopify אינן יכולות לחרוג מאף אחת מהמגבלות הבאות:

  • 20 מגה-פיקסל
  • 20 מגה-בייט

כדי למצוא את ערך המגה-פיקסלים של התמונה, אפשר להשתמש בנוסחה הבאה:

(רוחב בפיקסלים x גובה בפיקסלים) / 1,000,000

לדוגמה, תמונה ברזולוציה של 4900px על 6930px היא בעלת 33.9 מגה-פיקסל בהתבסס על הנוסחה: (4900x6930) / 1,000,000 = 33.9 MP.

פרופילי צבע בתמונות

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

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

פרופילי צבע מוסרים מהסיבות הבאות:

  • לא כל ההתקנים מסוגלים לקרוא פרופילי צבע מסוג .ICC או .ICM, כך ששמירה עליהם ללא שינוי עלולה לגרום לחוסר אחידות בצבעי התמונה בין התקנים שונים.
  • כאשר תמונה שהועלתה אינה כוללת פרופיל צבע, הדפדפן מניח שנעשה שימוש בפרופיל הצבע sRGB, שהוא הנפוץ ביותר להצגת תמונות באינטרנט. זה מבטיח שהתמונות יוצגו באותו אופן בכל הדפדפנים וההתקנים המובילים.
  • פרופילי צבע עשויים לתפוס שטח דיסק גדול, מה שעלול להוביל לזמני טעינה ארוכים יותר של דפים.

הסרת פרופיל הצבע מתמונה

אפשר להסיר את פרופיל הצבע מתמונה על ידי שמירתה ללא פרופיל הצבע לפני העלאתה ל-Shopify. תהליך זה משתנה בהתאם לתוכנת עריכת התמונות שבה משתמשים.

יש לעיין בתיעוד של Adobe כדי ללמוד כיצד להקצות או להסיר פרופיל צבע (Illustrator, Photoshop) וכן כיצד להקצות או להסיר פרופיל צבע (InDesign).

שיטות עבודה מומלצות עבור מצגות, באנרים של תמונות, ותמונות ברוחב מלא

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

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

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

שיקולים בשימוש בתמונות עבור מצגות או באנרים של תמונות

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

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

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

תמונות רחבות במסכים גבוהים

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

תמונות רחבות במסכים גבוהים

תמונות גבוהות במסכים רחבים

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

תמונות גבוהות במסכים רחבים

התנהגות טעינת תמונות

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

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

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

פתרון בעיות בתמונות

התמונה לא מתעדכנת בעת שינוי סוג הקובץ

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

הדבר עלול להתרחש בעת עדכון תמונות באזורים הבאים:

  • תמונות של אוספים
  • התמונות המוצגות של פוסטים בבלוג
  • תמונות של כרטיסי מתנה בהתראות דוא"ל

ניתן לוודא את סוג הקובץ באמצעות השלבים הבאים:

  1. מתוך המנהל של Shopify, יש לעבור אל הדף שבו מועלית התמונה.
  2. יש ללחוץ לחיצה ימנית על התמונה.
  3. יש ללחוץ על פתיחת תמונה בכרטיסייה חדשה.
  4. יש לבדוק את כתובת ה-URL כדי לאמת את סיומת הקובץ, כגון .png, .jpeg או .gif.

אם עליך לשנות את סוג הקובץ של תמונה, יש לבצע את השלבים הבאים:

  1. מלוח המנהל של Shopify, יש לעבור לדף שבו ברצונך לעדכן את התמונה.
  2. יש ללחוץ על עריכה ליד התמונה, ולאחר מכן ללחוץ על הסרה.
  3. יש ללחוץ על שמירה.
  4. יש לרענן את הדף.
  5. יש להעלות את התמונה החדשה עם סוג הקובץ שברצונך להשתמש בו.
  6. יש ללחוץ על שמירה.