تعتبر الصور هي “حامل ”القيمة الظاهرية“ للموقع الإلكتروني، ولكن إذا لم يتم التعامل معها بشكل صحيح، فإنها ستصبح ”عائقاً“ يبطئ الموقع الإلكتروني، كما أنها ستفوت فرصة تحسين تحسين محركات البحث. إن جوهر تحسين الصورة هو ”تقليل حجم الصورة دون التأثير على التأثير البصري“ و”السماح لمحركات البحث بفهم محتوى الصورة"، والحجم المضغوطوإضافة علامة بديلةهما الطريقتان الأكثر أساسية وفعالية.
أولاً، لماذا تحسين الصور؟
من المهم فهم أهمية التحسين أولاً قبل اتخاذ هذه الخطوة بجدية أكبر:
- تحسين سرعة التحميل: يمكن للصور الكبيرة غير المحسّنة أن تجعل تحميل الصفحة يستغرق وقتًا أطول وقد يغادر الزائرون الصفحة دون انتظار انتهائها (تُظهر الأبحاث أن 531 زائرًا يتخلون عن الصفحة التي يستغرق تحميلها أكثر من 3 ثوانٍ).
- توفير مساحة للخادم:: يكون حجم الصورة المضغوطة أصغر، ويمكن أن يقلل من بصمة تخزين الخادم واستهلاك حركة المرور (مهم بشكل خاص للخوادم التي تتقاضى رسومًا حسب حركة المرور).
- المساعدة في تحسين محركات البحث SEO الترتيبلا يمكن لمحركات البحث (مثل Baidu وGoogle) “قراءة” الصور مباشرة، بل يمكنها فقط فهم المحتوى من خلال المعلومات النصية (مثل العلامات البديلة)، ويمكن أن يؤدي تحسين الصور إلى زيادة ظهورها في نتائج البحث.
- التكيف مع الأجهزة المحمولة:: مستخدمو الهواتف المحمولة لديهم حركة مرور محدودة، يمكن للصور صغيرة الحجم أن تقلل من استهلاك التحميل وتحسن تجربة الهاتف المحمول.
ثانيًا، ضغط الصورة: تقليل حجم الصوت، دون فقدان جودة الصورة
يتمثل مبدأ ضغط الصور في إزالة معلومات البكسل الزائدة عن الحاجة (مثل اختلافات الألوان التي لا يمكن تمييزها بالعين المجردة) من الصورة، مما يقلل من حجم الملف مع الحفاظ على التأثير البصري. موصى به للمبتدئينالضغط التلقائي للمكونات الإضافيةلا يلزم التشغيل اليدوي.
الطريقة 1: الضغط التلقائي باستخدام مكون إضافي (موصى به للمبتدئين)
المكونات الإضافية الموصى بها: Smush أو ShortPixel (الإصدار المجاني يكفي)
باستخدام سحق على سبيل المثال، تكون الخطوات كالتالي:
- تثبيت المكون الإضافي: الخلفية [المكون الإضافي] ← [تثبيت المكون الإضافي] ← ابحث عن “Smush” ← انقر فوق [تثبيت] ← [تنشيط].
- الإعدادات الأساسية:
- بعد التفعيل، انتقل إلى صفحة إعدادات الإضافة وحدد “ضغط الصور المرفوعة حديثًا تلقائيًا” (سيتم ضغط الصور المرفوعة حديثًا تلقائيًا، ولا حاجة للقيام بذلك يدويًا).
- انقر على “ضغط الدُفعات” وحدد “ضغط جميع الصور” (للصور القديمة التي تم تحميلها إلى مكتبة الوسائط).
- في انتظار اكتمال الضغط: ستعرض الإضافة تقدم الضغط والمساحة المحفوظة (على سبيل المثال “تم ضغط 50 صورة، مما يوفر 20 ميغابايت من المساحة”).
الطليعةمعالجة آلية بالكامل، ودعم لضغط الدُفعات، وإصدار مجاني لتلبية احتياجات مواقع الويب الصغيرة والمتوسطة الحجم (إصدار مجاني من Smush لصورة واحدة حتى 5 ميغابايت، وإصدار مجاني من ShortPixel يمكن ضغطه حتى 100 صورة شهريًا).
الطريقة 2: الضغط اليدوي قبل التحميل (للتحسين الشديد)
إذا كان حجم الصورة كبيرًا بشكل خاص (على سبيل المثال يمكن أن يتجاوز حجم الصورة الأصلية التي التقطتها الكاميرا 10 ميغابايت بسهولة)، فمن المستحسن ضغطها يدويًا على الكمبيوتر قبل تحميلها على الموقع الإلكتروني:
- أدوات عبر الإنترنت(لا يلزم تثبيت البرنامج):
- TinyPNG (tinypng.com): يدعم PNG و JPG، ومعدل ضغط عالٍ، وفقدان منخفض لجودة الصورة، ويمكنه تحميل 20 صورة في المرة الواحدة.
- أداة ضغط الصور، تدعم تنسيق WebP (حجم أصغر من JPG 30%-50%).
- الإجراء：
- افتح الأداة ← ارفع الصورة ← انتظر حتى يكتمل الضغط ← قم بتنزيل الصورة المضغوطة ← ارفعها إلى مكتبة وسائط ووردبريس.
السيناريو:: الصور المهمة مثل شعار الصفحة الرئيسية، والصورة الرئيسية لصفحة تفاصيل المنتج، وما إلى ذلك، يمكن للضغط اليدوي أن يتحكم في جودة الصورة بشكل أكثر دقة.
ملاحظات الضغط:
- يتم ضغط الصور العادية (مثل تلك الصور المصاحبة للمقالات) في في حدود 200 كيلو بايت هذا كل شيء، التحكم في الصورة الرئيسية الكبيرة للصفحة الرئيسية في في حدود 1 ميغابايت。
- تحديد الأولويات تنسيق WebP(يدعم ووردبريس 5.8+ الدعم الأصلي)، والحجم أصغر بحوالي 50% من JPG بنفس جودة الصورة.
- تجنب الإفراط في الضغط: قد تؤدي معدلات الضغط التي تزيد عن 80% إلى تشويش الصور، خاصة تلك التي تحتوي على الكثير من النصوص (مثل لقطات الشاشة والرسوم البيانية).
ثالثًا، أضف علامات بديلة: حتى “تفهم” محركات البحث الصورة
“العلامة البديلة” (الاسم الكامل “السمة البديلة”) هي “الوصف النصي” للصورة، والتي يتم عرضها عندما يفشل تحميل الصورة بسبب مشاكل في الشبكة؛ والأهم من ذلك، فإن أن محرك البحث سيفهم محتوى الصورة من خلالها، مما يؤثر على ترتيب الصورة في نتائج البحث.
لماذا يجب علي إضافة علامات بديلة؟
- مثال 1: صورة لـ “حذاء رياضي أحمر”، إذا لم تكن هناك علامة بديلة، قد يعرف محرك البحث أن هذه صورة فقط؛ أضف علامة بديلة “حذاء رياضي أحمر خفيف الوزن وقابل للتنفس”، سيرتبط محرك البحث بمصطلحات البحث المتعلقة بـ “حذاء رياضي أحمر أحذية رياضية حمراء” مصطلحات البحث ذات الصلة.
- مثال 2: عندما تفشل الصورة في التحميل، يرى الزائر نص العلامة البديلة ويعرف ما كان ينبغي أن تكون عليه الصورة (بدلاً من رمز فارغ أو “لا يمكن عرض الصورة”).
كيف يمكنني إضافة علامات بديلة؟
الطريقة 1: الإضافة مباشرة عند تحميل الصور (موصى به)
- ارفع صورة (إما عن طريق مكتبة الوسائط أو المحرر)، وفي نافذة إعدادات الصورة المنبثقة، ابحث عن مربع إدخال النص البديل (أي علامة بديل).
- املأ الوصف:
- كن موجزًا ودقيقًا (من 10 إلى 15 كلمة مناسبة)، مع تضمين المحتوى الأساسي للصورة (على سبيل المثال، “واجهة مكتب الشركة” “الجزء الخارجي لجهاز كمبيوتر محمول 2023”).
- تجنب تكديس الكلمات الرئيسية (على سبيل المثال “شركة تصميم مواقع الويب لمنشئ مواقع الويب ووردبريس” كوصف غير صالح).
- إذا كانت الصورة زخرفية (على سبيل المثال، مقسم أو نمط خلفية)، اتركها فارغة أو املأ “صورة زخرفية” (لتجنب تضليل محركات البحث).
- انقر فوق “إدراج في منشور” وستصبح العلامة البديلة سارية المفعول تلقائيًا.
الطريقة 2: إضافة/تعديل العلامات البديلة للصور المرفوعة
- انتقل إلى [الوسائط] → [المكتبة]، وابحث عن الصورة التي تريد تعديلها، وانقر على الصورة للدخول إلى صفحة التعديل.
- املأ أو عدّل المحتوى في مربع “النص البديل” على اليمين، وانقر على [تحديث].
العلامات البديلة مقابل العنوان مقابل التسمية التوضيحية: لا تختلط عليك الأمور!
ويخلط العديد من المبتدئين بين هذه المفاهيم الثلاثة ويقومون بالتمييز البسيط بينها:
- العلامة البديلة (نص بديل):: بالنسبة لمحركات البحث وفشل التحميل، مما يؤثر على تحسين محركات البحث، يجب ملء البيانات.
- العنوان: النص الذي سيتم عرضه عند تمرير الماوس فوق الصورة (اختياري، ومناسب للتفاصيل الإضافية، مثل “انقر لعرض صورة عالية الدقة”).
- الوصف (التسمية التوضيحية):: النص المعروض أسفل الصورة (مشابه للتعليق على الصورة، على سبيل المثال “الشكل 1: موقع الاجتماع السنوي للشركة”، املأه حسب الضرورة).
رابعاً: الأسئلة المتداولة للوافدين الجدد
- هل يجب وضع علامة بديلة على جميع الصور؟تقريبًا. بصرف النظر عن الصور الزخرفية البحتة (مثل الخلفيات ذات الألوان الصلبة والحدود)، يجب إضافة الصور الأخرى التي تحتوي على محتوى فعلي (صور المنتجات، صور الأشخاص، صور المشاهد، إلخ) كشرط أساسي لتحسين محركات البحث.
- ماذا أفعل إذا أصبحت صوري غير واضحة بعد الضغط؟قلل من قوة الضغط (يمكن ضبط معدل الضغط في الإضافة)، أو أعد الضغط باستخدام أداة ضغط يدوية (مثل TinyPNG) للاحتفاظ بجودة أعلى للصورة.
- هل لا تظهر الصور بتنسيق WebP على المتصفحات القديمة؟يدعم WebP المتصفحات الحديثة (Chrome وEdge وFirefox وSafari 14+) ونادراً ما تستخدم المتصفحات الأقدم (مثل IE) دون قلق لا داعي له. للتوافق، يمكنك تثبيت المكوّن الإضافي “WebP Express”، الذي يوفر تلقائياً إصداراً بديلاً من JPG للمتصفحات الأقدم.
- لا تغيير في سرعة الموقع بعد تحسين الصورة؟قد يكون ذلك بسبب عوامل أخرى (مثل بطء الخادم أو كثرة الإضافات)، يمكنك استخدام أداة GTmetrix للتحقق أولاً لمعرفة ما إذا كان “حجم الصورة” لا يزال هو المشكلة الرئيسية.
يعد تحسين الصور عملية “منخفضة التكلفة وعالية العائد”: يمكن أن يؤدي قضاء 10 دقائق في إعداد مكون إضافي وإضافة علامات بديلة إلى تحسين سرعة موقعك وأداء تحسين محركات البحث بشكل كبير. اعتد على “التحميل والتحسين” وسيحظى موقعك بشعبية أكبر بين الزوار ومحركات البحث.
العربية