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

لماذا يعد تغيير حجم صور موقع الويب الخاص بك أمرًا مهمًا

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

وفقًا WordPress.org، يلعب "الحجم المادي" الكلي للصورة دورًا كبيرًا في أداء صفحة موقع الويب. "حجم ملف [الصورة] يحدد الوقت الذي يستغرقه تحميل صفحتك ؛ كلما زاد حجم الملف ... كلما استغرق تحميل [صفحة] أطول. " بمعنى آخر ، سيؤدي تحميل حجم ملف كبير إلى موقع الويب الخاص بك إلى إبطاء أداء أي صفحة تضيف المحتوى إليها ، وعادةً ما تظهر على شكل سرعات تحميل أبطأ للصفحة في بيانات تحليلات موقعك.

"حجم ملف [الصورة] يحدد الوقت الذي يستغرقه تحميل صفحتك ؛ كلما زاد حجم الملف ... كلما استغرق تحميل [صفحة] أطول. "

-WordPress.org

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

هذه المقاييس مهمة لأنك تريد عادةً أن يقضي المستخدمون وقتًا أطول على موقعك والبحث في المزيد من الصفحات عبر موقعك.

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

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

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

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

كيفية تغيير حجم الصور لـ WordPress في GIMP

إذن كيف تقوم بتغيير حجم الصور بشكل صحيح لـ WordPress؟

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

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

مقياس صورتك

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

إذا كنت تستخدم طريقة File> Open ، فانتقل إلى موقع الصورة على جهاز الكمبيوتر الخاص بك من داخل مربع حوار "Open Image" الذي يظهر ، وانقر نقرًا مزدوجًا فوق ملف الصورة بمجرد تحديد موقعه لفتحه في GIMP (أو انقر فوق الزر الزر "فتح" في الركن الأيمن السفلي من نافذة الحوار).

في الجزء العلوي من نافذة GIMP توجد ميزة تسمى "شريط العنوان" (السهم الأحمر في الصورة أعلاه). هنا ، سترى الأبعاد الحالية لصورتك (المربع الأخضر المكبر في الصورة). صورتي هي 1920 × 1280 - بالرقم الأول ، 1920 ، يمثل عرض صورتي (بالبكسل) ، والرقم الثاني ، 1280 ، يمثل ارتفاع صورتي. ستعتمد أبعاد الصورة النهائية التي تريد استخدامها لصورتك على المكان الذي تنوي فيه استخدام الصورة في WordPress ، بالإضافة إلى المظهر الذي تستخدمه.

بالنسبة لهذا البرنامج التعليمي ، سأقوم بتغيير حجم صورتي إلى الحجم القياسي 1200 × 630 بكسل الموصى به لصور منشورات المدونة.

مع وضع ذلك في الاعتبار ، فإن أول شيء أريد القيام به هو اقتصاص صورتي بحيث تتطابق نسبة العرض إلى الارتفاع لصورتي الأصلية مع نسبة العرض إلى الارتفاع للحجم الموصى به. للقيام بذلك ، سألتقط أداة الاقتصاص الخاصة بي عن طريق الضغط على shift + c على لوحة المفاتيح أو النقر فوق رمز أداة الاقتصاص في GIMP Toolbox (السهم الأحمر في الصورة أعلاه).

بعد ذلك ، في "خيارات الأداة" لهذه الأداة ، سأضع علامة في المربع بجوار "ثابت" (السهم الأخضر) وانقر فوق القائمة المنسدلة لتحديد "نسبة العرض إلى الارتفاع" (السهم الأزرق).

سأكتب "1200: 630" لتعيين نسبة العرض إلى الارتفاع في حقل النص أسفل القائمة المنسدلة (السهم الأصفر). هذا يطابق نسبة العرض إلى الارتفاع لحجم الصورة الموصى به الذي أريد أن تكون صورتي النهائية.

باستخدام أداة الاقتصاص ، سأقوم الآن بالنقر واسحب الماوس عبر الصورة لرسم منطقة الاقتصاص. عندما أحرر الماوس ، فسيتم تعتيم كل شيء خارج منطقة الاقتصاص (السهم الأحمر في الصورة أعلاه - بافتراض أن "تمييز" محددًا في "خيارات الأداة" ، وهو عادةً ما يكون افتراضيًا).

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

يمكنك تحريك مؤشر الماوس فوق أي من جوانب أو زوايا منطقة الاقتصاص (أي المنطقة المميزة المشار إليها بالسهم الأحمر في الصورة أعلاه) ، ثم النقر والسحب لتغيير حجم حدود منطقة الاقتصاص. لاحظ أنه يمكنك دائمًا رؤية حجم مساحة المحصول في حقول "الحجم" الموجودة في "خيارات الأداة" (الموضحة باللون الأخضر في الصورة أعلاه). ستحتاج إلى الاحتفاظ بالحجم الكلي لمساحة الاقتصاص أكبر من الحجم النهائي للصورة 1200 × 630.

يمكنك أيضًا النقر بالماوس وسحبه في منتصف منطقة الاقتصاص (السهم الأحمر) لتغيير موضع الاقتصاص على الصورة.

بمجرد أن تصبح جاهزًا لاقتصاص الصورة ، انقر مرة واحدة داخل منطقة الاقتصاص وسيتم اقتصاص صورتك.

لاحظ أنه إذا لم يتم تحديد خيار "حذف وحدات البكسل المقصوصة" في "خيارات الأداة" (السهم الأخضر في الصورة أعلاه) ، فسيستمر عرض حدود الصورة الأصلية حول صورتك عبر خط أصفر منقط (السهم الأحمر). يمكنك استعادة الصورة الأصلية ، وبالتالي التراجع عن الاقتصاص ، بالانتقال إلى Image> Fit Canvas to Layers. سيتم تصدير مساحة صورتك داخل حدود اللوحة القماشية فقط.

