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

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

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

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

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

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

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

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

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

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

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

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

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

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

نوع  JPEG

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

JPEG =  Joint Photographic Expert Group

صورة لطائر الجوارح بصيغة  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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

إدراج الصـور 

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

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

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

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

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

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

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

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

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

إضافة تلميح 

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

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

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

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

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

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

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

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

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

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

الوثائـق

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

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

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

إنشاء وثيقـة

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

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

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

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

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

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

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

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

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

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

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

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

إختــصــار

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

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

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

أرى أن هذه المواضيع قد تهمك:

كيفية تقليل وزن الصورة دون تغيير جودتها منع نسخ الصور و سرقة المحتوى من موقع ووردبريس الصور العائمة les images flottants كيفية البحث عن صور غير محفوظة الحقوق لموقعك