لماذا وكيف تستخدم الضغط الخاسر على صور وورد بريس الخاصة بك

وفقًا لأرشيف HTTP ، اعتبارًا من ديسمبر 2018 ، تشكل الصور أكثر من 40 ٪ من متوسط ​​وزن صفحة موقع الويب على كل من أجهزة الكمبيوتر المكتبية والأجهزة المحمولة. هذا ضخم! 😮 عندما يتعلق الأمر بالفهرس والأداء الجديد للجوال ، يلعب تحسين الصور دورًا مهمًا في مدى سرعة تحميل موقع وورد بريس الخاص بك . يعد ضغط الصور أحد أسهل التحسينات التي يمكنك تنفيذها والتي بدورها سيكون لها تأثير أكبر. بشكل أساسي ، يستلزم ذلك تقليل حجم ملف صورك باستخدام شكلين شائعين من الضغط: ضياع وبدون فقدان . يدعم WEBP كلتا طريقتي الضغط!

جرب نسخة تجريبية مجانية

اليوم سوف نتعمق في كلا النوعين من ضغط الصور ونناقش أيهما نوصي باستخدامه. يمكن أن يختلف هذا بناءً على نوع العمل الذي تديره.

الضياع

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

تنسيقات JPEG و GIF كلاهما من تنسيقات الصور المفقودة .

تعد ملفات JPEG رائعة للمواقع التي تحتاج إلى أوقات تحميل سريعة حيث يمكنك ضبط مستوى الجودة لتحقيق توازن جيد بين الجودة وحجم الملف.

(القراءة المقترحة: JPG مقابل JPEG: فهم تنسيق ملف الصور الأكثر شيوعًا )

يقوم وورد بريس بضغط الصور تلقائيًا

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

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

add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );

إذا كنت ترغب في زيادة نسبة الضغط التلقائي في وورد بريس ، يمكنك إضافة عامل التصفية وتقليل النسبة المئوية للملف الأصلي ، مثل 70٪ في المثال أدناه.

add_filter( 'jpeg_quality', create_function( '', 'return 70;' ) );

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

ضغط الصور باستخدام Save for Web (برنامج)

يمكنك استخدام أدوات مثل Adobe Photoshop أو Affinity Photo أو Affinity Designer أو برامج تحرير الصور الأخرى لضبط إعدادات جودة الصورة (كما هو موضح أدناه). في معظم الأدوات ، يكون هذا ضمن “حفظ إلى الويب” أو “إعدادات التصدير”.

تغيير جودة الصورة

تغيير جودة الصورة

إذا أجرينا مقارنة بسيطة لمعدلات الضغط المفقودة ، يمكننا أن نرى أن 50٪ تبدو رائعة. 33٪ بدأوا في الحصول على القليل من الضبابية في بعض تفاصيل الخلفية (لكنها لن تكون ملحوظة إلى حد ما) ، ومن الواضح أن 5٪ غير مقبولة. هذا مجرد مثال على سبب عدم كفاية نسبة 82٪ التلقائية في وورد بريس. يمكنك ويجب أن تقوم بالضغط بمعدلات أعلى بكثير لتقليل أحجام الملفات بشكل أكبر.

original.JPG 2.82 ميجابايت (2000 بكسل × 1463 بكسل)

ضياع ضغط 1.JPG: 227 كيلو بايت (2000 بكسل × 1463 بكسل)  91.95٪ تقليل

ضغط مع فقدان 2.JPG: 185 كيلوبايت (2000 بكسل × 1463 بكسل)  تقليل بنسبة 93.44٪

ضغط مع فقدان 3.JPG: 5 كيلوبايت (2000 بكسل × 1463 بكسل)  تقليل بنسبة 99.82٪

مقارنة ضغط الفقد

مقارنة ضغط الفقد

