حسِّن صورك ولا تضيع المزيد من الوقت

وفقًا لـ HTTPArchive ، تضاعف متوسط ​​حجم موقع الويب تقريبًا في 5 سنوات ، من 1 ميجابايت في عام 2014 إلى 2 ميجابايت في عام 2019. بالتأكيد ، الوصول إلى الإنترنت أسرع من أي وقت مضى ، ولكن ، مع ذلك ، كيف أصبحت مواقع الويب كبيرة جدًا الآن؟ تكمن الإجابة جزئيًا في أصول الوسائط المتعددة بشكل عام والصور بشكل خاص.

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

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

لماذا يعد تحسين الصور مهمًا

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

للصور تأثير كبير في الحجم الكلي لصفحة الويب

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

وفقًا لـ GTMetrix ، يستخدم تحميل هذا المنشور 850 كيلوبايت من البيانات. ولكن لماذا يستخدم هذا المنشور القصير الكثير من البيانات؟ حسنًا ، الصور مسؤولة جزئيًا عن هذه المشكلة: الصورة المميزة للمنشور وحدها تزن أكثر من 200 كيلوبايت ، وهو ما يمثل 25٪ من الإجمالي.

حركة المحمول

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

كما جربتك أنت بالتأكيد ، فإن اتصال الإنترنت على الهاتف المحمول ليس دائمًا رائعًا (خاصة إذا كنت تتنقل أو في مترو الأنفاق). وفقًا لإحصائيات Statistia ، بلغ متوسط ​​السرعة في عام 2019 حوالي 14 ميجابت في الثانية. لذلك ، إذا أردنا تسريع مواقعنا على الهاتف المحمول ، فعلينا تقليل وزنها قدر الإمكان ، بما في ذلك وزن صورها.

تكاليف التخزين ونقل البيانات

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

بتقليل حجم صورك ، ستقلل من كلا العاملين وستوفر بعض المال كل شهر؟

إجراءات تحسين الصورة

الآن بعد أن عرفت سبب القلق بشأن تحسين صورك ، دعنا نرى ما يمكنك فعله لتسريع موقع WordPress الخاص بك.

# 1 تحميل الصور المقاسة بشكل صحيح

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

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

# 2 قم بتعديل المظهر الخاص بك لإنشاء صور مصغرة مناسبة

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

على سبيل المثال ، الصور المميزة لدينا هي 1200 × 800 بكسل. تعمل هذه الأبعاد بشكل رائع عند عرض المنشور نفسه:

والذي من الواضح أنه أكثر من اللازم لشيء مثل هذا:

لهذا السبب ، في هذه الحالة بالذات ، يسجل موضوعنا حجمًا مصغرًا جديدًا يبلغ 480 × 320 بكسل فقط ويستخدم في قائمة شاشة المنشورات.

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

وكما هو الحال دائمًا ، إذا كنت بحاجة إلى مساعدة في هذا الأمر ، فما عليك سوى إعلامي في قسم التعليقات أدناه وسيسعدني تقديم المساعدة (أو حتى كتابة منشور حول هذا الموضوع؟)

# 3 استخدم أحجام الصور بذكاء

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

عند إدراج صورة في المنشور ، ألق نظرة على الشريط الجانبي واختر الحجم الذي يناسب احتياجاتك:

على سبيل المثال ، إذا كنت ستضع صورة ضيقة وصغيرة كهذه ، فقد تكون الصورة الصغيرة (300 × 200 بكسل) مثالية:

ولكن استخدام نفس الصورة المصغرة لصورة أكبر يؤدي إلى نتائج مروعة:

من الأفضل استخدام إصدار أكثر دقة:

# 4 استخدم تنسيق الصورة المناسب

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

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

# 5 حذف الصور غير المستخدمة

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

# 6 تمكين التحميل الكسول

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

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

هناك العديد من الإضافات Lazy Loading لـ WordPress. يتضمن بعض موفري الاستضافة مثل حدث SiteGround هذا الخيار في عمليات التثبيت الخاصة بهم. ما عليك سوى البحث عن الخيار في لوحة المعلومات الخاصة بك وتمكينه.

آمل أن يساعدك منشور اليوم على تحسين سرعة تحميل الويب قليلاً. هناك القليل من الأشياء التي يسهل إصلاحها وتقديم مثل هذه النتائج الجيدة. ابتهاج وحظ!

صورة مميزة لفريق Icons8 على Unsplash.