سرعة الموقع

تحسين الصور للويب

تحسين الصورة ثلاثة أعمال، بهذا الترتيب في الأهمية: تصغيرها إلى الحجم المعروض فعلا، وإرسالها بصيغة حديثة، وإعلان أبعادها صراحة في HTML. أما الصورة التي لا تكسب شيئا فالأفضل ألا تُرسل أصلا؛ وهذه تسبق الثلاثة كلها.

  • الدرس 5 من 10
  • مبتدئ
  • مجاني، دون تسجيل

الصورة نفسها، من ملف الكاميرا إلى ما يصل الزائر

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

ما لديك

  • ملف الكاميرا أو مخرج التصميم، عدة ميغابايت
  • عرض يضاعف موضع العرض مرات
  • بيانات كاميرا زائدة وإحداثيات موقع
مرة واحدة، قبل الرفع

ما يصل الزائر

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

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

آخر مراجعة: تُراجع الحقائق وأسماء الأدوات في هذا الدرس مقابل مصادرها في هذا التاريخ.

قبل أي أداة، اسأل الصورة نفسها

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

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

والعائلة الثانية أهمها لأنها تلتهم أكثر البايتات ولها أسهل بديل. فالرسم البياني المحفوظ كـ PNG ثقيل، وغير مقروء على الهاتف، ولا يقرأ نصه أي محرك بحث. والرسم نفسه بـ HTML وCSS بضع مئات من البايتات، ويبقى مقروءا في أي حجم، ونصه قابل للتحديد والترجمة. والأيقونات كذلك: فـ SVG مضمّن يخرج أخف من PNG صغير ويأخذ لونه من القالب.

وهنا نقف موقفا صارما وندفع ثمنه: الصفحة الأولى لهذا الموقع كلها تحوي صفر وسم img. وكل ما يشبه الإنفوغرافيك هنا مرسوم بـ HTML وCSS. ونقبل القيد أيضا، لأن أيا من هذه الأشكال لا يمكن أن يكون صورة منتج حقيقي. فإن كان لديك متجر فصورة المنتج لا تُحذف، وبقية هذا الدرس لذلك بالضبط.

تحسين صور الموقع: الحجم والصيغة والأبعاد الصريحة

السؤال الذي يجب أن يُجاب قبل فتح أي أداة ضغط

هل يلزم أن تكون هذه الصورة صورة أصلا؟

لا

ارسمها بـ HTML وCSS

  • الرسوم والجداول والإنفوغرافيك؛ ويُقرأ نصها أيضا
  • الأيقونات؛ فـ SVG مضمّن أخف من PNG صغير
  • صورة زخرفية؛ احذفها ولا يضيع شيء
نعم

إذن أرسلها كما ينبغي

  • بالحجم الذي تُعرض به لا بالحجم الأصلي
  • بصيغة حديثة وبجودة جربتها بنفسك
  • بأبعاد صريحة في HTML وتكاسل لكل ما هو أدنى

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

الحجم الحقيقي، لا الحجم الذي رفعته

أشيع خطأ في صور المواقع أن يُرفع ملف الكاميرا أو مخرج فوتوشوب مباشرة ثم يُعرض صغيرا بـ CSS. فيحمّل المتصفح الملف كله ثم يصغّره. أي أن الزائر دفع ثمن كل بايت لن يراه أبدا.

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

وفي ووردبريس هذا آلي إلى حد جيد: فكل رفع يولّد أحجاما عدة، ويسلّم القالب المتصفحَ أنسبها عبر srcset. لكن للسلسلة موضعي انكسار وكلاهما شائع. الأول صورة توضع في المتن بعنوان الملف الأصلي فتتخطى الآلية كلها. والثاني صورة تتجاوز أبعادها كل الأحجام المولّدة، كصورة ٤٠٠٠ بكسل لم يُصنع لها حجم وسيط قط.

الصيغة والضغط، بأرقام حقيقية

لإخراج هذا البحث من دائرة الذوق، أخذنا ملفا حقيقيا من هذا الخادم وأنتجناه بعرضين وثلاث صيغ. الأصل غلاف مشاركة ١٢٠٠ في ٦٣٠ بكسل وزنه ٥٧.٨ كيلوبايت كما رُفع. وبـ ImageMagick، بجودة ٧٨ لـ JPEG وWebP وجودة ٥٥ لـ AVIF، خرج هذا الجدول:

