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