تم اقتصاص صورتنا الآن إلى نسبة العرض إلى الارتفاع التي نريدها ، ولكن إذا نظرت مرة أخرى إلى أبعاد صورتنا في "شريط العنوان" ، سترى أن الصورة هي 1532 × 804 (موضحة باللون الأخضر ومكبرة في الصورة أعلاه - من المحتمل أن تكون أبعادك مختلفة قليلاً بناءً على حجم مساحة محصولك على صورتك). سنحتاج الآن إلى تغيير حجم صورتنا لتتناسب مع الأبعاد المطلوبة.

للقيام بذلك ، انتقل إلى Image> Scale Image (السهم الأحمر).

في مربع "قياس الصورة" الذي يظهر ، ضمن "حجم الصورة" ، تأكد من ربط رمز رابط السلسلة بجوار مربعي "العرض" و "الارتفاع" (السهم الأحمر في الصورة أعلاه). بعد ذلك ، قم بتغيير "عرض" صورتك إلى 1200 (السهم الأخضر). اضغط على مفتاح الجدولة. سيتم تحديث ارتفاع الصورة تلقائيًا إلى "630". ضمن "الجودة" ، تأكد من تعيين القائمة المنسدلة "الاستيفاء" (السهم الأزرق) إما على "NoHalo" أو "LoHalo" للحصول على أفضل جودة للصورة بعد القياس. (لمزيد من المعلومات حول الاستيفاء ، تحقق من البرنامج التعليمي الخاص بي حول هذا الموضوع).

اضغط على زر "Scale" لتوسيع نطاق صورتك (السهم الأصفر).

بمجرد اكتمال القياس ، تحقق من أبعاد الصورة في شريط العنوان. يجب أن تشاهد الآن صورة بحجم 1200 × 630 - الحجم الدقيق الذي نريده! اذا ماذا نفعل الان؟

اضغط على صورتك عن طريق التصدير إلى WebP

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

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

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

للتصدير إلى WebP ، انتقل إلى ملف> تصدير باسم (السهم الأحمر).

انقر فوق أي مجلد في قسم "الأماكن" (المحدد باللون الأخضر) لاختيار الصورة الموجودة على جهاز الكمبيوتر الخاص بك حيث تريد حفظ صورتك. يمكنك ببساطة النقر نقرًا مزدوجًا فوق مجلد لإدخاله ، ومعرفة المجلد الذي توجد فيه بجوار عنوان "حفظ في المجلد" (السهم الأحمر). بعد ذلك ، أعد تسمية صورتك إلى ما تريد - فقط تأكد من إنهاء اسم صورتك بالملحق ".webp" (السهم الأزرق) لتصدير الصورة بتنسيق WebP. عندما تكون جاهزًا ، انقر على "تصدير" في الركن الأيمن السفلي من النافذة (السهم الأصفر).

بعد ذلك ، سيظهر مربع حوار "Export Image as WebP". تأكد من عدم تحديد "Lossless" (السهم الأحمر). أقوم عادةً بتعيين "جودة الصورة" على 80 (السهم الأزرق - هذه نسبة مئوية ، لذا فكلما انخفضت النسبة المئوية ، انخفضت جودة الصورة ، ولكن كلما كان حجم ملف الصورة أصغر). إذا كانت صورتك لا تحتوي على شفافية (أي شعار بدون خلفية) ، فلا داعي للقلق بشأن شريط تمرير "جودة ألفا" (في الواقع ، في تجربة أجريتها ، خفضت جودة ألفا من 100 إلى 90 في الواقع بشكل طفيف زيادة حجم ملف الصورة بخلفية شفافة من 8.50 كيلو بايت إلى 8.52 كيلو بايت). يمكنك الاستمرار في تعيين القائمة المنسدلة "نوع المصدر" على "افتراضي".

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

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

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

انقر فوق "تصدير" (السهم الأصفر في الصورة أعلاه) لتصدير الصورة إلى تنسيق WebP. عند مقارنة ملف WebP المُصدَّر بملف JPEG بنفس الحجم ويتم ضبط جودته أيضًا على "80" ، تأتي صورة WebP بحجم 30 كيلو بايت ، أو ما يقرب من 25٪ ، أصغر حجمًا من JPEG.

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

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

سأنتقل إلى علامة التبويب "تحميل الملفات" (السهم الأحمر) ، ويمكنني سحب وإسقاط صورتي من جهاز الكمبيوتر الخاص بي إلى WordPress (الأسهم الزرقاء).

أخيرًا ، سأضغط على "تعيين الصورة المميزة" لتطبيق هذا التغيير (السهم الأحمر).

انقر فوق "تحديث" (السهم الأحمر) لتحديث صفحتك بالصورة المميزة الجديدة.

إذا قمت بالنقر فوق "عرض المشاركة" ، (السهم الأزرق) ...

... سترى الآن الصورة المميزة الجديدة معروضة أعلى مدونتي.

هذا كل شيء في هذا البرنامج التعليمي! إذا كنت تريد معرفة المزيد حول تصميم موقع WordPress على الويب ، فإنني أوصي بمراجعة ملفي دورة WordPress 6.0 لغير المبرمجين! أو ، إذا كنت تريد معرفة المزيد عن GIMP ، فتحقق من GIMP 2.10 Masterclass على Udemy!   

اشترك في النشرة الإخبارية DMD

اشترك في النشرة الإخبارية DMD

قم بالتسجيل لتلقي دروس جديدة ، تحديثات الدورة ، وآخر الأخبار عن برنامجك المفضل مفتوح المصدر!

لقد المشترك بنجاح!

يعلقون عليه على موقع Pinterest