ضغط JPG للويب

في صفحة محتوى نموذجية، تمثل الصور معظم البايتات المنقولة، وغالبًا ما تكون الأكبر عنصر Largest Contentful Paint — المقياس الذي يقيس Core Web Vitals مباشرة. صورة رئيسية تصل متأخرة بنصف ثانية تحرك LCP بنصف ثانية، وLCP فوق 2.5 ثانية هو الحد الذي تتوقف عنده الصفحة عن الاعتبار جيدة.

الخطأ الأكثر شيوعًا هو تقديم الملف مباشرة من الكاميرا أو المصمم. صورة JPEG بحجم 4000 بكسل و5 ميغابايت معروضة في حاوية 1200 بكسل تنقل بيانات أكثر بحوالي عشرين مرة مما يمكن للتصميم عرضه. يقلّص المتصفح حجمها عند الوصول، لذا ينتظر الزائر تفاصيل تُحذف قبل حتى الرسم.

تقع جودة 78 قبل النقطة التي تصبح فيها تشوهات JPEG ملحوظة في المحتوى الفوتوغرافي مباشرة، وتغطي 1920 بكسل العرض بعرض كامل في الغالبية العظمى من الشاشات. معًا، عادةً ما تقلصان صورة رئيسية إلى أقل من 300 كيلوبايت. رفع الجودة أكثر يكلف دقة مرئية مقابل وزن قليل نسبيًا؛ رفع الأبعاد أكثر يبدأ بالظهور ناعمًا على الشاشات عالية الكثافة.

لكن الضغط جزء واحد فقط من الحل، والباقي هو الترميز. حدّد سمات width وheight الصريحة حتى يتمكن المتصفح من حجز المساحة وتجنب انزياح التخطيط، أضف loading="lazy" لكل ما هو أسفل العرض الأولي، ودع الصورة الوحيدة التي هي عنصر LCP تُحمَّل فورًا. تقديم صيغة حديثة إلى جانب JPEG عبر عنصر picture عادةً ما يكون التحسين الأكبر التالي بعد هذه الخطوة.