أداء موقع الويب وضغط الصور يسيران جنبا إلى جنب

تقليل حجم الصورة لأداء الويب

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

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

ضياع مقابل ضياع ضغط الصورة

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

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

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

ضغط صورة WebP – تقنية جديدة

بديل لتقنيات ضغط الصور التقليدية هو WebP ، وهو تنسيق صور جديد واعد تم إنشاؤه بواسطة فريق في Google. هدفها هو إنشاء صور أصغر تحل محل كل من PNG و JPEGs بحيث يمكن للمطورين استخدام تنسيق صورة موحد واحد لمحتوى الويب الخاص بهم. يجمع WebP بين عناصر كل من الضغط بدون فقدان وفقدان وهو قادر على تقليل الصور في أي مكان من 25 إلى 34 بالمائة. على الرغم من أن هذا جديد نسبيا وفي وقت مبكر من اعتماده – إلا أنه طريقة تستحق النظر فيها كجزء من استراتيجية أداء موقع الويب الخاص بك.

طرق أخرى لتقليل حجم الصورة

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

إنشاء خط أساس للأداء لتتبع نجاح تحسين الصورة

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

لإنشاء خط أساس لأداء موقع الويب الخاص بك ، قم بإجراء اختبار سرعة موقع الويب المجاني قبل وبعد ضغط الصورة.

[divider top=”no”]

ما هي تقنية ضغط الصور الموصى بها؟ لا تتردد في المشاركة في التعليقات أدناه.

{ مصدر الصورة – ويكيبيديا }

Latest Web Performance Articles​

أفضل 15 أداة لمراقبة البنية التحتية

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

أفضل 20 أداة لمراقبة الخادم لعام 2023

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

أفضل 25 أداة لمراقبة الخادم

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

أفضل 20 أداة مراقبة اصطناعية

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

Start Dotcom-Monitor for free today​

No Credit Card Required