انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 16
دورة لغة HTML

أنواع الصور المستخدمة في HTMLHTML Image File Types

سوف تتعلم في هذا الدرس عن امتدادات الصور مثل JPEG، PNG، SVG، و WebP التي يمكن استخدامها في لغة HTML، بالإضافة إلى إيجابيات وسلبيات كل امتداد، لكي تتمكن من اختيار الصور المناسبة لموقعك.

ابدأ التعلّم
THE BUILDING BLOCKS OF THE WEBHTML
index.html
1<h1>Hello, web.</h1>
وسم الفتحالمحتوىوسم الإغلاق
النتيجة في المتصفح Hello, web.
كل صفحة رائعة تبدأ بعنصر.
أقسام الدرس
8
الأمثلة
0
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
6,945
محتوى الدرس
في هذا الدرس 8تصفّح المواضيع

Images File Extension امتداد ملفات الصور

يقدم هذا الجدول مجموعة من أنواع الملفات الرسومية الشائعة، مع معلومات أساسية تشمل الاختصار، والاسم الكامل لنوع الملف، ونوع الوسائط MIME، وامتداد الملف المستخدم. فيما يلي وصف مختصر لكل نوع:

الاختصار نوع الملف نوع الوسائط MIME امتداد الملف

APNG

 animated portable network graphics image/apng .apng, .png

AVIF

 AV1 image file format image/avif

avif.

GIF

 graphics interchange format image/gif

gif.

JPEG

 Joint Photographic Experts Group image/jpeg

[jpg-.jpeg-.jfif-.pjpeg-.pjp.]

PNG

 portable network graphics image/png

png.

SVG

 scalable vector graphics image/svg+xml .svg, .svgz

WebP

 WebP image/webp

webp.



JPEG Extension امتداد JPEG

تُعد ملفات JPEG [Joint Photographic Experts Group]: من أكثر الصيغ شيوعًا في تخزين الصور الرقمية، حيث تُستخدم بشكل واسع في الكاميرات الحديثة لالتقاط الصور، كما تُعتبر تنسيقاً قياسياً يُستخدم بشكل شائع في الويب والطباعة. ويُدعم هذا الامتداد في المتصفحات الرئيسية الحديثة وكثير من برامج تحرير الصور، ويمتاز بكون ملفاته مضغوطة مما يجعله مفضلاً للاستخدام على مواقع الويب.

إيجابيات ملف JPEG:



  • مدعوم من جميع المتصفحات.
  • قد يكون الحجم مناسبًا للويب؛ يعتمد على الأبعاد والمحتوى وإعدادات الضغط.
  • يدعم عادةً ملايين الألوان في صور الويب ذات 24 بت.
  • الصور بهذا الامتداد يمكن أن تكون بجودة عالية.

سلبيات ملف JPEG:


  • لا يدعم الخلفيات الشفافة.
  • ضغط الصور قد يؤدي إلى خفض الجودة أو ضعف في إمكانية قراءة النص أحياناً.

اختصار كلمة JPEG:


  • مجموعة خبراء التصوير المشتركة [Joint Photographic Experts Group].

الامتدادات المماثلة:


  • [jpg, .jpeg, .jfif, .pjpeg, .pjp].

PNG extension امتداد PNG

تُعد ملفات PNG [Portable Network Graphics]: من الصيغ الشائعة لتخزين الصور الرقمية، خاصة للرسومات على الويب. تمتاز بدعمها للشفافية وجودة الصور العالية، مما يجعلها مناسبة للاستخدام في التصاميم التي تتطلب دقة في التفاصيل، مثل الشعارات [logo] والأيقونات [icons]. كما يُدعم هذا الامتداد في جميع المتصفحات وبرامج تحرير الصور، ويمتاز بعملية الضغط دون فقدان للجودة، مما يحافظ على دقة الألوان والوضوح في الصور.

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

