HTML: الصور المتجاوبة في HTML
نفس الصورة يجب أن تظهر بأحجام ودقات مختلفة على الهواتف والأجهزة اللوحية وأجهزة الكمبيوتر المكتبي — هذا هو "المقصود بالصور المتجاوبة." تعلم كيفية جعل الصور واضحة وموفرة لعرض النطاق الترددي وسريعة التحميل عبر جميع أحجام الشاشات.
1. إعدادات منفذ العرض (Viewport)
الخطوة الأولى في التصميم المتجاوب هي تعيين منفذ العرض. بدونها، تصغر المتصفحات المحمولة الصفحة إلى عرض 980px للعرض، مما يجعل النص والصور صغيرين جدًا. أضف وسم <meta> هذا وسيتطابق عرض الصفحة مع شاشة الجهاز:
▶ مثال
HTML
<!-- ✅ مع إعداد منفذ العرض (موصى به) -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { margin: 0; font-family: sans-serif; }
.box { padding: 20px; background: #e3f2fd; }
</style>
</head>
<body>
<div class="box">
<h1>مرحبًا، أيها المحمول!</h1>
<p>عند المشاهدة على الهاتف، حجم النص مناسب وتعرض شاشة واحدة المحتوى الكامل.</p>
</div>
</body>
<!-- ❌ بدون إعداد منفذ العرض -->
<head>
<style>
body { margin: 0; font-family: sans-serif; }
.box { padding: 20px; background: #ffebee; }
</style>
</head>
<body>
<div class="box">
<h1>مرحبًا، أيها المحمول!</h1>
<p>عند المشاهدة على الهاتف، تُصغر الصفحة إلى 980px ويكون النص صغيرًا جدًا.</p>
</div>
</body>
2. استجابة الصور
أكثر خاصيتي CSS استخدامًا لجعل الصور تتكيف تلقائيًا مع عرض الحاوية:
max-width: 100%— الصورة لا تتجاوز عرض الحاوية أبدًا، ولن تتمدد beyond حجمها الأصليwidth: 100%— الصورة تملأ دائمًا عرض الحاوية، وقد تتمدد وتتشوه
HTML
<!DOCTYPE html>
### ▶ مثال
<html>
<head>
<style>
body { font-family: sans-serif; padding: 20px; }
.container {
width: 80%;
max-width: 600px;
border: 2px dashed #999;
padding: 10px;
margin-bottom: 20px;
}
.img-max {
max-width: 100%;
height: auto;
}
.img-full {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>max-width: 100% (يحافظ على نسبة الأبعاد، لا تمدد)</h2>
<div class="container">
<img src="https://via.placeholder.com/800x400" alt="صورة نموذجية" class="img-max">
<p>عرض الصورة الأصلي 800px، الحاوية 600px. الصورة تصغر إلى 600px دون تشويه.</p>
</div>
<h2>width: 100% (يملأ الحاوية)</h2>
<div class="container">
<img src="https://via.placeholder.com/800x400" alt="صورة نموذجية" class="img-full">
<p>الصورة تملأ دائمًا عرض الحاوية. أضف height: auto لمنع التشويه.</p>
</div>
</body>
</html>
📌 سرعة تحميل الصورة مهمة. استخدام CSS لتصغير صورة كبيرة يجعلها "تبدو أصغر" فقط — المتصفح لا يزال يقوم بتنزيل الملف الأصلي بالحجم الكامل. من الأفضل قص الصور إلى الحجم المناسب قبل الرفع: صور صغيرة للمحمول، صور كبيرة لسطح المكتب. هذا يمكن أن يحسن سرعة التحميل بشكل كبير.
3. سمة srcset
srcset تتيح للمتصفح اختيار الصورة الأكثر ملاءمة تلقائيًا بناءً على كثافة الشاشة (1x، 2x، 3x) أو عرض منفذ العرض. توفر ببساطة إصدارات متعددة من الصور، ويختار المتصفح "بذكاء":
HTML
<!-- الاختيار بناءً على كثافة الشاشة -->
<img src="photo-1x.jpg"
### ▶ مثال
srcset="photo-1x.jpg 1x, photo-2x.jpg 2x, photo-3x.jpg 3x"
alt="صورة نموذجية">
<!-- الاختيار بناءً على عرض منفذ العرض + sizes يصف عرض عرض الصورة -->
<img src="small.jpg"
srcset="small.jpg 480w,
medium.jpg 768w,
large.jpg 1200w"
sizes="(max-width: 480px) 100vw,
(max-width: 768px) 80vw,
60vw"
alt="مثال صورة متجاوبة">
هناك طريقتان شائعتان لاستخدام srcset:
- محدد x: الاختيار بناءً على كثافة الشاشة. الشاشات العادية تستخدم 1x، شاشات Retina تستخدم 2x أو 3x.
- محدد w: الاختيار بناءً على عرض منفذ العرض. مع سمة
sizesلإخبار المتصفح بعرض الصورة الفعلي، يحسب المتصفح الصورة المثلى.
4. عنصر picture
<picture> أكثر مرونة من srcset. يتيح لك تحميل صور مختلفة تمامًا عند عروض شاشة مختلفة — على سبيل المثال، صورة بانورامية على الشاشات العريضة وصورة مقربة مقتصة على الشاشات الضيقة (يُسمى هذا "توجيه الفن" في التصميم):
HTML
<picture>
<!-- شاشة عريضة >= 1200px: عرض البانوراما الكاملة -->
<source media="(min-width: 1200px)" srcset="landscape-full.jpg">
### ▶ مثال
<!-- شاشة متوسطة >= 768px: عرض المنظر المتوسط -->
<source media="(min-width: 768px)" srcset="landscape-medium.jpg">
<!-- شاشة صغيرة < 768px: عرض الصورة المقربة المقتصة -->
<source media="(max-width: 767px)" srcset="landscape-cropped.jpg">
<!-- البديل: يُعرض عندما لا يدعم المتصفح picture -->
<img src="landscape-medium.jpg" alt="صورة منظر طبيعي">
</picture>
يُستخدم <picture> أيضًا بشكل شائع لتقديم صيغ صور متعددة (مثل WebP)، حيث يختار المتصفح أول صيغة مدعومة:
HTML
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="صورة">
</picture>
### ▶ مثال
يتحقق المتصفح من كل <source> من الأعلى إلى الأسفل. إذا كان يدعم الصيغة، يقوم بتحميلها؛ إذا لم يدعم أيًا منها، يعود إلى <img>. بهذه الطريقة، تستمتع بفوائد ضغط الصيغ الجديدة مع الحفاظ على التوافق.
❓ أسئلة شائعة
س ما الفرق بين
srcset و sizes؟ج
srcset يوفر مصادر صور متعددة مع دقاتها (مثل 480w و 768w)، بينما sizes يخبر المتصفح بالحجم الفعلي للصورة عند عروض منفذ عرض مختلفة (مثل (max-width: 480px) 100vw). يحسب المتصفح أي صورة يجب تحميلها بناءً على كلاهما. ببساطة: srcset هو "ما الصور المتاحة"، sizes هو "كم ستكون الصورة كبيرة في مواقف مختلفة".س لماذا لا أستخدم JavaScript للكشف عن حجم الشاشة وتبديل الصور؟
ج استخدام
srcset+sizes له ثلاث مزايا: 1) يمكن للمتصفح تحديد أي صورة يجب تحميلها أثناء تحليل HTML، دون انتظار تنفيذ JavaScript；2) يعمل حتى عندما يكون JavaScript معطلاً；3) يمكن للمتصفح الاختيار بشكل أكثر ذكاءً (مع الأخذ في الاعتبار ظروف الشبكة ونسبة بكسل الجهاز، إلخ). JavaScript مناسب فقط لسيناريوهات توجيه الفن المعقدة (مثل تركيبات مختلفة)؛ التبديل البسيط للدقة يتم التعامل معه بواسطة srcset.س متى أستخدم
<picture> مقابل srcset؟ج
srcset هو لـ "إصدارات مختلفة الدقة من نفس الصورة" — يختار المتصفح تلقائيًا الوضوح المناسب. <picture> هو لـ "عرض صور مختلفة في مواقف مختلفة" — يمكن أن تكون تركيبات مختلفة (توجيه فن) أو صيغ مختلفة (WebP/AVIF/JPG). القاعدة البسيطة: إذا كان الوضوح فقط يختلف، استخدم srcset؛ إذا كان التركيب أو الصيغة تختلف، استخدم <picture>.س هل الصور المتجاوبة تؤثر على SEO؟
ج الصور المتجاوبة المستخدمة بشكل صحيح تؤثر إيجابًا على SEO: 1) تحسن سرعة تحميل الصفحة (مؤشرات Core Web Vitals)；2) تحسن تجربة المستخدم على الأجهزة المحمولة；3) يمكن لمحركات البحث فهرسة نص
alt. ملاحظة: يجب أن تكون الصور في srcset إصدارات مختلفة من نفس المحتوى — لا تستخدم صورًا مختلفة تمامًا، وإلا قد تعتبرها محركات البحث مضللة.📖 ملخص
<meta name="viewport">هو الخطوة الأولى للتكيف مع المحمولmax-width: 100%يجعل الصور متجاوبة دون تشويهsrcsetتحمل صورًا بدقات مختلفة بناءً على كثافة الشاشة أو عرض منفذ العرض<picture>+<source>يعرض صورًا بتركيبات مختلفة عند عروض شاشة مختلفة، أو يقدم صيغ صور متعددة- استخدم دائمًا
<img>كبديل لـ<picture>
📝 تمارين
- معرض صور متجاوب: أنشئ صفحة معرض بثلاث صور، باستخدام
max-width: 100%على كل منها لضمان عرضها بالكامل على المحمول. استخدمsrcsetلتوفير إصدارات 1x و 2x لكل صورة. - تمرين توجيه الفن: استخدم
<picture>لتنفيذ: سطح المكتب يعرض صورة منظر طبيعي بعرض 1200px، الجهاز اللوحي يعرض نسخة مقتصة بعرض 768px، الهاتف يعرض صورة مقربة بعرض 480px. استخدم استعلامات وسائطmin-widthللتحكم في نقاط الفصل.
