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

أخر تحديث لهذه المقالة في: 03 مايو 2020 الساعة: 05:53 م

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

اليوم سنتعرف على مزية أخرى من مزايا لغة 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.

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

إدراج الصـورة

حان الوقت  الآن لنعود إلى أكواد HTML  لاكتشاف كيفية وضع الصور في صفحات الويب الخاصة بنا!

إذن ما هي العلامة الشهيرة التي ستسمح لنا بإدراج صورة على صفحة الويب ؟ إنها هاته <img />!

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

يجب أن تكون العلامة مصحوبة بخاصيتين إلزاميتين:

  • src : يسمح بتحديد مكان الصورة التي نريد إدراجها، بحيث  يمكنك إما وضع مسار مطلق على سبيل المثال:  https://www.jabism.com/tulipe01.png ، أو وضع الصورة حسب المسارات التي ذكرناها في درس الروابط.  لذا ، إذا كانت صورتك موجودة في مجلد فرعي images ، فستحتاج إلى كتابتها على الشكل التالي: 

 

  • alt: تعني “نص بديل”. يجب أن تشير دائمًا إلى نص بديل للصورة ، أي نص قصير يصف ما
  • تحتويه الصورة. سيتم عرض هذا النص بدلا من الصورة في حالة عدم إمكانية  تحميلها (و هذايحدث خصوصاً عندما يكون الاتصال بالشبكة بطيئاً 🐢)،وهذا يساعد محركات البحث في قسم  الصور. بالنسبة لمثالنا ، سوف نضعها على سبيل المثال:
  •  

يجب أن تكون الصور داخل فقرة ( <p> </p>). في ما يلي مثال على إدراج الصور:

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

أكبر “صعوبة” (إذا صح التعبير) هو اختيارصيغة الصورة الصحيحة . هنا نستخدم صيغة JPEG للصورة.

تـذكـيـر:
تجنب جميع الفواصل، الحروف الكبيرة والمسافات  في أسماء الملفات والمجلدات.  مثل هاته المسارات تطرح مشاكل في كيفية تعاطيها مع الويب:

"Site images / Image tout bête.jpg"

. يجب إزالة المسافات (أو استبدالها بالرمز “_“) ، وحذف الفواصل و المسافات ووضع كل الأسماء بأحرف صغيرة مثل:

"Images_du_site/image_toute_bete.jpg"

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

إضافة تلميح

 السمة لعرض تلميح على الصورة هي نفسها للروابط كما رأينا في درس الروابط : فهي عنوان.  و تبقى هذه السمة اختيارية ( على عكس  alt ).

إليك ما يمكن فعله:

مرر الماوس فوق الصورة لرؤية  التلميح .

صورة مصغرة قابلة للتكبير بواسطة النقر

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

الطريقة سهلة ! بعد تصغير الصورة  و تسجيلها بإسم مخالف للاصلية مثلاً :

الصورة المصغرة : petit-coucher.jpg    و الصورة الأصلية : coucher.jpg  نضعهم في مجلد بإسم  images. و في صفحة الويب التي نحن  بصدد  تحريرها ، ندرج الصورة المصغرة  مع إضافة يؤدي إلى عرض الصورة الأصلية عند الضغط عليها ، و بالتالي لن نعاني من بطء تحميل صفحتنا.

هذا هو المثال، و سوف نكتب شفيرة الرابط التي توصلنا لهاته النتيجة.

الصورة المصغرة و الصورة الأصلية

المصغرة وصورتها الأصلية

هذا هو كود HTML الذي سأستخدمه للوصول إلى النتيجة المبينة فوق:

 

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

الوثائـق

أثناء متابعتك لهذا الدرس، لا بد أنك مررت بعدة و ثائق التي هي عبارة عن عناصر وأشكال تقوم بإثراء محتوى النص و استكمال المعلومات و توضيحها على الصفحة ، و هي تختلف في نوعها: 

  • الصور
  • رموز المصدر

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

