تحضير الصور للويب: قائمة جودة عملية

معظم الصور التي تبدو سيئة على موقع إلكتروني ليست صورًا رديئة. لقد صُدّرت بالمقاس الخطأ، أو بالصيغة الخطأ، أو حُدّت في اللحظة الخطأ، أو سُلّمت بملف ألوان يتجاهله المتصفح بهدوء. لا شيء من هذه المشكلات صعب الإصلاح، لكن يجب فحصها بالترتيب الصحيح.

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

1. ابدأ بالمقاس الذي يحتاجه المتصفح لا بمقاس ملف المصدر

تسلّم الكاميرا بكسلًا أكثر بكثير مما تستطيع صفحة ويب استخدامه. صورة بعرض 6000 بكسل داخل عمود بعرض 720 بكسل تهدر النطاق الترددي وتُبطئ الصفحة ولا تضيف شيئًا مرئيًا. والعكس أسوأ: صورة بعرض 400 بكسل تُمطّ إلى عرض الصفحة كاملًا تبدو باهتة مهما كان المعالجة دقيقة.

اعمل من التصميم إلى الداخل:

• قِس أكبر عرض ستشغله الصورة بوحدات بكسل CSS. في واجهة بعرض الصفحة كاملًا على صفحة بعرض 1440 بكسل، يكون العرض عادة عرض المحتوى بعد خصم الهوامش.
• اضرب في 2 للشاشات عالية الكثافة إذا كانت الصورة مهمة. صورة تُعرض بعرض 720 بكسل يمكن تصديرها بعرض 1440 بكسل لتبقى حادّة على هاتف أو حاسوب بشاشة عالية الكثافة.
• ضع سقفًا عند النقطة التي تتوقف فيها البكسلات الإضافية عن الظهور. في معظم الصور التحريرية يصل هذا الحد سريعًا: ما يزيد على نحو 2500 بكسل على الضلع الطويل يكون دائمًا تقريبًا أثقل مما يلزم.

إذا ظهرت الصورة نفسها في ثلاثة أماكن، مثل بطاقة وصورة قسم وواجهة رئيسية، فصدّر ثلاثة مقاسات. يمكن لـ CSS تصغير صورة كبيرة، لكن المتصفح سيحمّل أكبر نسخة في كل موضع على أي حال.

2. الـ DPI بيانات وصفية لا إعداد ويب

فكرة «72 نقطة في البوصة» تصمد لأنها سهلة التكرار. لكنها لا تصف كيفية عرض المتصفحات للصور. يقرأ المتصفح أبعاد البكسل المكتوبة في الملف ويعرض الصورة بوحدات بكسل CSS، ولا تدخل قيمة DPI في هذا الحساب.

وتبعًا لذلك:

• تغيير DPI من 300 إلى 72 لا يجعل الملف أصغر أو أسرع. إعادة ترميزه بأبعاد بكسل أصغر هي ما يفعل ذلك.
• الرقم المهم في نافذة التصدير هو العرض والارتفاع بالبكسل، وليس حقل DPI. فإذا عرضت النافذة الاثنين، فعدّل البكسل.

3. اختر الصيغة حسب المحتوى

لا توجد صيغة أفضل عالميًا، بل توافق جيد بين المحتوى وطريقة الترميز. التقسيم المفيد هو هذا:

المحتوى	الصيغة المناسبة للبداية	السبب
الصور الفوتوغرافية والمشاهد النسيجية والتدرجات الناعمة	JPEG أو WebP أو AVIF	تتعامل هذه الصيغ جيدًا مع انتقالات الدرجات وتضغط الصور بكفاءة
الرسومات المسطحة والأيقونات والشعارات والرسوم ذات الحواف الحادة	SVG إن كانت متجهية، وإلا PNG أو WebP	الضغط بفقد ينتج حوافًا باهتة وضبابية على الحدود الحادة
لقطات الشاشة والواجهات	PNG أو WebP	يحافظ النص والخطوط الرقيقة على وضوحهما عند الترميز دون فقد أو بجودة عالية
كل ما يحتاج إلى شفافية	PNG أو WebP أو AVIF	لا تحتوي JPEG على قناة شفافية، فتصبح المساحات الشفافة لونًا صلبًا
صور يجب أن تعمل في أكبر عدد ممكن من البرامج القديمة	JPEG أو PNG	الصيغتان مفهومتان في كل مكان

