حسّن صورك بأحجام صور محددة مسبقًا [نصيحة ووردبريس]
يعد تحسين الصور على موقع الويب مهمة شاقة. يمكنك اختيار استخدام عدد أقل من الصور أو الصور المضغوطة أو العفاريت أو svg ؛ والقائمة تطول. مكان واحد حيث يتم تعثر العديد من مواقع WordPress هو تحديد أحجام الصور ، وهو جانب حاسم في تحسين مواقع المحتوى الثقيل.
تعد أحجام الصور حيوية لأن الصور يتم إنشاؤها تلقائيًا وفقًا للأحجام المعطاة عند تحميل الصور. هذا يضمن أنه حتى لو كان لديك صورة أصلية بعرض 3000 بكسل ، فلن يتم استخدامها أبدًا إذا كانت صورة 600 بكسل كافية. من الناحية المثالية ، يجب أن تستخدم مساحة العرض 600 بكسل صورة بعرض 600 بكسل بدلاً من تصغير صورة أكبر.
في هذه المقالة سوف أمشي لك من خلال ما هي أحجام الصور و كيفية تحديدها.
كيف ووردبرس] يعالج الصور
إذا قمت بإدراج صورة في مقال WordPress ، فيجب عليك اختيار محدد حجم الصورة. يتيح لك ذلك إدراج إصدارات صغيرة ومتوسطة وكبيرة من الصور. الأحجام الفعلية لهذه يمكن تعديلها في إعدادات وورد.
كلما قمت بتحميل صورة من خلال WordPress ، فإنها تقوم بإنشاء إصدارات من هذه الصور وتخزينها بشكل منفصل. على سبيل المثال ، إذا قمت بتحميل صورة 1200 × 800 ، فقد ينشئ WordPress إصدارات 100 × 100 و 600 × 400 و 900 × 600. عند إدراج صورة واختيار "متوسط" ، سيتم استخدام الإصدار الفعلي الفعلي ، على عكس النسخة المتقلصة من النسخة الأصلية.
هذا مفيد للغاية لأنه يحافظ على النطاق الترددي على الخادم ووقت المعالجة على الكمبيوتر العميل. أعتقد أنه ليس من المستغرب أن يكون تنزيل صورة 600 × 400 أسرع من تنزيل صورة 1200 × 800.
إذا تم استخدام صورة أكبر والتي تحتاج إلى تصغير, يحتاج المتصفح لرعاية الحسابات لجعل هذا يحدث. على الرغم من أن هذا لن يستغرق ساعات ، إلا أنه قد يكون ملحوظًا على مواقع الويب ذات الصور الثقيلة.
الصورة الصحيحة في المكان المناسب
الهدف النهائي يجب أن يكون دائما استخدام أحجام الصور المناسبة. إذا كنت بحاجة إلى صورة 440 × 380 ، فاخذ صورة بهذا الحجم الدقيق من الخادم. هناك مكانان رئيسيان ستستخدمان فيه الصور التي تم تحميلها: الصور المميزة والصور التي يتم نشرها بعد النشر - أنصحك بالتركيز على الصور المميزة أولاً.
في جميع المقالات باستثناء معظمها الموجهة بصريًا ، لا يهم حقًا إذا كانت الصورة المنشورة بعرض 220 بكسل أو 245 بكسل. أيًا كان الإصدار المتاح لديك سيكون صالحًا للاستخدام على حد سواء. لكن الصور المميزة تظهر عادة بأحجام شائعة. بالنسبة لقوائم المقالات ، يمكنك استخدام صورة مصغرة 178 × 178 ، وبالنسبة لرؤوس المقالات ، يمكنك استخدام صورة واسعة 1200 × 600.
بالإضافة إلى هذه ، قد ترغب أيضًا في الاحتفاظ بحجم مصغر منفصل / متوسط / كبير كما هو محدد في الإعدادات تمنحك سهولة الوصول إلى أبعاد محددة عند إضافة الصور إلى المشاركات.
ما يتلخص في كل هذا هو: ألا يكون الأمر رائعًا إذا كان لدينا حجمان إضافيان للصور يمكننا استخدامها للصور المميزة؟ سيتم إنشاء أحجام الصور هذه إلى جانب الباقي عند تحميل صورة. والخبر السار هو أن ووردبريس قد غطيت وظيفة بسيطة جدا.
إنشاء أحجام الصور
باستخدام وظيفة add_image_size () يمكنك تحديد جميع أحجام الصور التي يحتاجها موقع الويب الخاص بك. لنقم بإنشاء المثالين المذكورين أعلاه. ضع الكود أدناه في ملف بوظائف theme الخاص بك أو في ملف البرنامج المساعد.
add_image_size ('featured_thumbnail' ، 178 ، 178 ، صواب) ؛ add_image_size ('featured_wide' ، 1200 ، 600) ؛ كما ترون ، هذه الوظيفة تأخذ أربعة معلمات. تتيح لك المعلمة الأولى تعيين اسم للحجم. المعلمة الثانية هي الحد الأقصى للعرض ، والثالث ، والحد الأقصى للارتفاع. المعلمة الرابعة يحدد من الصعب زراعة المحاصيل. إذا تم ضبطه على "صحيح", سيتم إنشاء الصورة بالحجم الذي تحدده بالضبط.
بمجرد إضافة هذا إلى موضوعك أو البرنامج المساعد ، سيتم إنشاء نسختين جديدتين من كل ملف تقوم بتحميله بواسطة WordPress.
باستخدام أحجام الصور
يمكن استخدام أحجام الصور هذه في عدد من الوظائف التي تتعامل مع استرداد الوسائط. دعنا ننظر إلى الصور المميزة أولاً. the_post_thumbnail () يستخدم عادة لعرض الصورة المميزة للنشر. يمكن وضع الكود التالي في حلقة WordPress:
the_post_thumbnail ('featured_thumbnail')؛ تتيح لك المعلمة الأولى من هذه الوظيفة تحديد حجم الصورة المطلوب استخدامها. نظرًا لأنني حددت "featured_thumbnail" ، فسيتم استخدام الإصدار 178 × 178 من هذا الملف.
هناك عدد من الوظائف الأخرى مثل wp_get_attachment_image ()و wp_get_attachment_image_src () التي تستخدم أيضا المعلمة حجم الصورة. كلما استخدمت مثل هذه الوظيفة ، يجب عليك دائمًا تحديد حجم الصورة المناسب.
تجديد الصور المصغرة
إذا كان لديك موقع بالفعل ، فلن تتمكن من تحسين مقالاتك بأثر رجعي فقط من خلال تحديد حجم الصورة. لا تؤخذ أحجام الصور في الاعتبار إلا عند تحميل صورة جديدة ، بحيث لا يتم تطبيقها على الصور الموجودة بالفعل في النظام.
لا تخف ، فإن البرنامج المساعد لتجديد الصور المصغرة سيجعل الأمور أفضل! يمكن لهذا المكون الإضافي تجديد الصور المصغرة لجميع صورك ، مع مراعاة جميع أحجام الصور المحددة. من الممكن ايضا استهداف صورة محددة, وهو أمر مفيد إذا كان لديك عدد قليل ، أو كنت تقوم ببعض الاختبارات.
بمجرد تجديد الصور المصغرة ، سترى الإصدارات المحسّنة المحمّلة على موقعك. يمكنك التحقق من ذلك عن طريق عرض مصدر الصورة. إذا قمت بتحميل "example.jpeg" ورأيت "example.jpeg" كمصدر لصورتك المميزة ، فلن يكون هناك شيء صحيح. إذا كنت ترى “المثال-178 × 178.jpeg” كل شيء على ما يرام يتم عرض الصورة المحسنة.
الصور المستجيبة
صعوبة واحدة في الحفاظ على موقع الأمثل هو الاستجابة. عندما أشاهد مقالًا على iPad ، سيتم تصغير حجم الصور التي يتم نشرها بحجم كبير نظرًا لأن الحد الأقصى للعرض سيكون 786 بكسلًا أو نحو ذلك.
الحل الأسهل هو استخدام مكون إضافي مثل Hammy. يعمل Hammy استنادًا إلى عرض محتوى السمة الخاصة بك (على عكس عرض نافذة المتصفح) ويمكنه تقديم صور محسّنة بناءً على ذلك. يعد هذا مفيدًا بشكل خاص لمستخدمي الأجهزة المحمولة حيث قد تكون معالجة الطاقة وعرض النطاق الترددي مشكلة.
مزيد من الصور الأمثل
كما ذكرت في المقدمة ، هناك طرق لا حصر لها لتحسين الصور. من العفاريت إلى ضغط الصور ، يمكن استخدام الكثير من التقنيات لتقليل أوقات التحميل التي تأتي جنبًا إلى جنب مع الصور. كتب Ashutosh KS مقالة رائعة تعرض فيها 9 إضافات WordPress لتحسين أداء الصورة ، أقترح إعطائها قراءة!
أقترح أيضًا إلقاء نظرة على صور متجاوبة خالية من المتاعب توضح لك كيفية إضافة دعم لعنصر الصورة ، وهو شيء تريد استخدامه إذا كنت تريد كتابة التعليمات البرمجية الخاصة بك.
