HTML Image File Types
أنواع الصور المستخدمة في HTML
سوف تتعلم في هذا الدرس على امتداد الصور التي يمكن استخدامها في لغة HTML، وميزات وسلبيات كل امتداد، لكي تتمكن من اختيار الصور المناسبة لموقعك.
التاريخ
28 يناير 2022
الدروس
48
المستوى
مبتدئ
اللغة
عربي
المشاهدات
2673
المواضيع
12
HTML Image Types
أنواع الصور المستخدمة في HTML
</>
Files 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 format | image/webp | .webp |
الملفات الرسومية
هي ملفات رقمية تُستخدم لتخزين وعرض الصور والرسومات على الأجهزة الإلكترونية، وتتنوع في صيغها مثل JPEG وPNG وGIF لتناسب استخدامات التقنية المختلفة.
</>
JPEG Extension
امتداد JPEG
[jpeg] هو ملف صورة مخصص لاستخدامات الويب والطباعة وهو امتداد تنسيق قياسي مخصص للكاميرات.
هذا الامتداد هو الأكثر شيوعاً واستخداماً على مواقع الويب، وذلك لأنه يدعم جميع المتصفحات browser ولأنه ملف مضغوط كذلك.
إيجابيات ملف jpeg:
- يقوم بدعم جميع المتصفحات browser.
- هو ملف صغير سريع التحميل.
- يدعم عرض جميع الألوان.
- الصور بهذا الامتداد تكون بجودة عالية دوماً.
سلبيات ملف jpeg:
- لا يدعم الخلفيات الشفافة.
- يؤدي ضغط الصور إلى خفض الجودة أو ضعف في إمكانية قراءة النص أحياناً .
اختصار كلمة jpeg:
صورة مشتركة لمجموعة خبراء التصوير Joint Photographic Expert Group Image.
الامتدادات المماثلة:
[jpg, .jpeg, .jfif, .pjpeg, .pjp].
</>
PNG extension
امتداد PNG
يُعتبر ملف PNG معيار استخدام الويب، حيث تستند هذه الملفات إلى وحدة قياس البيكسل pixel، لذلك لا يُمكن ضبط الحجم الخاص بالصورة بدون وحدة قياسا لبيكسل pixel، على عكس ملفات JPEG ، لذلك يجب ضبط الصورة بالحجم الصحيح للاستخدام النهائي أولاً، قبل وضعها داخل مستند HTML.
- تدعم ملفات PNG الخلفيات الشفافة وتقوم بحفظ الصور بجودة أعلى من صور JPEG للرسومات فقط، وليس الصور الفوتوغرافية.
- يُفضل استخدام ملفات PNG للرسومات ذات الألوان الأقل وللانتقالات السريعة بين الألوان التي يجب أن تظل حادة مثل الشعارات logo و الأيقونات icons.
- كما يُفضل استخدام ملفات PNG للويب، ولكن عليك جعل حجم الملف منخفضًا قدر الإمكان مع الحفاظ على الجودة الجيدة.
إيجابيات ملف png:
- يدعم جميع المتصفحات browser.
- يدعم الخلفيات الشفافية.
- يُفضل استخداماته للعناصر الرسومية.
- يقوم بعملية الضغط دون خسائر في جودة الصورة.
- حجم ملف صغير بألوان محدودة.
سلبيات ملف png:
من الممكن أن يكونَ حجم الملف كبير بملايين الألوان، وبالتالي يبطئ عملية تحميل الموقع الخاص بك.
ليس الامتداد الأفضل للطباعة.
اختصار كلمة jpg:
صورة مشتركة لمجموعة خبراء التصوير Joint Photographic Expert Group Image.
الامتداد:
ملف PNG له امتداد واحد هو [ png. ].
</>
GIF Extension
امتداد GIF
[GIF] هو امتداد تنسيق الصور المتحركة الوحيد المدعوم في جميع متصفحات browsers الويب الرئيسية ومعظم برامج تحرير الصور.
- تدعم ملفات صور GIF الشفافية والحركة ويمكن ضغطها بشدة لتقليل حجم الملف.
- GIF هو أفضل استخدام للرسومات المتحركة التي تتطلب القليل من الألوان، فالصور المتحركة عندما تكون في الموقع الخاص بك تُعطي حركة نسبية للصفحة، وتجعل الموقع أكثر حيوية على عكس الصور العادية.
إيجابيات ملف gif:
- يدعم جميع المتصفحات browsers.
- يدعم الرسوم المتحركة.
- يتم استخدامه للرسوم المتحركة الصغيرة ومقاطع الفيديو منخفضة الدقة.
- حجم الملف دوماً يكون صغير.
سلبيات ملف gif:
- فقدان لجودة الصورة.
- الألوان الخاصة بهذا الامتداد تكون محددة.
اختصار GIF:
الملف هو تبادل أو تغيير التنسيق المتحرك للصورة Graphics Interchange Format.
الامتداد:
ملف GIF له امتداد واحد هو [gif].
</>
SVG Extension
امتداد SVG
[SVG] هو ملف صور بلغة ترميز تُسمى [XML] لوصف الرسومات ثنائية الأبعاد التي طورها اتحاد شبكة الويب العالمية [W3Cٍ].
- لا يستخدم ملف SVG وحدة قياس البيكسل pixels التي تسمح بقياس الصورة والحفاظ عليها بجودة عالية، كما أن ملفات SVG تدعم الخلفيات الشفافة ويُمكن فتحها في برامج تحرير الصور وفي متصفحات الويب browsers.
- يُعتبر ملف SVG هو أفضل امتداد للصور التي تكون للشعارات logo و الأيقونات icons وأيضاً للرسوم التوضيحية البسيطة، وذلك لأنها تُوفر جودة أعلى للرسم مقارنةً بـملفات PNG و JPEG.
إيجابيات ملف svg:
- يدعم جميع المتصفحات browsers.
- إعادة ضبط حجم الملف بدون أي خسارة للأشكال والنصوص الأساسية للصورة.
- حجم الملف دوماً يكون صغير.
سلبيات ملف svg:
- ليس أفضل ملف لتنسيق للصور أو الرسومات المعقدة.
- لا يدعم جميع الأنظمة الأساسية لنظام إدارة المحتوي.
- غير مدعوم من قِبل بعض برامج تحرير الصور الافتراضية.
اختصار SVG:
صور قابلة للتمدد بنفس الجودة Scalable Vector Graphic.
الامتداد:
SVG له امتداد واحد هو [svg].
</>
WEBP Extension
امتداد WEBP
[WEBP] هو امتداد لملفات الصور تم تطويره بواسطة شركة [Google] في عام 2010 ،وذلك لتوفير ضغط أفضل دون فقدان لصور الويب browser image.
- يُمكن أن تساعد عملية التحويل والتبديل من ملفات JPEG و PNG إلى WebP في توفير مساحة داخل الخادم وذلك لأن ضغط الصورة يُحافظ على حِدة الصورة الأصلية ويقلل حجم الملف بشكل كبير، مما يعني استهلاك أقل للبيانات وتنزيل أسرع.
- لكن المشكلة الرئيسة في امتداد WebP أنه لا يتوافق مع معظم الأنظمة الأساسية لنظام إدارة المحتوى. وغالبًا ما يحتاج إلى ملحق إضافي آخر أو حل بديل لتحميل ملفات WebP.
إيجابيات ملف WebP:
- حجم الملف يكون صغير جداً مع المحافظة على جودة الصورة.
- يدعم الشفافية.
- يتم استخدام عملية الضغط للملف.
سلبيات ملف WebP:
- غير مدعوم في جميع المتصفحات browsers، مثل Safari و Internet Explorer.
- غير مدعوم في جميع الأنظمة الأساسية.
اختصار WEBP:
صفحة ويب Web Page.
امتدادWEBP:
له امتداد واحد هو [WebP].
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
×
![]()
×
![]()