الصيغةبعرض ١٢٠٠بعرض ٨٠٠
JPEG٤٧.٢ كيلوبايت٢٣.٥ كيلوبايت
WebP٢٠.٩ كيلوبايت١١.٧ كيلوبايت
AVIF١٤.٦ كيلوبايت٨.٣ كيلوبايت

ويخرج من هذا أمران. الأول أن الحركتين تنفعان ولا تغني إحداهما عن الأخرى: فتغيير الصيغة بالعرض نفسه ينصّف الوزن تقريبا، وتنصيف العرض ينصّفه تقريبا مرة أخرى. والثاني أن فعلهما معا أنزل ذلك الملف من ٥٧.٨ كيلوبايت إلى ١١.٧ كيلوبايت، أي نحو الخمس، دون أن ترى العين فرقا.

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

والأمر الذي أنتج هذه المخرجات سطر واحد ويعمل على مجلد كامل أيضا:

for f in *.jpg; do convert "$f" -resize '800x>' -strip -quality 78 "${f%.jpg}.webp"; done

وثلاثة أشياء في هذا الأمر مقصودة. فعلامة أكبر من بعد العرض تعني تصغير الصور الأكبر فقط لا تكبير الأصغر، وبدونها ينفخ الأمر ملفاتك الصغيرة. وstrip يحذف بيانات زائدة كطراز الكاميرا والإحداثيات الجغرافية، وهي بايتات وأحيانا معلومات لم تقصد نشرها. والجودة ٧٨ نقطة بداية لا قانون؛ فجرّب عدة قيم على صورك أنت.

الصورة نفسها، أربع طرق لإرسالها

صورة حقيقية واحدة من هذا الخادم، قيست في ٨ سبتمبر ٢٠٢٦
  1. الأصل، كما رُفع ٥٧.٨ كيلوبايت بعرض ١٢٠٠ بكسل
  2. JPEG بعرض ٨٠٠ ٢٣.٥ كيلوبايت صُغّرت فقط، الصيغة نفسها
  3. WebP بعرض ٨٠٠ ١١.٧ كيلوبايت الحركتان معا، نحو خمس الأصل
  4. AVIF بعرض ٨٠٠ ٨.٣ كيلوبايت الأخف، لكن إنتاجها أبطأ

هذه الأرقام لصورة واحدة وستختلف على صورك. استُعملت جودة ٧٨ لـ JPEG وWebP وجودة ٥٥ لـ AVIF؛ وبجودة أخرى تتغير الأرقام.

أي صورة يجب ألا تُحمَّل بتكاسل

التحميل المتكاسل يعني ألا ينزّل المتصفح صورة ليست بعد قريبة من إطار الرؤية. ويُفعّل بصفة واحدة في HTML، وهو مكسب كبير في صفحة فيها عشرات الصور.

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

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

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

الأبعاد الصريحة، والفخ الذي وقعنا فيه نحن

القاعدة الأخيرة أبسطها وأكثرها إهمالا: كل وسم صورة يحتاج width وheight حقيقيين خاصين به. فبدونهما لا يعرف المتصفح كم يترك من فراغ، فيصفّ النص ثم يدفع كل شيء حين تصل الصورة. وذاك هو الانزياح المحسوب في CLS.

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

والآن الفخ الذي وقعنا فيه نحن، إذ لا يكتبه أي درس. فكل موقع متجاوب تقريبا يحمل قاعدة شاملة تجعل ارتفاع الصورة تلقائيا؛ وملف الأنماط الرئيسي في هذا الموقع يحمل تلك القاعدة بعينها. ولمنع الانزياح هذا سليم وصحيح. لكنه يعني أيضا شيئا يغلو ثمنه في اللحظة الخطأ: إن حددت العرض في CSS في موضع ما وتركت الارتفاع لصفة HTML، غلبت تلك القاعدة الشاملة وانكمش الإطار إلى النسبة الذاتية للملف نفسه. وقد حدث لنا هذا في صور صفحة المستقلين: أُريد للأطر أن تكون دوائر فخرجت بيضاوية، وأسوأ الحالات صورة كانت في الأصل لقطة شاشة طويلة من هاتف. والإصلاح الصحيح أن يملك CSS الشكل، فيعطي العرض والارتفاع بنفسه ويحدد القص بـ object-fit؛ فصفات HTML لحجز المساحة لا لتشكيل الإطار.

