שינוי גודל וקנה מידה של תמונות בדפים מודרניים של SharePoint
Applies ToSharePoint ב-Microsoft 365

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

דוגמאות של דפים במכשירים שונים

אילו גודלי תמונות פועלים בצורה הטובה ביותר?

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

חיפוש גודלי התמונות הטובים ביותר עבור הדף שלך תלוי בגורמים אלה:

  • יחס גובה-רוחב: קשר הגומלין בין גובה לרוחב של תמונות

  • פריסת עמודה: הסוג ומספר העמודות בעמוד שלך

  • פריסת Web Part: הפריסה שאתה בוחר עבור ה- Web Part שבו נעשה שימוש בתמונה

יחס גובה-רוחב

יחס גובה-רוחב הוא קשר הגומלין בין רוחב וגובה של תמונות. בדרך כלל הוא מבוטא כשתי מספרים, כגון 3:2, 4:3 או 16:9. הרוחב הוא תמיד המספר הראשון. לדוגמה, יחס של 16:9 יכול להיות 1600 פיקסלים ברוחב של 900 פיקסלים בגובה. לחלופין, הוא יכול להיות 1920 x 1080, 1280 x 720, או כל שילוב רוחב/גובה אחר שניתן לחשב כשווה ל- 16:9. ניתן למצוא מחשבונים ליחס גובה-רוחב באופן מקוון, ובמכשירים מסוימים לעריכת תמונות שיעזרו לך לקבוע את יחס הגובה-רוחב של התמונות שלך. 

דוגמאות ליחסי גובה-רוחב 16:9 ו- 4:3.

ברוב המקרים, תמונות ברכיבי Web Part מודרניים פועלות בצורה הטובה ביותר בין פריסות ומכשירים כאשר יש להם יחס גובה-רוחב של 16:9 או 4:3, בהתאם לפריסה.

פריסות עמודות

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

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

פריסה

רוחב בפיקסלים

עמודה ברוחב מלא

1920

עמודה אחת

1204

שתי עמודות

586 לעמודה

שלוש עמודות

380 לעמודה

עמודה שמאלית של שליש

380 עבור העמודה הימנית; 792 עבור העמודה הימנית

עמודה ימנית של שליש

792 עבור העמודה השמאלית; 380 עבור העמודה הימנית

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

גובה התמונות הממוקמות בפריסות עמודות אחרות תלוי ביחס הגובה-רוחב שלך. להלן קווים מנחים לגבי גובה/רוחב עבור יחס גובה-רוחב של 16:9 ו- 4:3 (מעוגל כלפי מעלה/מטה לפיקסל הקרוב ביותר). פעולה זו שימושית כדי לשמור את התמונות שלך ברוחב ובגובה שמתאימים לקנה מידה מתאים עבור מכשירים ניידים, לדוגמה:

יחס

פריסה

16 x 9

רוחב x גובה בפיקסלים

4 x 3

רוחב x גובה בפיקסלים

עמודה אחת

1204 x 677

1204 x 903

שתי עמודות

586 x 330

586 x 439

שלוש עמודות

380 x 214

380 x 285

עמודה שמאלית של שליש

380 x 446 עבור העמודה הימנית; 792 x 446 עבור העמודה הימנית

380 x 594 עבור העמודה הימנית; 792 x 594 עבור העמודה הימנית

עמודה ימנית של שליש

792 x 446 עבור העמודה הימנית; 380 x 446 עבור העמודה הימנית

792 x 594 עבור עמודה שמאלית; 380 x 594 עבור העמודה הימנית

פריסות Web Part

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

Web Part בולט

יחסי הגובה-רוחב הבאים עבור פריסות אריחים ושכבות הם:

  • אריחים: קנה המידה של גובה ה- Web Part מותאם ליחס גובה-רוחב של 8:3, ותמונות בתוך קנה המידה של ה- Web Part ליחס גובה-רוחב של 4:3.

  • שכבות: שכבה בודדת משנה את קנה המידה ליחס גובה-רוחב של 8:3, ותמונות בתוך כל קנה מידה של שכבה ליחס גובה-רוחב קרוב ל- 16:9.

  • במכשירים ניידים, נעשה שימוש בפריסת קרוסלה בשעה 16:9.

להלן דוגמה לתמונה המוצגת בפריסה 'שכבות' (למעלה) ובפריסה 'אריחים' (למטה):

דוגמה של תמונות Web Part בולטות בפריסות שכבות ואריחים

Web Part של תוכן מסומן

16:9 הוא יחס גובה-רוחב עבור פריסות קרוסלה, סרט שקופיות ורשת.

להלן דוגמה של יחס גובה-רוחב של 16:9. התמונה הראשונה מציגה את פריסת סרט השקופיות, והתמונה השניה מציגה את פריסת הרשת:

