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

كيف يعمل تغيير حجم الصور في المتصفح

كل عملية تغيير حجم هي خط معالجة قصير يعمل كليًا بـ JavaScript. لا تُنزَّل أي مكتبة ترميز ولا يُستعان بأي خادم. تتولى Canvas API الأصلية للمتصفح فك ترميز الملف وإعادة رسمه بالحجم المطلوب وإعادة ترميزه في الذاكرة، ثم تُسلِّمك Blob يمكن للصفحة معاينته أو ضغطه في ملف ZIP. ولأن كل خطوة تجري داخل بيئة التبويب المعزولة، لا تصل الملفات الأصلية أبدًا إلى الشبكة.

1. يقرأ كل ملف مُسقَط بوصفه Blob وينشئ عنوان URL للكائن لكي يتمكن المتصفح من فك ترميزه محليًا دون نسخ بايتات إلى خادم أو كتابتها على القرص.
2. يحسب الأبعاد المستهدفة بحسب الوضع المختار — تقييد الجانب الأطول، أو عرض وارتفاع محددان، أو نسبة مئوية. يُبقي قفل نسبة العرض إلى الارتفاع التناسبَ صحيحًا عند تعديل حقل واحد.
3. ينشئ عنصر Canvas خارج الشاشة بالحجم المستهدف ويستدعي ctx.drawImage(source, 0, 0, width, height) لإعادة رسم وحدات البكسل. يتولى المتصفح عملية الاستيفاء التي تُنعِّم نتيجة التحجيم.
4. يستدعي canvas.toBlob لإعادة الترميز بتنسيق المصدر. يبقى PNG بلا ضياع، ويُعاد ترميز JPEG و WebP بإعداد جودة عالٍ فيبدو الفرق عن الأصل شبه غير ملحوظ. ثم تعرض الصفحة بطاقة قبل/بعد وتتيح تنزيلًا منفردًا أو ملف ZIP مُنشأ في الذاكرة باستخدام fflate.

لماذا تُغيِّر حجم الصور؟

• الصور ذات الأبعاد الكبيرة هي السبب الأكثر شيوعًا لبطء الصفحات. صورة هاتف بأبعاد 4000×3000 مُدرجة مباشرةً في تخطيط عرضه 600 بكسل تحمل نحو أربعين ضعفًا من البكسلات التي تستطيع الشاشة عرضها. تقييد الجانب الأطول بـ 1600 بكسل قبل الرفع يُقلِّص وزن الصفحة بشكل كبير ويُحسِّن مقياس LCP في Core Web Vitals.
• نماذج الرفع تفرض أبعادًا محددة. خانات الصور الشخصية، وبوابات صور الهوية، وقوائم المنصات التجارية، وبطاقات OG الاجتماعية تطلب أحجامًا بكسلية دقيقة: 1200×630 لبطاقة Open Graph، و512×512 لأيقونة التطبيق، و150×150 للصورة المصغرة. تطابق الرقم بدقة ويوفِّر عليك دورة الرفع المرفوض.
• أدوات البريد الإلكتروني والدردشة تُعيد ضغط الملفات الكبيرة بصمت مما قد يُتلف لقطة شاشة نظيفة. تغيير الحجم إلى عرض معقول بنفسك يُبقي النتيجة قابلة للتنبؤ بدلًا من تركها لخط ضغط بالفقدان لا تتحكم فيه.
• التناسق في الدُّفعات ضروري للمعارض والكتالوجات. تشغيل مجلد من صور بأحجام مختلطة على هدف 800×800 موحَّد يجعل كل بطاقة تنتظم في الشبكة دون صورة ضخمة شاردة تُخل بالتخطيط.

التطبيقات الشائعة

يظهر تغيير الحجم كلما لا تتطابق الأبعاد المصدر مع توقعات الوجهة. ثلاثة أنماط تتكرر مرارًا.

• إعداد صور المنتجات لمتجر Shopify أو WooCommerce. مجلد من أصول الكاميرا بعرض 4000 بكسل يُقيَّد بجانب أطول مقداره 1600 بكسل لكي يُحمَّل المتجر بسرعة مع بقاء نسبة العرض إلى الارتفاع سليمةً دون تشويه.
• إنشاء أصول اجتماعية وتطبيقية من ملف رئيسي واحد. اضبط 1200×630 بالضبط لبطاقة Open Graph، ثم 512×512 لأيقونة التطبيق، وصدِّر كلًا منها بنقرتَين دون فتح محرر ثقيل.
• تصغير دُفعة من لقطات ضمان الجودة أو الدعم قبل إرفاقها بتذكرة. تحجيم مجلد من 50 لقطة إلى 50% يُقلِّص حجم الأرشيف عادةً بنحو ثلاثة أرباع قبل إرساله إلى نظام تتبع الأخطاء.

مثال عملي: صورة 4000 بكسل إلى 1600 بكسل لصفحة ويب

