كيفية تغيير حجم الصور للويب: الأحجام، وRetina وsrcset

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

قمت بتغيير حجم صورة البطل (hero photo) نفسها بأربع طرق وقمت بقياس الفرق: صورة JPEG بحجم 4.2MB للكاميرا، يتم تقديمها كما هي في مساحة عرض تبلغ 800px، أصبحت WebP بحجم 94KB دون أي فقدان مرئي للجودة. يعد تغيير حجم الصور للويب أكبر مكسب ممكن لوزن الصفحة، ويعود معظم ذلك إلى أربعة قرارات: حجم العرض، وعامل Retina، والتنسيق (format)، والضغط (compression). هذا هو سير العمل الذي أتبعه في كل موقع أقوم بنشره.

إجابة سريعة: كيف يجب عليك تغيير حجم الصور للويب؟

قم بتغيير حجم كل صورة لتكون تقريبًا ضعف العرض الذي تظهر به (عامل Retina)، وصدّرها كـ WebP، واضغطها إلى جودة 80، وقدم سلسلة srcset قصيرة بحيث يحصل الهواتف المحمولة وأجهزة الكمبيوتر المحمولة على ملف مناسب. بالنسبة لصورة البطل ذات العرض الكامل التي تظهر عند 1920px، عادةً ما يكون WebP واحد بحجم 1920 إلى 2560px بجودة 80 كافياً. إذا تجاهلت ذلك، فإنك تجبر كل جهاز على تنزيل بكسلات بدقة سطح المكتب.

ما هو الحجم الذي يجب أن تكون عليه صورة الويب فعليًا؟

الحجم الصحيح هو حجم العرض (display size)، وليس حجم المصدر (source size). افتح أدوات المطورين (DevTools)، وافحص الصورة، واقرأ أكبر عرض صندوق CSS تشغله عبر نقاط التوقف المختلفة (breakpoints)، ثم صدّرها بهذا العرض مضروبًا في هدف الكثافة الخاص بك.

بالنسبة لمعظم صور المقالات ومنتجات الصور التي تقع ضمن نطاق يمكن التنبؤ به. أقوم بقياس كل مساحة قبل التصدير، لأن التخمين هو ما يجعل صورة بحجم 4000px تنتهي بها المطاف في عمود بعرض 600px.

لا تدع CSS يقوم بتصغير الحجم. الصورة <img> المنسقة على width: 400px لا تزال تقوم بتنزيل الملف بالكامل — يتخلص المتصفح من البكسلات الإضافية بعد أن تكون البايتات قد وصلت بالفعل إلى السلك. قم بتغيير حجم المصدر أولاً، ثم اعتمد على CSS فقط للتخطيط (layout).

خطوة بخطوة: سير عمل تغيير الحجم الخاص بي

هذا هو التسلسل الدقيق الذي أتبعه. لقد اختبرته مقابل تدقيق صور Lighthouse وأنه ينجح باستمرار في فحص "الصور ذات الحجم المناسب".

• قياس أكبر عرض مُعرض باستخدام DevTools.
• الضرب في 2 لـ retina (3x فقط لصور البطل للهواتف الكثيفة).
• تغيير الحجم تنازليًا باستخدام مرشح عالي الجودة (Lanczos).
• التصدير كـ WebP بجودة 80، وتخفيضه إلى 75 إذا كان الملف لا يزال ثقيلاً.
• إنشاء سلسلة srcset للمساحات المتجاوبة.
• الضغط مرة أخرى إذا ظل الملف يتجاوز 200KB.

from PIL import Image

def resize_for_web(src, out, max_width=1440, quality=80):
    img = Image.open(src)
    if img.width > max_width:
        ratio = max_width / img.width
        img = img.resize((max_width, int(img.height * ratio)),
                         Image.LANCZOS)
    img.save(out, "WEBP", quality=quality)

عندما قمت بقياس ذلك، حول هذا صورة بحجم 4000x2667 (JPEG بحجم 4.2MB) إلى WebP بحجم 1440x960 وبوزن 94KB — وهو انخفاض بنسبة 98% دون فقدان وضوح مرئي على الشاشة القياسية. القواعد الأعمق للاحتفاظ بالتفاصيل عبر التصغير العدواني موجودة في keep quality while resizing.

