بغض النظر عن مدى التقدُّم الذي أحرزته في تعلُّم التصميم والتطوير للويب، لا يحتاج العنصر <img> إلى مقدّمة كبيرة.
تم إطلاق <img> في Netscape ("Mosaic" " في ذلك الوقت) عام 1993 وإضافته إلى مواصفات HTML في عام 1995، وقد كان لـ "<img>" دور بسيط ولكنّه قوي منذ فترة طويلة في النظام الأساسي للويب. يضيف المطوّر ملف صورة "مصدر" مع السمة src ويقدّم بديلاً نصيًا بالسمة alt في حال تعذّر عرض الصورة أو إذا طلبت التكنولوجيا المساعِدة بديلاً. ومن هنا، تكون للمتصفّح مهمة واحدة فقط، وهي الحصول على بيانات الصور وعرضها في أسرع وقت ممكن.
بالنسبة إلى معظم تاريخ تطوير الويب، لم يكن التعامل مع الصور أكثر تعقيدًا من ذلك. وعلى الرغم من تعقيد شبكة الويب الحديثة، لم تتغيّر أساسيات التعامل مع الصور: استخدام تنسيق صور متوافق مع الويب من أجل التوافق، وضغط معقول للحفاظ على النطاق الترددي، والأبعاد التي تناسب المساحة التي ستشغلها الصورة في تنسيق الصفحة.
إن استخدام التخطيطات ذات العرض الثابت، كما فعلنا عندما كنا اعتقدنا أن لدينا قدرة أكبر على التعبير عن كيفية تجربة المستخدمين للويب، جعل هذه عملية غير معقدة. كان من السهل بشكل خاص ضبط حجم مصدر الصورة. بالنسبة للصورة التي تشغل مساحة خمسمائة بكسل وارتفاع ثلاثمائة بكسل، كانت حالة تحديد صورة مصدر بنفس الحجم.
الصور في تنسيق سريع الاستجابة
إلى جانب التنسيق المرن واستخدام استعلامات وسائط CSS، تشكّل "الصور والوسائط المرنة" أحد الجوانب الثلاثة المحددة لتصميم الويب السريع الاستجابة. لجعل الصورة مرنة، بدأ المطوّرون باستخدام لغة CSS لضبط max-width: 100% على الصورة (أو على جميع الصور على مستوى الموقع الإلكتروني) لإبلاغ محرك العرض في المتصفح بمنع أي صورة من تجاوز حاويتها الرئيسية عن طريق
تصغيرها. تعمل هذه الطريقة على نحو مثالي من الناحية المرئية، إذ يمكنك تصغير حجم الصورة النقطية بسلاسة وبشكل مرئي. مع سطر أو سطرين من CSS، ستبدو الصورة
المصغرة دائمًا كما لو أننا حددنا مصدر صورة كان من المفترض عرضه بهذا الحجم.
عند إعطاء محركات العرض بيانات صور أكثر من اللازم للمساحة التي تشغلها الصورة في تخطيط، تكون قادرة على اتخاذ قرارات مدروسة حول كيفية عرض الصورة المخفَّضة، ويمكنها إجراء ذلك بدون تقديم أي عناصر مرئية أو تمويه.
لن تحتاج عادةً إلى تكبير الصورة، أي عرض <img> بحجم أكبر من الحجم الأساسي للصورة المصدر.
ستظهر الصورة المعروضة مموهة ومحبب.
ويعني استخدام img { max-width: 100% } أنّه كحجم مرن للحاوية، سيتم تصغير حجم الصور حسبما تقتضي الحاجة.
وعلى عكس إعداد width: 100% أكثر صرامة، يضمن ذلك أيضًا عدم تكبير الصورة بما يتجاوز حجمها الأساسي.
لطالما كان هذا الأمر بالنسبة إلى قواعد التعامل مع الصور، مثل استخدام تنسيق تفهمه المتصفّحات، واستخدام مستوى ضغط معقول، وعدم تغيير حجم الصور مطلقًا إلى مستوى أعلى.
ولكن بقدر ما كان هذا النهج بسيطًا وفعالاً من الناحية المرئية، كان قد تكبد تكلفة أداء هائلة. بما أنّ <img> لا تتيح سوى استخدام مصدر واحد لبيانات الصور، كانت تتطلب منا هذه الطريقة توفير مادة عرض صورة بحجم أساسي يصل إلى أكبر حجم يمكن عرضها به. بالنسبة إلى الصورة التي تريد شغل مساحة بتنسيق يمكن أن يتراوح عرضها من 300px إلى 2000px، بناءً على حجم إطار العرض الخاص بالمستخدم، يجب توفّر مصدر صورة بعرض أساسي يبلغ 2000px على الأقل. وبالنسبة إلى المستخدم الذي لا يعرض الصفحة سوى من خلال إطار عرض صغير، سيبدو كل شيء كما هو متوقع، ويمكن تغيير حجم الصورة بشكل جيد. في الصفحة المعروضة، لن تختلف الصورة المصدر الكبيرة ولكن تم تصغيرها عن الصورة ذات الحجم المناسب. مع ذلك، لا يزال المستخدمون ينقلون ويعرضون صورة بحجم 2000px، ما يستهلك قدرًا هائلاً من معدل نقل البيانات وطاقة المعالجة بدون أي فائدة ملموسة.
وقد ساءت الأمور إلى حد كبير مع ظهور الأجهزة الأولى المزوّدة بـ "Retina" حيث أصبحت كثافة الشاشة مصدر قلق إلى جانب حجم إطار العرض. يحتاج مصدر الصورة إلى عرض أساسي أكبر بكثير ليلائم شاشة عرض عالية الكثافة. بعبارات بسيطة، تتطلّب الشاشة ذات الكثافة المزدوجة ضعف عدد وحدات بكسل في الصورة لعرض الصورة بأكبر قدر ممكن من الدقّة.
وهنا، تمكّن المطوّرون مرة أخرى من الاعتماد على قدرة المحرّكات على تصغير حجم الصور بصريًا. من خلال تزويد المتصفّح بصورة ذات مصدر 800px عريض في src، ثم تحديد أنّه يجب عرضه بعرض 400px باستخدام CSS، يتم عرض الصورة بضِعف كثافة وحدات البكسل:
إنّ الصورة ذات المصدر الواحد التي يتم اقتصاصها لتلائم أكبر مساحة ممكنة في تنسيقك والشاشات العالية الكثافة، تناسب جميع المستخدمين بشكل مرئي. وسيبدو مصدر الصورة الضخم والعالية الدقة المعروض على شاشة صغيرة ومنخفضة الكثافة مثل أي صورة أخرى صغيرة ومنخفضة الكثافة، ولكنه أبطأ بكثير. وسيظل المستخدم يتحمل جميع تكاليف الأداء لمصدر الصور الضخم بعرض 4000 بكسل، من دون أي فائدة.
ومنذ فترة طويلة، كان بإمكان <img> تنفيذ إجراء واحد بشكل كبير، وهو "حصل على بيانات الصورة ووضعها على الشاشة". لقد كان أداؤه جيدًا على وجه التحديد، لكن <img> لم يكن على مستوى
مهمة استيعاب التغيّرات الجذرية في سياق التصفّح الذي كنا نواجهه. على الرغم من أنّ تصميم الويب السريع الاستجابة
أصبح من الممارسات الرئيسية للتطوير، إلا أنّ المتصفّحات قد حسّنت أداء img لمدة عشرين عامًا تقريبًا، ولكن بالنسبة إلى جميع المستخدمين باستثناء الأكثر امتيازًا، لم يكن محتوى الصور في الصفحات فعالاً منذ البداية. بغض النظر عن مدى سرعة المتصفّح في طلب مصدر الصورة وتحليله وعرضه، من المرجح أن تكون مادة العرض هذه أكبر بكثير مما يحتاجه المستخدم.