كيفية تحسين صورك للووردبريس

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

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

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

لماذا يجب عليك تحسين صورك للووردبريس

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

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

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

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

يتعلق تحسين الصور حقًا بتحسين شيئين:

• عدد البايت المستخدم لترميز كل بكسل صورة
• العدد الإجمالي لوحدات البكسل المستخدمة.

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

حسِّن صورك قبل تحميلها على ووردبريس

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

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

تنسيقات ملفات الصور

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

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

متى تستخدم صور JPEG

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

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

متى تستخدم PNGs

تعد ملفات PNG مفيدة أيضًا لمحتوى الويب ، تمامًا مثل ملفات JPEG ، ولكن بطريقة مختلفة. نظرًا لأن PNGs يمكن أن تحتوي على خلفيات شفافة ، على سبيل المثال ، فهي أكثر تنوعًا وسهولة في تصميم رسومات الويب.

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

حجم الصورة

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

تحاول العديد من المواقع تقديم صور كبيرة بدون مقياس وتعتمد على المتصفح لتغيير حجمها ، مما يؤدي إلى استخدام موارد إضافية وإبطاء سرعة الموقع. إذا كان الحجم الطبيعي للصورة هو 820 × 820 بكسل ، ويتم عرضها بواسطة المتصفح على شكل 400 × 400 بكسل ... أي 32400 بكسل غير ضروري!

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

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

مع وضع ذلك في الاعتبار ، تتضمن بعض أفضل الممارسات عند تصدير صورك ما يلي:

• احتفظ بأحجام ملفات صورتك أقل من بضع مئات من كيلوبايت ، عن طريق حفظها بتنسيق JPEGs أو PNGs "محسّنة للويب".
• معيار الويب للصور هو 72 نقطة في البوصة (dpi) ، والتي يمكن تحقيقها عن طريق حفظ الصور بالتنسيق الموصوف أعلاه.

يمكنك استخدام Photoshop أو Lightroom أو أي محرر مشابه لتقليل حجم الصورة إلى حوالي 1500 بكسل أو أقل في العرض. في Photoshop ، ما عليك سوى الانتقال إلى Image> Image Size لضبط أبعاد ودقة صورتك يدويًا. يمكنك أيضًا الانتقال إلى ملف> تصدير> حفظ للويب لتحسين صورك للتحميل على الويب:

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

إذا كنت تعمل مع Lightroom ، فانتقل إلى File> Export لضبط حجم الصورة يدويًا عند تصديرها:

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

ضغط الصورة

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

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

ضياع مقابل ضياع الضغط

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

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

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

ملحقات ضغط الصور

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

تحسين ضغط الصور وتحسينها

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

مُحسِّن صور البكسل القصير

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

ضغط صور JPEG و PNG

هل تبحث فقط عن تحسين ملفات JPEG و PNG؟ يستخدم هذا البرنامج المساعد خدمات ضغط الصور TinyJPG و TinyPNG لمساعدتك في ضغط الصور. في المتوسط ​​، يتم ضغط صور JPEG بنسبة 40-60 في المائة ، وصور PNG بنسبة 50-80 في المائة ، بدون فقدان واضح في الجودة.

محسن صور EWWW

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

محسن الصورة Kraken.io

أخيرًا وليس آخرًا ، يعد Kraken.io Image Optimizer مفيدًا أيضًا لتحسين الوسائط الجديدة والحالية. وهو يدعم الضغط بدون فقدان البيانات و "الذكي" ، مما يجعل من السهل الحصول على صور عالية الجودة مع أحجام ملفات أقل.

صورة مميزة

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

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

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

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

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

حسّن صورك بعد تحميلها على ووردبريس

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

تحميل صور كسول

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

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

أسهل طريقة لإضافة التحميل البطيء إلى موقعك هي من خلال مكون إضافي مثل Lazy Load.

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

صور مخبأة

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

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

إزالة بيانات EXIF

يتم تخزين بيانات EXIF ​​كجزء من ملف الصورة ، وتحتوي على معلومات حول مكان وكيفية التقاط الصورة. تتم إضافته تلقائيًا إلى الصور بواسطة الكاميرات ، وهو ليس ضروريًا بشكل عام لملفات الويب الخاصة بك.

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

تجنب إعادة توجيه عنوان URL للصورة

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

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

تحسين الصور لمحركات البحث

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

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

فيما يلي بعض النصائح الإضافية للمساعدة في تصنيف صورك في مرتبة أعلى.

نص بديل

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

تعتمد Google على النص البديل لتحديد ماهية الصورة نظرًا لأن كل ما "تراه" هو ما يوجد في علامة HTML. عندما تستخدم نصًا بديلاً وصفيًا قويًا لصورك ، فمن المرجح أن ترى موقعك مدرجًا بشكل مناسب في نتائج البحث.

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

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

علامات العنوان

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

إنشاء خرائط مواقع صور XML

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

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

في WordPress ، يمكن أن تساعدك المكونات الإضافية التالية في إنشاء خريطة موقع:

• خرائط جوجل XML
• يوست سيو
• حزمة SEO الكل في واحد
• Udinra كل صورة خريطة الموقع

بالنسبة إلى مواقع الويب غير التابعة لـ WordPress ، هناك أيضًا أدوات يمكن أن تساعد في إنشاء خريطة موقع ، بما في ذلك Screaming Frog و Dynomapper والمزيد. بمجرد إنشاء خريطة الموقع ، ستحتاج بعد ذلك إلى إرسالها من خلال أدوات مشرفي المواقع من Google.

وضع الصور والتعليقات التوضيحية

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

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

قم بتحسين موقع WordPress الخاص بك باستخدام WP Engine

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