تحسين الصور لسرعة الويب: قص تحميل الصفحة دون فقدان الجودة

آخر تحديث: 28 يونيو 2026

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

إجابة سريعة: كيف يمكنك تحسين الصور لتتناسب مع سرعة الويب؟

قم بتغيير حجم كل صورة إلى الأبعاد التي تعرضها فعليًا، وقم بتحويلها إلى WebP (أو AVIF مع خيار احتياطي)، اضغط إلى الجودة 80، وقم بخدمة المتغيرات المستجيبة باستخدام srcset بحيث يقوم كل جهاز بتحميل الحجم الصحيح. قم بالتحميل البطيء للصور الموجودة أسفل الجزء العلوي وتسليمها من شبكة CDN. يمكن أن يؤدي هذا التسلسل إلى خفض وزن الصورة بنسبة 70 بالمائة أو أكثر دون أي فقدان واضح للجودة، مما يؤدي بشكل مباشر إلى تحسين مقياس أكبر رسم محتوى والتحميل الإجمالي للصفحة.

لماذا تهيمن الصور على وزن الصفحة؟

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

الفرصة كبيرة لأن الإعداد الافتراضي – تحميل ملف JPEG بدقة الكاميرا – يعد إهدارًا كبيرًا. صورة بحجم 5000 بكسل يتم عرضها بدقة 800 بكسل تخدم ستة أضعاف عدد البكسلات المطلوبة، ويضيف ملف JPEG المزيد في الأعلى عندما يفعل WebP. يؤدي إصلاح كلاهما إلى تقليص الملف بشكل كبير.

الخطوة 1: تغيير الحجم إلى أبعاد العرض

لا تعرض أبدًا وحدات بكسل أكثر مما تعرضه الصورة. تغيير الحجم إلى أكبر عرض للشاشة، مضروبًا في 2 لوضوح شبكية العين.

• قم بقياس فتحة العرض، وليس دقة المصدر.
• اضرب في 2 لشاشات الشبكية (3x للهواتف الكثيفة).
• قم بتغيير الحجم قبل الضغط - يتم ضغط عدد أقل من وحدات البكسل بشكل أصغر.
• يغطي دليل تغيير الحجم القيام بذلك بشكل نظيف.

الخطوة 2: التحويل إلى تنسيق حديث

يحدد اختيار التنسيق الحد الأدنى لحجم الملف. يقوم WebP وAVIF بضغط الصور بشكل أفضل بكثير من JPEG دون فقدان الجودة بشكل واضح على المتصفحات الحديثة.

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

تغطي مقارنة التنسيق ودليل AVIF مقابل WebP المفاضلات. استخدم عنصر<picture>لخدمة AVIF أولاً مع بدائل WebP وJPEG.

الخطوة 3: الضغط للوصول إلى الجودة المستهدفة

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

اختبر التكبير/التصغير بنسبة 100% للتأكد من عدم وجود أي آثار مرئية. يغطي دليل الضغط التقنيات.

الخطوة 4: تقديم المتغيرات سريعة الاستجابة والتحميل البطيء

تحتاج الشاشات المختلفة إلى أحجام مختلفة، ولا يلزم تحميل الصور الموجودة أسفل الجزء المرئي على الفور. التعامل مع كليهما مع العلامات.

• استخدمsrcsetمع واصفات العرض حتى يحصل كل جهاز على الملف الصحيح.
• أضفloading="lazy"إلى الصور الموجودة أسفل الجزء المرئي لتأجيلها.
• حافظ على تحميل صورة البطل بفارغ الصبر حتى يتم تحميل عنصر LCP بسرعة.
• قم دائمًا بتعيين سمات العرض والارتفاع لمنع تغيير التخطيط.

يغطي دليل الصور المستجيبة ودليل التحميل البطيء عملية التنفيذ بالتفصيل.

كيف تؤثر سرعة الصورة على مؤشرات أداء الويب الأساسية؟

يؤثر تحسين الصورة بشكل مباشر على مقياس أكبر رسم محتوى (LCP)، والذي يقيس غالبًا مدى سرعة تحميل الصورة الرئيسية. يدفع البطل الثقيل وبطيء التحميل LCP إلى تجاوز عتبة 2.5 ثانية التي يتعامل معها Google على أنها "جيدة"، مما يضر بتجربة المستخدم وتصنيف البحث. يربط دليل مؤشرات أداء الويب الأساسية ودليل تحسين محركات البحث للصور هذه المكاسب بالتصنيف، وتشرح وثائق web.dev LCP المقياس. يغطي دليل أداء Mozilla صورة القياس الأوسع — قم بتشغيل PageSpeed ​​Insights بعد التحسين للتأكد من تحسين LCP.

