هذا المقال يتطلب مستوى: مبتدئ
ضغط صور الويب: ليه صفحتك بتاخد 6 ثواني وإزاي تنزّلها لثانية
لو موقعك بطيء وانت مش عارف ليه، ابدأ من الصور. في أغلب المواقع الصور بتاكل 50% أو أكتر من حجم الصفحة. تحويل بسيط للصيغة يقدر ينزّل حجم صفحتك من 5.8 ميجابايت لـ 720 كيلوبايت، وزمن الظهور من 6 ثواني لثانية واحدة. هنا هتتعلم إزاي بالظبط.
المشكلة باختصار
تخيّل إنك رايح سفر ومعاك شنطة. تقدر تحط هدومك مطويّة بعناية فتاخد ربع المساحة، أو ترميها مبعثرة فتملى الشنطة كلها. الصورة على الويب زيّها بالظبط: نفس المنظر ممكن يتخزّن في ملف كبير أو ملف صغير حسب طريقة "الطي"، يعني حسب الصيغة وطريقة الضغط.
علميًا: صيغة الصورة هي الخوارزمية اللي بتحوّل بكسلات الصورة لبايتات على القرص. الصيغ القديمة زي JPEG وPNG اتصممت من التسعينات. الصيغ الحديثة زي WebP وAVIF بتستخدم ضغط أذكى بيوصل لنفس الجودة تقريبًا بحجم أقل بكتير. الافتراض هنا إنك بتخدم صور فوتوغرافية على موقع حقيقي (متجر أو مدونة)، مش أيقونات أو رسومات vector.
الصيغة الصح: WebP وAVIF بدل JPEG وPNG
ركز في الأرقام دي لنفس الصورة الواحدة:
- PNG: حوالي 3.1 ميجابايت.
- JPEG: حوالي 1.2 ميجابايت.
- WebP: حوالي 340 كيلوبايت (أصغر من JPEG بنحو 72%).
- AVIF: حوالي 210 كيلوبايت (أصغر من PNG بنحو 93%).
بدل ما تفضل شايل JPEG تقيل، حوّل صورك لـ WebP على الأقل. WebP مدعوم دلوقتي في كل المتصفحات الحديثة تقريبًا (فوق 95% من المستخدمين). AVIF أصغر أكتر لكن دعمه أقل شوية وترميزه أبطأ.
التحويل نفسه سطر واحد في التيرمينال. أداة cwebp بتيجي مع مكتبة libwebp:
# حوّل صورة JPEG لـ WebP بجودة 80 (توازن ممتاز بين الحجم والجودة)
cwebp -q 80 product.jpg -o product.webp
# وحوّلها كمان لـ AVIF لو عايز أصغر حجم ممكن
avifenc --min 20 --max 30 product.jpg product.avifجودة 80 مناسبة لأغلب الحالات. العين البشرية بالكاد بتفرق بينها وبين الأصل، لكن الحجم بينزل للربع.
خلّي المتصفح يختار: وسم picture
مثال بسيط الأول: تخيّل نادل شاطر بيقدّم لكل زبون الأكل اللي بيحبه. الزبون اللي بيحب AVIF بياخد AVIF، واللي متصفحه قديم بياخد JPEG العادي. وسم <picture> بيعمل نفس الحكاية: بيقدّم أحدث صيغة يفهمها المتصفح، ويرجع للصيغة القديمة كأمان.