إيجابيات ملف PNG:


  • مدعوم من جميع المتصفحات.
  • يدعم الخلفيات الشفافة.
  • يُفضل استخدامه للعناصر الرسومية.
  • يقوم بعملية الضغط دون فقدان في جودة الصورة.
  • حجم ملف صغير بألوان محدودة.

سلبيات ملف PNG:

  • من الممكن أن يكون حجم الملف كبيرًا بملايين الألوان، مما يبطئ عملية تحميل الموقع الخاص بك.
  • ليس الامتداد الأفضل للطباعة.


اختصار كلمة PNG:

  • رسومات الشبكة المحمولة [Portable Network Graphics].

الامتداد:


  • ملف PNG له امتداد واحد هو [png.].

GIF Extension امتداد GIF

تُعتبر ملفات GIF [Graphics Interchange Format]: من أكثر صيغ الصور المتحركة شيوعًا، وتدعم المتصفحات الحديثة صيغًا متحركة أخرى مثل APNG وWebP وAVIF أيضًا؛ يختلف دعم برامج التحرير بحسب البرنامج والإصدار. تدعم ملفات GIF الشفافية والحركة، ويمكن ضغطها بشكل فعال لتقليل حجم الملف.

يُعتبر GIF الأفضل للاستخدام مع الرسومات المتحركة التي تتطلب القليل من الألوان، حيث تُضيف الصور المتحركة حيوية وحركة إلى الصفحة، مما يجعل الموقع أكثر ديناميكية مقارنة بالصور الثابتة.

إيجابيات ملف GIF:


  • مدعوم في جميع المتصفحات.
  • يدعم الرسوم المتحركة.
  • يستخدم للرسوم المتحركة الصغيرة ومقاطع الفيديو منخفضة الدقة.
  • عادة ما يكون حجم الملف صغيرًا.

سلبيات ملف GIF:

  • ضغط LZW نفسه دون فقد، لكن اختزال ألوان الصورة الأصلية إلى لوحة GIF قد يفقد ألوانًا وتفاصيل.
  • تضم كل لوحة ألوان حتى 256 لونًا؛ قد تستخدم الإطارات لوحات مختلفة.

اختصار GIF:


  • تنسيق تبادل الرسومات [Graphics Interchange Format].

الامتداد:


  • ملف GIF له امتداد واحد هو [gif.].

SVG Extension امتداد SVG

يُعتبر ملف SVG [Scalable Vector Graphics]: تنسيق صور يعتمد على لغة [XML] لوصف الرسومات ثنائية الأبعاد، وطُور من قبل اتحاد شبكة الويب العالمية [W3C]. يصف SVG الأشكال المتجهية فتظل حادة عند تغيير الحجم، لكنه قد يضم صورًا نقطية لا تكتسب هذه الميزة تلقائيًا. يدعم ملفات SVG الخلفيات الشفافة ويمكن فتحها في برامج تحرير الصور ومتصفحات الويب.

يُعتبر SVG أفضل امتداد للشعارات والأيقونات والرسوم التوضيحية البسيطة، لأنه يوفر جودة أعلى مقارنةً بملفات PNG و JPEG.


إيجابيات ملف SVG:


  • مدعوم من جميع المتصفحات.
  • يمكن إعادة ضبط حجم الملف دون فقدان جودة الأشكال أو النصوص.
  • عادة ما يكون حجم الملف صغيرًا.

سلبيات ملف SVG:


  • ليس الأفضل للصور أو الرسومات المعقدة.
  • لا يُدعم من قبل جميع الأنظمة الأساسية لنظام إدارة المحتوى.
  • غير مدعوم من بعض برامج تحرير الصور الافتراضية.

اختصار SVG:

  • رسومات متجهية قابلة للتطوير [Scalable Vector Graphics].

الامتداد:


  • يستخدم SVG الامتداد .svg، وقد يستخدم .svgz عند ضغطه بـgzip.

WEBP Extension امتداد WEBP

