البحث في الموقع

من الأمور التي يجب أن تعرفها حول أبعاد الصور في WooCommerce هي أنّ CSS الافتراضي لـ WooCommerce والعديد من القوالب تحدّد أبعاد صور المنتجات لضمان اتساق التخطيط عبر الأجهزة المختلفة. تؤثر الأبعاد التي تحددها في صفحة إعدادات المنتجات في WooCommerce (راجع درس ضبط إعدادات المنتجات) على حجم الصور الذي يستخدمه القالب عند عرض صور المنتج. حيث لا تغيّر القوالب الحجم الذي تُعرض به الصور، وذلك يمكن أن يؤدي إلى تشويه الصورة وتمويهها عندما تكون إعداداتك غير كافية (أي صغيرة جدًا بالنسبة للحجم الذي يستخدمه القالب لعرض الصور). ألقِ نظرة على المخطط أدناه لمزيد من التوضيح: معالجة تشوه الصور سنقوم بمعالجة مشكلة تشوّه افتراضية كوسيلة للتوضيح. قبل أن تبدأ، تأكد من أن تكون أحجام الصور التي ترفعها كبيرة كفاية. يمكنك استخدام حجم 800 × 800 فما فوق، فهو يصلح لأغلب القوالب. أنواع الصور تستخدم المصطلحات الثلاثة التالية لتصنيف الصور على WooCommerce: Single Product Image: وهي صورة المنتج ذات الحجم الأكبر والتي تُعرض على صفحة تفاصيل المنتج. Catalog Images: وهي الصور ذات الحجم المتوسط التي تُستخدم في قوائم المنتجات المختلفة. مثل الفئات categories، المنتجات ذات الصلة related products، منتجات الارتقاء بالصفقة up-sells، منتجات البيع المتقاطع cross-sells، إلخ. Product Thumbnails: وهي الصور ذات الحجم الأصغر التي تستخدم في معارض المنتج مثل صفحة تفاصيل المنتج (تحت الصورة المميزة للمنتج) ، في السلة، وعلى الودجات. يمكنك تحديد أبعاد هذه الصور بالذهاب إلى: WooCommerce > Settings > Products > Display تعرف على حجم عرض الصور على قالبك يحدد القالب الذي اخترته الحجم الذي تُعرض به الصور عليه، لذلك يجب أن تعرف الأبعاد التي يستخدمها القالب لعرض الصور. صورة الكتالوج Catalog Image حدد المكان الذي يعرض فيه القالب صور الكتالوج بأكبر حجم. في أغلب الحالات يكون هذا المكان هو الصفحة الرئيسية للمتجر؛ لكن قد يختلف المكان في بعض القوالب. على سبيل المثال تُعرض صور الكتالوج بأكبر حجمها في منطقة قائمة المنتجات ذات الصلة related products في قالب Twenty Eleven. ولتحديد الحجم الذي يستخدمه القالب لعرض صور الكتالوج، انقر بزر الفأرة الأيمن على الصورة واختر Inspect إذا كنت تستخدم متصفح Chrome. يمكنك القيام بذلك أيضًا على متصفح Firefox. ستجد أبعاد الصورة ضمن المعلومات التي ستظهر في قسم Element. قم بتسجيل الأبعاد لكي تستخدمها لاحقا. في قالب Storefront الموضح أعلاه (وهو قالب WooCommerce الافتراضي)، أكبر صورة كتالوج تُعرض بحجم 213 × 213 بكسل. الصورة المميزة للمنتج Single Product Image كرر نفس الخطوات أعلاه على صورة المنتج المميزة؛ وهي الصورة الكبيرة التي تُعرض على صفحة تفاصيل المنتج. في قالب Storefront، أكبر صورة منتج تعرض بحجم 298 × 298 بكسل. الصور المصغرة للمنتج Product Thumbnail وهي على الأرجح الصور الأصغر في معرض صور المنتج. كرر نفس الخطوات المذكورة سابقًا لمعرفة أبعادها. في قالب Storefront تُعرض هذه الصور بحجم 43× 43 بكسل. إدخال الأبعاد وتجديد الصور الآن بعد أن أصبحت جميع أبعاد الصور التي تُستخدم في قالبك معلومة، بإمكانك إدخال الأبعاد الجديدة لتتأكد من أن الصور التي ستقوم بإضافتها لاحقًا ستكون بهذا الحجم أو أكبر. اذهب إلى: WooCommerce > Settings > Products > Display وتأكّد من أنّ الحد الأقصى للصور المذكورة مساو للأبعاد التي يعرضها قالبك لهذه الصور، أو أكبر منها. بعد ذلك قم بحفظ التغييرات بالنقر على Save Changes. بذلك عندما تقوم برفع صور جديدة للمنتج ستكون بهذه الأبعاد المحددة في الإعدادات، وستظهر بدون تشوه. ملاحظة: عند تغيير أبعاد الصور في الإعدادات وحفظ التغييرات لا يتم تحديث جميع صور المنتجات التي تم رفعها سابقًا. إذ يحتاج ووردبريس إلى تجديد الصور لتحديث الصور القديمة. بإمكانك استخدام ملحق Regenerate Thumbnails الذي يتيح لك إمكانية تجديد الصور القديمة بعد تغيير أبعادها في الإعدادات. دعم شاشة Retina تحتوي شاشات HiDPI ضعف عدد البكسلات الذي تحتويه الشاشة الاعتيادية. ولعرض الصور بشكل مثالي على شاشات Retina، قم بتعيين إبعاد الصور بضعف الحجم الذي يعرضه القالب الذي تستخدمه. فإذا كان القالب يعرض الصورة بحجم 80 × 80، قم باستخدام الأبعاد 160 × 160. لكن يجب أن تأخذ في الاعتبار أنّ ذلك يؤثر على الأداء، لأن الصور كبيرة الحجم تستغرق وقتًا أطول للتحميل. لذلك فإنّ استخدام ضعف الحجم راجع إلى تفضيلك الشخصي، ويجب أن تقوم بإجراء تحليل لزيارات متجرك قبل اتخاذ القرار. هل ترغب في متجر ووكومرس احترافي لبدء تجارتك الإلكترونية؟ احصل على خدمات مميزة لإنشاء متجرك الإلكتروني وتحسينه وإدارته على خمسات أنشئ متجر ووكومرس الآن ترجمة -وبتصرّف- للدرس Using appropriate image dimensions to avoid distortion / pixellation.