مثال عملي: تحسين صورة بطل واحدة

إن المشي عبر صورة واحدة يجعل الخطوات المجردة ملموسة. التقط صورة JPEG بعرض 5000 بكسل مباشرة من الكاميرا، مخصصة لفتحة البطل بعرض 1200 بكسل على موقع الويب.

1. تغيير الحجم من 5000 بكسل إلى 2400 بكسل (1200 عرض × 2 لشبكية العين). يتم تقليص الملف على الفور بسبب انخفاض عدد وحدات البكسل بنسبة تزيد عن 75 بالمائة.
2. ** تحويل ** JPEG إلى WebP. عادةً ما يؤدي تغيير التنسيق وحده إلى إزالة 25-35 بالمائة أخرى بنفس الجودة.
3. الضغط إلى الجودة 80. الخسارة المرئية لا تذكر، لكن البايتات تنخفض أكثر.
4. الخدمة مع srcset الذي يقدم متغيرات 1200 وات و2400 وات، بحيث تحصل الهواتف على الملف الأصغر.
5. التحميل البطيء إذا لم يكن عنصر LCP، أو استمر في الحماس إذا كان هو البطل.

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

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

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

أداة بناء الخطوات التي تقوم بتشغيل تحويل WebP وضغطه على كل صورة أثناء النشر تضمن عدم وصول أي صورة غير محسنة إلى الإنتاج. بالنسبة للمواقع التي تعتمد على نظام إدارة المحتوى (CMS)، يقوم البرنامج الإضافي الذي يعمل على تحسين التحميل بالتقاط الصور من المصدر. وبالنسبة للمواقع التي لا يمكن التنبؤ بالتخطيط فيها، فإن شبكة CDN التي تتحول بسرعة تتعامل مع الحجم دون متغيرات يدوية. تعتمد الأتمتة الصحيحة على المكدس، ولكن المبدأ هو نفسه - اجعل التحسين هو الإعداد الافتراضي بحيث لا يعتمد على تذكر الشخص للقيام بذلك.

قياس النتيجة

التحسين بدون قياس هو تخمين. بعد تشغيل الخطوات، تحقق من المكاسب باستخدام أدوات حقيقية.

1. قم بتشغيل Google PageSpeed ​​Insights وتحقق من توصيات الصور.
2. تأكد من أن LCP أقل من 2.5 ثانية.
3. تحقق من علامة تبويب الشبكة لمعرفة أحجام الملفات المعروضة بالفعل.
4. قم بإجراء الاختبار على اتصال الهاتف المحمول، وليس النطاق العريض فقط.

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

الأسئلة المتداولة

ما هو أكبر فوز في سرعة الصورة؟

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

هل يجب أن أقوم بتحميل كل صورة ببطء؟

كل شيء تحت الطية، نعم. يجب أن يتم تحميل بطل LCP بفارغ الصبر (وأن يتم تحميله مسبقًا)؛ يؤدي التحميل البطيء إلى تأخير العنصر الأكبر ويضر بـ Core Web Vitals. قم بتحميل الباقي بشكل كسولة حتى لا يتنافسوا مع البطل.

كيف يمكنني قياس سرعة الصورة؟

PageSpeed ​​Insights بيانات الحقل على مدار 28 يومًا، وليس تشغيل معملي واحد. أدوات المختبر (المنارة) تظهر الإمكانات؛ تُظهر البيانات الميدانية ما يواجهه المستخدمون الحقيقيون. وسجل CWV على البيانات الميدانية.

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

WebP هو الإعداد الافتراضي الآمن (أصغر بنسبة 25-35 بالمائة من JPEG، دعم عالمي)، أو AVIF لأصغر الملفات على المتصفحات الحديثة. قم بخدمة التنسيق الحديث باستخدام احتياطي JPEG من خلال عنصر<picture>.

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

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

ما هو التحميل البطيء؟

إحدى ميزات المتصفح التي تعمل على تأخير تحميل الصور حتى تكون قريبة من إطار العرض، وبالتالي لا تتنافس الصور الموجودة أسفل الجزء المرئي مع البطل على عرض النطاق الترددي. أضفloading="lazy"إلى الصور الموجودة أسفل الطية. يجب أن يقوم بطل LCP بالتحميل بفارغ الصبر (وليس كسولًا)، لأن التحميل البطيء يؤخر العنصر الأكبر ويضر بمؤشرات الويب الأساسية.