جزء كبير من زيادة سرعة موقع الويب الخاص بك هو تحسين الصور. واعتبارًا من الإصدار 5.8 ، يدعم WordPress الآن تنسيق صورة WebP. تنسيق الملف هذا أصغر بنسبة 30٪ من تنسيق JPEG أو PNG ، مما يعني تحميل الصور بشكل أسرع.
بالطبع ، يعد استخدام تنسيق ملف متميز طريقة واحدة فقط لتحسين صورك. لا يزال بإمكانك الحصول على الكثير من حيث الأداء من صور JPEG و PNG المحسنة. في الواقع ، هناك الكثير من الأدوات التي تجعل هذا الأمر سهلاً.
اليوم ، سأغطي مجموعة متنوعة من الطرق لتحسين الصور وتحسين سرعة موقع الويب الخاص بك.
ما هو WebP؟
WebP هو تنسيق صورة تم إنشاؤه بواسطة Google في عام 2010. وهو أصغر من تنسيقات الملفات التقليدية مثل JPEG و PNG ، بينما يقدم في نفس الوقت ضغطًا فائقًا بدون فقدان البيانات.
نتيجة لذلك ، تكون مواقع الويب التي تستخدم WebP أسرع من تلك التي لا تستخدم WebP. فكيف يعمل؟
بدون الخوض في التقنية ، يستخدم ضغط WebP مع الفقد تقنية تشفير تنبؤية. بشكل أساسي ، ينظر فقط إلى جزء صغير من الكود في كتل البكسل المجاورة ويتنبأ بما سيبدو عليه الباقي.
في حين أن ضغط WebP غير المفقود يستخدم بيانات الصورة التي شاهدها بالفعل لإعادة بناء الصورة.
فقط ضع في اعتبارك أن ليست كل المتصفحات تدعم WebP كتنسيق ملف. والخبر السار هو أن معظم الشركات الكبرى تفعل ذلك ، والتي تشمل Google Chrome و Firefox و Microsoft Edge و Opera.
يغطي هذا أكثر من 95٪ من إجمالي حركة مرور الويب والجوّال ، لذلك لا داعي للقلق كثيرًا.
أفضل الإضافات لتحسين الصور
في هذه المقالة ، سأستعرض بعضًا من أفضل المكونات الإضافية لتحسين صورك لـ WebP. بعد ذلك ، سأستعرض بعض الأدوات التي يمكنك استخدامها الآن لبدء إنشاء عناصر مرئية مبسطة لموقعك على الويب.
1. محسن صور EWWW
إذا سبق لك أن نظرت إلى سرعات موقعك وذهبت إلى “ewww” ، فقد ترغب في تجربة EWWW Image Optimizer . وهو متخصص في تحسين الصور في WordPress ويدعم مجموعة متنوعة من تنسيقات الملفات بما في ذلك WebP. قد ترغب ايضا في مراجعة المقال عن كيفية تثبيت الإضافات في ووردبريس
والأهم من ذلك ، أنه يعمل أيضًا على أي صور من الإضافات الأخرى. هذا يعني عدم وجود مشاكل التوافق!
تسمح لك الإضافة بتحديد نوع الضغط الذي تريد استخدامه لكل نوع ملف ، ونعم ، يمكنك الحصول على خيارات مختلفة لملفات مختلفة. بعد ذلك ، يمكنك استخدام إجراء مجمّع لبدء تحسين صورك.
يعد تحسين الصور الفردية سريعًا جدًا ، وعادةً ما يكون ذلك في أقل من دقيقة ، ما لم يكن الملف كبيرًا جدًا. ومع ذلك ، إذا كنت تقوم بإجراء جماعي ، فتوقع أن تستغرق العملية عدة دقائق ، خاصة على مواقع الويب الكبيرة.
2. Smush
Smush هو محسن الصور الأكثر شيوعًا في WordPress مع أكثر من مليون تثبيت نشط. وذلك لأنه يتجاوز مجرد تحسين الصور. بدلاً من ذلك ، يضيف ميزات أخرى مثل التحميل البطيء لزيادة سرعة الصفحة.
بالطبع ، الخبز والزبدة في البرنامج المساعد هو تحسين الصورة ، والذي يتفوق فيه.
يغطي جميع أنواع الملفات الشائعة ، ولكن من الجدير بالذكر أن WebP غير متوفر في الإصدار المجاني. ومع ذلك ، فإن مدى وصول هذا المكون الإضافي يعوض عن ذلك. على عكس العديد من مكونات التحسين الأخرى ، فإنه يتجاوز مكتبة الوسائط.
سيتم تحسين أي صور موجودة خارج مكتبة الوسائط تلقائيًا. كما أنه يتعامل مع تغيير حجم الصورة أثناء عملية الضغط ، بحيث يمكنك قتل عصفورين بحجر واحد. ويمكنك عرض جميع إحصائيات التحسين مباشرة في قالب الصورة.
3. ShorPixel Image Optimizer
ShortPixel Image Optimizer عبارة عن إضافة لتحسين الصور المجانية. يقدم للمستخدمين 100 رمز مميز كل شهر ، حيث تتطلب صورة واحدة رمزًا مميزًا واحدًا. ومع ذلك ، فإن الاختلاف الرئيسي هو أن هذه الرموز المجانية تمنحك الوصول إلى ضغط ممتاز.
بالمقارنة ، ستحتاج إلى شراء الإصدار Pro في مكونات إضافية أخرى لتتناسب مع الجودة.
الآن هناك مشكلة واحدة كبيرة في هذا النظام ، وهذه هي الطريقة التي يتعامل بها WordPress مع الصور. يقوم WordPress في الواقع بعمل نسخ متعددة من صورك بأحجام مختلفة ، ويشغل كل واحد من هذه الأحجام بالفعل رمزًا مميزًا. وبالتالي ، فهي ليست في الواقع نسبة واحد إلى واحد.
ومع ذلك ، بالنسبة إلى موقع ويب جديد ، فهذه أداة جيدة جدًا لاستخدامها نظرًا لأنك ربما لن تضطر إلى تحسين 100 صورة شهريًا. خاصة على مدونة أصغر. يمكن أن يساعد أيضًا في تحويل أي JPEG أو PNG أو GIF إلى تنسيق WebP.
4.تحسين الصور من خلال Compresss JPEG & PNG Images
بينما لا يتعامل Compress JPEG & PNG Images مع تنسيق ملف WebP ، فإنه يقوم بعمل ممتاز في ملفات JPEG و PNG. وبالنسبة للعديد من مواقع الويب ، يعد هذا أكثر من كافٍ ، خاصةً إذا كنت لا تستخدم برنامج تحرير يدعم WebP.
ومع ذلك ، هناك الكثير من أدوات التحرير المجانية التي تعمل ، لذا تأكد من مراجعة هذا القسم أدناه.
يقدم هذا البرنامج المساعد 500 عملية ضغط مجانًا كل شهر. ومع ذلك ، فإنه يواجه نفس المشكلة مثل آخر مكون إضافي ؛ يقوم بتحسين جميع نسخ الصور. وبالتالي ، فهو أقرب إلى 100 صورة ، لكن هذا أكثر من كافٍ لمواقع الويب الأحدث.
تجدر الإشارة أيضًا إلى أن هذا الإضافة متوافق تمامًا مع WooCommerce ، لكنه يوصي بتوخي الحذر. يبدو أن WooCommerce يحاول إعادة إنشاء البيانات الوصفية للصورة في كل زيارة للصفحة. هذا يمكن أن ينتهي بأكل الاعتمادات الشهرية الخاصة بك.
5.تحسين الصور من خلال Optimus – WordPress Image Optimizer
يعد Optimus WordPress Image Optimizer أداة رائعة أخرى يجب مراعاتها عندما تريد تحسين الصور في WordPress. يمكن أن يساعد في تقليل حجم الصورة بنسبة تصل إلى 70٪ ، مما يساعد بالتأكيد في تسريع صفحاتك.
الآن ، تجدر الإشارة إلى أنه على الرغم من وجود خيار مجاني ، إلا أنه على الأرجح غير مفيد للعديد من المواقع.
هذا بسبب وجود حد لـ 100 كيلوبايت ، والذي ستتجاوزه معظم الملفات بشكل طبيعي ، خاصة تلك التي تحتاج إلى تحسين. أيضًا ، تعمل العديد من الإعدادات فقط في إصدار Pro ، لذلك سينتهي بك الأمر بالدفع في مرحلة ما.
ومع ذلك ، فإن الخدمات التي توفرها الإضافة رائعة وتقليل الصورة ملحوظ جدًا. عملت مع جميع أنواع ملفات الصور الرئيسية ، بما في ذلك WebP. الإجراء الجماعي سهل الاستخدام والوقت معقول ، ولكن كما هو الحال دائمًا ، تستغرق مواقع الويب الكبيرة وقتًا أطول.
6. Imagify – Optimize your Images & Convert WebP
Imagify هو خيار رائع لمواقع الويب التي تبحث عن خيار freemium لتحسين الصور. يمنحك حدًا شهريًا كبيرًا لا يتم قياسه بعدد الصور ، ولكن بدلاً من ذلك ، بحجمها.
يمكنك كل شهر تحسين ما يصل إلى 20 ميغابايت من الصور مجانًا. ويمكن أن يكون هذا كثيرًا للمطورين الذين يعرفون كيفية إدارة الصور.
يدعم جميع أنواع الملفات القياسية بما في ذلك ملفات PDF وسيقوم بإنشاء ملف WebP ، بافتراض أنك حددت المربع ، في كل مرة يقوم فيها بتحسين صورة. يوفر للمستخدمين ثلاثة مستويات من التحسين: عادي ، عدواني ، وفائق.
يعمل كل مستوى على تحسين وظيفة الضغط ، وإذا لم تكن راضيًا ، يمكنك استخدام خيار النسخ الاحتياطي لاستعادة النسخة الأصلية واختيار مستوى مختلف من التحسين. يساعدك هذا في معرفة أفضل ما يناسب صورك.
7.تحسين الصور من خلال WebP Express
إذا كنت تبحث عن تحويل جميع الصور الموجودة على موقع الويب الخاص بك إلى تنسيق ملف WebP ، فلا يوجد خيار أفضل من الإضافة WebP Express . يقدم مواقع الويب مجموعة متنوعة من الطرق للقيام بذلك ولا يعرضها إلا على المستعرضات التي تدعم WebP.
بالنسبة للزوار الذين لا يستخدمون المتصفحات ، وهو أمر نادر الحدوث ، سوف يعرضون إصدار JPEG أو PNG الأصلي.
تستخدم هذه الإضافة مكتبة WebP Convert لتحويل ملفات JPG و PNG إلى WebP. قد تواجه بعض مواقع الويب مشكلة اعتمادًا على خادم الويب الخاص بها. في هذه الحالات ، قد تضطر إلى استخدام حل السحابة ، والذي توفر الإضافة خيارات له.
فقط ضع في اعتبارك أن هذه ميزات متميزة. النتيجة النهائية هي موقع ويب أسرع بكثير ، لكن ضع في اعتبارك بعض القيود. على سبيل المثال ، لن يتم تحويل صور Gravatar لأنها مخزنة على خوادم Gravatar.
تحتاج إلى استضافة الصورة حتى تعمل الإضافة.
أدوات تحرير WebP
الآن إذا كنت تستخدم Photoshop أو أدوات تحرير أخرى ، فقد تلاحظ أن معظمها لا يدعم في الأصل تنسيق WebP. الاحتمالات هي أن هذا سيتغير بمرور الوقت نتيجة اعتماد WordPress لتنسيق الملف ، ولكن عندما يظل هذا الأمر لغزًا.
في غضون ذلك ، ستحتاج إلى أداة لإنشاء صور WebP وتعديلها ، ولحسن الحظ ، هناك الكثير من الخيارات المجانية المتاحة مثل:
- Picosmos
- Paint.Net
- RealWorld Paint
- JPEGView
والذي أوصي به حقًا هو PhotoPea.
Photopea
عندما يتعلق الأمر ببدائل Photoshop ، لا يوجد خيار أفضل من Photopea . يبدو متطابقًا تقريبًا مع Photoshop ، لذلك يجب أن يشعر المستخدمون وكأنهم في المنزل. ومع ذلك ، هناك نوعان من الاختلافات الرئيسية.
يدعم Photopea في الأصل تنسيق ملف صورة WebP وهو مجاني تمامًا للاستخدام.
في الواقع ، لا تحتاج حتى إلى إنشاء حساب لاستخدام هذا البرنامج. يعمل Photopea مباشرةً من خلال متصفح الويب الخاص بك ، ولكن يتم حفظ جميع الملفات على جهاز الكمبيوتر الخاص بك ، مما قد يجعل تبديل أجهزة الكمبيوتر مشكلة. على الرغم من أن هذا يمكن حله بسهولة من خلال التخزين السحابي.
وكما قد تتوقع ، نظرًا لأنه لا يحتوي على تطبيق مخصص على جهاز الكمبيوتر الخاص بك ، فقد يكون الأداء ناقصًا إلى حد ما. قد تستغرق الصور المعقدة التي تحتوي على الكثير من الطبقات عدة دقائق من التحميل.
ومع ذلك ، فإن Photopea مجاني ويعمل بشكل جيد للغاية مع PSD وملفات الصور الأخرى لتحويلها إلى WebP.
تحميل البطيئ هو أفضل صديق لك
بالطبع ، حتى مع WebP ، هناك حدود لمدى صغر حجم صورتك. ومع ذلك ، هناك تقنيات أخرى يمكنك الاستفادة منها لتحسين أوقات التحميل الخاصة بك فيما يتعلق بالصور ، مع وضع Lazy Loading في المقدمة.
التحميل الكسول هو تقنية يتم فيها تحميل الصور المرئية فقط. على سبيل المثال ، تخيل صفحة طويلة تحتوي على الكثير من الصور. هل يعقل أن ينتظر الزائرون تحميل الصور في الأسفل؟
من المحتمل أن يقول معظمهم لا ، وهذا بالضبط ما هو التحميل البطيء. يقوم فقط بتحميل ما يمكن للزائر رؤيته عند تحميل الصفحة.
إذا اختاروا التمرير لأسفل ، وهو الأمر الذي لن نواجهه جميعًا ، فسيتم تحميل بقية الصور أثناء التمرير. يمكن أن يؤدي ذلك إلى تسريع الصفحات التي تحتوي على الكثير من الصور بشكل كبير لأن مقدار التحميل الأولي يتم قطعه.
تحسين أفضل ، سرعات أسرع ، تجربة أفضل
يجب أن تذهب دون قول ، لكن موقع الويب الأسرع هو مجرد تجربة أفضل. والأهم من ذلك ، هذا ما يتوقعه الزوار في عام 2022.
تأتي إحدى المشكلات الرئيسية التي تواجهها معظم مواقع الويب من الصور غير المحسّنة بشكل جيد. يفشل العديد من المبتدئين في التعرف على أحجام الصور التي يجب أن تبدو ، وغالبًا ما يستخدمون ملفات يزيد حجمها عن ميغا بايت.
في الواقع ، نادراً ما تتجاوز الصور بضع مئات من الكيلو بايت.
الخبر السار هو أن تحسين الصور لم يكن أسهل من أي وقت مضى ، ويحتوي WordPress على الكثير من المكونات الإضافية التي يمكن أن تساعدك على القيام بذلك. لن يؤدي ذلك إلى تحسين تجربة الزائر فحسب ، بل سيعزز ترتيب محرك البحث الخاص بك.
السرعة هي أحد العوامل القليلة التي نعرفها على وجه اليقين عندما يتعلق الأمر بالبحث ، وذلك لأن Google أخبرت الجميع.