كل مبتدئ في ووردبريس يدرك هذه المعضلة المتعلقة بالصور: رفع صور صغيرة جدًا فتبدو ضبابية، أو رفع صور كبيرة جدًا فتصبح بطيئة جدًا في موقعك.

في DoctorMega، عملنا على تحسين أحجام الصور في مدونتنا، مع التأكد من أنها تبدو دائمًا جيدة ولا تبطئ وقت تحميل صفحاتنا.

خلال هذه المسيرة، تعلمنا بعض الطرق البسيطة لاختيار أفضل أحجام الصور لمظهر أنيق واحترافي وتجربة مستخدم رائعة.

لقد كان اختيارنا الصحيح لهذه الأحجام نقطة تحول في المظهر العام لموقعنا. 🎨

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

ما هو حجم الصورة؟

يشير حجم الصورة عادة إلى عرضها وارتفاعها مقاسًا بالبكسل. على سبيل المثال، 1600 × 900 بكسل يعني أن عرض الصورة 1600 بكسل وارتفاعها 900 بكسل. تسمى هذه القياسات أيضًا أبعاد الصورة.

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

حجم ملف الصورة هو المساحة التي يشغلها ملف الصورة على جهاز الكمبيوتر، ويتم قياسه بالبايت. على سبيل المثال، 100 كيلوبايت.

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

وهنا يأتي دور تنسيقات ملفات الصور.

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

يمكن ضغط الصور مثل الصور الفوتوغرافية التي تحتوي على المزيد من الألوان بشكل أفضل باستخدام صيغة ملف JPEG. من ناحية أخرى، يمكن للصور مثل الرسوم التوضيحية التي تحتوي على تفاصيل لونية أقل استخدام صيغة PNG للحصول على أفضل النتائج.

لمزيد من التفاصيل، يمكنك الاطلاع على مقالتنا حول WebP مقابل PNG cs JPEG: أفضل تنسيقات ملفات الصور لـ ووردبريس.

مع وضع ذلك في الاعتبار، إليك نظرة عامة سريعة على الأشياء التي سنغطيها في هذا المنشور:

• ما هو الحجم المناسب للصور لموقع ووردبريس الخاص بي؟
• ما هي أحجام الصور التي يجب أن أستخدمها في منشورات المدونة؟
• ما هي أحجام الصور التي يجب أن أستخدمها للصور المميزة؟
• ما هي أحجام الصور التي يجب أن أستخدمها لوسائل التواصل الاجتماعي؟
• ما هو حجم الصورة الذي يجب أن أستخدمه لشعار الموقع الكتروني الخاص بي في ووردبريس؟
• نصيحة إضافية: تحرير الصور لموقع ووردبريس الخاص بك
• الأسئلة الشائعة حول أحجام صور ووردبريس
• مصادر إضافية حول صور ووردبريس

هل أنت مستعد؟ لنبدأ.

ما هو الحجم المناسب للصور لموقع ووردبريس الخاص بي؟

بالنسبة لموقع ووردبريس متوسط، ستستخدم الصور في عدة مناطق من موقعك. ستحتاج إلى صور لمنشورات مدونتك، والصور المصغرة، وعناوين الصفحات، وصور الغلاف، والمزيد.

يتعامل ووردبريس تلقائيًا مع بعض أحجام ملفات الصور بشكل افتراضي. عندما تقوم بـ رفع صورة، سيقوم ووردبريس تلقائيًا بإنشاء عدة نسخ بأحجام مختلفة.

يمكنك عرض وحتى تعديل أحجام صور ووردبريس الافتراضية من خلال زيارة صفحة الإعدادات » الوسائط في منطقة إدارة ووردبريس.

هنا، ستشاهد ثلاثة أحجام للصورة: مصغرة، متوسطة، كبيرة.

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

لن تكون هذه الأحجام مرئية على شاشة ‘الوسائط’، والطريقة الوحيدة لعرض هذه الأحجام الإضافية هي الانتقال إلى ‘مدير الملفات’ على حساب استضافة ووردبريس الخاص بك.

بعد ذلك، ستحتاج إلى الانتقال إلى المجلد /wp-content/uploads/ وتحديد أي مجلد سنة هناك لاستعراضه. سيساعدك هذا على رؤية جميع أحجام الصور المختلفة التي ينشئها موقع ووردبريس الخاص بك.

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

ما هي أحجام الصور التي يجب أن أستخدمها في منشورات المدونة؟

يجب عليك اختيار حجم الصورة لمنشورات مدونتك بناء على قالب ووردبريس الخاص بك.

على سبيل المثال، تأتي بعض قوالب ووردبريس مع تخطيط عمود واحد، مما يسمح لك باستخدام صور أوسع.

