لماذا تبطئ الصور الكبيرة موقعك، وكيف تحافظ على الجودة عند تغيير حجمها
ملف كبير يعني تنزيلًا أبطأ وفك ترميز أثقل وعرضًا متأخرًا. هذا الدليل يشرح ما يحدث داخل المتصفح، وكيف تغيّر حجم الصورة بشكل صحيح.
قد تبدو الصورة سريعة على جهازك لأن اتصالك قوي، لكن هذا لا يعني أن كل زائر سيحصل على التجربة نفسها. الملف الكبير يمر بثلاث مراحل مكلفة قبل أن يراه المستخدم فعليًا.
المرحلة الأولى: تنزيل الملف
كلما زاد حجم الملف، زادت البيانات التي يحتاج المتصفح نقلها. سرعة الشبكة ليست ثابتة لكل الزوار، وقد يعمل الهاتف عبر اتصال مزدحم أو محدود.
المرحلة الثانية: فك الترميز
بعد وصول الملف، يفك المتصفح ترميزه ويحوّله إلى بيانات قابلة للعرض. الصور كبيرة الأبعاد تحتاج ذاكرة وعملًا أكثر من صورة صغيرة، حتى لو تقارب حجم الملف المضغوط. لذلك قد يكون ملفان متقاربان في حجم النقل، لكن الأكبر أبعادًا أثقل على معالج الهاتف.
المرحلة الثالثة: العرض
إذا كانت الصورة أكبر بكثير من مساحة العرض، فقد نُقلت بيانات لا يحتاجها المستخدم أصلًا. لذلك تحسين الأبعاد لا يقل أهمية عن ضغط الملف — وكثير من التحسن يأتي من عدم إرسال ملف أكبر من مساحة العرض من الأساس.
الصورة الرئيسية أولوية مختلفة
الصورة التي تظهر فور فتح الصفحة (وغالبًا ما تكون عنصر Largest Contentful Paint في مقاييس Core Web Vitals) جزء من الانطباع الأول، فلا تعاملها مثل صورة أسفل المقال. التحميل الكسول (Lazy Loading) مفيد للصور البعيدة عن نافذة العرض، لكنه قد يكون غير مناسب للصورة الرئيسية التي تريد ظهورها بسرعة — استخدمه حسب مكان الصورة ودورها، لا آليًا على كل شيء.
القسم الثاني: تغيير الحجم دون تشويه أو فقدان جودة
حافظ على نسبة الأبعاد
أكثر خطأ شائع هو تغيير العرض والارتفاع بشكل مستقل، فتبدو الوجوه والأشكال ممدودة أو مضغوطة. إذا كانت الصورة الأصلية 1600×1000، فتغيير العرض إلى 800 مع الحفاظ على النسبة يعطي ارتفاعًا يقارب 500. فرض 800×800 يشوّه الصورة ما لم تُقص بدل أن تُمدّد.
التصغير أسهل من التكبير
عند تصغير صورة، توجد معلومات أكثر من الحاجة يمكن دمجها. عند تكبير صورة صغيرة، تحتاج الخوارزمية إلى تقدير بكسلات جديدة غير موجودة أصلًا، فتظهر نعومة أو فقدان تفاصيل. لذلك ابدأ دائمًا من الأصل عالي الدقة عند إنشاء نسخة جديدة، ولا تستخدم ملفًا سبق تصغيره كمصدر لنسخة أكبر.
متى تستخدم القص بدل التمديد؟
إذا كانت المنصة أو التصميم يتطلب نسبة أبعاد محددة تختلف عن الصورة الأصلية، فالقص للحفاظ على الشكل الطبيعي للعنصر أفضل من تمديد العرض والارتفاع بشكل مستقل. اختر منطقة القص التي تحافظ على العنصر الأساسي، ثم غيّر الحجم النهائي.
خطة تشخيص عملية
- حدد أكبر الصور وأثقلها في الصفحة عبر أدوات المطور في المتصفح.
- قارن أبعادها الفعلية بمساحة العرض الحقيقية.
- افحص حجم الملفات بعد الضغط، واختبر صيغة مناسبة، وقارن النتيجة بصريًا.
- راجع الصور أسفل الشاشة وهل تستحق تحميلًا فوريًا أم كسولًا.
- اختبر الصفحة على هاتف متوسط، لا على جهاز تطوير قوي فقط.
يمكنك تغيير الأبعاد ومقارنة الحجم مباشرة عبر أداة ضوء قبل نشر أي صورة.