ضغط الصور لأداء الويب: دليل شامل
تشكل الصور معظم وزن صفحة الويب المتوسطة — غالبًا 50% أو أكثر. ضغطها هو الإصلاح الأدائي الأعلى أثرًا الذي يمكن لمعظم المواقع إجراؤه، ولا يكلف شيئًا.
يغطي هذا الدليل الصيغ والإعدادات والتقنيات التي تعمل فعلًا.
لماذا يهم حجم الصور
كل كيلوبايت من الصور هو وقت تحميل، خاصةً على الأجهزة المحمولة. يُظهر بحث Google أن تقليل وزن الصفحة يحسّن مباشرةً درجات Core Web Vitals والترتيب. الصور الصغيرة تقلل أيضًا فاتورة النطاق الترددي وبصمتك الكربونية.
اختر الصيغة الصحيحة أولًا
استخدم WebP كخيارك الافتراضي، وAVIF للصور الفوتوغرافية عندما تريد أصغر الملفات. أبقِ PNG فقط للاحتياجات دون فقدان الجودة. اختيار الصيغة أهم من أي إعداد جودة.
استخدم منزلقات الجودة، لا النسب المئوية
جودة 75–80 لـ WebP وJPG تبدو رائعة على الشاشة. الانتقال من 90 إلى 75 يقلل حجم الملف غالبًا إلى النصف دون فرق مرئي. قارن دائمًا النتيجة بالأصل.
غيّر الحجم قبل الضغط
ضغط صورة بدقة 4000px تُعرض بحجم 800px يهدر معظم بايتاتك. غيّر الحجم إلى أكبر حجم ستعرض به، ثم اضغط. عادةً ما يقلل هذا المزيج الحجم بنسبة 70–90%.
استخدم التحميل الكسول وعنصر picture
حمّل الصور خارج الشاشة بشكل كسول، واستخدم عنصر picture لتقديم AVIF أو WebP مع بديل JPEG. معًا مع الضغط، تجعل هذه الصور شبه مجانية.
اضغط كل صورة، واستخدم WebP أو AVIF، وغيّر الحجم إلى حجم العرض، وحمّل بشكل كسول. يمكن لهذه العادات الأربع أن تقلل وزن صفحتك إلى النصف. أدوات الضغط لدينا في المتصفح تفعل أول خطوتين نيابة عنك في ثوانٍ.