HTML Image File Types
أنواع الصور المستخدمة في HTML
سوف تتعلم في هذا الدرس عن امتدادات الصور مثل JPEG، PNG، SVG، و WebP التي يمكن استخدامها في لغة HTML، بالإضافة إلى إيجابيات وسلبيات كل امتداد، لكي تتمكن من اختيار الصور المناسبة لموقعك.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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 Extension
امتداد JPEG
إيجابيات ملف JPEG:
- مدعوم من جميع المتصفحات.
- حجم الملف صغير وسريع التحميل.
- يدعم عرض جميع الألوان.
- الصور بهذا الامتداد يمكن أن تكون بجودة عالية.
- لا يدعم الخلفيات الشفافة.
- ضغط الصور قد يؤدي إلى خفض الجودة أو ضعف في إمكانية قراءة النص أحياناً.
- صورة مشتركة لمجموعة خبراء التصوير [Joint Photographic Experts Group Image].
- [jpg, .jpeg, .jfif, .pjpeg, .pjp].
</>
PNG extension
امتداد PNG
تُفضل ملفات PNG للرسومات ذات الألوان الأقل وللانتقالات السريعة بين الألوان التي يجب أن تظل حادة، وهي مناسبة للاستخدام على الويب، بشرط الحفاظ على حجم الملف منخفضًا قدر الإمكان مع الحفاظ على جودة جيدة.
إيجابيات ملف PNG:
- مدعوم من جميع المتصفحات.
- يدعم الخلفيات الشفافة.
- يُفضل استخدامه للعناصر الرسومية.
- يقوم بعملية الضغط دون فقدان في جودة الصورة.
- حجم ملف صغير بألوان محدودة.
سلبيات ملف PNG:
- من الممكن أن يكون حجم الملف كبيرًا بملايين الألوان، مما يبطئ عملية تحميل الموقع الخاص بك.
- ليس الامتداد الأفضل للطباعة.
اختصار كلمة PNG:
- رسومات الشبكة المحمولة [Portable Network Graphics].
- ملف PNG له امتداد واحد هو [png.].
</>
GIF Extension
امتداد GIF
يُعتبر GIF الأفضل للاستخدام مع الرسومات المتحركة التي تتطلب القليل من الألوان، حيث تُضيف الصور المتحركة حيوية وحركة إلى الصفحة، مما يجعل الموقع أكثر ديناميكية مقارنة بالصور الثابتة.
- مدعوم في جميع المتصفحات.
- يدعم الرسوم المتحركة.
- يستخدم للرسوم المتحركة الصغيرة ومقاطع الفيديو منخفضة الدقة.
- عادة ما يكون حجم الملف صغيرًا.
سلبيات ملف GIF:
- فقدان لجودة الصورة.
- الألوان محدودة لـ 256 لونًا.
- تنسيق تبادل الرسومات [Graphics Interchange Format].
- ملف GIF له امتداد واحد هو [gif.].
</>
SVG Extension
امتداد SVG
يُعتبر SVG أفضل امتداد للشعارات والأيقونات والرسوم التوضيحية البسيطة، لأنه يوفر جودة أعلى مقارنةً بملفات PNG و JPEG.
- مدعوم من جميع المتصفحات.
- يمكن إعادة ضبط حجم الملف دون فقدان جودة الأشكال أو النصوص.
- عادة ما يكون حجم الملف صغيرًا.
- ليس الأفضل للصور أو الرسومات المعقدة.
- لا يُدعم من قبل جميع الأنظمة الأساسية لنظام إدارة المحتوى.
- غير مدعوم من بعض برامج تحرير الصور الافتراضية.
اختصار SVG:
- رسومات متجهية قابلة للتطوير [Scalable Vector Graphics].
- ملف SVG له امتداد واحد وهو [svg.].
</>
WEBP Extension
امتداد WEBP
يواجه WebP مشكلة رئيسية في عدم التوافق مع معظم الأنظمة الأساسية لنظام إدارة المحتوى، وغالبًا ما يتطلب ملحقًا إضافيًا أو حلًا بديلًا لتحميل الملفات.
- حجم الملف صغير جدًا مع الحفاظ على جودة الصورة.
- يدعم الشفافية.
- يعتمد على عملية الضغط الفعّالة للملف.
- غير مدعوم في جميع المتصفحات، مثل [Safari] و [Internet Explorer].
- غير مدعوم في جميع الأنظمة الأساسية.
- صورة الويب [Web Picture].
- ملف 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
يتيح تحويل ملفات GIF إلى APNG مع إمكانية توفير جودة أعلى والاحتفاظ بالشفافية في الرسوم المتحركة، مما يؤدي إلى تجربة بصرية أفضل.
إيجابيات ملف APNG:
- يحتفظ بجودة الصورة مع دعم الشفافية والحركة.
- يدعم الألوان العالية الدقة.
- لا يتعرض لضغط يؤدي إلى فقدان الجودة مقارنة ببعض تنسيقات الصور المتحركة الأخرى.
سلبيات ملف APNG:
- غير مدعوم في جميع المتصفحات مثل [Internet Explorer].
- قد يتطلب أحيانًا ملحقات إضافية للتشغيل في بعض البرامج.
اختصار كلمة APNG:
- رسومات الشبكة المحمولة المتحركة [Animated Portable Network Graphics].
امتداد APNG:
- ملف APNG له امتداد واحد هو [apng.].
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