لنفترض أنك اخترت استخدام النسبة المضغوطة بنسبة 50٪. حجم الملف هو 227 كيلوبايت ، وهو بالتأكيد أصغر بكثير من الملف الأصلي الذي يزيد حجمه عن 2 ميغابايت. ومع ذلك ، لا يزال الأمر غير رائع إذا كانت هذه مجرد صورة واحدة من أكثر من 15 صورة أخرى على الصفحة. بشكل عام ، من الأفضل الاحتفاظ بجميع صورك أقل من 100 كيلوبايت إن أمكن. في حالتي ، يجب أن تكون قادرًا على أن تصبح أصغر كثيرًا. هذا هو المكان الذي من المهم أيضًا تغيير حجم صورك فيه . حجم الصورة 50٪ الذي تم تغيير حجمه أولاً إلى 1251 بكسل بمقدار 916 بكسل هو 95 كيلوبايت فقط.

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

مثال على الصور المتجاوبة srcset في الكود

مثال على الصور المتجاوبة srcset في الكود

لذلك مع المزيد والمزيد من شاشات HiDPI في الوقت الحاضر ، قد يكون من الجيد العثور على وسيط سعيد. قل 2x أو 3x عمود موقع الويب الخاص بك أو حجم div ، ولكن لا يزال أقل من الحجم الأصلي. سيعرض المتصفح المتصفح الصحيح بناءً على دقة الجهاز.

توصي Google باستخدام برنامج “الضغط الخاسر”

هل تستخدم Google PageSpeed ​​Insights ؟ إذا كان الأمر كذلك ، فمن المحتمل أن تكون على دراية بالتحذير الذي ينص على “تحسين الصور”. مرة أخرى في عام 2017 ، قامت Google بالفعل بتحديث وثائقها لتوصي الآن باستخدام الضغط مع الفقد كوسيلة لزيادة تسريع موقعك.

تعمل Google PageSpeed ​​Insights على تحسين تحذير الصور

تعمل Google PageSpeed ​​Insights على تحسين تحذير الصور

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

ضغط بلا خسائر

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

RAW و BMP و GIF و PNG هي تنسيقات صور بدون فقد.

يمكنك إجراء ضغط ضياع على سطح المكتب باستخدام أدوات مثل فوتوشوب،  FileOptimizer ، أو  ImageOptim .

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

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

original.JPG: 227 كيلوبايت (2000 بكسل × 1463 بكسل)

ضغط بلا فقدان. JPPG: 203 كيلوبايت (2000 بكسل × 1463 بكسل)

ضغط بلا خسائر

مقارنة ضغط بلا خسارة

ما هي طريقة الضغط الأفضل؟

الجواب على هذا في الواقع متروك لك. بالنسبة لغالبية المستخدمين ، نوصي باستخدام الضغط مع فقدان الجودة نظرًا لحقيقة أنه يمكنك بسهولة ضغط الصورة بنسبة تزيد عن 70٪ (أحيانًا تزيد عن 90٪!) دون فقدان الكثير من الجودة. اضرب هذا بـ 15 صورة على الصفحة وستلعب دورًا مهمًا في تقليل وقت تحميل موقعك. ليس هذا فقط ، ولكن الضغط مع الفقد سيضمن لك استخدام أقل مساحة ممكنة على القرص . وهذا بدوره يعني أنه يمكنك توفير المال على الاستضافة.

تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟

انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!

إشترك الآن

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

كيفية استخدام الضغط الخاسر في ووردبريس

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

تخيل  (ضياع وخسارة)

WP Smush  (ضياع وخسارة)

سحابة EWWW  (ضياع وبدون خسارة)

ShortPixel  (ضياع وخسارة)

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

نستخدم Imagify في مدونة Kinsta ولذا سنوضح لك كيفية عملها. لديهم خطة مجانية ، ولكن حتى خططهم الاحترافية مسعرة بشكل معقول للغاية. نقوم بتحسين عدد غير قليل من الصور ونستخدم خطة “Lite” (1 غيغابايت في الشهر) على ما يرام. ادفع سنويًا وهو أقل من 4.25 دولار شهريًا.

