سواء كنت مصمم ويب هاوًا أو مطورًا محترفًا ، فأنت تعلم بالفعل مدى أهمية استخدام حجم الصورة الصحيح للسرعة وتحسين محركات البحث.
هناك حوالي zillion دروس تعليمية على YouTube ومنشورات المدونات التي توضح لك كيفية العثور على الحجم المثالي لـ WordPress.
حسنًا ، هذا مختلف. إليك سير عمل مدته 5 دقائق لمساعدتك في العثور على الحجم المثالي لصورة WordPress.
لكن أولاً ، لنتحدث عن سبب وجوب تغيير حجم الصور بشكل صحيح.
هذا فيديو تعليمي ، ولكن إذا كنت تفضل القراءة ، فهناك دليل تفصيلي يتبع ذلك.
ما سبب أهمية حجم الصورة؟
الصور ذات الحجم غير المناسب من بين تحسين محركات البحث التقنية السبعة الخطايا التي يمكن أن تضر بموقعك من حيث السرعة وتصنيفات محرك البحث.
يمكن أن تؤدي الصور ذات الحجم غير المناسب إلى إبطاء موقعك وإضافة وقت تحميل ، مما يؤدي إلى فقدان الزائرين (وربما الأنشطة التجارية).
يعد استخدام أحجام صور WordPress الصحيحة أمرًا بالغ الأهمية.
عندما تقوم بتحميل صورة ، يقوم WordPress بإنشاء أربعة أحجام مختلفة للصور:
- صورة مصغرة (150 × 150 بكسل)
- متوسط (300 × 300 بكسل كحد أقصى)
- كبير (1024 × 1024 بكسل كحد أقصى)
- الحجم الكامل (الحجم الأصلي للصورة التي تم تحميلها ، اعتمادًا على الحاوية المضمنة فيها)
ينشئ WordPress أحجام الصور هذه بحيث لا تضطر إلى تغيير حجم الصور يدويًا للتأكد من عرض أفضل حجم للصورة لمواقع مختلفة.
للأسف ، تنتهي أسماء ملفات الصور بأرقام مثل my-image-size-1.jpg ، وهي ليست رائعة بالنسبة إلى تحسين محرك البحث .
على سبيل المثال ، سيختلف حجم الصورة المستخدمة في عنوان مشاركة المدونة عن الصورة المصغرة لمشاركة المدونة.
إذا استخدمت الصورة مرة واحدة فقط ، فهناك ثلاث صور أخرى موجودة على الخادم الخاص بك ، وتشغل مساحة وربما تؤدي إلى إبطاء موقعك.
فيما يلي دليل منع WordPress من إنشاء أحجام صور متعددة من WPEngine. وإذا كنت تفضل ذلك ، فهناك مكونات إضافية مثل توقف عن إنشاء صور مصغرة غير ضرورية ستؤدي المهمة .
لكن ارجع إلى تحديد حجم الصورة المناسب.
هل تفضل منا أن نفعل ذلك من أجلك؟
إذا كنت تفضل تعيين محترف لتصميم موقع الويب ، فنحن نحب مساعدتك . بصفتنا وكالة التسويق الرقمي الرائدة في Baton Rouge ، فإننا نعرف ما يلزم لمساعدتك في توسيع نطاق نشاطك التجاري عبر الإنترنت.
اتصل بناما الحجم الذي يجب تحميله على موقعك؟
إذًا ما هو أفضل حجم للتأكد من أن موقع الويب الخاص بك يحتوي على صور سريعة الاستجابة وعالية الجودة والتي ستبدو رائعة على أجهزة سطح المكتب والجهاز اللوحي والأجهزة المحمولة؟
ستخبرك معظم أدلة حجم صور WordPress بالتحميل:
- حجم صورة منشور المدونة (1200 × 630 بكسل)
- حجم صورة العنوان (حجم إعلان بانر 1048 × 250 بكسل)
- حجم الصورة المميز (أفقي 1200 × 900 بكسل)
- حجم الصورة المميز (عمودي 900 × 1200 بكسل)
- حجم صورة خلفية WordPress (1920 × 1080 بكسل)
- حجم صورة الشعار (200 × 100 بكسل)
- حجم الصورة المصغرة (150 × 150 بكسل)
لكن تذكر هذه الأحجام يعد أمرًا مؤلمًا. لجعل الأمور أسوأ ، تستخدم بعض سمات WordPress أحجام صور مخصصة وتضيف تلقائيًا أحجام الصور.
حسنًا ، إليك الأخبار السارة. ما نحن بصدد إظهاره لك سوف يمنعك من الاضطرار إلى تذكر دقة الصورة الأفضل لأي غرض.
كيفية تحميل صور WordPress بالحجم المثالي
فيما يلي سير العمل الذي نستخدمه للحفاظ على أحجام ملفاتك صغيرة عن طريق الحفاظ على صورك بالحجم الدقيق الذي يتم تقديمه للزائر.
يعمل ملف الصورة الأصغر على تسريع تحميل صفحة الويب.
الخطوة 1 - تنزيل CSSscan
على الرغم من أنه يمكنك النقر بزر الماوس الأيمن وفحص عنصر في متصفحك ، إلا أن هناك ملحق متصفح نحبه يسمى CSS Scan يجعل من السهل.
على الرغم من أنه مصمم لاستهداف CSS لموقع ويب وتطويره ، إلا أنه من الرائع المساعدة في العثور على الصور ذات الحجم المثالي
الخطوة 2 - ابحث عن الصورة التي تريد الحصول على حجمها
يمكنك استخدام CSS Scan لتغيير حجم الصور الحالية ، لكننا سنضيف صورة جديدة من البداية لهذا المثال.
على الرغم من أننا نستخدم Elementor ، يمكنك استخدام CSS Scan لأي منشئ تستخدمه أو أي موقع الويب الذي تعمل عليه (حتى لو لم يكن موقع WordPress على الويب.)
لذلك قمنا بتحميل قسم بصفين. لقد أدخلنا صورة في كل صف.
بعد ذلك ، ما عليك سوى تمكين امتداد متصفح CSS Scan ثم مرر مؤشر الماوس فوق الصورة التي تحاول العثور على الحجم المثالي لها.
الخطوة 3 - قص صورتك بالحجم المناسب.
الآن ، كل ما عليك فعله هو اقتصاص صورتك بالحجم الذي يتم تقديمه.
ملاحظة: نحن نستخدم شاشة Mac مقاس 27 بوصة ، ويتم تقديم الصور بأحجام مختلفة ، اعتمادًا على الجهاز الذي يتم عرضها عليه.
الخبر السار هو أن هذه الأبعاد هي سيناريو "أسوأ الحالات" ، ونحن نعلم أن غالبية الأجهزة ستعرض صورة ذات حجم أصغر ، لذلك نحن بأمان في استخدام هذا الحجم.
إذا كنت تصمم موقع الويب الخاص بك على جهاز أصغر وتعتقد أن المستخدم قد يكون على جهاز أكبر ، فيمكنك إما زيادة الحجم قليلاً أو مجرد استخدام الأبعاد التي تحصل عليها من CSS Scan. يجب أن يكون الفرق ضئيلًا وأن يكون هناك فرق بسيط أو معدوم.
إذا كنت تنوي فتح صورتك في عرض مبسط ، فقد ترغب في عرض صفحة الويب التي تعمل عليها على الواجهة الأمامية ، والنقر فوق الصورة ، واستخدام نفس العملية للعثور على الحجم الذي يتم تقديمه لها عند النقر عليه.
بعد ذلك ، استخدم هذا الحجم فقط.
تاريخيًا ، استخدمنا Photoshop لتغيير حجم صورنا لمواقع الويب التي نصممها ، ووجدنا أنها تجاوزت طاقتها قليلاً وتستخدم ذاكرة وصول عشوائي كبيرة.
لقد بدأنا مؤخرًا في استخدام Acorn لتغيير حجم الصورة الصغيرة وتعديلها. تمتلك Acorn مساحة أصغر وتستخدم موارد أقل بشكل كبير.
الخطوة 4 - حمّل صورتك وفويلا.
أخيرًا ، كل ما عليك فعله هو تحميل صورتك ذات الحجم المناسب إلى موقع الويب الخاص بك.
هذا كل ما في الأمر
لديك الآن الصورة ذات الحجم المثالي على موقع الويب الخاص بك على WordPress (أو أي نظام إدارة محتوى آخر).
الاستنتاج
كما ترى ، ليست هناك حاجة لإلقاء نظرة على آلاف البرامج التعليمية حول الحجم المثالي لصورة WordPress. لست بحاجة إلى أوراق الغش لتذكيرك بالحجم الذي تريده.
ما عليك سوى استخدام CSS Scan للعثور على الحجم المثالي للصورة.
أخبرني إذا كان لديك أي تعليقات أو كيف تستخدم سير العمل هذا لتصميم موقع الويب الخاص بك. يسعدني أن أعرف كيف يعمل ذلك من أجلك.