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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Google PageSpeed ​​Insights
• أدوات Pingdom
• GTMetrix
• WebPageTest

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

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) أو Paint (لنظام 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
• TinyPNG
• Kracken.io
• تخيل

EWWW Image Optimizer Cloud

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

TinyPNG

يمكن لبرنامج 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 ، وذلك بفضل المكون الإضافي Smush.

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

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