HTML Image File Types
أنواع الصور المستخدمة في HTML
سوف تتعلم في هذا الدرس عن امتدادات الصور مثل JPEG، PNG، SVG، و WebP التي يمكن استخدامها في لغة HTML، بالإضافة إلى إيجابيات وسلبيات كل امتداد، لكي تتمكن من اختيار الصور المناسبة لموقعك.
التاريخ
28 يناير 2022
الدروس
48
المستوى
مبتدئ
اللغة
عربي
المشاهدات
2908
المواضيع
12
HTML Image File Types
أنواع الصور المستخدمة في HTML
</>
Images File Extension
امتداد ملفات الصور
يقدم هذا الجدول مجموعة من أنواع الملفات الرسومية الشائعة، مع معلومات أساسية تشمل الاختصار، والاسم الكامل لنوع الملف، والفئة التقنية لها، وامتداد الملف المستخدم. فيما يلي وصف مختصر لكل نوع:
| الاختصار | نوع الملف | نوع الملف التقني | امتداد الملف |
|
APNG |
animated portable network graphics | image/apng |
apng. |
|
AVIF |
AV1 image file format | image/avif |
avif. |
|
GIF |
graphics interchange format | image/gif |
gif. |
|
JPEG |
joint photographic expert group image | image/jpeg |
[jpg-.jpeg-.jfif-.pjpeg-.pjp.] |
|
PNG |
portable network graphics | image/png |
png. |
|
SVG |
scalable vector graphics | image/svg+xml |
svg. |
|
WebP |
web picture | image/webp |
webp. |
الملفات الرسومية
هي ملفات رقمية تُستخدم لتخزين وعرض الصور والرسومات على الأجهزة الإلكترونية. وتتنوع صيغها، مثل [JPEG] و [PNG] و [GIF]، لتناسب الاستخدامات التقنية المختلفة.
</>
JPEG Extension
امتداد JPEG
تُعد ملفات JPEG [Joint Photographic Experts Group]: من أكثر الصيغ شيوعًا في تخزين الصور الرقمية، حيث تُستخدم بشكل واسع في الكاميرات الحديثة لالتقاط الصور، كما تُعتبر تنسيقاً قياسياً يُستخدم بشكل شائع في الويب والطباعة. ويُدعم هذا الامتداد في جميع المتصفحات وبرامج تحرير الصور، ويمتاز بكون ملفاته مضغوطة مما يجعله مفضلاً للاستخدام على مواقع الويب.
إيجابيات ملف JPEG:
إيجابيات ملف JPEG:
- مدعوم من جميع المتصفحات.
- حجم الملف صغير وسريع التحميل.
- يدعم عرض جميع الألوان.
- الصور بهذا الامتداد يمكن أن تكون بجودة عالية.
سلبيات ملف JPEG:
- لا يدعم الخلفيات الشفافة.
- ضغط الصور قد يؤدي إلى خفض الجودة أو ضعف في إمكانية قراءة النص أحياناً.
اختصار كلمة JPEG:
- صورة مشتركة لمجموعة خبراء التصوير [Joint Photographic Experts Group Image].
الامتدادات المماثلة:
- [jpg, .jpeg, .jfif, .pjpeg, .pjp].
</>
PNG extension
امتداد PNG
تُعد ملفات PNG [Portable Network Graphics]: من الصيغ الشائعة لتخزين الصور الرقمية، خاصة للرسومات على الويب. تمتاز بدعمها للشفافية وجودة الصور العالية، مما يجعلها مناسبة للاستخدام في التصاميم التي تتطلب دقة في التفاصيل، مثل الشعارات [logo] والأيقونات [icons]. كما يُدعم هذا الامتداد في جميع المتصفحات وبرامج تحرير الصور، ويمتاز بعملية الضغط دون فقدان للجودة، مما يحافظ على دقة الألوان والوضوح في الصور.
تُفضل ملفات PNG للرسومات ذات الألوان الأقل وللانتقالات السريعة بين الألوان التي يجب أن تظل حادة، وهي مناسبة للاستخدام على الويب، بشرط الحفاظ على حجم الملف منخفضًا قدر الإمكان مع الحفاظ على جودة جيدة.
إيجابيات ملف PNG:
تُفضل ملفات PNG للرسومات ذات الألوان الأقل وللانتقالات السريعة بين الألوان التي يجب أن تظل حادة، وهي مناسبة للاستخدام على الويب، بشرط الحفاظ على حجم الملف منخفضًا قدر الإمكان مع الحفاظ على جودة جيدة.
إيجابيات ملف PNG:
- مدعوم من جميع المتصفحات.
- يدعم الخلفيات الشفافة.
- يُفضل استخدامه للعناصر الرسومية.
- يقوم بعملية الضغط دون فقدان في جودة الصورة.
- حجم ملف صغير بألوان محدودة.
سلبيات ملف PNG:
- من الممكن أن يكون حجم الملف كبيرًا بملايين الألوان، مما يبطئ عملية تحميل الموقع الخاص بك.
- ليس الامتداد الأفضل للطباعة.
اختصار كلمة PNG:
- رسومات الشبكة المحمولة [Portable Network Graphics].
الامتداد:
- ملف PNG له امتداد واحد هو [png.].
</>
GIF Extension
امتداد GIF
تُعتبر ملفات GIF [Graphics Interchange Format]: من أكثر صيغ الصور المتحركة شيوعًا، حيث تُعد الامتداد الوحيد للصور المتحركة المدعوم في جميع متصفحات الويب الرئيسية ومعظم برامج تحرير الصور. تدعم ملفات GIF الشفافية والحركة، ويمكن ضغطها بشكل فعال لتقليل حجم الملف.
يُعتبر GIF الأفضل للاستخدام مع الرسومات المتحركة التي تتطلب القليل من الألوان، حيث تُضيف الصور المتحركة حيوية وحركة إلى الصفحة، مما يجعل الموقع أكثر ديناميكية مقارنة بالصور الثابتة.
يُعتبر GIF الأفضل للاستخدام مع الرسومات المتحركة التي تتطلب القليل من الألوان، حيث تُضيف الصور المتحركة حيوية وحركة إلى الصفحة، مما يجعل الموقع أكثر ديناميكية مقارنة بالصور الثابتة.
إيجابيات ملف GIF:
- مدعوم في جميع المتصفحات.
- يدعم الرسوم المتحركة.
- يستخدم للرسوم المتحركة الصغيرة ومقاطع الفيديو منخفضة الدقة.
- عادة ما يكون حجم الملف صغيرًا.
سلبيات ملف GIF:
- فقدان لجودة الصورة.
- الألوان محدودة لـ 256 لونًا.
اختصار GIF:
- تنسيق تبادل الرسومات [Graphics Interchange Format].
الامتداد:
- ملف GIF له امتداد واحد هو [gif.].
</>
SVG Extension
امتداد SVG
يُعتبر ملف SVG [Scalable Vector Graphics]: تنسيق صور يعتمد على لغة [XML] لوصف الرسومات ثنائية الأبعاد، وطُور من قبل اتحاد شبكة الويب العالمية [W3C]. لا يعتمد SVG على وحدة قياس البكسل، مما يسمح بالحفاظ على جودة الصورة عند تغيير الحجم. يدعم ملفات SVG الخلفيات الشفافة ويمكن فتحها في برامج تحرير الصور ومتصفحات الويب.
يُعتبر SVG أفضل امتداد للشعارات والأيقونات والرسوم التوضيحية البسيطة، لأنه يوفر جودة أعلى مقارنةً بملفات PNG و JPEG.
يُعتبر SVG أفضل امتداد للشعارات والأيقونات والرسوم التوضيحية البسيطة، لأنه يوفر جودة أعلى مقارنةً بملفات PNG و JPEG.
إيجابيات ملف SVG:
- مدعوم من جميع المتصفحات.
- يمكن إعادة ضبط حجم الملف دون فقدان جودة الأشكال أو النصوص.
- عادة ما يكون حجم الملف صغيرًا.
سلبيات ملف SVG:
- ليس الأفضل للصور أو الرسومات المعقدة.
- لا يُدعم من قبل جميع الأنظمة الأساسية لنظام إدارة المحتوى.
- غير مدعوم من بعض برامج تحرير الصور الافتراضية.
اختصار SVG:
- رسومات متجهية قابلة للتطوير [Scalable Vector Graphics].
الامتداد:
- ملف SVG له امتداد واحد وهو [svg.].
</>
WEBP Extension
امتداد WEBP
يُعتبر ملف [WebP [Web Picture: امتدادًا لملفات الصور الذي تم تطويره بواسطة شركة [Google] في عام 2010، ويهدف إلى تقديم ضغط أفضل دون فقدان لجودة صور الويب. يتيح تحويل ملفات JPEG و PNG إلى WebP لتوفير مساحة على الخادم، حيث يحافظ ضغط الصورة على حدة الصورة الأصلية، ويقلل بشكل كبير من حجم الملف، مما يعني استهلاكًا أقل للبيانات وتنزيلًا أسرع.
يواجه WebP مشكلة رئيسية في عدم التوافق مع معظم الأنظمة الأساسية لنظام إدارة المحتوى، وغالبًا ما يتطلب ملحقًا إضافيًا أو حلًا بديلًا لتحميل الملفات.
يواجه WebP مشكلة رئيسية في عدم التوافق مع معظم الأنظمة الأساسية لنظام إدارة المحتوى، وغالبًا ما يتطلب ملحقًا إضافيًا أو حلًا بديلًا لتحميل الملفات.
إيجابيات ملف WebP:
- حجم الملف صغير جدًا مع الحفاظ على جودة الصورة.
- يدعم الشفافية.
- يعتمد على عملية الضغط الفعّالة للملف.
سلبيات ملف WebP:
- غير مدعوم في جميع المتصفحات، مثل [Safari] و [Internet Explorer].
- غير مدعوم في جميع الأنظمة الأساسية.
اختصار كلمة WebP:
- صورة الويب [Web Picture].
امتداد WebP:
- ملف WebP له امتداد واحد هو [webp.].
</>
AVIF Extension
امتداد AVIF
يُعتبر ملف [AVIF [AV1 Image File Format: امتدادًا لملفات الصور الذي طوره تحالف الجهات المفتوحة لإنتاج الفيديو [AOMedia] بهدف تقديم ضغط أفضل وجودة عالية للصور عبر الإنترنت، وهو يعتمد على ترميز الفيديو AV1 لضغط الصور مع الحفاظ على الجودة. يتيح تحويل ملفات JPEG و PNG إلى AVIF توفير مساحة على الخادم، حيث يستخدم ضغط الصور الفعّال لتقليل حجم الملف بشكل كبير، مما يؤدي إلى استهلاك أقل للبيانات وسرعة في التنزيل.
إيجابيات ملف AVIF:
- حجم الملف صغير جدًا مع الحفاظ على جودة الصورة.
- يدعم الشفافية والألوان العالية الدقة.
- يعتمد على عملية ضغط فعالة وعالية الكفاءة.
سلبيات ملف AVIF:
- غير مدعوم في جميع المتصفحات مثل [Safari].
- يتطلب أحيانًا ملحقات إضافية لعرضه في بعض البرامج.
اختصار كلمة AVIF:
- تنسيق صورة AV1 [AV1 Image File Format].
امتداد AVIF:
- ملف AVIF له امتداد واحد هو [avif.].
</>
APNG Extension
امتداد APNG
يُعتبر ملف [Animated Portable Network Graphics] APNG: امتدادًا لملفات الصور المتحركة الذي تم تطويره كإضافة إلى تنسيق PNG الشهير. يهدف APNG إلى تقديم قدرات الحركة مع الحفاظ على الجودة الأصلية لصور PNG ويدعم الشفافية وعمق الألوان العالية. يتيح تحويل ملفات GIF إلى APNG إمكانية توفير جودة أعلى والاحتفاظ بالشفافية في الرسوم المتحركة، مما يؤدي إلى تجربة بصرية أفضل.
إيجابيات ملف APNG:
- يحتفظ بجودة الصورة مع دعم الشفافية والحركة.
- يدعم الألوان العالية الدقة.
- لا يتعرض لضغط يؤدي إلى فقدان الجودة مقارنة ببعض تنسيقات الصور المتحركة الأخرى.
سلبيات ملف APNG:
- غير مدعوم في جميع المتصفحات مثل [Internet Explorer].
- قد يتطلب أحيانًا ملحقات إضافية للتشغيل في بعض البرامج.
اختصار كلمة APNG:
- رسومات الشبكة المحمولة المتحركة [Animated Portable Network Graphics].
امتداد APNG:
- ملف APNG له امتداد واحد هو [apng.].
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
×
![]()
×
![]()