تحسين الصور للويب: كيف تجعل صورك أخف بخمس مرات دون أن يلاحظ أحد؟

صورة واحدة من كاميرا هاتف حديث قد تتجاوز 4 ميغابايت بأبعاد 4000×3000 بكسل. ارفعها كما هي إلى صفحة منتج، وسيضطر زائر يتصفح من جواله عبر شبكة 4G متوسطة إلى انتظار ثوانٍ قبل أن يراها، بينما الشاشة نفسها لا تعرض أكثر من 400 بكسل عرضًا. تحسين الصور هو عادةً أسرع وأرخص طريقة لتسريع الموقع، ولا يحتاج إلى مطوّر.

اختر الصيغة المناسبة

قاعدة عملية: الصور الفوتوغرافية بصيغة WebP أو AVIF، والشعارات والأيقونات بصيغة SVG. يمكنك تحويل صورك الحالية عبر محوّل WebP.

المقاس قبل الضغط

أكبر خطأ هو رفع صورة أكبر بكثير مما يُعرض. احسب العرض الفعلي:

• بانر بعرض الشاشة: 1600–1920 بكسل للحواسيب، مع نسخة أصغر للجوال.
• صورة داخل مقال: بعرض عمود المحتوى، غالبًا 800–1200 بكسل.
• صورة منتج: 1000–1200 بكسل للعرض المكبّر، ونسخة 300–400 بكسل للقوائم.
• الصور المصغرة: بعرض ظهورها مضروبًا في 2 للشاشات عالية الكثافة.

غيّر الأبعاد عبر أداة تغيير حجم الصور قبل الضغط. صورة بعرض 4000 بكسل ثم مضغوطة تبقى أثقل بكثير من صورة 1200 بكسل بالجودة نفسها.

الضغط: أين التوازن؟

• ضغط بفقدان (lossy): يزيل تفاصيل دقيقة. جودة 75–85 في JPEG أو WebP لا يلاحظ فرقها معظم الناس.
• ضغط دون فقدان (lossless): يحذف البيانات الزائدة فقط (مثل بيانات EXIF) دون تغيير البكسلات.

مثال واقعي لصورة منتج:

الأرقام تختلف حسب الصورة، لكن الاتجاه ثابت: التخفيض يكون من عشرات المرات. جرّب ذلك على صورك عبر أداة ضغط الصور التي تعمل في متصفحك دون رفع الصور إلى خادم.

الصور المتجاوبة

لا معنى لإرسال صورة 1600 بكسل إلى هاتف شاشته 400 بكسل. استخدم srcset وsizes ليختار المتصفح النسخة المناسبة:

<img src="/img/product-800.webp"
     srcset="/img/product-400.webp 400w,
             /img/product-800.webp 800w,
             /img/product-1200.webp 1200w"
     sizes="(max-width: 600px) 100vw, 600px"
     width="1200" height="900"
     alt="Black abaya with gold embroidery">

وإن أردت تقديم AVIF مع احتياط للمتصفحات القديمة، استخدم <picture>:

<picture>
  <source srcset="/img/hero.avif" type="image/avif">
  <source srcset="/img/hero.webp" type="image/webp">
  <img src="/img/hero.jpg" width="1600" height="700" alt="Store front">
</picture>

معظم منصات المتاجر وأنظمة إدارة المحتوى الحديثة (ووردبريس، Shopify، وغيرها) تولّد هذه النسخ تلقائيًا؛ دورك أن ترفع صورة أصلية معقولة الأبعاد.

التحميل الكسول والأولوية

• loading="lazy" يؤجل تحميل الصورة حتى يقترب الزائر منها. استخدمه لكل الصور أسفل الجزء الظاهر.
• لا تستخدمه للصورة الأولى الظاهرة (البانر أو صورة المنتج الرئيسية)، بل أضف لها fetchpriority="high".
• حدّد width وheight دائمًا ليحجز المتصفح المساحة مسبقًا، وإلا اهتزت الصفحة عند ظهور الصورة، وهذا يضر مؤشر CLS. التفاصيل في دليل Core Web Vitals.

النص البديل (alt)

النص البديل ليس للسيو فقط؛ إنه ما يقرؤه قارئ الشاشة للمكفوفين، وما يظهر إن فشل تحميل الصورة. اكتبه بالعربية في المواقع العربية، وصِف الصورة بجملة قصيرة مفيدة: “عباية سوداء بتطريز ذهبي على الأكمام” أفضل من “صورة1” أو تكرار الكلمة المفتاحية. للصور الزخرفية البحتة استخدم alt="" فارغًا.

أخطاء شائعة

• رفع صور الكاميرا كما هي، ثم تصغيرها بـ CSS.
• حفظ الصور الفوتوغرافية بصيغة PNG.
• شعار بصيغة JPEG بحواف ضبابية بدل SVG.
• سلايدر من خمس صور ضخمة يحمّل كلها فورًا.
• صور GIF متحركة بحجم عدة ميغابايت بدل فيديو قصير.
• ترك بيانات EXIF بما فيها موقع GPS في صور يلتقطها الموظفون من المنزل.

الصور في ووردبريس والمتاجر

• ووردبريس يولّد تلقائيًا عدة مقاسات لكل صورة مرفوعة ويضيف srcset، ويضيف loading="lazy" لمعظم الصور. ما زال عليك رفع أصل معقول الأبعاد (مثلًا 2000 بكسل كحد أقصى) لا ملف الكاميرا الكامل.
• إضافات التحسين تضغط الصور وتحوّلها إلى WebP أو AVIF عند الرفع. اختر واحدة فقط، وتأكد أنها تحتفظ بالأصل في حال أردت التراجع.
• منصات المتاجر (Shopify وغيرها) تقدم الصور عبر CDN بصيغ حديثة تلقائيًا، لكنها لا تصلح صورة منتج التُقطت بإضاءة سيئة أو بخلفية مزدحمة. جودة التصوير نفسها جزء من سرعة اتخاذ قرار الشراء.

الخلفيات والأيقونات والرسوم

• الأيقونات المتعددة في ملفات PNG منفصلة تزيد عدد الطلبات؛ استخدم SVG مضمّنًا أو مجموعة أيقونات SVG.
• صور الخلفية في CSS لا تستفيد من srcset ولا من loading="lazy"، فاجعلها صغيرة أو استبدلها بتدرج لوني CSS عند الإمكان.
• الرسوم البيانية والإنفوجرافيك تبقى غالبًا أوضح وأخف بصيغة SVG أو PNG مضغوط من JPEG.

كم أوفّر فعليًا؟

متجر بصفحة فئة تعرض 24 منتجًا، كل صورة مصغرة فيها 400 كيلوبايت، يحمّل نحو 9.6 ميغابايت من الصور فقط. بعد تحويلها إلى WebP بعرض 400 بكسل ووزن 35 كيلوبايت تقريبًا، يصبح المجموع نحو 0.84 ميغابايت؛ أي توفير يزيد على 90% في الصفحة نفسها، وهو ما يشعر به كل زائر على الجوال.

قائمة تحقق

• الصور الفوتوغرافية بصيغة WebP أو AVIF، والشعارات والأيقونات SVG.
• الأبعاد قريبة من أقصى عرض معروض (مع مضاعفة للشاشات عالية الكثافة).
• جودة الضغط 75–85، والصور الكبيرة في حدود 100–250 كيلوبايت.
• srcset للصور الكبيرة، وwidth وheight لكل صورة.
• loading="lazy" لما تحت الجزء الظاهر فقط، وfetchpriority="high" لصورة LCP.
• نص بديل وصفي بالعربية.

لمزيد من خطوات التسريع بعد الصور، راجع دليل تسريع المواقع.