Retina و 2x: هل تحتاج حقًا إلى ضعف البكسلات؟

في الغالب نعم، لأي شيء ينظر إليه المستخدمون عن كثب. تقوم شاشة 2x بتعبئة أربعة أضعاف البكسلات في نفس المساحة المادية، لذا تبدو ملفات 1x ناعمة. القاعدة الآمنة: التصدير عند 2x عرض CSS لصور المحتوى.

المكان الذي أخالف فيه هذه القاعدة عمداً:

• الخلفيات الزخرفية التي يمكن أن تكون ضبابية أو باهتة يمكن أن تبقى قريبة من 1x.
• الصور أسفل الطيّة (below-the-fold) حيث لا يكون الوضوح بالغ الأهمية يمكنها استخدام 1.5x.
• الأيقونات والشعارات أفضل كـ SVG، وهو مستقل عن الدقة.

توصي إرشادات web.dev للصور من Google بوصف الكثافة (density descriptors) أو وصف العرض (width descriptors)؛ ووصف العرض عبر srcset أسهل في التفكير، ولذلك هذا ما أعتمد عليه بشكل افتراضي.

تقديم المتغيرات المتجاوبة باستخدام srcset

نادراً ما يكون ملف واحد مناسباً لكل جهاز. لا يحتاج الهاتف إلى ملف بحجم 1440px، ولا يجب أن يكتفي شاشة 4K بملف بحجم 480px. يسمح لك srcset بتقديم عدة عروض ويترك للمتصفح مهمة الاختيار.

<img
  src="hero-960.webp"
  srcset="hero-480.webp 480w, hero-720.webp 720w,
          hero-960.webp 960w, hero-1440.webp 1440w"
  sizes="(min-width: 900px) 720px, 92vw"
  alt="رسم توضيحي لمدينة في أفق الغسق"
  width="960" height="640" loading="lazy">

يجب أن يخبر السمة sizes بالحقيقة حول مساحة العرض. إذا تركتها على القيمة الافتراضية 100vw، يفترض المتصفح أن الصورة تمتد عبر عرض الشاشة بالكامل ويقوم بتنزيل أكبر متغير. اختيار العروض التي سيتم إنشاؤها هو قرار بحد ذاته — الطريقة التي أستخدمها لتقليم السلم (ladder) موجودة في responsive image breakpoints.

حجم الملف مقابل الأبعاد: ما هو الأكثر أهمية؟

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

الهدف الذي أسعى إليه هو أقل من 200KB لمعظم صور المحتوى، وأقل من 100KB لأي شيء فوق الطيّة (above the fold) يساهم في Largest Contentful Paint. عندما يصل الملف إلى ما يزيد عن ذلك، فإن أول رافعة أستخدمها هي جودة الضغط، ثم التنسيق. تفصيل البايتات لكيفية خفض الوزن بالضغط موجود في compress without losing quality.

تصنف Lighthouse الصور ذات الحجم الزائد كفرصة ملموسة. قم بتشغيلها من Chrome DevTools أو اتبع توثيق Lighthouse — يقدم تدقيق "الصور ذات الحجم المناسب" تقريراً دقيقاً عن عدد KB التي تهدرها بتقديم المزيد من البكسلات مما تحتاجه المساحة.

اختيار التنسيق الصحيح

التنسيق هو المكان الذي يختبئ فيه الكثير من البايتات. أعتمد بشكل افتراضي على WebP لكل شيء فوتوغرافي تقريباً، مع AVIF حيث يمكنني تحمل وجود خيار احتياطي (fallback). مطابقة التنسيق بالمحتوى مهمة بقدر أهمية الأبعاد: صورة PNG تستخدم لصور فوتوغرافية تكون أثقل من نفس الملف كـ WebP دون فائدة.

يغطي دليل MDN للصور المتجاوبة عنصر <picture> لتقديم AVIF مع خيار احتياطي WebP أو JPEG. ألجأ إلى <picture> فقط عندما أحتاج إلى التفاوض على التنسيق؛ أما بالنسبة للصور الفوتوغرافية المتجاوبة البسيطة، فإن srcset وحده يكفي.

الأخطاء التي أراها عند تدقيق المواقع

عندما أقوم بتدقيق موقع بطيء، تتكرر مشاكل الصور. هذه هي المشاكل التي أقوم بإصلاحها في معظم الأحيان.

