كيفية ضغط الصور لموقع إلكتروني (بالطريقة الصحيحة)

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

لماذا يهم وزن الصورة

غالبًا ما تكون الصور أكبر عنصر في الصفحة، لذا فإن لوزنها تأثيرًا مبالغًا فيه على الأداء الفعلي.

• أكبر عنصر مرئي يُرسم (LCP). كثيرًا ما تكون صورتك الرئيسية هي عنصر LCP. والصورة الرئيسية المتضخمة تؤخّر اللحظة التي تبدو فيها الصفحة "محمَّلة"، وهو بالضبط ما تقيسه مؤشرات Core Web Vitals.
• بيانات الهاتف وصبر الزائر. الزوار على الهاتف يدفعون ثمن كل ميغابايت، في البيانات وفي وقت الانتظار معًا. والصفحات البطيئة تدفع الناس إلى المغادرة قبل أن يروا محتواك أصلًا.
• تحسين محركات البحث والتحويلات. تأخذ محركات البحث تجربة الصفحة في حسبانها عند الترتيب، والصفحات الأسرع تميل إلى الإبقاء على عدد أكبر من الزوار. ولست بحاجة إلى نسب دقيقة لتعلم أن الصور الأخف تساعد على الجبهتين.

الخلاصة: تقليص حجم الصور نادرًا ما يكون مجرد تحسين شكلي. إنه من أرخص الطرق لجعل الموقع يبدو سريعًا.

غيّر الحجم قبل الضغط

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

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

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

يمكنك تنفيذ هذه الخطوة داخل المتصفح باستخدام أداة تغيير الحجم من NasrTech — فهي تعمل بالكامل داخل متصفحك، دون رفع ودون تسجيل.

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

اختيار الصيغة لا يقل أهمية عن مستوى الضغط. اختر بناءً على ما تمثّله الصورة فعلًا.

• JPG — الأفضل للصور الفوتوغرافية والصور التفصيلية الملوّنة. ملفات صغيرة، دون شفافية.
• PNG — الأفضل للشفافية ولقطات الشاشة أو الرسوميات المسطّحة ذات الحواف الحادة والألوان القليلة.
• WebP — صيغة افتراضية حديثة عادةً ما تكون أصغر من JPG وPNG عند جودة مماثلة، مع دعم واسع من المتصفحات.
• AVIF — تقدّم عادةً أفضل ضغط بين الصيغ الشائعة. والدعم واسع في المتصفحات الحديثة، لكن تحقّق منه إن كان عليك دعم متصفحات قديمة جدًا، ووفّر بديلًا احتياطيًا.
• SVG — الأفضل للشعارات والأيقونات والأشكال المتجهية البسيطة. يتمدّد إلى أي حجم ويبقى صغيرًا جدًا.

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

الضغط مع فقدان مقابل الضغط دون فقدان

يتعامل هذان الأسلوبان مع الجودة على نحو مختلف، ومعرفة الفرق تساعدك على الاختيار.

• الضغط مع فقدان يتخلّص من بعض بيانات الصورة لجعل الملف أصغر بكثير. وتفعل ذلك صيغ JPG وWebP وAVIF جميعها. وإذا أُحسِن تنفيذه، فإن البيانات المُلغاة هي معلومات لم تكن عينك لتلاحظها على أي حال.
• الضغط دون فقدان يحتفظ بكل بكسل كما هو بالضبط ويزيل التكرار فقط. وPNG هو المثال الكلاسيكي. وهو آمن للرسوميات التي يجب أن تبقى مثالية على مستوى البكسل، لكنه لا يستطيع بلوغ أحجام الملفات الصغيرة التي تحققها الصيغ ذات الفقدان.

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

أحجام مستهدفة عملية

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

صورة رئيسية بعرض كامل:   استهدف ~150-300 كيلوبايت
صورة داخل المحتوى:        استهدف ~60-150 كيلوبايت
صورة مصغّرة / صغيرة:      استهدف ~15-50 كيلوبايت
شعار / أيقونة (SVG/PNG):  غالبًا أقل بكثير من 20 كيلوبايت

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

قدّم صورًا متجاوبة ذات تحميل كسول

الضغط نصف المهمة فقط. وطريقة تقديمك للصور هي التي تقرر مقدار ما يُنزّله كل زائر فعلًا.

• استخدم srcset وsizes لكي يختار المتصفح الدقة المناسبة لكل شاشة بدلًا من إجبار الجميع على تحميل أكبر نسخة.
• أضِف loading="lazy" إلى الصور الواقعة أسفل حدّ الطيّة لكي تُحمَّل فقط حين يقترب الزائر منها بالتمرير.
• قدّم صيغًا من الجيل التالي عبر عنصر <picture>، بحيث تلتقط المتصفحات الحديثة صيغة AVIF أو WebP بينما ترجع المتصفحات الأقدم إلى JPG.

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Mountain lake at sunrise"
       width="1600" height="900" loading="lazy">
</picture>

ضمّن دائمًا width وheight لكي يحجز المتصفح مساحة ويتجنّب إزاحة التخطيط.

اضغط داخل متصفحك دون أي رفع

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

سير عمل سريع:

1. غيّر حجم الصورة إلى حجم عرضها أولًا (أداة تغيير الحجم أعلاه).
2. افتح أداة ضغط الصور وأسقِط فيها الملف بعد تغيير حجمه.
3. اضبط الجودة حتى تبدو المعاينة نظيفة، ثم نزّل.
4. اربطها بصفحتك عبر srcset وloading="lazy" وصيغة من الجيل التالي.

الأسئلة الشائعة

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

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

هل أدوات NasrTech آمنة مع الصور الخاصة؟ نعم — كلٌّ من أداة ضغط الصور وأداة تغيير الحجم تعمل بالكامل داخل متصفحك. فملفاتك لا تُرفع أبدًا إلى خادم، ولست بحاجة إلى التسجيل.

ما الحجم المستهدف الجيد لصورة الويب؟ عامِل النطاقات أعلاه كإرشاد لا كقواعد، لأن الصور التفصيلية أثقل من الرسوميات المسطّحة. استهدف تقريبًا 150 إلى 300 كيلوبايت للصورة الرئيسية و15 إلى 50 كيلوبايت للصورة المصغّرة، ودع الجودة المرئية تكون الفيصل النهائي.

ابدأ بضغط صورك

مستعد لجعل صفحاتك أخف؟ غيّر الحجم إلى حجم العرض، واختر صيغة حديثة، واعصر الملف إلى الأصغر — كل ذلك دون مغادرة متصفحك. افتح أداة ضغط الصور من NasrTech لتقليص صورك الآن، دون رفع ودون تسجيل.