HTML

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

سوف تتعلم في هذا الدرس على امتداد الصور التي يمكن استخدامها في لغة HTML، وميزات وسلبيات كل امتداد، لكي تتمكن من اختيار الصور المناسبة لموقعك.

التاريخ

28 يناير 2022

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

1540

المواضيع

12
الشروحات chevron_left HTML Image File Types chevron_left 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].

      معلومات تهمك
      • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
      • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
      مشاركة
      0
      0
      0
      0
      عدد المشاركات
      هل هذه المعلومات نالت إعجابك ؟
      0
      0
      عدد التقييمات

      لديك استفسار ؟

      يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.