صور شاشة Retina: تقديم رسومات حادة على الشاشات عالية الكثافة

آخر تحديث: June 28, 2026

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

الإجابة السريعة: كيف تجعل الصور حادة على شاشات Retina؟

قم بإنشاء نسخة من الصورة بمقدار ضعف (وللهواتف، ثلاثة أضعاف) أبعاد البكسل المعروضة، ثم استخدم سمة srcset لتقديم كلا الإصدارين. يقوم المتصفح بتحميل الملف عالي الدقة فقط على الشاشات التي يمكنها عرضه، لذا فإن شاشات العرض القياسية لا تقوم بتنزيل البايتات الإضافية. تحتاج الصورة المعروضة بعرض 400 بكسل إلى مصدر بحجم 800 بكسل (2x) لـ Retina. قم بتصدير كليهما بالضغط المناسب — فملف 2x أكبر ولكنه ليس ضعف الحجم، لأن كفاءة الضغط تتحسن مع زيادة الدقة.

ما هي شاشة Retina أو الشاشة ذات الكثافة العالية للبكسلات (High-DPI)؟

شاشة Retina هو مصطلح تسويقي لشاشة ذات كثافة بكسل عالية بما يكفي بحيث لا يستطيع العين تمييز البكسلات الفردية من مسافة المشاهدة العادية. أطلقت Apple هذا المصطلح، لكن المفهوم ينطبق على معظم الهواتف والأجهزة اللوحية وأجهزة الكمبيوتر المحمولة الحديثة. القياس العملي هو نسبة بكسل الجهاز (DPR) — أي عدد البكسلات المادية التي تمثل بكسل CSS واحد.

• تحتاج الشاشة ذات نسبة 2x إلى ضعف البكسلات الخطية (أربعة أضعاف الإجمالي) لتبدو حادة.
• تحتاج شاشة الهاتف بنسبة 3x إلى ثلاثة أضعاف البكسلات الخطية.
• تقوم الشاشات القياسية 1x بتنزيل الصورة الأساسية ولا تهدر شيئًا.

توثق دليل Mozilla لنسبة بكسل الجهاز كيفية إبلاغ المتصفحات باستخدام DPR، وهو أساس أي استراتيجية صور Retina.

كيف تنشئ إصدارات الصور 2x و 3x؟

ابدأ من مصدر عالي الدقة وقم بتغيير حجمه إلى كل هدف بدلاً من تكبير ملف صغير. تحتاج الصورة المخصصة لوضع عرض بعرض 400 بكسل إلى نسخة 400px (1x)، و 800px (2x)، ونسخة 1200px (3x) للهواتف.

1. ابدأ من مصدر لا يقل حجمه عن أكبر هدف لديك (3x).
2. قم بتغيير الحجم إلى عرض 1x و 2x و 3x.
3. اضغط على كل نسخة — حيث تضغط ملفات 2x و 3x بشكل أفضل لكل بكسل.
4. قم بالتصدير كـ WebP للحصول على أصغر الملفات عالية الجودة.
5. قدم جميع الإصدارات واترك للمتصفح الاختيار.

• لا تقم أبدًا بتكبير صورة صغيرة إلى 2x — ستبقى ناعمة وستصبح فقط أثقل.
• عادةً ما يكون ملف 2x أقل من ضعف بايتات 1x بسبب الضغط الأفضل.
• تعتبر إصدارات 3x هي الأكثر أهمية للهواتف ذات الشاشات الصغيرة والكثيفة.

كيف تقدم الإصدار الصحيح باستخدام srcset؟

يخبر السمة srcset على وسم <img> المتصفح بالملف الذي يجب تحميله بناءً على نسبة DPR للشاشة. يتولى المتصفح عملية التحديد، لذا فإنك توفر الخيارات والهيكلة (markup).

<img
  src="photo-1x.webp"
  srcset="photo-1x.webp 1x, photo-2x.webp 2x, photo-3x.webp 3x"
  alt="Descriptive alt text"
  width="400" height="300"
/>

• تشير الواصفات 1x و 2x و 3x إلى تعيين الملفات لنسب بكسل الجهاز.
• يقوم المتصفح بتحميل النسخة التي تطابق الشاشة فقط.
• قم دائمًا بتضمين العرض والارتفاع لمنع تحول التخطيط (layout shift).
• السمة src هي الخيار الاحتياطي للمتصفحات الأقدم.

بالنسبة للصور المتجاوبة التي تغير أيضًا الأبعاد عبر عرض الشاشة، قم بدمج srcset مع السمة sizes وواصفات العرض (400w, 800w) بدلاً من واصفات DPR. يغطي دليل الصور المتجاوبة هذا النمط الأكثر تقدمًا، ويشرح دليل SEO للصور كيف تساعد الصور الحادة والمحجمّة بشكل صحيح أيضًا في أداء البحث.

