דפים ורכיבי 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. אתה יכול למצוא מחשבוני יחס גובה-רוחב באינטרנט ובכמה כלי עריכת תמונות שיעזרו לך לקבוע את יחסי הגובה-רוחב של התמונות שלך.
ברוב המקרים, תמונות ברכיבי 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 | 1,204 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 בולט | יחסי הגובה-רוחב הבאים עבור פריסות אריחים ושכבות הם:
|
| Web Part של תוכן מסומן | יחס הגובה-רוחב 16:9 הוא יחס הגובה-רוחב עבור פריסות קרוסלה, סרט שקופיות ורשת. להלן דוגמה ליחס גובה-רוחב של 16:9. התמונה הראשונה מציגה את הפריסה 'רצועת סרטים' והשניה את הפריסה 'רשת': 
|
| Web Part של תמונה | תמונות יתרחבו לרוחב המקטע המכיל את ה- Web Part. להלן דוגמה של תמונה ב- Web Part של תמונה המשתמש ביחס הגובה-רוחב של 16:9. 
יש לך גם אפשרות לשנות את יחס הגובה-רוחב או לחתוך ביד חופשית באמצעות כלי עריכת התמונה או להשתמש בנקודות האחיזה לשינוי גודל כדי להגדיל או להקטין את התמונה. 
|
| Web Part של גלריית תמונות | ניתן להשתמש ביחסי הגובה-רוחב הבאים בפריסות שונות:
|
| Web part של חדשות | בהתאם לפריסה, התמונות ב- Web Part של חדשות יכולות להיות 4:3, 16:9 או 21:9. להלן דוגמה של תמונות בכתבה עליונה ובפריסת קרוסלה: 
|
| אזור כותרת העמוד | תמונות נראות מיטביות כאשר הן מוצגות לרוחב או ביחס גובה-רוחב של 16:9 ומעלה, וכאשר הן בגודל של 1MB לפחות. כמו כן, הקפד להגדיר נקודת מוקד כדי להשאיר את החלק החשוב ביותר של התמונה גלוי לעין, במיוחד כאשר התמונה נמצאת בשימוש בתמונות ממוזערות, פריסות חדשות ותוצאות חיפוש. דוגמה (תמונה מקורית 16:9) עם נקודת מוקד מוגדרת ברמקול: 
|
| תמונה ממוזערת של עמוד | תמונות ממוזערות של עמודים מוצגות במקומות כגון תוצאות חיפוש, תוצאות תוכן מסומנות, פרסומים חדשותיים ועוד. כברירת מחדל, התמונה הממוזערת מגיעה מאזור כותרת העמוד או מה- Web Part שמופיע בסדר הראשון בעמוד (כגון הימני העליון של פריסת דף). באפשרותך לעקוף את ברירת המחדל ולשנות את התמונה הממוזערת של העמוד. כאשר אתה עושה זאת, מומלץ להשתמש בתמונה עם יחס גובה-רוחב של 16:9. דוגמה (תמונה מקורית 16:9): 
|
| Web Part של קישורים מהירים | ה- Web Part של קישורים מהירים כולל שש פריסות שונות. להלן יחסי הגובה-רוחב המוגדרים מראש:
|
עצה
בעת הוספת תמונה לאזור כותרת הדף או ל- Web Part בולט, מומלץ גם להגדיר את נקודת המוקד באזור של התמונה שברצונך להציג תמיד. לקבלת מידע נוסף אודות הגדרת נקודת מוקד עבור שני תרחישים אלה, ראה שימוש ב- Web Part של תמונה בולטתויצירה ושימוש בדפים מודרניים באתר SharePoint.
המלצות לתמונות כותרת עליונה של אתר
בנוסף לעמודים, ייתכן שתרצה להוסיף סמלים או תמונות מותאמים אישית בפריסה מורחבת. להלן המלצות גודל לאלמנטים אלה.
| רכיב | תיאור | המלצה רוחב x גובה בפיקסלים |
|---|---|---|
| סמל האתר | לוגו גדול יותר שיכול להיות לא מרובע ושקוף בהתאם לעיצוב שהועלה. | 192 x 64 תבנית: PNG, JPEG, SVG (SVG אינו מותר באתרים המחוברים לקבוצה) |
| תמונה ממוזערת של סמל האתר | תמונה ממוזערת של סמל מרובע שנעשה בה שימוש אם לא מתבצעת העלאה של סמל אתר או במקומות שבהם נדרשת תבנית ריבוע. רכיב זה נדרש. |
64 על 64 תבנית: PNG, JPEG, SVG (SVG אינו מותר באתרים המחוברים לקבוצה) |
| סמל אתר בפריסה מורחבת | הפריסה של הכותרת העליונה המורחבת כוללת סמל אתר ברוחב מורחב. | 300 x 64 פורמט: JPEG, PNG, SVG |
| תמונת רקע של פריסה מורחבת | תמונת רקע חדשה שניתן להשתמש בה עם הכותרת העליונה המורחבת. | 2560 x 164 פורמט: JPEG, PNG |