صورة بأبعاد 4000×3000 مباشرةً من الهاتف هي حِمل شائع أكبر بكثير مما تحتاجه أي صفحة ويب. وهي معيار عادل لما يوفِّره تغيير الحجم.

أسقط الصورة في منطقة الرفع، اترك الوضع على تقييد الجانب الأطول، واضبط القيمة على 1600. يُعيد خط Canvas رسم الصورة بأبعاد 1600×1200 مع الحفاظ على النسبة، ثم يُعيد ترميزها بالتنسيق الأصلي. تعرض بطاقة المخرج الأبعاد الجديدة وحجم الملف الذي ينخفض لصورة JPEG نموذجية من عدة ميغابايتات إلى بضع مئات من الكيلوبايتات. انقر تنزيل على البطاقة للحصول على الملف المنفرد، أو انقر تنزيل .zip إن غيَّرت حجم عدة صور في مرة واحدة. الرحلة كاملةً من الإسقاط إلى التنزيل تستغرق جزءًا من الثانية ولا تستهلك أي نطاق ترددي بعد تحميل الصفحة نفسها.

ما أوضاع تغيير الحجم المتاحة؟

ثلاثة أوضاع. تقييد الجانب الأطول يُقيِّد أكبر قيمة بين العرض والارتفاع بقيمة بكسلية ويُكيِّف الجانب الآخر تلقائيًا؛ وهو الخيار الافتراضي الآمن لأنه لا يُشوِّه الصورة أبدًا. عرض × ارتفاع محدد يسمح بإدخال الرقمَين، مع قفل للنسبة يُعيد حساب الحقل الثاني من نسبة المصدر عند تعديل الأول — أوقف القفل حين تطلب الاستمارة حجمًا غير متناسب بالضبط. التحجيم بنسبة مئوية يضرب كلا البُعدَين في معامل واحد، وهو مناسب لتقليص أو مضاعفة دفعة كاملة دفعةً واحدة. ستة إعدادات مسبقة بنقرة واحدة (من 1920×1080 حتى صورة مصغرة 150×150) تغطي الأهداف الأكثر شيوعًا.

هل تجري العملية على جهازي؟

نعم، بالكامل. تستخدم الصفحة Canvas API الأصلية للمتصفح وWeb File API لفك الترميز وإعادة الرسم وإعادة الترميز لكل صورة في الذاكرة. لا تُرسَل أي بيانات صور إلى خادم، ولا رفع مؤقت، ولا جولة سحابية. يمكنك التحقق بنفسك: افتح DevTools، انتقل إلى لوحة Network، ونفِّذ عملية تغيير حجم. الطلبات الصادرة الوحيدة التي ستراها هي تحميل الصفحة الأول وطلبات الإعلانات. لا شيء يشبه الصور يغادر التبويب، وهذا ما يجعله آمنًا للهويات الممسوحة ضوئيًا والصور الطبية وغيرها من المواد التي لا تريد رفعها أبدًا.

هل يُقلِّل تغيير الحجم من الجودة؟

تصغير الصورة (التحجيم لأسفل) يبدو ممتازًا — يُوسِّط المتصفح البكسلات المصدر في بكسلات أقل فتبقى التفاصيل واضحة ويصغر الملف كثيرًا. تكبير الصورة فوق دقة المصدر (التحجيم لأعلى) لا يستطيع اختراع تفاصيل لم تُلتقَط أصلًا، لذا ستبدو الصورة الصغيرة ضبابيةً عند التكبير؛ وهذا قيد في كل مُغيِّرات الحجم لا في هذا وحده. تحافظ المخرجات على تنسيق المصدر: PNG يبقى بلا ضياع، بينما يُعاد ترميز JPEG و WebP بإعداد جودة عالٍ يصعب معه اكتشاف الفرق البصري عن الأصل.

ما صيغ الملفات المدعومة؟

من جهة المدخلات، يُقبَل أي تنسيق يستطيع المتصفح فك ترميزه: PNG و JPEG و WebP و GIF و BMP تغطي تقريبًا كل ملف تُنتجه الهواتف والكاميرات وأدوات لقطات الشاشة. تُحافظ المخرجات على تنسيق المصدر حيث يدعمه مُشفِّر Canvas — يمر PNG و JPEG و WebP مباشرةً. GIF و BMP اللذان تستطيع Canvas API فك ترميزهما لكن لا تستطيع إعادة ترميزهما يُحفَظان بصيغة PNG بلا ضياع بدلًا من ذلك. يتضمن اسم الملف المُغيَّر الحجم الأبعاد الجديدة (مثال photo-1600x1200.jpg) لكي تظل الدُّفعة سهلة الترتيب.

أسقط صورك، اختر حجمًا، غيِّر الأبعاد. كل شيء يعمل في تبويبك — دون رفع، ودون حساب، ودون انتظار خادم.