كيفية تحسين الصور للويب: دليل تفصيلي خطوة بخطوة لتحسين أداء الموقع

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

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

لذا ، كيف توازن أداء الموقع مع التصميم المرئي؟

عن طريق تحسين صورك.

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

في هذا الدليل المفصل خطوة بخطوة لتحسين الصورة ، سأغطي:

• ما هو تحسين الصورة؟
• لماذا يعد تحسين الصورة مهمًا؟
• 7 طرق لتحسين الصور للويب

ما هو تحسين الصورة؟

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

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

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

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

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

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

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

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

سيغطي هذا الدليل التفصيلي كل ما يمكنك القيام به لتحسين الصور ، بدءًا من Photoshop وانتهاءً بموقعك.

اتبع هذه الخطوات لتحسين صورك لتحسين أداء الموقع:

1. قياس سرعة موقعك الحالي.
2. تعرف على كيفية اختيار أفضل نوع ملف للصور.
3. قم بتغيير حجم صورك قبل التصدير.
4. ضغط الصور لتقليل حجم الملف.
5. أتمتة تحسين الصور باستخدام مكون WordPress الإضافي.
6. استخدم تقنية "blur up" لتحميل صورة ذات جودة أقل أولاً.
7. استخدم التحميل البطيء.

1. قم بقياس سرعة موقعك الحالي

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

بصفتي جزءًا من فريق دعم Flywheel ، فأنا على دراية ببعض اختبارات السرعة ، ولكن هذه الخمسة هي المفضلة لدي:

• Google PageSpeed ​​Insights
• أدوات Pingdom
• GTMetrix
• WebPageTest
• وظيفة إضافية لرؤى أداء Flywheel

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

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

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

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

2. تعرف على كيفية اختيار أفضل نوع ملف للصور

عند الانتهاء من إنشاء الصور (إما الحفظ من الكاميرا أو التصدير من أداة مثل Photoshop) ، سيكون لديك خيار تحديد نوع الملف. أكثر أنواع الملفات شيوعًا للاستخدام على الويب هي ملفات JPEG و PNG و GIF. وأنا متأكد من أنه يمكنك التخمين ، فجميعهم لديهم إيجابيات وسلبيات وأفضل الممارسات الخاصة بهم عند وضعهم على موقع الويب الخاص بك.

ملفات JPEG

تعمل صور JPEG بشكل أفضل لعرض الصور الملونة المعقدة على موقعك ، لأنها تتيح الحصول على صورة عالية الجودة ذات حجم ملف أصغر. من المحتمل أن يعمل نوع الملف هذا مع غالبية الصور التي تريد استخدامها على موقعك ، مع استثناء رئيسي واحد: الصور ذات الخلفية الشفافة. (بالنسبة لهؤلاء ، راجع القسم التالي حول ملفات PNG!)

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

إليك فكرة عن كيفية تحميل صورة غير تقدمية:

إليك كيفية تحميل الصورة التدريجية:

إذا كنت تعمل في Photoshop ، فستجد هذا الإعداد عندما تقوم بالتصدير كـ "Save for Web".

PNGs

إذا لم يكن لديك الكثير من الألوان في صورتك (مثل الرسوم التوضيحية المسطحة أو الرموز) ، أو كنت تريد أن تكون شفافة ، فإنني أوصي بالتصدير كملف PNG. تأكد من أن لديك أبعاد الصورة الصحيحة ، وابحث عن خيار الحفظ بتنسيق PNG-24 (أو 8 ، إذا لم يكن هناك فقدان للجودة).

صور GIF

تنسيق الصور الثالث الأكثر شيوعًا على الويب هو ملفات GIF. إنها تدعم 256 لونًا فقط ، لذلك يجب أن تكون انتقائيًا مع هذا النوع من الملفات!

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

3. تغيير حجم الصور الخاصة بك قبل تحميلها

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

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

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

