5 نصائح لتحسين الصور للويب دون فقدان الجودة

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

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

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

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

1. حفظ الصور في مساحة لونية مناسبة

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

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

2. ضغط أحجام الملفات

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

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

3. استخدم تنسيق الملف الصحيح

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

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

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

4. تصدير أحجام صور متعددة

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

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

قم بتصدير صورتك بمقاييس @ 2x و @ 3x ، أي أن النسخة المنقحة من صورتك ستكون 2x (200٪) أو 3x (300٪)

الحجم الأصلي. سيسمح ذلك لمتصفح الويب المحمول للمستخدم بعرض الصورة تلقائيًا في 2x أو 3x من الحجم الأصلي في نفس المساحة.

5. استخدم النص البديل لوصف مصدر الصورة

النصوص البديلة ، المعروفة أيضًا بالنصوص البديلة أو السمات البديلة ، عبارة عن عبارات قصيرة مكتوبة بأكواد HTML تقدم معلومات حول مصدر الصورة. تضع Google صور النص البديل في قيمة عالية نسبيًا لأن هذه الصور لا تخدم فقط الغرض الأساسي المتمثل في إرضاء جمهورك ولكن أيضًا لأنها تلعب دورًا حيويًا في تحسينات تحسين محركات البحث على مواقع الويب الخاصة بك. هذا لأنك تحصل على فرصة لتضمين نصوص وعبارات مع الكلمات الرئيسية لتحسين محركات البحث للحصول على مرتبة عالية في Google. على سبيل المثال ، يظهر رمز HTML بدون نص بديل كـ https://pexels.com/photo/dog
بينما عندما يتم تضمين النص البديل ، فإنه يظهر بتنسيق

<img src = http: //pexels.com/photo/dog.jpg alt = "لعبة الكلب في السلم">

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

هناك أيضًا العديد من المنصات عبر الإنترنت مثل CompressPNG.com و Smush.it و webresizer.com وما إلى ذلك والتي يمكنك استخدامها لتحسين صور موقع الويب الخاص بك دون المساومة كثيرًا على جودة الصورة.

يبدو أن هناك الكثير من المتاعب ، لماذا هذا العناء؟

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

 ستعاقب Google المواقع البطيئة المتعطشة للبيانات ، مما يمنحها أولوية أقل في نتائج SERP.

تشغل الصور الكبيرة قدرًا كبيرًا من مساحة الخادم مما سيكلفك في النهاية المزيد من المال.

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

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

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