Imagify له ثلاثة مستويات مختلفة من التحسين:

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

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

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

تخيل الإعدادات

تخيل الإعدادات

نستخدم الوضع العدواني في Kinsta ونرى عادةً توفيرًا بنسبة 60-70٪ اعتمادًا على الصورة. ملاحظة: نحن في الواقع نستخدم ملفات PNG أكثر بكثير من ملفات JPEG نظرًا لأن معظم صورنا عبارة عن أيقونات ورسوم توضيحية وليست صورًا.

هل تعاني من مشاكل التوقف و وورد بريس؟ Kinsta هو حل الاستضافة المصمم لتوفير الوقت! تحقق من ميزاتنا

حفظ ملف ضغط الصور

حفظ ملف ضغط الصور

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

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

تخيل تغيير حجم الصور

تخيل تغيير حجم الصور

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

مدخرات تحسين الصورة المجمعة

مدخرات تحسين الصورة المجمعة

اختبارات السرعة

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

اختبار 1 – أصلي غير مضغوط

قمنا أولاً بتحميل 10 صور غير مضغوطة. ثم أجرينا 5 اختبارات على Pingdom وأخذنا المتوسط. يمكننا أن نرى أن إجمالي وقت التحميل هو 3.04 ثانية بحجم إجمالي للصفحة يبلغ 28.4 ميجابايت.

uncompressed-1.jpg (2.82 MB)

uncompressed-2.jpg (2.82 ميجا بايت)

uncompressed-3.jpg (2.82 ميجا بايت)

uncompressed-4.jpg (2.82 ميغابايت)

uncompressed-5.jpg (2.82 ميجا بايت)

uncompressed-6.jpg (2.82 MB)

uncompressed-7.jpg (2.82 MB)

uncompressed-8.jpg (2.82 ميغابايت)

uncompressed-9.jpg (2.82 ميغابايت)

uncompressed-10.jpg (2.82 ميغابايت)

اختبار السرعة غير مضغوط

اختبار السرعة غير مضغوط ( Pingdom )

اختبار 2 – مضغوط

ثم حمّلنا الصور نفسها مرة أخرى ، ولكن هذه المرة قمنا بتمكين “التحسين التلقائي” في المكوّن الإضافي Imagify. ثم أجرينا 5 اختبارات مرة أخرى على Pingdom وأخذنا المتوسط.

مضغوط 1.jpg (69.3 كيلوبايت)

مضغوط 2.jpg (69.3 كيلوبايت)

مضغوط 3.jpg (69.3 كيلوبايت)

مضغوط 4.jpg (69.3 كيلوبايت)

مضغوط 5.jpg (69.3 كيلوبايت)

مضغوط 6.jpg (69.3 كيلوبايت)

مضغوط 7.jpg (69.3 كيلوبايت)

مضغوط 8.jpg (69.3 كيلوبايت)

مضغوط 9.jpg (69.3 كيلوبايت)

مضغوط 10.jpg (69.3 كيلوبايت)

يمكننا أن نرى إجمالي وقت التحميل الآن 522 مللي ثانية بإجمالي حجم صفحة 901.4 كيلوبايت. لذا فقد أدت الصور المضغوطة التي تم فقدها إلى تقليل وقت تحميل الصفحة بنسبة 82.83٪! 😮  تم تخفيض إجمالي حجم الصفحة أيضا بنسبة هائلة بلغت 96.83٪. ولا تزال صورنا تبدو عالية الجودة بفضل Imagify.

ضغط اختبار السرعة

ضغط اختبار السرعة ( Pingdom )

ملخص

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

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

وفر الوقت والتكاليف وحقق أقصى قدر من أداء الموقع من خلال:

مساعدة فورية من خبراء استضافة وورد بريس ، 24/7.

تكامل Cloudflare Enterprise.

يصل الجمهور العالمي إلى 28 مركز بيانات حول العالم.

التحسين من خلال مراقبة أداء التطبيقات المضمنة لدينا.

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