هناك خطأان في اختيار الصيغة يستحقان التنبيه. الأول تصدير لقطة شاشة بصيغة JPEG منخفضة الجودة: فتكتسب كل حرف وكل حد جدول هالة، وتصبح الصورة غير مقروءة. والثاني وضع صورة فوتوغرافية داخل ملف SVG. فـ SVG صيغة متجهية، والصورة النقطية داخلها لا تصبح أكثر حدّة، بل تُغلّف فقط في ملف أكبر.

تُنتج الصيغ الحديثة مثل WebP وAVIF عادة ملفًا أخف بجودة مقاربة، لكنها ليست أفضل تلقائيًا إذا كانت سلسلة عملك لا تسمح بمعاينة النتيجة. صدّر، وافتح الملف، وقارنه بالحجم الذي سيظهر به فعلًا.

4. صحّح الألوان ووحّدها قبل التصدير

الافتراض الآمن للنشر على الويب هو sRGB. الشاشات والمتصفحات ومعظم منصات النشر تعتبر sRGB هو الأساس. فإذا حملت الصورة ملفًا أوسع، مثل Display P3، فقد تُعرض كما لو كانت sRGB، مما يحوّل الألوان الغنية إلى مشبعة أكثر من اللازم والتدرجات الدقيقة إلى درجات ظاهرة.

المسار المنطقي هو:

1. اعمل بملف الألوان الأوسع الذي تحتاجه إن كانت بيئة العمل تُدار لونيًا.
2. حوّل المستند إلى sRGB قبل التصدير النهائي بدلًا من إسناد ملف sRGB دون تحويل. الإسناد يغيّر التسمية فقط، أما التحويل فيغيّر القيم لتطابق الهدف الجديد.
3. ألقِ نظرة أخيرة على الملف المصدَّر على الويب في علامة تبويب عادية. هذا الفحص الأخير يكشف التدرجات المتقطعة في السماء والأجزاء الساطعة المحترقة وأخطاء ملف الألوان التي يخفيها محرر يُدار لونيًا.

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

5. الحِدّة بعد تغيير المقاس لا قبله

تصغير الصورة يزيل التفاصيل ويتركها ناعمة قليلًا. العلاج المعتاد هو قدر بسيط من الحِدّة بعد تصغير المقاس، عند الأبعاد النهائية بالبكسل. أما الحِدّة قبل التصغير فليست مكافئة: فالتصغير يوزّع بعدها جزءًا من الحدّة، وقد تُطبع عيوب كانت غير مرئية بالحجم الكامل داخل الملف الصغير.

أبقِ حدّة المخرجات معتدلة. النص والخطوط الدقيقة والحواف عالية التباين هي أول ما يُظهر الإفراط في الحِدّة على شكل هالة فاتحة أو داكنة. قارن النتيجة المصدَّرة بنسبة 100% قبل الرفع. الصورة الناعمة قليلًا تبدو طبيعية، أما المفرطة في الحِدّة فتبدو تالفة.

والمنطق نفسه ينطبق على تقليل الضوضاء. فالتقليل الشديد يزيل الحبيبات والنسيج الدقيق معًا، لذا طبّقه بمقاس قريب من المقاس النهائي وافحص النتيجة عند ذلك المقاس.

6. اضغط من أجل الهدف ثم افحص

الضغط هو مكان المقايضة بين الجودة والوزن. لا يوجد إعداد صحيح عالميًا، لكن بعض العادات تُبقي هذه المقايضة نزيهة:

• ابدأ بجودة تبدو نظيفة عند 100%، لا بأدنى رقم يسمح به المنزلق.
• احكم بالمقاس المعروض. صورة تظهر في بطاقة بعرض 300 بكسل لا تحتاج إلى الصمود أمام التدقيق بالبكسل عند 300%.
• قارن أحجام الملفات بين محاولات التصدير: غالبًا ما تتوفر الجودة البصرية نفسها بعدد بايتات أقل بكثير.
• فضّل صورة أصغر قليلًا على صورة سيئة الضغط. إنقاص الأبعاد بنسبة 10% يكلّف عادة جودة أقل من دفع الضغط حتى الوصول إلى الوزن نفسه.

كنقطة بداية تقريبية، تبقى كثير من الصور المصغّرة التحريرية بسهولة دون 100 كيلوبايت، وصور الأقسام دون 250 كيلوبايت، والواجهات بعرض الصفحة دون 400 كيلوبايت بعد تصغير المقاس الصحيح. هذه أهداف تُفحص لا قواعد تُحقق بأي ثمن.

7. تعامل مع الشفافية بوعي