أربعة أشياء يجب أن تكون، وأربعة يجب ألا تكون

ورقة الصورةقبل النشر

يجب أن يكون

  • عرض الملف قريب من العرض المعروض فعلا
  • صيغة حديثة بجودة جربتها بنفسك
  • width وheight صريحان على كل وسم صورة
  • أول صورة أعلى الصفحة، بلا تحميل متكاسل

يجب ألا يكون

  • ملف الكاميرا مرفوعا كما هو ومصغّرا بـ CSS
  • رسم أو جدول محفوظ كصورة
  • إضافة تجعل كل الصور متكاسلة بلا استثناء
  • ارتفاع متروك لصفة HTML يغلبه CSS بعد ذلك

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

المسار السريع مع الذكاء الاصطناعي

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

  1. أولا اعرف حقيقة المجلد ولا تخمّن. اسرد مرة كم ملفا لديك وأيها الأكبر وما أبعادها. فإن تبين أن نصف وزن المجلد في خمسة ملفات، فالعمل كله تلك الخمسة وما عداه تضييع وقت.
  2. اطلب الأمر من النموذج وضع الشروط بنفسك. والرتبة السريعة الرخيصة تكفي هنا؛ فكتابة حلقة شل ليست عمل حكم. لكن حتى النموذج الرخيص يخترع معاملات، فلتكن الشروط في الطلب نفسه: لا تكبّر، ولا تحذف الأصول، وبيّن ما يفعله كل خيار. ويُحفظ الاختيار الحالي لكل رتبة في مرجع الذكاء الاصطناعي عندنا.
  3. قبل التشغيل على المجلد الحقيقي، جرّبه على ثلاثة ملفات وانظر إلى المخرجات بعينيك. فالرقم الأصغر وحده ليس نجاحا؛ فإن تلطخ نص صغير داخل الصورة أو صارت الحواف باهتة فارفع الجودة وأعد. وهذه الخطوة الوحيدة التي لا تستطيع أداة آلية أن تحل محلها.
  4. وبعد التحويل لا تنس ما بقي: فالعناوين داخل الموقع يجب أن تشير إلى الملفات الجديدة، وكل وسم صورة يحتاج أبعاده الصريحة. فتحويل الملفات دون تحديث العناوين يعني مجلدا مليئا بملفات خفيفة لا يراها أحد.

وصفة جاهزة للنسخ

اكتب لي أمر سطر أوامر يهيئ مجلد صور للويب. سأشغّل الأمر بنفسي، فعملك كتابته لا تنفيذه.

حالتي:
نظام التشغيل: {لينكس | ماك | ويندوز}
الأدوات المثبتة عندي: {ImageMagick | ffmpeg | لا شيء، قل ما يلزم}
المجلد: {المسار}، نحو {العدد} ملفا بامتداد {jpg | png | كليهما}
أكبر عرض تُعرض به هذه الصور في الموقع: {رقم} بكسل

الشروط، كلها إلزامية:
١. الصورة الأصغر من ذلك العرض يجب ألا تُكبّر.
٢. الملفات الأصلية يجب ألا تُحذف أو تُستبدل؛ والمخرجات في مجلد منفصل.
٣. البيانات الزائدة كطراز الكاميرا وإحداثيات الموقع يجب أن تُحذف.
٤. أسماء ملفات المخرجات تُبنى من أسماء المدخلات، ويجب ألا تكسرها المسافات والحروف غير اللاتينية.
٥. إن كان ملف تالفا فلا تتوقف الحلقة، واطبع اسمه.

وبعد الأمر اكتب هذه الثلاثة:
١. سطر إلى جانب كل خيار يقول ماذا يفعل بالضبط.
٢. نسخة تجريبية تعمل على أول ثلاثة ملفات فقط.
٣. أمرا منفصلا يطبع الحجم قبل وبعد جنبا إلى جنب عقب التحويل.

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

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

الذكاء الاصطناعي في هذا العمل

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

