المبادئ التوجيهية لحجم الصور

في كل مرة تقوم فيها بتحميل صورة، يتم إنشاء ما يقرب من 5 نسخ من الصورة بأحجام أقل. تُدرج أداة إنشاء الموقع والمتجر الإلكتروني من GoDaddy بعد ذلك تلقائيًا الصورة ذات الحجم المناسب في مواقع سطح المكتب والأجهزة اللوحية والمحمولة، مع التأكد من أن زوار الموقع الخاص بك يرون دائمًا الصورة الصحيحة على أجهزتهم.

متطلبات النظام لتنسيق Webp

تدعم الإصدارات التالية صور Webp:

• iPhone: الإصدار 14 والإصدارات التالية
• Mac/Safari: آخر إصدار
• Chrome: كل الإصدارات
• Android: كل الإصدارات

يتم دعم أنواع ملفات الصور التالية:

png وjpg وjpeg وgif وsvg وsvg+xml وico وx-icon وwebp

أحجام الصور المحسنة لكل جهاز

لا يتم زيادة حجم الصورة التي تم تحميلها ولا يتم إنشاء إلا الصور التي تكون أصغر من النسخة الأصلية. على سبيل المثال، إذا تم تحميل صورة بعرض 2000 بكسل، فسيتم إنشاء 5 نسخ محسنة جديدة. إذا تم تحميل صورة بعرض 100 بكسل، فلن يتم إنشاء صور جديدة.

الحد الأقصى لحجم الصورة

المساحة الإجمالية للصورة لا يمكن أن تتعدى 3,145,728 بكسل. من غير المرجح أن تتجاوز أي من صورك هذا الحد، ولكن يمكنك التحقق بسرعة من خلال ضرب العرض بالبكسل في الارتفاع.

لا ينبغي أن يتعدى حجم الصورة 15 ميغابايت.

يمكن أن يؤدي تحميل صورة أكبر من الحد إلى حدوث الأخطاء التالية:

• فشل تحميل الصور.
• تحميل الصور، لكن لا يتم عرض الصور المصغرة الموجودة في منتقي الصور.
• لا يتم تحميل الصور في المحرر.
• لا يتم تحميل الصور على الموقع المباشر.

المبادئ التوجيهية لحجم الصور لكل عناصر واجهة المستخدم

شريط التمرير

يستخدم عنصر واجهة المستخدم "شريط التمرير" عادة مع الصور كبيرة الحجم لإعطاء تأثير درامي. غالبًا ما تتمدد أشرطة التمرير من أقصى الطرف إلى أقصى الطرف، لذلك فمن الجيد استخدام الصور ذات العرض الكبير لملائمة شريط التمرير. بالنسبة لأشرطة التمرير المربعة، استخدم نسبة عرض إلى ارتفاع متساوية مثل 1:1.

من الأفضل اختيار الصور التي تملك إعداد "ترك مساحة" جيد بحيث لا يتم قص المحتوى الأساسي من الصورة عند تغيير حجمها. ينبغي أن تكون نسب العرض إلى الارتفاع في شريط التمرير هي نفسها من أجل اتساق التصميم.

• نسب العرض إلى الارتفاع الشائعة هي: 16:9 و3:4
• أحجام الدقة الشائعة (بالبكسل): 1600x900 و1280x720 و1280x960

معرض الصور

يعد عنصر واجهة المستخدم "معرض الصور" هو عنصر واجهة المستخدم الأكثر مرونة للاستخدام مع الصور، لأنه يوجد العديد من خيارات التخطيط. على سبيل المثال، يمكنك الحصول على معرض متجانب يملك نفس الحجم لكل الصور، أو فسيفساء يملك حجمًا مختلفًا لكل صورة.

يجب أن تعكس نسبة العرض إلى الارتفاع للصور في "معرض الصور" الطريقة التي تريد عرضها بها.

• على سبيل المثال، يجب أن يكون للمعارض ذات النمط المربع النسبة 1:1 للصور.
• يجب أن يكون للمعارض ذات نمط الصور الطويلة نسب ارتفاع أكبر، مثل 2:5 أو 200 بكسل في 500 بكسل.