تطرّقنا في المقال السّابق إلى أهميّة تحسين الصّور على موقعك، بل والحاجة إلى القيام بذلك. قبل أن نتطرق إلى الخيارات المتوافرة لتجهيز الصور للنشر على الإنترنت، لنتحدث قليلا عن بعض الخطوات التحضيرية البسيطة ذات الأثر الكبير والقادرة على إضافة قيمة فيما يخص التحسينات اللاحقة. تغيير حجم الصورة مسبقا عرفت الكاميرات الرقمية العصرية تقدما كبيرا إلى حد المبالغة في ما يخص بعض الأمور، حيث أن الصور الملتقطة باستعمال هاتف iPhone مثلًا تعتبر كبيرة جدا مقارنة مع ما تحتاجه لووردبريس. تبعا لإعدادات الكاميرا التي تستخدمها يمكن لحجم الصور أن يصل إلى 4912*7360 بكسل بحجم ملف يصل إلى 30 ميغابايت، لذا يعتبر تغيير حجم الصور من أجل الاستخدام على الإنترنت الخطوة الأولى الأساسية في وضع الأمور في نصابها. سوف تحتاج بطبيعة الحال إلى أداة للقيام بذلك، تتوافر العديد من الخيارات التي يمكنك استخدامها. إن لم تكن مستعدا لإنفاق بعض المال فيمكن لكل من Paint بالنسبة لويندوز و Preview بالنسبة للماك القيام بتغيير حجم الصور بشكل ممتاز بكل بساطة وسرعة. إن كنت تبتغي التّحكم بشكل أفضل في الصّور دون أن تدفع مقابل تطبيقات تجارية، فأنصحك باستخدام Gimp الذي يوفر حلا مجانيا للاستخدام على الحواسيب، فهو مُتَعدد المنصات (cross-platform) ومفتوح المصدر. تتوافر أيضا بعض الخيارات للاستخدام عبر الإنترنت فقط مثل Pixlr و Fotoflexer. في فئة الحلول المدفوعة، يقدم كل من Pixelmator للماك و IrfanView للويندوز وظائف شاملة ممتازة بأثمنة في المتناول. يبقى فوتوشوب هو الخيار البديهي، في هذا السياق يأتي إعلان Adobe عن Creative Cloud packages بين حزمة برامجه ليضع أفضل أداة تعديل الصور في متناول القدرة الشرائية لعامة الناس. بغض النظر عن الأداة التي ستستخدمها، عليك بتذكر النقاط التالية دائما أثناء تغيير حجم الصور: العمل على نسخة من الصورة (عوض العمل على الصورة الأصلية ذات الجودة العالية) ما يوفر لك إمكانية التجريب وتغيير رأيك. عليك بالتأكد من الحفاظ على معدل الطول إلى العرض (aspect ratio) الأصلي دون التسبب في أي تشويه (distortion) أثناء تغيير الحجم. تقطيع الحواشي (Cropping Cuts) إلى جانب تغيير حجم الصور الإجمالي، يعتبر تقطيع الحواشي أيضا من بين أهم الخطوات التحضيرية التي يجب عليك القيام بها. يهدف التخلص من هذه الزوائد إلى: الإنقاص من حجم الملف كنتيجة بديهية. جعل الصور أكثر قوة وتعبيرا بصريا. مثال توضيحي لقطع الحواف بشكل جيد إعداد الصور لدعم شاشات Retina قبل المرور إلى ضغط (compressing) الصور، لنتطرق باختصار إلى موضوع تحسين الصور بغرض دعم الأجهزة ذات شاشات من نوع Retina. أضحت شاشات العرض من نوع Retina وبشكل متزايد النموذج المعياري لكل الأجهزة من مختلف الأحجام، كما أن نسبة حركة الزوار الخاصة بها ستعرف ارتفاعا في السنوات القليلة المقبلة. إن لم تكن تريد لمجهودك في تغيير حجم الصور وتقطيع حواشيها أن يضيع سدى وتظهر صورك منقطة ومتقطعة عند العرض على الأجهزة الحديثة عليك بأخذ هذا بعين الاعتبار. تقدم مدونة Jetpack مثالا توضيحيا للفرق بين الصورة إن تم تحسينها وإن لم يتم ذلك: صورة توضيحية للفرق بين بين الصور الداعمة لشاشات retina وتلك غير الداعمة في التطبيق، يتجلى إعداد الصور لدعم شاشات Retina من خلال إنشاء نسختين من الصور: الأولى بالقياسات التي تحتاجها والثانية بضعف تلك القياسات، على سبيل المثال بالنسبة لصورة بصيغة JPEG بحجم 350*350 بكسل يجب أن تنشأ نسخة أخرى منها بحجم 700*700 بكسل. يمكنك التحكم في عرض هذه النسخ من الصور على ووردبريس من خلال استخدام سكربت Retina.js أو بالاعتماد على أحد الملحقين التاليين: WP Retina 2x أو Simple WP Retina واللذان يعتبران أفضل الملحقات للقيام بهذه المهمة. ضغط الصور تعرفنا إلى حد الآن على كيفية تحظير الصور من خلال تغيير قياساتها، قطع حواشيها فضلا عن ملائمتها للعرض على العديد من الأجهزة المختلفة. لننتقل إلى أهم مرحلة في عملية التحسين ألا وهي ضغط الصور. تتجلى عملية الضغط بكل بساطة في الحذف (عبر خوارزميات خاصة) للمعلومات المتواجدة في الصور والتي لا يمكن للعين البشرية التقاطها، يعتبر الضغط خطوة أساسية في التحسين حيث يسمح بخفض حجم ملفات الصور بشكل كبير. من بين الأنواع الثلاثة للصور النقطية التي أشرنا إليها سابقا، تعتبر صيغة JPEGs أفضل الخيارات لعملية الضغط كونها تستخدم مبدأ الضغط الفقود (lossy compression) على عكس صيغ PNGs وGIFs ما يعني احتمالية أكبر للحصول على انخفاض مهم في حجم الملفات. تتجلى نقطة الضعف في ضرورة الفحص الدقيق للنتائج بعد الضغط للتأكد من خلو الصور المضغوطة من التشوهات الصورية (visual artefacts) كما في الصورة أسفله. مثال للتشوهات الصورية التي قد يسببها الضغط أثناء عملية الضغط يجب عليك أن تستهدف أصغر حجم ملفات ممكن بأفضل جودة صورة ممكنة. تجدر الإشارة إلى أن ضغط الصور بصيغ PNGs و GIFs يقلل من حجم ملفاتها أيضا، يتجلى الفرق الوحيد في أن إنقاص حجم الملفات يكون أقل. توضح الصورة التالية المأخوذة من موقع TinyPNG أن المردودية المحصلة من ضغط هذه الصيغ تبقى كبيرة رغم ذلك. الفرق في حجم الملفات الناتج عن ضغط صورة من TinyPNG أدوات ضغط الصور توجد العديد من الخيارات المتوافرة لضغط الصور، إذا كنت تستخدم أحد برامج تعديل الصور التي لا تحتاج اتصال إنترنت التي أشرنا إليها سابقا، يمكنك بكل بساطة التحكم في خصائص الحفظ ( Save-as) المدمجة. هنالك أيضا تطبيقات لا تتطلب اتصال إنترنت مقدمة من كبريات المنصات مخصصة كليا لضغط الصور، أفضل الخيارات في هذا الصدد هي: ImageOptim للاستخدام على الماك أو Trimage للاستخدام على كل من الماك أو الويندوز. مردودية مرتفعة في خفض حجم الملفات باستخدام Kraken.io للاستخدام على الإنترنت يتربع على عرش العديد من الحلول المتوافرة كل من المتنافسين المتصدرين: TinyPNG و Kraken. ملحق WP Smush منذ بدئنا في مشروع WP Smush سنة 2013 عملنا على استثمار الكثير من الجهد والوقت في جعلها أكثر أدوات ووردبريس لتحسين الصور كمالا من ناحية الخصائص المتوافرة. قمنا مؤخرا بوضع WP Smush Pro تحث الاختبار وقارنّا النتائج مع أدوات مدفوعة أخرى لتحسين الصور كانت الخلاصة تصدر كل من Kraken، EWWW وWP Smush. إن كنت تبحث عن ملحق كامل الخصائص يقوم بكل العمل المضني من أجلك وعلى ووردبريس فإننا ننصحك بشدة بتجربة ملحق WP Smush. تحسين الصور من أجل السيو SEO قمنا إلى حد الآن بالتركيز على خاصيات عرض الصور إلا أن التحسين من أجل السيو لا يقل أهمية عن ذلك فيما يخص النجاح الإجمالي لموقعك، لنلق نظرة سريعة على الأساسيات: Filenames (أسماء الملفات): استخدم اسما وصفيا يتضمن الكلمات المفتاحية عوض الأسماء المولدة أوتوماتيكيا والتي لا تحمل معنى، استخدم مثلا: "green-child-bicycle.jpg" عوض "BX8A132E.JPEG". Alt tags (وسوم ALT): أنشئ وسوم ALT موجزة لكل صورة بغرض تحسين الصور ولقابلية وصول أفضل، على سبيل المثال: "alt="Side view of a child’s green bicycle". تحسينات خارج نطاق موقعك لن تقوم كل تحسينات الصور المتاحة بإحداث الكثير من الفرق إن كان موقعك يعاني من عراقيل في الأداء في نواح أخرى، يتطلب التطرق إلى هذا الموضوع الكثير من الوقت، عليك بالبدء بما يلي: أدوات اختبار السرعة: عليك بقياس أداء موقعك باستخدام الأدوات الاعتيادية لاختبار سرعة المواقع. إعداد الخادوم/الاستضافة: قم بتقييم أداء مزود الاستضافة الخاص بك للتأكد من أن الخادوم محسن من أجل مواقع ووردبريس. يمكنك الاستفادة أيضا من فوائد استخدام شبكات توصيل المحتوى (ِContent Delivery Networks) مثل Cloudflare أو Photon الخاص بووردبريس لتتأكد من إيصال صورك بأسرع ما يمكن. وضع برنامج زمني لتحسين الصور بعد إتقان ما تطرقنا له في ما سبق، عليك عليك بإعداد قائمة مهام خاصة بالأمر تعود إليها بشكل متواصل لجعل تحسين الصور عملية روتينية موثّقة ومُدمجة ضمن آلية النّشر لديك، حيث تتمكن أنت أو أي شخص من طاقمك من القيام بها. استخدم العملية المكونة من 6 خطوات التالية مع مراعاة إدخال التغييرات التي تراها مناسبة حسب موقعك: تأكد من تحديد صيغة الصور الصحيحة من أجل تحقيق ما تريده. اعمل على قص حواشي الصور وتغيير حجمها للحصول على تأثير قوي وعلى أصغر حجم ممكن للصورة. توفير صور للعرض على الشاشات العادية وشاشات retina على حد سواء. الاستفادة من ضغط الصور والتحقق بصريا من خلو الصور من أي تشوهات، يمكنك البدء كخطوة أولى باستخدام أداة WP Smush. استثمر بعض الوقت لتحسين كل الصور من أجل السيو للاستفادة من بعض النتائج السهلة فيما يخص حركة مرور الزوار. خذ بعين الاعتبار استخدام CDN من أجل نتائج أفضل. خلاصة نتمنى أن يكون هذا المقال قد ساعدك بتقديم نظرة إجمالية حول موضوع تحسين الصور سواء على موقعك، يجدر بك تضمين تحسين الصّور في آلية النّشر لديك، وذلك لتحسين تصنيفك على محركات البحث، ضمان مداومة الزائر على الاطلاع على محتوى موقعك فضلا عن الرفع من حركة مرور مستخدمي الهواتف المحمولة. لقد اقتصرنا فيما سبق على التقنيات المجربة والتي أتبت فاعليتها، إلا أن الخيارات المتوافرة تتغير بشكل يومي، شاركنا في التعليقات أسفله أي نصائح أو طرق خاصة بك قد تكون مفيدة لمستخدمي ووردبريس الآخرين. ترجمة -وبتصرف- للمقال: The Complete Guide to Mastering Image Optimization for WordPress لصاحبه: TOM EWER.