1.3الوسائط: الصور والمعارض & التحسين
الأساسي في 30 ثانية
- مكتبة الوسائط تجمع الصور وملفات PDF والفيديوهات؛ نعيد استخدامها دون رفعها مرتين.
- غيّر الحجم قبل الرفع واضغط: صورة خام بعدة ميغابايت هي العامل الأول للبطء.
- املأ دائمًا النص البديل (alt): للوصول عبر قارئات الشاشة ولتحسين الظهور في محرّكات البحث.
حالة مصغّرة متسلسلة — صور حسن
يرسل حسن صورًا لمزهريات التُقطت بالهاتف، أحيانًا 6 ميغابايت لكل صورة. على سمير نشرها في معرض دون إبطاء الموقع. يشرح لحسن كيفية تغيير الحجم والضغط ووصف الصور. ويستغل الفرصة لشرح النص البديل: مفيد لضعاف البصر ولـ Google Images.
تكملة الحالة 1.2 — الصفحة موجودة، ويجب تزيينها بشكل سليم.
1. إدارة الوسائط
تُخزّن مكتبة الوسائط (الوسائط ← المكتبة) كل ملفات الموقع: صور وملفات PDF وفيديوهات. عند إدراج صورة في مقال أو صفحة، يمكن رفعها أو اختيارها من المكتبة — وإعادة الاستخدام تجنّب التكرار وتخفّف التخزين. كتلة الصورة تدير صورة واحدة، وكتلة المعرض تجمع عدة صور مع عدد أعمدة قابل للضبط.
لكل صورة، يصف النص البديل ما تعرضه. تقرأه قارئات الشاشة وتأخذه محرّكات البحث في الحسبان. «مزهرية من الخزف الحجري المزجّج بالأزرق» وصف مفيد؛ أما «image1.jpg» فليس كذلك. يجعل سمير من هذا قاعدة لكل صور الورشة.
2. تحسين الوزن
قد تزن صورة الهاتف 5 إلى 8 ميغابايت بينما لا يحتاج العرض إلا إلى جزء صغير منها. أول ردّ فعل هو تغيير الحجم إلى عرض مفيد (غالبًا 1600 إلى 2000 بكسل كحد أقصى) قبل الرفع، ثم ضغط الصورة. صيغة WebP تخفّض الوزن أكثر بجودة مماثلة؛ وإضافات مثل ShortPixel أو Imagify تؤتمت الضغط والتحويل.
يفعّل WordPress التحميل الكسول (lazy loading) أصليًا: لا تُحمَّل الصور خارج الشاشة إلا عند الاقتراب من رؤيتها، ما يسرّع العرض الأولي. يتحقّق سمير من الوزن قبل وبعد، ويحافظ على أسماء ملفات واضحة مفيدة للتنظيم وتحسين الظهور.
🔎 مثال ملموس — تجهيز صور الورشة (حالة سمير)
صورة خام: 4032 بكسل، 6.2 ميغابايت.
1. تغيير الحجم إلى عرض 1600 بكسل.
2. الضغط (جودة 80) ← 240 كيلوبايت.
3. الرفع إلى الوسائط.
4. alt: «مزهرية من الخزف الحجري المزجّج بالأزرق، مجموعة أطلس».
← معرض من 4 صور، تحميل سريع.النتيجة: صورة واضحة بوزن مقسوم على عشرين.
الدرس: الجودة المدركة لا تعتمد على وزن الملف.
مفردات القسم
- مكتبة الوسائط
- تخزين مركزي لملفات الموقع، قابل لإعادة الاستخدام في كل المحتويات.
مثال بسيط: يعيد سمير استخدام صورة مرفوعة سابقًا في صفحتين.
ما ليس كذلك: رفع الصورة نفسها عشر مرات.
رد فعل: ملف واحد، استخدامات متعددة.
- النص البديل (alt)
- وصف للصورة تقرأه قارئات الشاشة وتستفيد منه محرّكات البحث.
مثال بسيط: «وعاء خزفي مشكّل على الدولاب يدويًا».
ما ليس كذلك: ترك «image1.jpg» وصفًا.
رد فعل: لا صورة دون alt مفيد.
- تحسين الصور
- تقليل الوزن دون فقدان ظاهر: تغيير الحجم والضغط قبل الرفع.
مثال بسيط: 6 ميغابايت اختُزلت إلى 240 كيلوبايت.
ما ليس كذلك: رفع صورة الهاتف الخام.
رد فعل: خفيف = سريع = ظهور أفضل.
- WebP
- صيغة حديثة أخفّ من JPEG/PNG عند جودة مماثلة.
مثال بسيط: صور الورشة محوَّلة إلى WebP.
ما ليس كذلك: الاحتفاظ بملفات PNG ثقيلة للصور.
رد فعل: الصور ← WebP إن أمكن.
- التحميل الكسول (Lazy loading)
- تحميل مؤجّل للصور خارج الشاشة، أصلي في WordPress.
مثال بسيط: صور أسفل المعرض لا تُحمَّل إلا عند التمرير.
ما ليس كذلك: تعطيل التحميل الكسول دون سبب.
رد فعل: مكسب سرعة مجاني.
في التطبيق — إدراج صور دون إثقال الموقع
- غيّر حجم صورة إلى عرض 1600 بكسل على حاسوبك.
- ارفعها إلى الوسائط وأدرجها بكتلة الصورة مع نص بديل وصفي.
- أنشئ معرضًا من 3 أو 4 صور واضبط عدد الأعمدة.
- ثبّت إضافة ضغط، شغّل التحسين وقارن الوزن قبل وبعد.
نص جاهز للقول — شرح التحسين (25 ثانية)
«أجهّز صورك قبل نشرها: تبقى واضحة لكن وزنها أقل بكثير، لذلك يظهر الموقع بسرعة حتى على الهاتف. وأصف أيضًا كل صورة لضعاف البصر ولـ Google.»
تحدّث عن السرعة التي يشعر بها العميل، لا عن الكيلوبايتات.
نموذج نسخ ولصق — بطاقة صورة
الملف: _______________
العرض بعد تغيير الحجم: _______________
الوزن قبل / بعد: _______________ / _______________
الصيغة: WebP / JPEG / PNG
النص البديل: _______________
صفحة الإدراج: _______________معرض منتجات
صور مربّعة، WebP، ونص بديل دقيق باسم القطعة.
صورة أجواء
صورة ترويسة كبيرة مضغوطة ومحمَّلة بالأولوية.
الشعار
PNG أو SVG خفيف، مع alt يحمل اسم الورشة.
مستندات PDF
اضغط ملفات PDF أيضًا، وسمّها بوضوح قبل الرفع.
✓ ممارسات جيدة
- غيّر الحجم واضغط قبل أي رفع.
- اكتب نصًا بديلًا وصفيًا لكل صورة.
- أعد استخدام الوسائط الموجودة بدل تكرارها.
✗ أخطاء شائعة
- رفع صور الهاتف الخام.
- ترك النص البديل فارغًا.
- رفع الصورة نفسها عدة مرات.
النقاط الأساسية
- المكتبة تجمع الملفات وتعيد استخدامها.
- تغيير الحجم + الضغط = موقع سريع.
- النص البديل يخدم الوصول وتحسين الظهور.
- WebP والتحميل الكسول يخفّفان التحميل أكثر.
تحدي 48 ساعة — طبّق غدًا
خذ ثلاث صور: غيّر حجمها، اضغطها واكتب نصها البديل. أدرجها في معرض وقارن الوزن الإجمالي قبل وبعد. 20 دقيقة.
- أدير مكتبة الوسائط.
- أحسّن الصورة قبل رفعها.
- أملأ نصًا بديلًا مفيدًا.
أسئلة شائعة
أي حجم وأي صيغة لصوري؟
عرض مناسب للعرض على الشاشة (نادرًا أكثر من 1600-2000 بكسل)، بصيغة WebP إن أمكن، وإلا JPEG للصور وPNG للشعارات ذات الشفافية. إضافة الضغط تؤتمت التحويل وتغيير الحجم.
هل يمكنني إعادة استخدام صورة مرفوعة سابقًا؟
نعم: المكتبة تحتفظ بكل شيء. عند الإدراج، اختر «مكتبة الوسائط» بدل «رفع» لتجنّب التكرار الذي يثقل التخزين.
هل النص البديل إلزامي؟
تقنيًا لا، لكنه موصى به بشدة: يجعل الموقع متاحًا لقارئات الشاشة ويساعد المحرّكات على فهم الصورة. ولمتجر، قد يجذب أيضًا زيارات من Google Images.
يرسل حسن صورة مزهرية بوزن 6 ميغابايت التُقطت بالهاتف. ماذا يفعل سمير قبل رفعها؟