• تحميل ملفات بدقة الكاميرا وتصغيرها باستخدام CSS.
• ملف ضخم واحد لكل نقطة توقف (breakpoint) بدلاً من سلسلة srcset.
• نسيان width و height، مما يسبب تحول التخطيط (layout shift).
• ترك sizes على القيمة الافتراضية حتى يلتقط المتصفح أكبر ملف.
• تحميل كل صورة بشغف (eagerly) بدلاً من تأجيل الصور الموجودة أسفل الطيّة.

هذا الأخير هو أداء مجاني. يتم تغطية نمط تأجيل الصور خارج الشاشة في lazy loading images — أضف loading="lazy" ويتخطى المتصفح الصور التي لم يقم المستخدم بالتمرير إليها بعد.

الملخص

قبل أن أقوم بنشر صورة، أمرر نفسي عبر هذه القائمة: تم تغيير حجمها إلى 2x من أكبر عرض للعرض، وتصديرها كـ WebP، وضغطها تحت 200KB، مع سلسلة srcset، وسمة sizes صادقة، وعرض وارتفاع صريحين، و loading="lazy" أسفل الطيّة، ونص بديل (alt text) وصفي.

تحذير حقيقي واحد: تغيير الحجم هو أكبر رافعة، ولكنه ليس العمل بأكمله. لقد رأيت فرقاً يتقن الأبعاد ولا يزال ينشر صفحات بطيئة لأنه قدم الملفات من المصدر دون تخزين مؤقت (caching)، أو CDN، أو اسم ملف مُجزأ بالمحتوى (content-hashed filename). قم بالقياس باستخدام Lighthouse وملفات تعريف الأجهزة الحقيقية، ثم ثق بالأرقام أكثر من قائمة المراجعة. WebP بحجم 94KB يقوم المتصفح بتنزيله مرة أخرى عند كل تنقل هو لا يزال خطأ بقيمة 94KB.

الأسئلة الشائعة

ما هو حجم صورة البطل للويب؟

طابق حجم العرض: حوالي 1600px عرض لصورة بطل ذات عرض كامل، و800–1200px لصور عمود المحتوى. التصدير عند 2x حجم العرض (لـ retina) يضاعف البكسلات؛ قم بتقديم الحجم المناسب لكل جهاز باستخدام srcset بدلاً من إرسال ملف ضخم واحد.

هل أحتاج إلى صور 2x لشاشات Retina؟

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

ما هو الأكثر أهمية، الأبعاد أم حجم الملف؟

كلاهما مهم، لكن حجم الملف يحرك Core Web Vitals أكثر. قم بتغيير الحجم إلى أبعاد العرض أولاً (يقتل البكسلات المهدرة)، ثم اضغطها إلى جودة مستهدفة (يقتل البايتات المهدرة). يغطي دليل سرعة الويب الترتيب الكامل.

كيف أقوم بتقديم المتغيرات المتجاوبة؟

استخدم srcset مع مصادر خاصة بالحجم وسمة sizes تصف عرض العرض، مما يسمح للمتصفح باختيار الملف المناسب لكل مساحة عرض (viewport). قم بتوليد كل حجم من المصدر الرئيسي، ثم اترك للمتصفح الاختيار. راجع دليل الصور المتجاوبة.

ما هو srcset؟

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

ما هي سمة sizes؟

سمة HTML تخبر المتصفح بمدى عرض الصورة عند كل نقطة توقف (breakpoint)، حتى يتمكن المتصفح من اختيار مصدر srcset الصحيح قبل التنزيل. بدون sizes، يخمن المتصفح. أقرن srcset (المصادر) مع sizes (عرض العرض) للحصول على صور متجاوبة تقوم بتنزيلها بكفاءة. راجع دليل الصور المتجاوبة.

حقوق الصورة

• جهاز MacBook على مكتب يعرض تخطيط موقع ويب مصمم — صورة بواسطة Tranmautritam على Pexels
• لقطة مقربة لشاشة كمبيوتر تعرض أسطر من التعليمات البرمجية المصدرية — صورة بواسطة Nemuel Sereti على Pexels
• شاشة كمبيوتر محمول تعرض موقع ويب يتم تحميله في علامة تبويب المتصفح — صورة بواسطة cottonbro studio على Pexels