Pages: 1 2

إدراج الصور في صفحة HTML

نشرت من قبل jabism في

السلام عليكم ورحمة الله

اليوم سنتعرف على مزية أخرى من مزايا لغة HTML، إنها إدراج الصور في صفحة الويب! 💡 

عليك أولاً أن تعلم أن عملية إدراج الصور لا تحدث بطريقة سحرية ، فقد تكون قد تعودت على إدراج الصور في صفحتك على الفايسبوك أو تويتر أو انستجرام  🙂  تلك الطرق مبرمجة سلفاً و لن تستطيع عمل نفس الشيئ إن أردت إنشاء موقع خاص بك  😯    . على أيٍّ ! لا ترتبك !  فالأمر أسهل مما تتصور . هنا ستتعلم كل شيئ عن إدراج الصور و عن أنواعها  و تنسيقاتها المختلفة . فالصور تختلف باختلاف امتداداتها ، و لا يمكن أن نختار صور لصفحاتنا بشكل عشوائي.  فهي في بعض الأحيان تكون ضخمة و حجمها يصعب تحميله ، مما يؤدي إلى بطء وقت تحميل صفحات الويب!.

وللحفاظ على سهولة قراءة صفحاتك وسرعة التنزيل ، يرجى اتباع النصائح التالية !

تنسيقات الصور المختلفة

هل تعرف تنسيقات الصور و أنواعها؟

logiciel paintعندما تكون لديك صورة ولديك خيار حفظها  بتنسيقات مختلفة.  سيكون  عليك  بالمقابل الانتباه  إلى حجمها  الذي يعد بالكيلوبايت أو حتى بالميغابايت،  إما أن تكون الصورة ذات حجم  أعلى أو أقل انطلاقاً من الشكل المختار وستتغير جودة الصورة طبعاً من صيغة إلى أخرى كما سنرى:

على سبيل المثال ، يتيح لك برنامج الرسم  و هو المتوفر على جميع إصدارات الويندوز ( أنظر الأيقونة جانياً)  الاختيار بين عدة تنسيقات عند حفظ صورة .

و هذا الاختيار تجده أيضاً في برنامج  الفوتوشوب المشهور، و هو الأفضل بالنسبة لي. 

التنسيقات التي يتيحها برنامج الرسمتنسيقات الصور المختلفة التي يتيحها برنامج الرسم الخاص بالوندوز

إعلم ان بعض التنسيقات أكثر تكيفًا من غيرها  سواء كانت الصورة  (صور، رسوم ، أو صور متحركة …). 

و نحن هنا سننكب على معرفة   التنسيقات التي  يمكننا استخدامها  على الويب  ونختار أفضل ما يناسب صورتك المعروضة .  لذلك كن مطمئناً ، و ركز معي، و سيتضح لك الخيار المناسب.

كل الصور  على الإنترنت تشترك في أمر واحد، و هو استجابتها  للضغط . وهذا يعني أن الكمبيوتر يقوم بحسابات بحيث تصبح الصورة  أخف وزناً وبالتالي أسرع في التحميل.

نوع  JPEG

تعتبر  صور JPEG   الأكثر تداولاً   على الويب.  و قد تم تصميم هذا التنسيق لتقليل وزن الصور ليصبح حجم الملف خفيفاً على الصفحات ، والتي قد تحتوي على أكثر من 16 مليون لون مختلف. الشكل التالي هو صورة محفوظة بصيغة JPEG.

JPEG =  Joint Photographic Expert Group

صورة بضيغة jpegصورة لطائر الجوارح بصيغة  JPEG

يتم حفظ صور JPEG  بالامتداد  jpg.  أو   jpeg.

لاحظ أن صيغة  JPEG  تؤدي إلى تدهور جودة الصورة قليلاً ، بطريقة غير محسوسة بشكل عام. هذا ما يجعله فعالاً جدّاً في تقليل وزن الصور.

عندما يتعلق الأمر بالصورة ، لا يمكننا عادة اكتشاف فقدان الجودة. لكن، إذا لم تكن صورة ، فسوف تراها غير واضحة بدقة.  في هذه الحالة ، من الأفضل استخدام تنسيق PNG.

