تغيير حجم الصور

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

تختار الطريقة الأبسط، وهي الاستيفاء بأقرب جار (Nearest-Neighbor)، كثافة أقرب بكسل في الشبكة الأصلية لكل نقطة في الشبكة المستهدفة. وعلى الرغم من بساطتها الحسابية بتعقيد خوارزمي O(1)، فإن تحجيم أقرب جار ينتج تشوهات تدرج مسننة وكتلية على طول الحواف القطرية، مما يجعلها غير مناسبة تماماً للمحتوى الفوتوغرافي (رغم أنها ذات قيمة عالية للحفاظ على فن البكسل الكلاسيكي). ويحسن الاستيفاء ثنائي الخط (Bilinear) ذلك عن طريق حساب متوسط مرجح للمسافة عبر شبكة 2×2 من أقرب أربعة بكسلات محيطة. وفي حين يقضي التحجيم ثنائي الخط على التدرجات المسننة، فإنه يعمل كمرشح مكاني منخفض التردد، مما يطمس الأنسجة عالية التردد ويلين الخطوط الطباعية الواضحة.

يستخدم محركنا استيفاء ثنائي التكعيب (Bicubic) عالي الدقة، والذي يقيّم مصفوفة 4×4 من 16 بكسلاً محيطاً باستخدام كثيرات حدود الشريحة التكعيبية (مثل نوى Catmull-Rom أو Mitchell-Netravali). ومن خلال مراعاة كل من شدة البكسل المجاورة ومعدلات التغير اللوني المكاني (المشتقات)، تحافظ إعادة أخذ العينات ثنائية التكعيب على انتقالات الحواف الحادة، والأنسجة الدقيقة للبشرة، والتباين الطباعي الدقيق أثناء تقليص الحجم، مما يوفر أصولاً مرئية نقية وجاهزة للنشر دون تشويش باهت أو هالات رنين.

في بدايات تطوير الويب، كان كل بكسل منطقي في CSS يتوافق تماماً مع بكسل واحد في شاشة العتاد المادية (1x DPR). ومع ذلك، تهيمن على بيئات الحوسبة الحديثة الشاشات عالية الكثافة—بما في ذلك لوحات Apple Retina، وشاشات سطح المكتب بدقة 4K/5K، وشاشات الهواتف الذكية من نوع OLED—والتي تعمل بنسب بكسل للجهاز تبلغ 2x أو 3x أو أعلى. تتطلب لافتة hero المتجاوبة ذات عرض تخطيط CSS يبلغ 800 بكسل على شاشة مكتبية قياسية عرضاً مادياً قدره 1600 بكسل على شاشة Retina بدقة 2x وعرضاً مادياً قدره 2400 بكسل على شاشة هاتف رائدة بدقة 3x لتعرض بوضوح بصري فائق.

تقتضي هندسة أداء الويب الاحترافية ألا يقدم المطورون أبداً صورة موحدة واحدة تناسب الجميع لكافة الزوار. بدلاً من ذلك، تنشئ البنية الحديثة الموصى بها سلماً متعدد المستويات لنقاط التوقف المنظمة (يستهدف عادةً عروض 640 بكسل و 1024 بكسل و 1440 بكسل و 1920 بكسل) باستخدام أداة تغيير الحجم لدينا، وتخدمها عبر سمة HTML `srcset` المقترنة بتعريفات `sizes` الصريحة. يتيح ذلك للمحلل المسبق لمتصفح العميل تحديد وتنزيل الدقة الدقيقة المصممة خصيصاً لعرض إطار العرض وكثافة الشاشة وظروف الشبكة الخاصة بالزائر ديناميكياً، مما يضمن الكمال البصري دون إهدار كيلوبايت واحد من باقة البيانات الخلوية.

من المبادئ الأساسية في معالجة الإشارات الرقمية أن تقليص الحجم (Downscaling) والتكبير (Upscaling) هما عمليتان رياضيتان غير متماثلتين جذرياً. إن تقليص الحجم (decimation) هو عملية تقليل بيانات حيث يتم مزج ملايين من بكسلات الإدخال الزائدة رياضياً وضغطها في شبكة أكثر إحكاماً. ولأن المدخلات تحتوي على إنتروبيا ومعلومات عالية التردد أكثر بكثير مما يتطلبه الهدف الناتج، فإن تقليص الحجم عالي الجودة ينتج باستمرار نتائج حادة وكثيفة ومرضية بصرياً بشكل استثنائي، بشرط تطبيق تصفية مسبقة مناسبة لمنع التعرج لتجنب أنماط التموج (moiré) على الأقمشة الدقيقة أو الشبكات الهندسية.

