تعريفه
نستخدم الوسم <img>
على هذا النحو <img src="url">
لعرض صورة في الصفحة.
مكان الكلمة url
نضع مسار الصورة التي نريد عرضها.
<img>
نستخدم الوسم <img>
على هذا النحو <img src="url">
لعرض صورة في الصفحة.
مكان الكلمة url
نضع مسار الصورة التي نريد عرضها.
الجدول التالي يظهر المتصفحات التي تدعم الوسم <img>
.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
مدعوم | 12 | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.
alt
نضيفها للوسم لوضع نص بديل يظهر مكانه في حال لم يستطع المتصفح عرض الصورة لأي سبب كان.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
مدعوم | 12 | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
crossorigin
نضيفها للوسم في حال أردنا عرض صورة موجودة في موقع آخر و هذه الصورة سيتم عرضها لاحقاً بداخل <canvas>
.
سبب ذلك أن الوسم <canvas>
لا يسمح برسم صورة بداخله ما لم تكن بالأساس موجودة في نفس الموقع.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
مدعوم | 12 | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية crossorigin
لتحديد ما هي المعلومات التي سيتم إرسالها مع الطلب الذي يقضي بجلب الصورة.
القيمة | معناها |
---|---|
anonymous |
في حال وضع هذا القيمة فهذا يعني أن الصورة التي يتم جلبها لا يمكن استخدامها بداخل <canvas> في حال كانت من موقع آخر هذه القيمة الإفتراضية لها في حال لم تحدد ذلك بنفسك أو في حال مررت لها قيمة خاطئة. |
use-credentials |
في حال وضع هذه القيمة فهذا يعني أنه يمكن استخدام الصورة بداخل <canvas> حتى لو كانت من موقع آخر لطالما أن الموقع الآخر في الأساس لا يعارض ذلك. |
decoding
نضيفها للوسم في حال أردنا تحديد ما إذا كان المتصفح سيعرض الصورة في الصفحة أثناء جلبها حتى لو لم يكن المتصفح قد قام بتحميل كل أجزاءها أم أنه يجب أن يتنظر أن ينتهي تحميل الصورة حتى يعرضها في الصفحة.
سبب ذلك أن الوسم <canvas>
لا يسمح برسم صورة بداخله ما لم تكن بالأساس موجودة في نفس الموقع.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
مدعوم | ≤79 | 63 | مدعوم | 11.1 | مدعوم | مدعوم | 63 | مدعوم | 11.1 | مدعوم |
يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية decoding
لتحديد متى سيتم عرض الصورة في الصفحة.
القيمة | معناها |
---|---|
sync |
في حال أردت أن يتم تحميل الصورة بشكل متزامن و هذا يعني أنه سيتم عرضها بعد أن يتم يكتمل تحميلها. و هنا نود الإشارة إلى أن المتصفح لن يظهر أي محتوى آخر في الصفحة قبل أن يتم جلب الصورة. |
async |
في حال أردت أن يتم تحميل الصورة بشكل غير متزامن و هذا يعني أنه سيتم عرض كل جزء يتم تحميله من الصورة بشكل مباشر في المتصفح بدون إنتظار أن يكتمل تحميلها. |
auto |
هذا هو الحال الإفتراضي حيث يقرر المتصفح ما هو الأنسب و يفعله. |
height
يمكن إضافتها للوسم لتحديد كم سيكون طول الصورة التي سيتم عرضها بالبكسل.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
مدعوم | 12 | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
ismap
يمكن إضافتها للوسم لإعلام الموقع أين قام المستخدم بالنقر بالضبط على الصورة.
ملاحظة: الصورة هنا يجب أن تكون موضوعة بداخل الرابط الذي سيتم إرسال الإحداثيات إليه كالتالي <a href="/imagemapper"><img src="logo.png" ismap/></a>
على سبيل المثال.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
مدعوم | 12 | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
referrerpolicy
يمكن إضافتها للوسم بهدف تحديد ما هي المعلومات التي سيتم إرفاقها مع طلب جلب الصورة من الموقع.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
51 | 79 | 50 | 38 | 11.1 | 51 | 51 | 50 | 41 | غير مدعوم | 7.2 |
يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية rel
لتحديد ما هي المعلومات التي سيتم إرسالها مع الطلب.
القيمة | معناها |
---|---|
no-referrer |
لعدم إرسال أي معلومة مع طلب المستخدم. |
no-referrer-when-downgrade |
لعدم إرسال أي معلومة في Header طلب المستخدم ( أي المعلومات التي يرسلها المستخدم للموقع و لا تظهر في الرابط ) إذا كان الموقع الذي سيتلقى الطلب لا يستخدم البروتوكل https و هذا هو الحال الإفتراضي. |
origin |
لإرسال المعلومات التالية فقط مع طلب المستخدم ( scheme - host - port ). |
origin-when-cross-origin |
لإرسال المعلومات التالية مع طلب المستخدم ( scheme - host - port ) بالإضافة إلى المسار ( path ) في حال كان الرابط موجود في نفس الموقع. |
unsafe-url |
لإرسال المعلومات التالية فقط مع طلب المستخدم ( origin - path ) أي بدون أي معلومة حساسة مثل إسم المستخدم و كلمة مروره. |
sizes
يمكن إضافتها للوسم لجعل حجم الصورة التي يتم عرضها يظهر بشكل متجاوب ( Responsive ) مع حجم الصفحة, مع الإشارة إلى أن هذه الخاصية تعمل فقط في حال كان المتصفح سيعرض إحدى الصور الموضوع مسارها بواسطة الخاصية srcset
و التي تم تحديد قياسها أيضاً بالإعتماد على الحرف w
.
ملاحظة: في حال كان حجم الصورة في الصفحة محدد بواسطة CSS فإن المتصفح سيتجاهل خصائص تحديد حجم الصورة التي تم وضعها بواسطة الخاصية sizes
.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
مدعوم | 12 | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
src
يجب إضافتها للوسم لتحديد مسار الصورة المراد عرضها.
مسار الصورة يجب تمريره لها كقيمة.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
مدعوم | 12 | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
srcset
يمكن إضافتها للوسم لتجهيز صور أحجامها مختلفة و على حسب حجم الشاشة يتم عرض الصورة التي يتناسب حجمها معها.
مسار أي صورة يتمريره لها يجب تمرير عرض الشاشة معه الذي على أساسه سيتم اختيار الصورة و هذا الأمر يمكن فعله بأسلوبين كالتالي:
w
لتحديد عرض الشاشة الذي على أساسه سيتم تحميل الصورة بالبكسل.x
لتحديد عرض الشاشة الذي على أساسه سيتم تحميل الصورة بشكل تقريبي.لا تقلق ستفهم ما نقصده بالحرفين w
و x
لاحقاً من الأمثلة.
معلومة: إنتبه في حال قام المتصفح مسبقاً بتحميل الصورة التي حجمها كبير ثم قمت بتصغير الشاشة و تحديثها من جديد فإنه سيظهر أيضاً الصورة التي حجمها كبير و سبب ذلك أن المتصفح يقوم بتخزين الصور التي يتم عرضها في الصفحة حتى لا يطلبها مجدداً إذا طلبت مشاهدتها مرة أخرى.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
34 | ≤18 | 38 | 21 | 8 | 37 | 34 | 38 | 21 | 8 | 2.0 |
width
يمكن إضافتها للوسم لتحديد كم سيكون عرض الصورة التي سيتم عرضها بالبكسل.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
مدعوم | 12 | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
في المثال التالي قمنا بإضافة صورة بوسطة الوسم <img>
مع تحديد أن عرضها 200 بكسل و طولها 200 بكسل أيضاً.
<img src="harmash-logo.PNG" alt="HTML 5 Logo" width="200" height="200">
في المثال التالي قمنا باستخدام الخاصية srcset
لوضع صورتين إضافيتين أحجامها مختلفة بهدف جعل المتصفح يحمل الصورة الأخف حجماً و التي تتناسب مع حجم عرض الصورة في الصفحة. ركز في النقاط التالية لتعرف كيف يختار المتصفح الصورة التي سيتم تحميلها و عرضها في الصفحة:
src
يعتمدها المتصفح في حال كانت الخاصية srcset
غير معروفة بالنسبة له فقط.srcset
يعتمدها المتصفح في حال كان ناتج قسمة عرض الصورة على عرض الشاشة قريب إلى 1x
, مثال: 1.45623
.srcset
يعتمدها المتصفح في حال كان ناتج قسمة عرض الصورة على عرض الشاشة قريب إلى 2x
, مثال: 2.83239
.<img src="default.PNG" srcset="small.PNG 1x, medium.PNG 2x">
في المثال التالي قمنا باستخدام الخاصية srcset
لوضع صورتين إضافيتين مع تحديد الحجم الذي على أساسه سيقرر المتصفح أي صورة يقوم بتحميلها كالتالي:
src
يعتمدها المتصفح في حال كانت الخاصية srcset
غير معروفة بالنسبة له فقط.srcset
يعتمدها المتصفح في حال كان حجم الصفحة لا يتجاوز 500 بكسل.srcset
يعتمدها المتصفح في حال كان حجم الصفحة يتجاوز 500 بكسل لأن حجمها أكبر و ملائم أكثر للعرض.<img src="default.PNG" srcset="small.PNG 500w, medium.PNG 1500w">
في المثال التالي قمنا باستخدام الخاصية sizes
لجعل حجم الصورة التي يقرر المتصفح تحميلها تظهر بشكل متجاوب أيضاً مع حجم الصفحة بالشكل الذي نحدده لها.
هنا بعد أن يتم تحميل الصورة التي تتناسب مع عرض شاشة المستخدم, سيقوم المتصفح بعرضها بحجم 100 × 100
إذا كان عرض الصفحة لا يتجاوز 600
بكسل, غير ذلك فإنه يعرضها بحجم 200 × 200
مهما كان حجم الصفحة كبيراً.
ملاحظة: القيم التي نمررها للخاصية sizes
بداخل القوسين نضعها بالوحدة بكسل, أما القيمتين اللتين نضعهما بعد القوسين فيمكن وضعهما بأسلوب مسموح في لغة CSS لتحديد الحجم.
<img src="default.PNG" srcset="small.PNG 500w, medium.PNG 1500w" sizes="(max-width: 600px) 100px, 200px">
بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.
img { display: inline-block; }
في حال لم تحدد أحجام الصور التي سيتم عرضها فإن المتصفح سيومض على الأغلب عندما يحاول عرض الصور في الصفحة بعد أن يتم تحميلها حيث سيقوم برسم الصفحة بأكملها من جديد بلمح البصر لهذا يرى المستخدم هذا الأمر كومضة. لذلك قم دائماً بتحديد حجم الصور التي تنوي عرضها في الصفحة سواء حددت ذلك بواسطة خصائص HTML أو كود CSS.
إذا كانت الصفحة تحتوي العديد من الصور, قم بوضع صور أحجامها مقبولة مثل 200KB
كحد أقصى لأنه كلما كان حجم الصور أكبر كلما استغرق المتصفح وقتاً حتى يحمّلها و من ثم يعرضها للمستخدم و هذا الأمر سيء جداً بالنسبة لتجربة المستخدم.
يمكنك استغلال الخاصية srcset
أيضاً لجعل الصور تتحمل بشكل أسرع عند المستخدم حيث أنه إذا تم استغلال هذه الخاصية بشكل صحيح فإن المتصفح سيقوم بتحميل أفضل صورة تتناسب مع حجم شاشة المستخدم مما يعني أنه سيحمل أفضل صورة تعتبر مقبولة نسبةً لجهازه.
عند عرض صور في موقعك, تأكد دائماً من أن لا تكون الصور التي تنشرها عليها حقوق نشر تمنع استخدامها - بمعنى أنها غير مجانية - لأنه في حال كانت كذلك يمكن لصاحب الصور الإبلاغ عنك بكل سهولة مما قد يؤدي لحذف موقعك.