تم تصميم الصفحات الحديثة وأجزاء ويب لتكون سريعة الاستجابة بشكل كامل عبر الأجهزة، مما يعني أن الصور المستخدمة في أجزاء الويب سيتم تغيير حجمها وفقا لمكان عرضها والتخطيط المستخدم والجهاز الذي يتم عرضها عليه. على سبيل المثال، تم تصميم الصفحات الحديثة لتبدو رائعة على الأجهزة المحمولة، ويساعد تغيير حجم الصور التلقائي في إنشاء تجربة جذابة.
ما هي أحجام الصور التي تعمل على أفضل وجه؟
بسبب تصميم الصفحة سريع الاستجابة، لا يوجد ارتفاع أو عرض محدد بوحدات البكسل يضمن احتفاظ الصورة بشكل معين عبر الأجهزة والتخطيطات. يتم تغيير حجم الصور وقصها تلقائيا لعرض أفضل نتيجة ممكنة عبر مجموعة متنوعة من الأجهزة والتخطيطات. ومع ذلك، هناك بعض الإرشادات التي يمكن أن تساعدك في التأكد من أن صورك تبدو رائعة على صفحاتك.
يعتمد العثور على أفضل أحجام الصور لصفحتك على العوامل التالية:
- نسبة العرض إلى الارتفاع: العلاقة بين ارتفاع الصور وعرضها
- تخطيط العمود: نوع الأعمدة الموجودة على الصفحة وعددها
- تخطيط جزء ويب: التخطيط الذي تختاره لجزء ويب الذي تستخدم فيه الصورة
نسبة العرض إلى الارتفاع
نسبة العرض إلى الارتفاع هي العلاقة بين عرض الصور وارتفاعها. ويتم التعبير عنه عادة كرقمين، مثل 3:2 أو 4:3 أو 16:9. يكون العرض دائما هو الرقم الأول. على سبيل المثال، يمكن أن تكون نسبة 16:9 1600 بكسل في العرض في 900 بكسل في الارتفاع. أو قد يكون 1920 × 1080 أو 1280 × 720 أو أي مجموعات عرض/ارتفاع أخرى يمكن حسابها لتساوي 16:9. يمكنك العثور على حاسبات نسبة العرض إلى الارتفاع عبر الإنترنت وفي بعض أدوات تحرير الصور لمساعدتك على تحديد نسب العرض إلى الارتفاع لصورك.
في معظم الحالات، تعمل الصور في أجزاء الويب الحديثة على أفضل وجه عبر التخطيطات والأجهزة عندما تكون نسبة العرض إلى الارتفاع فيها 16:9 أو 4:3، استنادا إلى التخطيط.
تخطيطات الأعمدة
يمكن تخطيط الصفحة بمقاطع تتضمن أنواع أعمدة وتخطيطات مختلفة، مثل الأعمدة ذات العرض الكامل وعمود واحد وعمودين وثلاثة أعمدة وثلث الأعمدة اليسرى والثلث الأيمن. ثمة قاعدة عامة للصور التي يتوقع أن تملأ عرض العمود وهي أن تكون عريضة على الأقل مماثلا لعرض العمود الذي تم وضعها فيه. على سبيل المثال، يجب أن يكون عرض الصورة في جزء ويب الخاص بالصور في عمود واحد 1204 بكسل على الأقل.
فيما يلي إرشادات العرض لكل تخطيط من تخطيطات الأعمدة:
| التخطيط | العرض بالبكسل |
|---|---|
| عمود كامل العرض | 1920 |
| عمود واحد | 1204 |
| عمودان | 586 لكل عمود |
| ثلاثة أعمدة | 380 لكل عمود |
| ثلث العمود الأيسر | 380 للعمود الأيسر. 792 للعمود الأيمن |
| ثلث العمود الأيمن | 792 للعمود الأيسر؛ 380 للعمود الأيمن |
نظرا لطبيعة استجابة الصفحات، سيتم دائما عرض الصور في الأعمدة ذات العرض الكامل بعرض كامل للشاشة مع ارتفاع تلقائي استنادا إلى حجم الشاشة.
يعتمد ارتفاع الصور الموضوعة داخل تخطيطات الأعمدة الأخرى على نسبة العرض إلى الارتفاع. فيما يلي إرشادات الارتفاع/العرض لنسب العرض إلى الارتفاع 16:9 و4:3 (يتم تقريبها لأعلى/لأسفل إلى أقرب بكسل). يعد هذا الأمر مفيدا في الاحتفاظ بالصور بعرض وارتفاع يتغير حجما مناسبا للأجهزة المحمولة، على سبيل المثال:
| نسبة العرض إلى الارتفاع التخطيط |
16 × 9 العرض x الارتفاع بالبكسل |
4 × 3 العرض x الارتفاع بالبكسل |
|---|---|---|
| عمود واحد | 1204 × 677 | 1204 × 903 |
| عمودان | 586 × 330 | 586 × 439 |
| ثلاثة أعمدة | 380 × 214 | 380 × 285 |
| ثلث العمود الأيسر | 380 × 446 للعمود الأيسر ؛ 792 × 446 للعمود الأيمن | 380 × 594 للعمود الأيسر ؛ 792 × 594 للعمود الأيمن |
| ثلث العمود الأيمن | 792 × 446 للعمود الأيسر؛ 380 × 446 للعمود الأيمن | 792 × 594 للعمود الأيسر؛ 380 × 594 للعمود الأيمن |
تخطيطات أجزاء ويب
ستؤثر أيضا التخطيطات الموجودة في أجزاء الويب التي تستخدمها على كيفية تغيير حجم الصور. تعرض الأمثلة التالية أجزاء ويب المختلفة وبعض الخيارات ونسب العرض إلى الارتفاع التي يمكنك استخدامها.
| جزء ويب | نسب العرض إلى الارتفاع |
|---|---|
| جزء الويب Hero | نسب العرض إلى الارتفاع التالية لتخطيطات الإطارات المتجانبة والطبقات هي:
|
| جزء ويب المحتوى المميز | 16:9 هي نسبة العرض إلى الارتفاع لتخطيطات العرض الدوار وشريط الصور والشبكة. فيما يلي مثال على نسبة العرض إلى الارتفاع 16:9. تعرض الصورة الأولى تخطيط شريط الصور، والثانية تعرض تخطيط الشبكة: 
|
| جزء ويب الخاص بالصور | سيتم توسيع الصور إلى عرض المقطع الذي يحتوي على جزء الويب. فيما يلي مثال لصورة في جزء ويب الخاص بالصور تستخدم نسبة العرض إلى الارتفاع 16:9. 
لديك أيضا خيار تغيير نسبة العرض إلى الارتفاع أو الاقتصاص الحر باستخدام أداة تحرير الصور أو استخدام مقابض تغيير الحجم لجعل الصورة أكبر أو أصغر. 
|
| جزء ويب معرض الصور | يمكن استخدام نسب العرض إلى الارتفاع التالية في تخطيطات مختلفة:
|
| جزء ويب الخاص بالأخبار | بإمكان الصور في جزء ويب "الأخبار" أن تكون 4:3 أو 16:9 أو 21:9، استنادا إلى التخطيط. فيما يلي مثال على صور في أهم قصة وتخطيط دوار: 
|
| منطقة عنوان الصفحة | تبدو الصور بشكل أفضل عندما تكون أفقية أو بنسبة عرض إلى ارتفاع 16:9 أو أكبر، وعندما يبلغ حجمها 1 ميغابايت على الأقل. تأكد أيضا من تعيين نقطة محورية للاحتفاظ بالجزء الأكثر أهمية في الصورة في العرض، لا سيما عند استخدام الصورة في الصور المصغرة وتخطيطات الأخبار ونتائج البحث. مثال (الصورة الأصلية 16:9) مع تعيين النقطة المحورية على السماعة: 
|
| صورة مصغرة للصفحة | يتم عرض الصور المصغرة للصفحات في أماكن مثل نتائج البحث ونتائج المحتوى المميز ومنشورات الأخبار والمزيد. بشكل افتراضي، تأتي الصورة المصغرة من ناحية عنوان الصفحة أو من جزء ويب الموجود بالترتيب الأول على الصفحة (مثل الجزء العلوي الأيمن من تخطيط الصفحة). يمكنك تجاوز الصورة الافتراضية وتغيير الصورة المصغرة للصفحة. عند القيام بذلك، من الأفضل استخدام صورة ذات نسبة عرض إلى ارتفاع 16:9. مثال (الصورة الأصلية 16:9): 
|
| جزء ويب الارتباطات السريعة | يتضمن جزء ويب الارتباطات السريعة ستة تخطيطات مختلفة. فيما يلي نسب العرض إلى الارتفاع المعينة مسبقا:
|
تلميح
عند إضافة صورة إلى منطقة عنوان صفحة أو جزء ويب Hero، من الأفضل أيضا تعيين النقطة المحورية في منطقة الصورة التي تريد عرضها دائما. للتعرف على المزيد حول تعيين نقطة محورية لهذين السيناريوهين، راجع "استخدام جزء الويب Hero " و "إنشاء صفحات حديثة واستخدامها" على موقع SharePoint.
توصيات حول صور رؤوس الموقع
بالإضافة إلى الصفحات، قد تحتاج إلى إضافة شعارات أو صور مخصصة في تخطيط موسع. فيما يلي توصيات الحجم الخاصة بهذه العناصر.
| العنصر | الوصف | توصية العرض x الارتفاع بالبكسل |
|---|---|---|
| شعار الموقع | شعار أكبر يمكن أن يكون شفافا وغير مربع حسب التصميم الذي تم تحميله. | 192 × 64 التنسيق: PNG وJPEG وSVG (SVG غير مسموح به على المواقع المتصلة بالمجموعة) |
| صورة مصغرة لشعار الموقع | صورة مصغرة لشعار مربع يتم استخدامها إذا لم يتم تحميل شعار الموقع أو في الأماكن التي يتطلب وجود تنسيق مربع فيها. هذا العنصر مطلوب. |
64 × 64 التنسيق: PNG وJPEG وSVG (SVG غير مسموح به على المواقع المتصلة بالمجموعة) |
| شعار موقع التخطيط الموسع | يحتوي تخطيط الرأس الموسع على عرض موسع لشعار الموقع. | 300 × 64 التنسيق: JPEG وPNG وSVG |
| صورة خلفية التخطيط الموسع | صورة خلفية جديدة يمكن استخدامها مع رأس الصفحة الموسع. | 2560 × 164 التنسيق: JPEG، PNG |