هذا المقال يتطلب مستوى: مبتدئ

ضغط صور الويب: ليه صفحتك بتاخد 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> بيعمل نفس الحكاية: بيقدّم أحدث صيغة يفهمها المتصفح، ويرجع للصيغة القديمة كأمان.

<picture>
  <source srcset="product.avif" type="image/avif">
  <source srcset="product.webp" type="image/webp">
  <img src="product.jpg" alt="حذاء رياضي أحمر"
       width="800" height="600" loading="lazy">
</picture>

المتصفح بيقرا من فوق لتحت وياخد أول صيغة يدعمها. كده مستخدم كروم الحديث بياخد AVIF الصغير، ومستخدم متصفح قديم بياخد JPEG وميحصلش عنده أي كسر في الصفحة.

التحميل الكسول: lazy loading

ليه تحمّل صورة الزبون لسه شايفهاش؟ لو صفحتك فيها 24 صورة والمستخدم بيشوف 3 بس في أول شاشة، تحميل الـ 21 الباقيين وقت فتح الصفحة هدر. التحميل الكسول بيأجّل تحميل الصورة لحد ما المستخدم يقرّب منها بالتمرير.

الحل كلمة واحدة: loading="lazy" على وسم <img>. بس انتبه لقاعدة مهمة: متعملش lazy للصورة الكبيرة في أول الصفحة (صورة الغلاف)، لأنها هي أهم صورة وتأجيلها بيبطّئ ظهور الصفحة. خليها loading="eager" والباقي lazy.

ولاحظ إني حاطط width وheight في الكود. ده بيمنع الصفحة من الاهتزاز والقفز وقت تحميل الصور، وبيحسّن تجربة المستخدم بشكل ملموس.

سيناريو واقعي بالأرقام

لو عندك متجر بـ 24 ألف زيارة في اليوم، وصفحة المنتج فيها 24 صورة بصيغة JPEG وPNG بحجم إجمالي 5.8 ميجابايت. بعد ما تحوّلهم لـ AVIF/WebP وتضيف التحميل الكسول:

• حجم الصفحة نزل من 5.8 ميجابايت لـ 720 كيلوبايت (توفير 88%).
• زمن ظهور أكبر عنصر (LCP) نزل من 6.2 ثانية لـ 1.1 ثانية.
• مع 24 ألف زيارة، ده معناه توفير حقيقي في تكلفة الـ bandwidth كمان.

الـ trade-offs اللي لازم تعرفها

مفيش حل مجاني بالكامل. لكل مكسب تكلفته:

• AVIF أصغر، بس ترميزه أبطأ. تحويل صورة لـ AVIF ممكن ياخد ثواني بدل أجزاء من الثانية. لو بتحوّل آلاف الصور، حط ده في حسابك.
• الجودة العالية جدًا (q قريب من 100) بتلغي المكسب. ابدأ من 80 واطلع لو محتاج، متبدأش من فوق.
• الوسم picture بيزوّد كود HTML. مقابل ده بتكسب توافق كامل مع المتصفحات القديمة. المكسب أكبر من التكلفة في أغلب الحالات.

متى متتعبش نفسك

مش كل موقع محتاج ده. سيبها لو:

• صورك أيقونات أو شعارات بسيطة — استخدم SVG، هو أصغر وأوضح للرسومات.
• موقعك كله نص وصورة أو اتنين — التحسين مش هيفرق كتير.
• عندك بالفعل CDN بيحوّل الصور تلقائيًا (زي Cloudflare Images أو Imgix) — الشغل ده بيتعمل لك أوتوماتيك.

الخطوة التالية

خطوة واحدة واضحة دلوقتي: افتح أكبر صورة في صفحتك الرئيسية، وحوّلها لـ WebP بالأمر cwebp -q 80، وقارن الحجم قبل وبعد. لو نزل الحجم للنص أو أقل، انت على الطريق الصح — كرّرها على باقي الصور وضيف وسم picture. لو مش عايز تيرمينال، استخدم أداة Squoosh من جوجل مباشرة من المتصفح.

المصادر

• web.dev — Serve images in modern formats: https://web.dev/articles/serve-images-webp
• MDN — عنصر <picture>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
• MDN — Lazy loading: https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
• web.dev — Optimize Largest Contentful Paint: https://web.dev/articles/optimize-lcp
• Can I use — دعم AVIF وWebP: https://caniuse.com/avif
• Squoosh — أداة ضغط الصور من جوجل: https://squoosh.app