لتغيير حجم صورتك ، ما عليك سوى فتح برنامج تحرير الصور الذي تختاره. يعمل Photoshop بشكل جيد ، أو يمكنك أيضًا استخدام أدوات أبسط مثل Preview (لأجهزة Mac) أو الرسام (لنظام Windows) أو Canva (أداة متصفح).

4. ضغط الصور لتقليل حجم الملف

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

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

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

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

لضغط صورك ، كل ما تحتاجه هو أداة لضغط الصور. تشمل مفضلاتي:

• TinyPNG: أداة مجانية قائمة على المتصفح لضغط صور PNG و JPEG.
• ImageOptim: تطبيق مجاني مفتوح المصدر لضغط الصور.
• JPEGmini: تطبيق لإعادة ضغط الصور لنظامي التشغيل Mac و Windows.
• RIOT: تطبيق Windows مجاني لتحسين الصور.
• مُحسِّن الصور: إضافة مجانية للمحلي.

TinyPNG

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

ImageOptim

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

JPEG ميني

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

الشغب

أداة Radical Image Optimization Tool (RIOT) هي تطبيق Windows مجاني لتقليل حجم ملف الصورة. يتميز برؤية جنبًا إلى جنب ، بحيث يمكنك مقارنة جودة الصورة قبل الضغط وبعده.

مُحسِّن الصور ، إضافة مجانية للمحلي

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

5. أتمتة تحسين الصورة باستخدام مكون WordPress الإضافي

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

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

لتحسين الصور على موقع WordPress ، أوصي بهذه المكونات الإضافية:

• EWWW Image Optimizer Cloud
• ضغط صور JPEG و PNG
• Kracken.io
• تخيل

EWWW Image Optimizer Cloud

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

ضغط صور JPEG و PNG

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

Kracken.io

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

تخيل

سيساعد هذا المكون الإضافي WordPress في تحسين صورك دون فقدان الجودة. كما أنه متوافق مع WooCommerce و NextGen Gallery ، إذا كنت تستخدم هذه المكونات الإضافية.

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

6. استخدم تقنية "blur up" لتحميل صورة ذات جودة أقل أولاً

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

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

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

طريقة شائعة للقيام بذلك هي تقنية "blur up" ، والتي يمكنك تعلم كيفية تنفيذها باستخدام هذا البرنامج التعليمي على CSS-Tricks.

7. تحميل صور موقع كسول

على غرار تقنية "blur up" ، هناك خدعة أخرى ستساعدك على إظهار مظهر الصور التي يتم تحميلها بشكل أسرع: التحميل الكسول.

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

التحميل الكسول هو أسلوب رائع من تلقاء نفسه ، وأكثر قوة عند إقرانه ببقية نصائح تحسين الصورة هذه! ومن السهل جدًا القيام بذلك على موقع WordPress ، وذلك بفضل المكون الإضافي BJ Lazy Load.

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

بين سير العمل المحسّن وأدوات تحسين الصورة المناسبة ، ستتمكن من رؤية أداء أفضل للموقع من الصور المحسّنة في أي وقت من الأوقات!

تجاوز الصور: تعرف على كيفية تحسين سرعة الموقع للحصول على أداء فائق السرعة

تم تحسين منصة استضافة WordPress المُدارة من Flywheel لجعل مواقع WordPress سريعة ، ولكن الخادم الخاص بك ليس سوى جزء من اللغز. من خلال الوظيفة الإضافية لرؤى الأداء الخاصة بنا ، ستحصل على نظرة متعمقة على أداء موقعك (حتى تعرف بالضبط مكان إجراء التحسينات!) بينما تكون قادرًا على تتبع المقاييس بمرور الوقت لمعرفة متى وكيف وكيف الأشياء تتغير.

يتعلم أكثر

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

انقر هنا لمعرفة المزيد عن منصة استضافة WordPress المُدارة من Flywheel !