ה- Web Part של התוכן המסומן באמצעות פריסת סרט השקופיות.

הפריסה 'רשת תוכן מסומן' עם תמונות מורחבות מוצגות.

Web Part של תמונה

תמונות יתרחבו לרוחב המקטע המכיל את ה- Web Part. 

להלן דוגמה של תמונה ב- Web Part של תמונה המשתמשת ביחס גובה-רוחב של 16:9.

תמונה ב- Web Part של תמונה באמצעות יחס קרוסלה 16:9.

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

תמונה פתוחה בכלי העריכה של SharePoint.

Web Part של גלריית תמונות

ניתן להשתמש ביחסי הגובה-רוחב הבאים בפריסות שונות:

  • פריסות הלבנים וה קרוסלה מכבדות את יחס הגובה-רוחב של כל התמונות: 16:9, 1:1, 4:3 וכן הלאה. 

  • פריסת הרשת מאפשרת שלושה יחסי גובה-רוחב: 1:1 ריבוע, רוחב 16:9 ו- 4:3.

התמונה הראשונה מציגה את הפריסה'לבנים' ב- Web Part גלריית תמונות (תוך שמירה על יחס גובה-רוחב של 16:9 ו- 1:1). התמונה השניה מציגה את פריסת הרשת (באמצעות יחס גובה-רוחב של 1:1).

ה- Web Part גלריית תמונות באמצעות אפשרות פריסת הלבנים.

ה- Web Part גלריית תמונות המשתמש באפשרות פריסת הרשת.

Web Part של חדשות

בהתאם לפריסה, תמונות ב- Web Part חדשות יכולות להיות בין 4:3, 16:9 או 21:9.

להלן דוגמה של תמונות בסיפור עליון ובפריסה של קרוסלה:

דוגמאות לתמונה של פריסות חדשות

אזור כותרת העמוד

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

דוגמה (תמונה מקורית 16:9) עם נקודת מוקד מוגדרת על הרמקול:

דוגמה של תמונה 16:9 באזור כותרת העמוד.

תמונה ממוזערת של עמוד

תמונות ממוזערות של עמודים מוצגות במקומות כגון תוצאות חיפוש, תוצאות תוכן מסומנות, פרסומים חדשותיים ועוד. כברירת מחדל, התמונה הממוזערת מגיעה באזור הכותרת של הדף או מה- Web Part שמופיע בסדר הראשון בדף (כגון החלק הימני העליון של פריסת הדף). באפשרותך לעקוף את ברירת המחדל ולשנות את התמונה הממוזערת של העמוד. כאשר תעשה זאת, מומלץ להשתמש בתמונה עם יחס גובה-רוחב של 16:9.

דוגמה (התמונה המקורית 16:9):

דוגמה לתמונה ממוזערת של דף ב- Web Part של תוכן מסומן

Web Part של קישורים מהירים

ל- Web Part של קישורים מהירים יש שש פריסות שונות. להלן יחס גובה-רוחב שנקבע מראש:

  • קומפקטי, רשימה, אריחים: 1:1, 4:3

  • סרט שקופיות, רשת, לחצן: 16:9

התמונה הראשונה מציגה את הפריסה דחוסה ב-Web Part קישורים מהירים. התמונה השניה מציגה את אותו Web Part של קישורים מהירים באמצעות פריסת סרט השקופיות.

ה- Web Part 'קישורים מהירים' מציג תמונות ממוזערות עבור קישורים.

ה- Web Part 'קישורים מהירים' מציג את יחס 16:9 עבור תמונות.

עצות: 

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

  • נקודת מוקד

המלצות לתמונה של כותרת אתר

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

רכיב

תיאור

המלצה

רוחב x גובה בפיקסלים

סמל אתר

סמל גדול יותר שאינו ריבועי ושקוף בהתאם לעיצוב שהועלה.

192 x 64 

תבנית: PNG, JPEG, SVG (SVG אינו מותר באתרים המחוברים לקבוצה)

תמונה ממוזערת של סמל אתר

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

רכיב זה נדרש.

64 x 64 

תבנית: PNG, JPEG, SVG (SVG אינו מותר באתרים המחוברים לקבוצה)

סמל אתר פריסה מורחבת

פריסת הכותרת העליונה המורחבת כוללת רוחב מורחב של סמל האתר.

300 x 64

תבנית: JPEG, PNG, SVG

תמונת רקע של פריסה מורחבת

תמונת רקע חדשה שניתן להשתמש בה עם הכותרת העליונה המורחבת.

2560 x 164

תבנית: JPEG, PNG

זקוק לעזרה נוספת?

מעוניין באפשרויות נוספות?

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

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