الهدف

بنهاية هذا الدرس، سيكون الطالب قادرًا على مقارنة صيغ الوسائط الرقمية (صور، صوت، فيديو) واختيار الصيغة المناسبة لكل سياق ويب.

شرح الدرس

صيغ الصور:

  • JPEG: ضغط مع فقدان بيانات. مثالي للصور الفوتوغرافية.
  • PNG: ضغط بدون فقدان. يدعم الشفافية. مثالي للشعارات والرسوميات.
  • SVG: رسومات متجهية قابلة للتوسع بلا فقدان جودة. مثالي للأيقونات.
  • WebP: صيغة Google الحديثة — ضغط أفضل من JPEG مع دعم الشفافية.

صيغ الصوت: MP3 (ضغط مع فقدان، شائع)، AAC (جودة أفضل بحجم أصغر)، WAV (بدون ضغط، ملفات ضخمة).

صيغ الفيديو: MP4/H.264 (أكثر توافقًا)، WebM (متفوح المصدر، ويب محسّن)، H.265 (أحدث، ضغط أكثر كفاءة).

الضغط بفقدان مقابل بدون فقدان: فقدان (Lossy) — يُقلل الحجم بحذف بيانات غير ملحوظة. بدون فقدان (Lossless) — يحتفظ بكل البيانات. الموضوع: مقايضة بين الحجم والجودة.

أسئلة تدريبية

1. تصمم شعارًا لشركة يظهر على موقع الويب وبطاقات العمل وعلى جانب سيارة. أي صيغة صور تختار؟ ولماذا؟

عرض الإجابة

SVG (Scalable Vector Graphics). السبب: يُوسَّع لأي حجم دون فقدان الجودة — نفس الملف يعمل على الشاشة الصغيرة والإعلان العملاق. JPEG أو PNG ستفقد حدتها عند التكبير الكبير. SVG أيضًا ملف صغير جدًا لأنه يُخزّن معادلات رياضية لا بيكسلات.

2. موقع عقارات يريد عرض صور شقق عالية الجودة (20 صورة لكل شقة). تنافس بين JPEG وPNG وWebP. أيهما يختار؟ ولماذا؟

عرض الإجابة

WebP هو الخيار الأفضل. يُعطي جودة مقاربة لـ JPEG بحجم أصغر بـ 25-35% — مهم لسرعة التحميل مع 20 صورة. JPEG بديل مقبول للتوافق مع المتصفحات القديمة. PNG غير مناسب لأن الصور الفوتوغرافية بـ PNG ضخمة جدًا لأنه يحتفظ بكل البيانات.

3. ما الفرق الجوهري بين الضغط بفقدان (Lossy) وبدون فقدان (Lossless)؟ وأي نوع يُستخدم للأرشفة العلمية ولماذا؟

عرض الإجابة

Lossy: يحذف بيانات تعدّها الخوارزمية غير ضرورية — ملفات أصغر لكن لا يمكن استرداد الصورة الأصلية. Lossless: يضغط بدون حذف أي بيانات — يمكن فك الضغط للصورة الأصلية مثل ما هي. الأرشفة العلمية: Lossless ضروري — صورة أشعة طبية أو خريطة علمية لا يُسمح بأي فقدان يؤثر على التشخيص أو القراءة.

4. مطوّر يضع صوتًا بصيغة WAV في موقعه. ما المشكلة؟ وما البديل المناسب؟

عرض الإجابة

WAV: بدون ضغط — ملفات ضخمة جدًا (1 دقيقة موسيقى ≈ 10MB). في الويب هذا يُبطّئ التحميل. البديل: MP3 (1 دقيقة ≈ 1MB، توافق واسع) أو AAC (جودة أفضل بحجم أصغر). WAV مناسب للاستوديو والتحرير الاحترافي، ليس للويب.

5. ما الـ Codec؟ ولماذا أحيانًا يُفتح ملف فيديو لكن لا يُعرض الصوت أو الصورة؟

عرض الإجابة

Codec (Coder-Decoder): برنامج يُشفّر الفيديو/الصوت عند الحفظ ويفكه عند التشغيل. عدم ظهور الصوت/الصورة: الجهاز لا يملك Codec المناسب لفك التشفير. المثال: ملف .mkv قد يحتوي فيديو H.264 وصوت AAC — إذا كان المشغّل يدعم H.264 فقط، سيعرض الصورة دون صوت.

6. ما الميتاداتا (Metadata) في ملفات الوسائط؟ واضرب مثالًا على استخدامها وعلى خطورتها من ناحية الخصوصية.

عرض الإجابة