يُعتبر ملف WebP: امتدادًا لملفات الصور الذي تم تطويره بواسطة شركة [Google] في عام 2010، ويوفر ضغطًا مع فقد lossy أو دون فقد lossless بحسب الإعدادات. يتيح تحويل ملفات JPEG و PNG إلى WebP لتوفير مساحة على الخادم، وقد يقل حجم الملف بحسب الصورة والإعدادات؛ الضغط مع فقد قد يغير التفاصيل، مما يعني استهلاكًا أقل للبيانات وتنزيلًا أسرع.

يعتمد رفع WebP ومعالجته في نظام إدارة المحتوى على إصدار النظام ومكتبات الصور المتاحة على الخادم؛ تحقق من دعم بيئتك.


إيجابيات ملف WebP:


  • حجم الملف صغير جدًا مع الحفاظ على جودة الصورة.
  • يدعم الشفافية.
  • يعتمد على عملية الضغط الفعّالة للملف.


سلبيات ملف WebP:


  • تدعمه الإصدارات الحديثة من Safari وChrome وFirefox وEdge وOpera؛ Internet Explorer القديم لا يدعمه.
  • غير مدعوم في جميع الأنظمة الأساسية.


اسم التنسيق: WebP.




امتداد WebP:


  • ملف WebP له امتداد واحد هو [webp.].

AVIF Extension امتداد AVIF

يُعتبر ملف AVIF [AV1 Image File Format]: امتداداً لملفات الصور الذي طوره تحالف الجهات المفتوحة لإنتاج الفيديو [AOMedia] بهدف تقديم ضغط أفضل وجودة عالية للصور عبر الإنترنت.

يعتمد هذا الامتداد على ترميز الفيديو AV1 لضغط الصور مع الحفاظ على الجودة. يتيح تحويل ملفات JPEG و PNG إلى AVIF توفير مساحة على الخادم، حيث يُستخدم ضغط الصور الفعّال لتقليل حجم الملف بشكل كبير، مما يؤدي إلى استهلاك أقل للبيانات وزيادة في سرعة التنزيل.

إيجابيات ملف AVIF:

  • حجم الملف صغير جدًا مع الحفاظ على جودة الصورة.
  • يدعم الشفافية والألوان العالية الدقة.
  • يعتمد على عملية ضغط فعّالة وعالية الكفاءة.


سلبيات ملف AVIF:

  • تدعمه المتصفحات الرئيسية الحديثة، ومنها Safari منذ الإصدار 16.1؛ قدم بديلًا إذا كنت تستهدف إصدارات أقدم.
  • يتطلب أحيانًا ملحقات إضافية لعرضه في بعض البرامج.

اختصار كلمة AVIF:

  • تنسيق صورة AV1 [AV1 Image File Format].

امتداد AVIF:

  • ملف AVIF له امتداد واحد هو [avif.].

APNG Extension امتداد APNG

يُعتبر ملف APNG [Animated Portable Network Graphics]: امتدادًا لملفات الصور المتحركة الذي تم تطويره كتوسيع لتنسيق PNG الشهير. يهدف APNG إلى تقديم قدرات الحركة مع الحفاظ على الجودة الأصلية لصور PNG، كما يدعم الشفافية وعمق الألوان العالية.


يدعم APNG ألوانًا وشفافية أوسع من GIF عند توفرها في المصدر؛ تحويل GIF موجود لا يعيد ألوانًا أو تفاصيل فُقدت منه بالفعل.

إيجابيات ملف APNG:

  • يحتفظ بجودة الصورة مع دعم الشفافية والحركة.
  • يدعم الألوان العالية الدقة.
  • لا يتعرض لضغط يؤدي إلى فقدان الجودة مقارنة ببعض تنسيقات الصور المتحركة الأخرى.

سلبيات ملف APNG:

  • غير مدعوم في جميع المتصفحات مثل [Internet Explorer].
  • قد يتطلب أحيانًا ملحقات إضافية للتشغيل في بعض البرامج.

اختصار كلمة APNG:

  • رسومات الشبكة المحمولة المتحركة [Animated Portable Network Graphics].

امتداد APNG:

  • قد يستخدم APNG الامتداد .apng أو .png.

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…