تستخدم بعض قوالب ووردبريس الأخرى تخطيطات متعددة الأعمدة، والتي تتكون عادة من منطقة محتوى وشريط جانبي.

إذا كنت تستخدم هذا النوع من القالب، فيجب عليك ضبط عرض الصورة وفقًا لذلك.

بالنسبة لمعظم المدونات، يمكنك استخدام أحجام الصور التالية:

• تخطيط عمود واحد: 1200×675 بكسل
• تخطيط عمودين: 680×382 بكسل

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

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

وبالمثل، قد ترغب في استخدام صور مربعة في بعض الحالات.

ومع ذلك، لا تنس التأكد من أن أبعاد الصورة لها نفس العرض والارتفاع، مثل 300 × 300 بكسل. على سبيل المثال، فيما يلي مثال للصور المربعة المستخدمة في تخطيط متعدد الأعمدة.

ما هي أحجام الصور التي يجب أن أستخدمها للصور المميزة؟

لا يوجد مقاس واحد يناسب الجميع، ولكن نقطة البداية الجيدة هي 1200×628 بكسل أو 680×382 بكسل لنسبة العرض إلى الارتفاع 16:9.

مع ذلك، يتم التحكم في الصور المميزة (وتسمى أيضًا الصور المصغرة أو البارزة للمنشورات) بواسطة قالبك. قد تقوم بعض القوالب بقص الصور أو تمديدها. لذا، من الأفضل مراجعة وثائق قالبك أو تجربة بعض الأحجام لمعرفة الأنسب.

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

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

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

• للقوالب التي تستخدم صور بارزة مستطيلة: 1200×687 بكسل
• للقوالب التي تستخدم صور بارزة مربعة: 600×600 بكسل

سيقوم قالب ووردبريس الخاص بك بإنشاء أحجام إضافية للصور المميزة لاستخدامها في مناطق مختلفة، مثل الصفحة الرئيسية أو صفحة المدونة أو صفحات الأرشيف.

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

الأن، إذا كان قالب ووردبريس الخاص بك يستخدم صور مميزة بنسبة عرض إلى ارتفاع 16:9، فيمكنك أيضًا استخدامها كصور لوسائل التواصل الاجتماعي على X (المعروف سابقًا باسم تويتر) وفيسبوك.

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

للقيام بذلك، ستحتاج إلى إضافة All in One SEO لووردبريس. إنها أفضل إضافة سيو ووردبريس في السوق، ويستخدمها أكثر من 3 ملايين موقع إلكتروني. تساعدك هذه الإضافة على تحسين موقعك لمحركات البحث ومنصات التواصل الاجتماعي.

في DoctorMega، نحن من أشد المعجبين بـ AIOSEO ونستخدمها في العديد من المهام. تشمل هذه المهام إدارة خرائط مواقع XML، وأوصاف التعريف، وعلامات العناوين، وإعدادات OpenGraph لفيسبوك وX. لمزيد من المعلومات حول الإضافة، راجع مراجعة AIOSEO الكاملة.

للبدء، عليك تثبيت وتفعيل إضافة All in One SEO. لمزيد من التفاصيل، يمكنك الاطلاع على دليلنا خطوة بخطوة حول كيفية تثبيت إضافة ووردبريس.

ملاحظة 📝: هل ميزانيتك محدودة؟ تتوفر أيضًا نسخة مجانية من All in One SEO يمكنك تجربتها قبل الاشتراك في النسخة الـ Pro.

بعد تفعيل الإضافة، سيشغل معالج الإعداد. ما عليك سوى اتباع التعليمات التي تظهر على الشاشة لإكمال العملية. يمكنك أيضًا الاطلاع على دليلنا حول كيفية إعداد All in One SEO لمزيد من التعليمات المفصلة.

بعد ذلك، عليك زيارة صفحة All in One SEO » التواصل الاجتماعي والانتقال إلى تبويب فيسبوك. من هنا، يمكنك تعيين ‘الصورة البارزة’ كمصدر صور افتراضي لـ Open Graph.

يمكنك بعد ذلك التبديل إلى علامة التبويب X(Twitter) والقيام بنفس الشيء.

لا تنس النقر على زر “حفظ التغييرات” لتخزين إعداداتك.

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

في هذه الحالة، يمكنك توفير صورة مخصصة لمنصات التواصل الاجتماعي.

قم ببساطة بإنشاء صورة بنسبة عرض إلى ارتفاع تبلغ 16:9، والتي يمكن أن تكون 1200×675 بكسل أو 680×382 بكسل. بعد ذلك، قم بتعديل المنشور أو الصفحة وانتقل إلى الأسفل إلى قسم ‘إعدادات AIOSEO’ أسفل محرر المحتوى.

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