Metadata: بيانات عن البيانات مضمّنة في الملف نفسه. في صور JPEG: EXIF يحمل موقع الالتقاط (GPS)، وقت الالتقاط، نوع الكاميرا، حتى اسم المصوّر. الاستخدام الإيجابي: تنظيم المكتبة وترتيبها. الخطورة: نشر صورة بـ Metadata كامل يكشف موقع المنزل أو مكان العمل. صحفيون ومدافعون عن حقوق الإنسان يُنظّفون الـ Metadata قبل نشر الصور.

7. موقع يُريد دعم الفيديو بأكبر قدر من التوافق مع المتصفحات. ما الاستراتيجية؟

عرض الإجابة

توفير نفس الفيديو بصيغتين: WebM (للمتصفحات الحديثة الداعمة) + MP4/H.264 (للتوافق الأقصى بما في ذلك Safari وIE). في HTML5:

8. ما الرمز البصري QR Code؟ ما صيغة الصور المناسبة له على موقع ويب ولماذا؟

عرض الإجابة

QR Code: نمط من البيكسلات السوداء والبيضاء يُخزّن بيانات (URL, نص). الصيغة المناسبة على الويب: SVG أو PNG. PNG: مثالي لأن QR يحتوي حواف حادة دقيقة — الضغط بفقدان (JPEG) يُشوّه هذه الحواف مما يجعل الماسح يفشل في قراءته. SVG أفضل إذا أُريد تكبيره لأحجام مختلفة.

9. ما التدفق التكيّفي (Adaptive Bitrate Streaming) في الفيديو؟ وكيف يُحسّن تجربة المشاهدة؟

عرض الإجابة

ABR: بدلًا من صيغة فيديو واحدة، يُتوفَّر نفس الفيديو بمعدلات بت متعددة (240p, 480p, 1080p). أثناء التشغيل، المشغّل يُراقب سرعة الاتصال ويُبدّل الجودة تلقائيًا — إذا أبطأ الإنترنت ينزل لـ 480p حتى لا يتوقف. إذا تحسّن يعود لـ 1080p. يُستخدمه Netflix وYouTube (HLS و DASH البروتوكولان).

10. شخص يحرر فيديو ويحفظ النسخة الوسيطة (للمراجعة لاحقًا) ويصدر النسخة النهائية للنشر على يوتيوب. أي صيغة لكل منها؟ ولماذا؟

عرض الإجابة

الوسيطة: صيغة Lossless أو ProRes/DNxHD — لا فقدان في الجودة حتى يبدأ التحرير من أفضل حالة. كل تحرير + تصدير Lossy يُراكم خسارة الجودة. النهائية لليوتيوب: MP4/H.264 — توازن ممتاز بين الجودة والحجم وهو ما يقبله YouTube ويُحسّنه بعد الرفع.

11. ما دور CDN في تقديم الوسائط (صور وفيديو)؟ وكيف يُقلل وقت التحميل للمستخدمين العالميين؟

عرض الإجابة

CDN تُوزّع نسخًا مخزّنة من الوسائط على خوادم عالمية. بدلًا من جلب كل صورة أو مقطع فيديو من الخادم المركزي في أمريكا، يجلبها المستخدم المصري من خادم في دبي أو القاهرة. هذا يُقلل: (1) زمن الانتقال (Latency). (2) الضغط على الخادم الأصلي. (3) تكاليف النطاق الترددي.

12. ما الفرق بين دقة الشاشة (Screen Resolution) ودقة الصورة (Image Resolution)؟ ولماذا صورة 72dpi تبدو جيدة على الشاشة لكن رديئة في الطباعة؟

عرض الإجابة

دقة الشاشة: عدد بيكسلات الشاشة (1920×1080). دقة الصورة: كثافة البيكسلات لكل بوصة (dpi). الشاشات عادةً 72-96dpi — كافٍ للعرض لأن العين تكمل التفاصيل. الطابعات 300dpi — كل بوصة مطبوعة تحتاج 300 بيكسل لتبدو حادة. صورة 72dpi المطبوعة: بيكسلات كبيرة مرئية كمربعات.

💬 ابدأ من هنا — افهم أولًااطلب من ChatGPT أن يشرح الدرس مرة أو مرتين أو حتى عشر مرات، بطريقة أبسط أو بأمثلة أو بمواقف من الحياة. عندما تفهم، اقرأ الدرس جيدًا ثم أجب عن الأسئلة الاثني عشر.
1
Copy lesson information
2
Open ChatGPT
Paste lesson information in the ChatGPT chat box.
Open ChatGPT
3
Press Enter / Send
Press Enter / Send, then wait for ChatGPT to get ready with your lesson.
تحميل هذا الباب / Download this Chapterنسخة كاملة للدراسة بدون إنترنت، مع الأسئلة والإجابات والصور المتاحة.