أدوات تساعد فعلا

  • Claude مناسب لعمل المسار السريع هنا: يكتب أمر الدفعة، ويشرح الخيارات، ويبني النسخة التجريبية على ثلاثة ملفات أيضا. وإيران ليست في قائمة الدول المدعومة لدى Anthropic، فلا تسجيل رسمي ولا قبول لبطاقة إيرانية.
  • Gemini مفيد للنظر في الصفحة نفسها: أعطه لقطة شاشة واسأل أي صورة تُرى أولا وأيها تحت خط الطي. فهذه الإجابة وحدها تحسم أي صورة يجب ألا تُحمَّل بتكاسل. وتقول صفحة غوغل نفسها إن تطبيق Gemini على الويب يعمل في أكثر من ٢٣٠ دولة وإقليما، وإيران ليست في تلك القائمة.
  • ChatGPT يكفي لكتابة الأمر وشرحه. ولا ندّعي شيئا عن الوصول من إيران، لأن صفحة الدول المدعومة لدى OpenAI، كسائر ذلك النطاق، تعيد ٤٠٣ لهذا الخادم.

اين ينقلب ضدك

خطران، والثاني يخص هذا الدرس تحديدا. الأول الخيارات المخترعة: فقد رأى النموذج نمط أوامر ImageMagick وffmpeg، ويستطيع كتابة خيار لا وجود له أو له في نسختك معنى آخر. وعلى مجلد صور لا يكون هذا الخطأ قابلا للتراجع إن كنت قد استبدلت الأصول، فالنسخة الاحتياطية أول خطوة لا آخرها. والخطر الثاني في زاوية أخرى من العمل نفسه: إن كانت الصور التي تحسّنها مولّدة بالذكاء الاصطناعي أصلا، فقد يسافر معها ما لا تراه. فلدى Google DeepMind أداة اسمها SynthID تضمّن علامة رقمية غير محسوسة في مخرجات نماذج غوغل للصور، ويستطيع غوغل نفسه كشفها لاحقا. أي أن موقعا ينشر أعدادا كبيرة من الصور المولّدة يكون قابلا للتعرف لدى مالك ذلك النموذج، والضغط وتغيير الحجم لم يُصمَّما لإزالتها. وموقفنا بسيط: ليكتب النموذج الأمر، وشغّله أنت، وانظر إلى المخرجات. أما إن أردت أن تُولَّد الصورة نفسها بالذكاء الاصطناعي فذلك بحث آخر فُتح في درس العلامات الخفية في صور الذكاء الاصطناعي.

المصادر: Google DeepMind: SynthID Anthropic: supported countries Google: where Gemini Apps are available

حدود هذه النصيحة

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

من عملنا نحن

أهم ما تعلمناه عن الأبعاد الصريحة تعلمناه من خطأ عندنا، ولم نره في أي درس. فالسطر ٦٨ من ملف الأنماط الرئيسي في هذا الموقع يحمل قاعدة شاملة تقول لكل صورة وفيديو: عرض أقصى مئة بالمئة وارتفاع تلقائي. وهذه القاعدة صحيحة ولا تفسد حجز المساحة أيضا، لأن المتصفح يحسب النسبة من صفتي width وheight. لكن لها معنى ثانيا: فحيثما أعطى CSS العرض وحده وترك الارتفاع لصفة HTML، غلبت تلك القاعدة الشاملة وانكمش الإطار إلى النسبة الذاتية للملف. وفي ٢٨ أغسطس ٢٠٢٦ وقع ذلك بالضبط على صور صفحة المستقلين: أطر كان ينبغي أن تكون دوائر خرجت بيضاوية، وأسوأها صورة كانت في الأصل لقطة شاشة طويلة من هاتف. ولم يكن الإصلاح الصحيح إضافة صفات أكثر إلى HTML؛ بل أن يملك CSS الشكل، فيعطي صنف الصورة عرضه وارتفاعه ويحدد القص بـ object-fit. أما ما كلفتنا تلك التجربة: فكلما بنينا إطار صورة بشكل ثابت وجب أن نبحث عن تلك القاعدة الشاملة نفسها في CSS، وهذا ثمن تأخذه قاعدة جيدة لقاء كونها جيدة.

اسئلة متابعة حقيقية

هل أحوّل كل الصور إلى WebP؟

للصور الفوتوغرافية نعم، والمكسب معتبر. لكن أصلح الحجم قبل الصيغة: ففي قياسنا، تنصيف العرض فعل ما فعله تغيير الصيغة. وإن كانت ملفاتك قد صُنعت بالحجم الصحيح من البداية، فـ WebP مكسب إضافي لا إنقاذ.

أثبّت إضافة لتحسين الصور أم أفعلها بنفسي؟

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

أي قيمة جودة أستعمل؟

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

واصل التعلم