إذا احتاجت الصورة إلى خلفية شفافة، فاختر صيغة تدعم ذلك فعلًا، مثل PNG أو WebP أو AVIF، وتحقّق من النتيجة على لون الخلفية الذي ستوضع عليه. قد تُظهر الحواف شبه الشفافة هالة إذا صُدّرت الصورة بلون خلفية لا يطابق الصفحة.

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

8. أبقِ النص خارج الصور

النص داخل صورة نقطية له ثلاثة عيوب: يصبح غير حاد عند تغيير المقاس، ولا يمكن تحديده أو ترجمته، ولا تستطيع محركات البحث قراءته. العناوين والتعليقات وتسميات الواجهة والملاحظات مكانها HTML وCSS. وإذا كان عنصر نصي جزءًا من الصورة لأسباب تصميمية، فصدّره بمقاس العرض وتجنّب تغيير مقاسه بعده.

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

9. اختم بالتفاصيل التي تجعل الصفحة تعمل

التفاصيل الصغيرة ليست زينة، بل تغيّر سلوك الصفحة:

• سِمات العرض والارتفاع. الإعلان عن الأبعاد الأصلية يسمح للمتصفح بحجز المساحة قبل تحميل الصورة، فلا يقفز التصميم.
• التحميل الكسول. أجّل الصور الواقعة أسفل الشاشة الأولى ليُحمَّل أعلى الصفحة أولًا. لا تؤجّل الصورة الرئيسية التي تحدد عادة أكبر عنصر مرئي.
• النص البديل. صِف ما تُظهره الصورة ولماذا هي موجودة. جملة قصيرة محددة أفضل من قائمة كلمات مفتاحية، والصورة التزيينية يجب أن يكون لها alt فارغ.
• اسم الملف. hero-photo-2026.jpg يتقادم سريعًا، أما فريق-ورشة-تحرير-ملفات-raw.jpg فيظل يصف المشهد بعد سنوات.
• فحص بصري أخير على صفحة حقيقية. صدّر الصورة وانشرها على صفحة مراجعة وانظر إليها في سياقها على نافذة بحجم هاتف. قد يجتاز الملف كل الفحوص التقنية ويبقى بالمقاس الخطأ للتصميم.

10. سير عمل يكفي له متصفح

لا شيء من هذا يتطلب تطبيقًا مكتبيًا. إذا لم يتبقَّ سوى القص والتقويم والتعريض وتحويل الألوان وتصدير بالمقاس الصحيح، فمحرر داخل المتصفح يكفي، وهو يمنع المشكلة الكلاسيكية: فتح برنامج تحرير صور ثم «تحسين» كل شيء آخر في الطريق. يعمل محرر الصور من FreeAIGeneration داخل المتصفح دون حساب إلزامي، ويتولى محرر الصور الخام الملفات التي تحتاج إلى معالجة البيانات الأولية قبل هذه الخطوات الأخيرة.

أما الشعارات والخطوط البسيطة، فتصديرها بصيغة SVG من محرر المتجهات ينتج ملفًا حادًا في كل مقاس وخفيفًا جدًا. احتفظ بالمستند المصدر بجوار الملف المصدَّر كي يستطيع من يأتي بعدك تحديث الصورة بدلًا من إعادة إنشائها.

وإذا وعدت أداة ما بإصلاح صورة عبر ميزة ذكاء اصطناعي، مثل التكبير أو إزالة الضوضاء أو استبدال عنصر، فاقرأ الوعد بدقة قبل الاعتماد عليه. يشرح مقالنا عن معنى «مدعوم بالذكاء الاصطناعي» كيف تُعرض هذه الميزات وما ينبغي التحقق منه.

قائمة التحقق

قبل نشر أي صورة:

1. قياس مقاس العرض، وتحديد مقاس التصدير، واختيار نسخة عالية الكثافة حيث تهم.
2. ضبط الأبعاد بالبكسل، وتجاهل DPI كإعداد ويب.
3. مطابقة الصيغة للمحتوى، وعدم حرق نص داخل صورة نقطية إلا في لقطة شاشة.
4. تحويل الألوان إلى sRGB وفحصها في المتصفح.
5. تطبيق حدّة المخرجات وتقليل الضوضاء بعد تصغير المقاس.
6. الحكم على الضغط بمقاس العرض، ومقارنة الوزن بين المحاولات.
7. التعامل مع الشفافية أو إزالتها بوعي.
8. ضبط العرض والارتفاع والنص البديل واسم الملف واستراتيجية التحميل في الصفحة.
9. نظرة أخيرة على الصفحة المنشورة في نافذة بحجم هاتف.

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