متى تستخدم SVG بدلاً من الرستر (raster)؟

بالنسبة للشعارات والأيقونات والرسوم التوضيحية ذات الأشكال المسطحة، يمكنك تجاوز مشكلة 2x/3x بالكامل باستخدام SVG. تتوسع الرسومات المتجهة (Vector graphics) بلا حدود دون أي عقوبة في الدقة — فملف SVG نفسه حاد كالشفرة على شاشة 1x وهاتف 3x، لأنه مرسوم من الرياضيات وليس مخزنًا كبكسلات.

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

اختبار صور Retina الخاصة بك

توليد الملفات هو نصف العمل؛ والتحقق من أنها يتم تحميلها بشكل صحيح هو النصف الآخر. تؤكد بضع فحوصات أن الإعداد يعمل بدلاً من تقديم ملف خاطئ بصمت.

1. افتح الصفحة على جهاز Retina أو اضبط DPR للمتصفح على 2x في أدوات المطورين (dev tools).
2. افحص عنصر الصورة وتأكد من أن currentSrc المحمّل هو الملف 2x أو 3x.
3. قم بالتبديل إلى DPR بنسبة 1x وتأكد من أنه يقوم بتحميل ملف 1x بدلاً من ذلك.
4. تحقق من علامة التبويب Network للتأكد من تنزيل إصدار واحد فقط لكل شاشة.
5. شاهد على 100% على شاشة Retina وتأكد من أن الصورة حادة، وليست ناعمة.

تسمح لك أداة تجاوز نسبة بكسل الجهاز في أدوات مطوري المتصفح باختبار ذلك دون أجهزة مادية، على الرغم من أن الشاشة الفعلية ذات الـ Retina هي الدليل النهائي. وضع الفشل الشائع هو خطأ طباعي في هيكلة srcset يجعل المتصفح يعود إلى src الأساسي، والذي يبدو ناعمًا على شاشات Retina دون إطلاق أي خطأ. تلتقط علامة التبويب Network هذا فوراً — إذا رأيت ملف 1x يتم تحميله على شاشة 2x، فهذا يعني أن srcset غير موصول بشكل صحيح.

الموازنة بين الحدة ووزن الصفحة

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

يوثق دليل web.dev للصور المتجاوبة التأثير على الأداء لعمل هذا بشكل صحيح، ويربط دليل Core Web Vitals وزن الصورة مباشرة بمقياس LCP الذي يؤثر على التصنيف. الهدف هو الحدة حيثما تظهر والتحفظ في كل مكان آخر — اترك للمتصفح الاختيار، وقم بإنشاء كل إصدار حتى يكون لديه شيء جيد للاختيار منه.

الأسئلة المتداولة (FAQ)

كيف أجعل الصور حادة على شاشات Retina؟

قدم إصدارات 2x (وباختيارك 3x) للصور الرستر بحجم العرض، باستخدام srcset ليختار المتصفح الملف الصحيح بناءً على نسبة بكسل الجهاز. تبدو صورة 1x على شاشة Retina ناعمة؛ ويستعيد البديل 2x الحدة.

هل أحتاج إلى صور 2x لكل رسم بياني؟

بالنسبة للرسومات الحادة وصور الأبطال (hero photos)، نعم — لأن شاشات Retina تظهر النعومة بخلاف ذلك. بالنسبة للصور الزخرفية أو الموجودة أسفل الطيّة، غالبًا ما يكون ملف 1x واحد كافياً. قدم كليهما باستخدام srcset حتى لا تقوم الأجهزة غير الـ Retina بتنزيل الملف الكبير.

متى يجب أن أستخدم SVG بدلاً من رستر 2x؟

بالنسبة للشعارات والأيقونات والرسومات المسطحة، نعم — لأن SVG مستقل عن الدقة ويظل حادًا بأي حجم دون ملفات إضافية. بالنسبة للصور الفوتوغرافية، لا يزال الرستر (مع متغيرات 2x) هو الخيار الصحيح. راجع دليل SVG إلى PNG.

كيف أقدم صور Retina؟

استخدم srcset مع مصادر 1x و 2x (وباختيارك 3x)، مما يترك للمتصفح الاختيار بناءً على نسبة بكسل الجهاز. قم بتضمين 1x كـ src الافتراضي حتى تقوم المتصفحات الأقدم بالعودة إليه بشكل نظيف. يقوم المتصفح بتنزيل المتغير الذي يحتاجه فقط.

هل يبطئ srcset الصفحة؟

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