HTML Image File Types
أنواع الصور المستخدمة في HTML
سوف تتعلم في هذا الدرس على امتداد الصور التي يمكن استخدامها في لغة HTML، وميزات وسلبيات كل امتداد، لكي تتمكن من اختيار الصور المناسبة لموقعك.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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 extension
امتداد JPEG
jpeg: هو ملف صورة مخصص لاستخدامات الويب والطباعة وهو امتداد تنسيق قياسي مخصص للكاميرات.
هذا الامتداد هو الأكثر شيوعاً واستخداماً على مواقع الويب، وذلك لأنه يدعم جميع browser المتصفحات ولأنه ملف مضغوط كذلك.
إيجابيات ملف jpeg:
- يقوم بدعم جميع browser المتصفحات.
- هو ملف صغير سريع التحميل.
- يدعم عرض جميع الألوان.
- الصور بهذا الامتداد تكون بجودة عالية دوماً.
سلبيات ملف jpeg:
- لا يدعم الخلفيات الشفافة.
- يؤدي ضغط الصور إلى خفض الجودة أو ضعف في إمكانية قراءة النص أحياناً .
اختصار كلمة [ jpg ]:
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 في توفير مساحة داخل server الخادم وذلك لأن ضغط الصورة يُحافظ على حِدة الصورة الأصلية ويقلل حجم الملف بشكل كبير، مما يعني استهلاك أقل للبيانات وتنزيل أسرع.
لكن المشكلة الرئيسة في امتداد WebP أنه لا يتوافق مع معظم الأنظمة الأساسية لنظام إدارة المحتوى. وغالبًا ما يحتاج إلى ملحق إضافي آخر أو حل بديل لتحميل ملفات WebP.
إيجابيات ملف WebP :
- حجم الملف يكون صغير جداً مع المحافظة على جودة الصورة.
- يدعم الشفافية.
- يتم استخدام عملية الضغط للملف.
سلبيات ملف WebP:
- غير مدعوم في جميع browsers المتصفحات، مثل Safari و Internet Explorer.
- غير مدعوم في جميع الأنظمة الأساسية.
اختصار WEBP:
Web Page صفحة ويب.
امتدادWEBP:
له امتداد واحد هو [ WebP].
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