ينبغي أن تكون نسب العرض إلى الارتفاع للصور هي نفسها من أجل تناسق التصميم. اترك بعض المساحة في الصورة لاستخدام تأثير التمرير بحيث لا يتم اقتصاص الصور الخاصة بك.

• نسب العرض إلى الارتفاع الشائعة: أي نسبة.
• أحجام الدقة الشائعة (بكسل): أي دقة، بما لا يزيد عن 1500 نقطة من أجل سرعة الصفحة.

الأيقونات

الأيقونات هي جزء مهم جدًا من أي موقع. وهي علامات مرئية للمعلومات ويمكن أن تضيف مظهرًا معاصرًا على موقعك. يمكنك استخدام صور PNG أو JPEG أو SVG الشفافة.

• نسب العرض إلى الارتفاع الشائعة: بوجه عام 1:1، ولكن أي نسبة ستعمل.
• أحجام الدقة الشائعة (بالبكسل): 200x200 و80x80 أو أي دقة. يمكن أن تكون صور SVG بأي دقة.

لمزيد من المعلومات، انظر أيقونات الموقع.

أيقونات المفضلة

لا تستخدم أيقونات المفضلات في موقعك الفعلي، بل يتم عرضها على علامة التبويب عند فتح المستخدمين لموقعك على الويب. ويفضل استخدام تنسيق ICO. لتحويل ملفات الصور إلى تنسيق ICO، ارجع إلى المورد التالي.

• نسبة العرض إلى الارتفاع المطلوبة: 1:1
• أحجام الدقة المسموح بها (بالبكسل): 24x24 أو 36x36 أو 48x48

الشعارات

يفضل استخدام تنسيق SVG لصور الشعار، وذلك لأنه لا يتم تحسين ملفات SVG بالطريقة نفسها التي تتم مع ملفات الصور الأخرى، ومن ثَمّ فحتى إذا كان الشعار الذي تقوم بتحميله صغير بالحجم فإنك لن تفقد الجودة.

نسبة العرض إلى الارتفاع في مقابل الدقة

نسبة العرض إلى الارتفاع هي النسبة بين سمتي العرض والارتفاع للصورة. يمكن أن تتمثل نسبة العرض إلى الارتفاع 16:9 في صورة بدقة 16x19 بكسل؛ أو 1600x900 بكسل. وهذه في الغالب دقة أي صور لها نسبة العرض إلى الارتفاع 16:9.

التصوير المرئي لنسبتي العرض إلى الارتفاع الأكثر شيوعًا:

نسب العرض إلى الارتفاع لكل جهاز

في الوقت الذي يتم فيه تحسين الصور على الموقع الخاص بك، فإنه لا يتم في الواقع تغيير حجم الصور على الموقع. إذا كنت تستخدم صورة على جهاز سطح مكتب لها نسبة العرض إلى الارتفاع 16:9، فسوف تبدو مثالية على سطح المكتب لأن شاشة جهاز سطح المكتب عريضة. لكن الهاتف المحمول شاشته أصغر، وهكذا ستبدو نسبة العرض إلى الارتفاع 16:9 في بعض الأحيان صغيرة.

لتعويض ذلك، يمكنك إما استخدام ميزة الإخفاء على الجهاز لإنشاء إصدارات معينة لهذه الأجهزة أو يمكنك تغيير أبعاد الصورة لتصبح مناسبة. تعتمد التغييرات في الحجم على الجهاز.

اعتبارات يجب أخذها بالحسبان

حجم الصور الأكبر ليس دائما الأفضل

يضمن تحميل الدقة الأكبر إلى موقعك أن تكون صور موقعك بأعلى دقة للعملاء والزبائن. لكن يجب الأخذ في الاعتبار أن الصور الكبيرة أيضًا لها تأثير جذري على سرعة الصفحة. ولأنه يتم تقليل حجم الصور عالية الدقة، فإن المستخدمين لا يلاحظون عادةً الفرق في الدقة. من الأفضل تحميل الصور التي تكون كبيرة بما يناسب الغرض من الاستخدام. على سبيل المثال، إذا كان لديك صورة بدقة 300 بكسل في 300 بكسل على موقعك، فلا داعي لتحميلها على أنها صورة بدقة 4000 بكسل في 4000 بكسل.