نوع  PNG

 PNG   هو الصيغة الأحدث من جميعالصيغ. وهذا التنسيق مناسب لمعظم الرسومات و الصور ، و تتميز PNG بميزتين مهمتين :

  • يمكن أن تكون شفافة
  • لا تغير من جودة الصورة.

PNG =Portable Network Graphics

تم اختراع  PNG  للتنافس مع تنسيق آخر ، GIF ، في وقت كان علينا دفع رسوم لاستخدام صور GIF.  ومنذ ذلك الحين ، تطورت PNG  وأصبحت أقوى تنسيق لتسجيل معظم الصور.

توجد PNG في نسختين ، وفقًا لعدد الألوان التي يجب أن تتضمنها الصورة:

  • PNG  8 bits  ب 256 لــون؛
  • PNG 24 bits :  ب 16 مليون لون .

الشكل التالي هو صورة بامتداد   PNG ، تمثل شعار jabism.com.شعار jabism بصيغة pngشعار jabism ب  PNG

فائـدة:
في الواقع ضغط  JPEG أكثر قوة على الصور. ويتم  تحميل الصور المسجلة ب JPEG بشكل أسرع من تسجيلها بصيغة  PNG. لذا فإنني أنصحك دائمًا بحفظ تنسيق JPEG للصور المعروضة على صفحات الويب.

الصورة  بصيغة GIF

تعتبر صيغة الصور GIF قديمة بعض الشيئ ، وتم  استخدامها كثيرًا (ولا زالت تحتفظ بمكانها في الاستخدام على سبيل الاستئناس و العادة ).

اليوم ، أصبحت صور  PNG بشكل عام أفضل بكثير من صور GIF  وذلك لأنها تكون أفتح  وشفافيتها أفضل. ينصح  باستخدام PNG على نطاق واسع.

يقتصر تنسيق GIF على 256 لونًا (في حين أن PNG يمكن أن يصل إلى عدة ملايين من الألوان).

ورغم المدح الذي ناله PNG إلا أن  GIF   يحتفظ بميزة لا تملكها التنسيقات الأخرى و هي أن  صور GIF يمكن أن تكون متحركة. ومن هنا أحرز على الصيحة  في السنوات الأخيرة مع الرسوم المتحركة GIF التي أصبحت متداولة بشكل كبير على شبكة الإنترنت و حتى مواقع التواصل الاجتماعي  .

صورة gif متحركةصورة متحركة بتنسيق GIF

هناك تنسيق ملائم لكل صورة

إذا قمنا بالتلخيص ، فإليك الشكل الذي يجب اعتماده وفقًا للصورة التي لديك:

  • صورة: إستخدم JPEG.
  • أي رسم به ألوان قليلة (أقل من 256): إستخدم PNG 8 bits  أو  GIF كما تريد.
  • أي رسم بالعديد من الألوان: إستخدم PNG 24 bits.
  • صورة متحركة: إستخدم صورة GIF متحركة.

أخطــاء يجب تجنبهـا

تنسيقات غير مرغوب فيها

التنسيقات الأخرى التي لم يتم ذكرها هنا ، مثل التنسيق BITMAP المعروفة بامتداد      bmp.*    أصبحت غير مرغوب فيها  لأنها في الغالب لا يتم ضغطها ،فحجمها كبير جدًا. وهي لا تتكيف  على الإطلاق مع الويب. يمكن وضعها على الموقع  ولكن تحميلها  سيكون بطيئاً جداً! 🐢🐢

اختر إسم صورتك بدقة

إذا كنت ترغب في تجنب المشكلات ، فاعمل على حفظ ملفاتك بأسماء تكون بأحرف صغيرة ، بدون مسافات أو تشكيل ، على سبيل المثال:    picture.png  أو  my_picture.png.

يعني ، يمكنك استبدال المسافات بحرف الشرطة السفلية (“_“) كما فعلت في المثال.

تــابع الدرس


jabism

عبدالرحيم ح.س من شمال المغرب . تقني "الهندسة المدنية" ، مارست البرمجة منذ 2001، خبرتي مع الويب والإعلاميات : تمتد من سنة 2000 ، خبرة مهمة في الفلاش والفوتوشوب ومشاكل الويندوز .

0 تعليق

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *