ضغط صور الموقع: كيف تقللها دون أن تفقد جودتها

ضغط صور الموقع هو أرخص تحسين في السرعة وأكبرها أثراً: اختر الصيغة الصحيحة، صغّر المقاس قبل الرفع، اضبط الجودة بين ٧٥ و٨٥، وحدد الأبعاد في الكود. الفرق بين صورة بثلاثة ميجابايت وأخرى بمئتي كيلوبايت لا تراه العين، لكن الزائر على بيانات الجوال يراه في زمن التحميل.

لماذا الصور هي السبب الأول لبطء المواقع؟

الصور عادةً أثقل ما تحمّله الصفحة. النص والكود يُقاسان بالكيلوبايت، وصورة واحدة من كاميرا هاتف حديث قد تتجاوز عدة ميجابايت. وحين تُرفع كما هي، تصبح أثقل من كل ما على الصفحة مجتمعاً.

والأسوأ أن الصورة الثقيلة تجلس غالباً في أعلى الصفحة، فهي أكبر عنصر مرئي وأول ما ينتظره الزائر. تأخيرها يترك الصفحة فارغة ثوانٍ إضافية. اقرأ كيف تستفيد من موقعك لتربط هذا بالنتيجة التجارية، فمن يغادر قبل التحميل لم يرَ عرضك.

ما الفرق بين صيغ الصور ومتى تستعمل كل واحدة؟

القاعدة العملية في ضغط صور الموقع: الصور الفوتوغرافية تخرج WebP أو AVIF، والشعارات والأيقونات SVG، وPNG للحالات التي تحتاج شفافية دقيقة فقط.

ضغط صور الموقع مع فقد أم بدون فقد؟

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

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

المقاس الصحيح قبل الرفع

أكثر خطأ نراه: رفع صورة بعرض ٤٠٠٠ بكسل لمساحة لا تتجاوز ٨٠٠ بكسل. المتصفح يحمّل الملف كاملاً ثم يصغّره، فتدفع ثمن بيانات لا يراها أحد.

• صورة الهيرو بعرض الشاشة يكفيها عرض ١٦٠٠ إلى ٢٤٠٠ بكسل.
• صورة داخل مقال يكفيها ضعف عرض مساحتها لتظل حادة على الشاشات عالية الكثافة.
• صورة مصغرة في قائمة يكفيها مئات البكسلات القليلة، لا نفس ملف الصفحة الكبيرة.
• الشعار لا يحتاج مقاساً إن كان SVG.

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

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

الهاتف والشاشة الكبيرة لا يحتاجان الملف نفسه. سمة srcset تجعلك ترفع عدة مقاسات للصورة الواحدة، ويختار المتصفح ما يناسب عرض الشاشة وكثافتها قبل التحميل.

أغلب أنظمة إدارة المحتوى تولّد هذه المقاسات تلقائياً عند الرفع، لكنها تحتاج ضبطاً حتى تولّد ما يستعمله قالبك فعلاً لا مقاسات افتراضية لا يطلبها أحد. راجع مكونات الموقع الإلكتروني لتعرف أي الأجزاء تحمل صوراً تحتاج هذا الضبط.

التحميل المؤجل ومتى لا تستعمله؟

التحميل المؤجل يعني ألا تُحمَّل الصورة حتى يقترب الزائر منها بالتمرير. فائدته واضحة في الصفحات الطويلة وصفحات المنتجات، لأن من يقرأ أول قسم لم يطلب عشرين صورة بعده.

والاستثناء المهم: لا تؤجل صورة الهيرو ولا أي صورة تظهر في الشاشة الأولى. تأجيلها يؤخر أكبر عنصر مرئي فيتأخر ظهور الصفحة، وهو عكس المطلوب تماماً. القاعدة: الشاشة الأولى تُحمّل فوراً، وما بعدها يؤجَّل.

تحديد الأبعاد في الكود لمنع قفز التخطيط

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

الحل أن تحمل كل صورة سمتي العرض والارتفاع، فيحجز المتصفح المساحة قبل التحميل. خطوة مجانية لا علاقة لها بحجم الملف، لكنها جزء من أي عمل جدي على ضغط صور الموقع.

أدوات مجانية لضغط صور الموقع

لا تحتاج برنامجاً مدفوعاً. ثلاث مجموعات تكفي: أدوات على المتصفح مثل Squoosh تريك الفرق قبل وبعد وتصدّر WebP وAVIF، وأدوات سطر الأوامر التي تعالج مجلدات كاملة دفعة واحدة، وإضافات نظام إدارة المحتوى التي تضغط وتحوّل الصيغة أثناء الرفع.

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

سير عمل عملي لضغط صور الموقع في فريق غير تقني

1. حدد مقاسات معتمدة لكل موضع في الموقع: الهيرو، صورة المقال، صورة المنتج، الصورة المصغرة.
2. صغّر كل صورة للمقاس المعتمد قبل أن تلمس أي أداة ضغط.
3. اضغط عند جودة ٧٥ إلى ٨٥ وصدّر WebP، واحتفظ بالأصل في مجلد منفصل.
4. افحص بعينك على شاشة هاتف لا على شاشة مكتب فقط.
5. ارفع واكتب النص البديل وصفاً حقيقياً للصورة.
6. قِس الصفحة بعد الرفع وتأكد أن الصورة لم تعد أثقل عنصر فيها.

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

أسئلة شائعة

ما أفضل صيغة لصور الموقع؟

WebP هو الخيار العام في ضغط صور الموقع للصور الفوتوغرافية لأنه يعطي حجماً أصغر بجودة مكافئة ومدعوم في المتصفحات الحديثة. استعمل AVIF للصور الكبيرة جداً إن سمح نظامك، وSVG للشعارات والأيقونات، وأبقِ PNG للحالات التي تحتاج شفافية دقيقة فقط لا للصور الفوتوغرافية.

ما نسبة الجودة المناسبة عند الضغط؟

نطاق ٧٥ إلى ٨٥ يناسب أغلب الصور ويعطي أفضل مقايضة بين الحجم والمظهر. ارفع الرقم لصور المنتجات التي يكبّرها العميل ليرى التفاصيل، وأنزله قليلاً للخلفيات والصور الكبيرة التي لا يدقق فيها أحد. وافحص النتيجة بعينك دائماً على شاشة هاتف لا شاشة مكتب.

هل ضغط صور الموقع يضر بجودتها؟

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

هل أستعمل التحميل المؤجل لكل الصور؟

لا. أجّل ما هو أسفل الشاشة الأولى فقط، واترك صورة الهيرو وكل ما يظهر بلا تمرير يُحمَّل فوراً. تأجيل صورة الشاشة الأولى يؤخر أكبر عنصر مرئي في الصفحة فيبدو الموقع أبطأ، وهو عكس الهدف من التأجيل نفسه. والقاعدة: الشاشة الأولى فوراً وما بعدها يؤجَّل.

هل الإضافات تكفي أم أحتاج عملاً يدوياً؟

الإضافة تحل الجزء المتكرر: التحويل والضغط أثناء الرفع. لكنها لا تختار المقاس الصحيح ولا تقرر أي صورة تحتاج جودة أعلى. اجمع بين الاثنين: إضافة تعمل تلقائياً على الجديد، ومراجعة يدوية لمكتبة الصور القديمة مرة واحدة، وراجع إعدادات الإضافة بعد كل تحديث للنظام.

افحص صور موقعك

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

اطلب عرض سعر · تواصل على واتساب · اتصل بنا

أرقام ويب
٤٤ المحور المركزي، السرايا مول، الدور الأرضي السفلي، مدخل ٢، الشيخ زايد، الجيزة، مصر
هاتف وواتساب: +20 111 872 1404 · بريد: info@arqamweb.com

المرجع التقني لصيغ الصور والصور المتجاوبة في دليل الصور على web.dev.