في المقابل، يمثل التكبير (الاستيفاء) تحدياً في تركيب المعلومات. إذا قمت بتكبير صورة مصغرة بدقة 400×300 بكسل إلى 1920×1080 بكسل، فإن الخوارزمية ملزمة رياضياً بابتكار أكثر من 95% من إجمالي قيم البكسل من العدم. ورغم أن الاستيفاء ثنائي التكعيب يحسب تدرجات رياضية سلسة بين البكسلات الموجودة، فإنه لا يستطيع استحضار التفاصيل عالية التردد المفقودة مثل خصلات الشعر الفردية أو تفاصيل البناء المعماري البعيد أو ملامح المنتجات الدقيقة. إن تكبير الأصول منخفضة الدقة إلى أكثر من 125% إلى 150% من أبعادها الأصلية يؤدي حتماً إلى مظهر ناعم وضبابي يشبه ألوان الماء. لتصميم الويب الاحترافي، التقط دائماً أصولك المصدرية واقتصها بأعلى دقة متاحة، وقم بتغيير حجمها نحو الأسفل لتناسب مواصفات التخطيط المستهدفة.

تحدد نسبة العرض إلى الارتفاع العلاقة التناسبية بين العرض الأفقي والارتفاع الرأسي للصورة، معبراً عنها كنسبة (مثل 16:9 أو 1:1). يحدث أحد الأخطاء المرئية الأكثر شيوعاً في التسويق الرقمي عندما يجبر الكاتب صورة على التواجد في حاوية بنسبة عرض إلى ارتفاع غير متطابقة دون قفل التناسب، مما ينتج وجوهاً مسحوقة بشكل مشوه وطباعة متطاولة وشعارات شركات مشوهة. تتميز أداة تغيير الحجم لدينا بقفل تلقائي لنسبة العرض إلى الارتفاع يقوم باستمرار بحساب البعد المقترن الدقيق رياضياً أثناء الكتابة، مما يضمن السلامة الهندسية المطلقة.

عند تغيير حجم الأصول المرئية للنشر الرقمي متعدد القنوات، التزم بنسب العرض إلى الارتفاع القياسية في الصناعة: 16:9 (1920×1080) للافتات hero المكتبية وصور الفيديو المصغرة العريضة وشرائح العرض؛ و 1:1 (1080×1080 أو 2000×2000) لكتالوجات منتجات التجارة الإلكترونية ومعارض المتاجر المربعة ومنشورات Instagram؛ و 4:5 (1080×1350) لتحسين خلاصة وسائل التواصل الاجتماعي العمودية؛ و 9:16 (1080×1920) لقصص الهواتف المحمولة العمودية بملء الشاشة ومحتوى TikTok و reels؛ و 1.91:1 (1200×630) لبطاقات المشاركة الاجتماعية Open Graph على Facebook و LinkedIn و Twitter. وإذا كان أصلك المصدر لا يتطابق مع النسبة المستهدفة، فاستخدم أداة <a href="/ar/tools/image/crop/" class="text-brand-600 dark:text-brand-400 font-medium underline">قص الصور</a> أولاً لضبط التأطير قبل تنفيذ تغيير الحجم بالأبعاد.

من المفاهيم الخاطئة السائدة بين مصممي الويب المبتدئين أن تحميل صورة عملاقة بدقة 6000×4000 وتقييدها باستخدام CSS (`width: 100%; height: auto;`) يعادل تغيير حجم الصورة بشكل صحيح قبل الرفع. من وجهة نظر معمارية، فإن هذه الممارسة كارثية على أداء الويب وترتيبات السيو. فعند تقديم صورة كبيرة الحجم، يجب على جهاز الزائر تنزيل حمولة البيانات الكاملة متعددة الميغابايت عبر الشبكة، مما يحظر مسار العرض الحرج للمتصفح تماماً ويتسبب في توقيتات سيئة جداً لمقياس Largest Contentful Paint (LCP).

علاوة على ذلك، بمجرد التنزيل، يجب على محرك عرض المتصفح تخصيص ذاكرة خام غير مضغوطة في RAM للاحتفاظ بالصورة النقطية التي تم فك تشفيرها (المحسوبة كـ العرض × الارتفاع × 4 بايت لألوان RGBA ذات 32 بت). تتطلب صورة بدقة 24 ميغابكسل لم يتم تغيير حجمها ما يقرب من 100 ميغابايت من ذاكرة كومة المتصفح (heap) الخام لمجرد فك التشفير، مقارنة بأقل من 4 ميغابايت لأصل تم تغيير حجمه بشكل صحيح إلى 1200 بكسل. على الأجهزة المحمولة منخفضة المواصفات، يؤدي هذا التخصيص المفرط للذاكرة إلى تشغيل جمع القمامة (garbage collection) القسري، وتعثر تفاعلات اللمس، وتدهور التفاعل مع الطلاء التالي (INP)، وكثيراً ما يتسبب في تعطل علامة تبويب المتصفح. إن تغيير حجم أصولك مسبقاً باستخدام أداتنا من جانب العميل يلغي عقوبة الأداء هذه بالكامل قبل أن تصل وسائطك إلى خادم الإنتاج أصلاً.