إنشاء وثيقـة

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

برنامج atom

برنامج atom لتحرير نصوص البرمجة

في هذا السياق يمكننا ذكر علامة  جديدة موجودة في  HTML5 ،  و هي <figure>. و يمكننا استخدامها كالتالي:

 

وغالبا ما يصاحب هذا الشكل  وسيلة إيضاحية  باستخدام علامة <figcaption> داخل علامة <figure> ، كما يلي:

 

كيفية فهم دور الوثائـق

خلال أحد الفقرات من هذا الدرس ، أخبرتكم  أنه يجب وضع الصور بين  العلامتين    <p> </ p>و لكن هذا الأمر لم يعد صحيحاً  مع استعمال العلامة <figure>.

إذا جعلت صورتك  على شكل وثيقة فسوف تكون الصورة  خارج علامة الفقرة.

 

صراحة لا ألاحظ أي فرق في كلا الحالتين 😯  فمتى إذن يكون علي أن أضع صورتي في فقرة ومتى يجب أن أضعها في الوثيقة ؟

إممم ! سؤال ثاقب!  و الحقيقة أن  الأمر  يتوقف على ما تمثله  الصورة بالنسبة  للنص! كيــف ؟  💡 

  • إذا لم تقدم  الصورة  أية معلومات توضيحية لإثراء النص و كانت مجرد  صورة للتزيين نضع الصورة في فقرة <p> </p>
  • إذا كانت تجلب المعلومات  نضع الصورة في الشكل. <figure></figure>

العلامة <figure> لها دور دلالي في المقام الأول. هذا يعني أنه يخبر الكمبيوتر أن الصورة منطقية ومهمة لفهم النص. هذا يمكن أن يسمح لبرنامج لاسترداد جميع الأشكال  من النص والإشارة إليها في جدول الوثائق ، على سبيل المثال.

و في الأخير ، كن على دراية بأن الوثيقة  يمكن أن تتضمن العديد من الصور.  إليك هنا حالة حيث يتم توضيحها:

 

إختــصــار

  • يوجد العديد من صيغ و تنسيقات الصور المتناسبة مع  الويب:

    • JPEG: للصور
    • PNG : لجميع الرسوم التوضيحية الأخرى.
    • GIF: مماثل لـ PNG ، أكثر محدودية في عدد الألوان ولكن يتميز بتحريك الصور و الرسوم و الكتابة أيضاً.
  • ندرج  الصورة بالعلامة <img />. ويجب أن تتضمن على الأقل هاتين السمتين: src   و alt  .
  • إذا كانت الصورة توضح النص (وليس الديكور فقط) ، فمن المستحسن وضعه داخل علامة <figure>. يتم استخدام العلامة <figcaption> لكتابة وسيلة إيضاح الصورة.

إلى هنا نكون قد  أنهينا درس إدراج الصور في صفحة الويب ..و لنا لقاء  بإذن الله

لا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا أعْجَبَتْكَ الْمَقَالَة، شَارِكْهَا مَعَ أصْدِقَائِكَ عَبْرَ مَوَاقِع التَّوَاصُل

 

3 أفكار عن “إدراج الصور في صفحة HTML”

  1. مهما يكن إستعمل الكود التالي:

    <img style="width: 100px; height: 200px;" src="https://i0.wp.com/jabism.com/wp-content/uploads/2019/02/chams.gif?" />

اترك تعليقا

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

    مؤسس موقع :
        عبدالرحيم ح.س من شمال المغرب . تقني "الهندسة المدنية" ، مارست البرمجة منذ 2001، خبرتي مع الويب والإعلاميات : تمتد من سنة 2000 ، سائر باستمرار في تحديث معلوماتي والاطلاع على كل جديد.
كتب 236 مقالة في jabism.com.

عدد المشاهدات لهذه المقالة : 2٬046
انتقل إلى أعلى