يمكنك بعد ذلك التبديل إلى علامة التبويب إكس (تويتر) والقيام بنفس الشيء.

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

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

ما هو حجم الصورة الذي يجب أن أستخدمه لشعار الموقع الكتروني الخاص بي في ووردبريس؟

الحجم الأمثل لشعار أو لوجو ووردبريس هو 300×200 بكسل. مع ذلك، يختلف الحجم المثالي باختلاف قالبك.

ستوصي العديد من قوالب ووردبريس بحجم شعار معين أثناء الرفع. على سبيل المثال، قد يعرض البعض رسالة تقترح الأبعاد المثالية.

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

في هذه الحالة، نوصي برفع أستايلات وأحجام مختلفة لاختيار الأنسب لعلامتك التجارية. يعد حجم صورة الشعار 300×200 بكسل نقطة بداية جيدة.

نصيحة إضافية: تحرير الصور لموقع ووردبريس الخاص بك

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

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

سيؤدي هذا إلى فتح الصورة في نافذة منبثقة، حيث سترى زر لتحرير الصورة.

بمجرد قيامك بذلك، يجب أن ترى خيارات التحرير.

تتضمن أدوات التحرير تغيير حجم الصورة الأساسية، والقص، والتدوير، والانعكاس.

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

لحسن الحظ، هناك العديد من الخيارات المجانية وغير المكلفة التي يمكنك استخدامها:

• Canva – برنامج مجاني لتحرير الصور على الويب. يتضمن أيضًا تمبلتات جاهزة لصور المواقع الكترونية والشعارات وصور مواقع التواصل الاجتماعي والمزيد.
• Pixlr – برنامج مجاني لتحرير الصور على الويب. يمكنك استخدامه لتغيير حجم الصور لمنشورات مدونتك بسهولة.
• Gimp – برنامج مجاني ومفتوح المصدر لتحرير الصور. يعمل هذا البرنامج كتطبيق سطح مكتب أصلي على أنظمة ويندوز وماك ولينكس. يمكنك استخدامه لتغيير حجم الصور، وإضافة طبقات من النصوص، وتحرير الصور، والمزيد.

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

الأسئلة الشائعة حول أحجام صور ووردبريس

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

ما هو أفضل تنسيق للصورة: JPEG، PNG، أو WebP؟

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

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

هل أحتاج إلى اضافة لتحسين الصورة؟

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

تتضمن العديد من إضافات التخزين المؤقت الشائعة، مثل WP Rocket، ميزات تحسين الصور. يساعد هذا على تحميل صفحاتك بشكل أسرع، وهو أمر رائع لتحسين تجربة المستخدم والسيو.

ما هو الفرق بين أبعاد الصورة وحجم الملف؟

أبعاد الصورة هي عرضها وارتفاعها، وتقاس بالبكسل (مثلاً: 1200 × 675 بكسل). تحدد هذه الأبعاد حجم الصورة التي تظهر على الشاشة.

حجم الملف هو مساحة التخزين التي تشغلها الصورة، وتقاس بالكيلوبايت (KB) أو الميجابايت (MB). عادة ما تؤدي الأبعاد الأكبر إلى حجم ملف أكبر، مما قد يبطئ أداء موقعك.

كيف يمكنني العثور على أبعاد الصورة الصحيحة للقالب الخاص بي؟

الطريقة الأسهل هي التحقق من وثائق القالب لديك، والتي غالبًا ما تحدد أحجام الصور الموصى بها.

إذا لم تتمكن من العثور عليه هناك، فيمكنك استخدام أدوات المطور في متصفحك. ما عليك سوى النقر بزر الماوس الأيمن على منطقة الصورة على موقعك (مثل منطقة المحتوى) وتحديد ‘Inspect’. سيؤدي هذا إلى إظهار الأبعاد الدقيقة للحاوية، مما يمنحك حجم مستهدف تسعى إليه.

مصادر إضافية حول صور ووردبريس

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

• كيفية إضافة تكبير للصور في ووردبريس
• كيفية إضافة تعليقات توضيحية للصور المميزة في ووردبريس
• كيفية استخدام الذكاء الاصطناعي لإنشاء صور في ووردبريس
• كيفية إضافة ملفات صور SVG في ووردبريس
• النص البديل للصور مقابل عنوان الصورة في ووردبريس
• كيفية تحسين الصور لتحسين أداء الويب دون فقدان الجودة
• أفضل المواقع للعثور على صور مجانية من المجال العام لمدونتك
• كيفية إصلاح مشكلة عدم ظهور الصورة المميزة في ووردبريس
• كيفية إصلاح مشاكل تحميل الصور في ووردبريس

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