دليل تحسين الصور للهواتف المحمولة لصفحات أسرع

آخر تحديث: June 28, 2026

يبدأ تحسين صور الهاتف المحمول بمتطلب واحد: يجب ألا يقوم الهاتف بتنزيل وحدات بكسل لا يمكنه عرضها. قم بتغيير حجم المصدر، وخدمة متغيرات متجاوبة (responsive variants)، وإبقاء أكبر صورة فوق الطية (above-the-fold) خارج التحميل الكسول (lazy loading)، ونشر ملفات WebP أو AVIF قابلة الزحف عبر CDN.

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

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

بالنسبة لمعظم صفحات الهاتف المحمول، قم بإرسال مجموعة مصادر WebP أو AVIF بعروض حول 400 و 800 و 1200 px. احتفظ ببديل JPEG إذا كان جمهورك يتضمن متصفحات قديمة، أو عملاء بريد إلكتروني، أو خلاصات شركاء. لاتخاذ قرار أعمق بشأن التنسيق، استخدم مقارنة AVIF مقابل WebP.

توجيهات Google الخاصة بـ LCP تقول إن الصفحات يجب أن تهدف إلى Largest Contentful Paint في غضون 2.5 ثانية أو أقل عند المئوية الـ 75، مقسمة حسب الهاتف المحمول وسطح المكتب. غالبًا ما تكون الصور هي عنصر LCP، لذا فإن الصورة الرئيسية (hero image) تستحق معالجة خاصة: قم بتحميلها مسبقًا (preload) أو إعطائها الأولوية، وحدد أبعادها الحقيقية، ولا تقم بالتحميل الكسول لها.

ما الذي يتغير فعلياً على الهاتف؟

يغير الهاتف ثلاثة أشياء دفعة واحدة: عرض منطقة العرض (viewport width)، وجودة الشبكة، وكثافة التخطيط (layout density). غالبًا ما تفشل صور سطح المكتب على الهواتف المحمولة لأن الصفحة تحتفظ بنفس الأصل بحجم 1600 px، أو تقص الموضوع بشكل سيئ، أو تؤخر الصورة الرئيسية خلف JavaScript.

لقد قمت بإنشاء رسم مصدر واحد بحجم 1600 x 1000 وقم بتشفيره كـ WebP q82 بثلاثة عروض. تُظهر النتيجة سبب تفوق تغيير الحجم على تعديل الجودة:

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

ما أحجام الصور المناسبة للهاتف المحمول التي يجب عليك إنشاؤها؟

ابدأ من المساحة المعروضة (rendered slot)، وليس من ملف الكاميرا. افحص قالبك عند نقاط التوقف الشائعة وسجل الحد الأقصى لعرض CSS لكل نوع صورة.

استخدم واصفات العرض (width descriptors) عندما يتغير عرض التخطيط:

<img
  src="/images/hero-800.webp"
  srcset="/images/hero-400.webp 400w, /images/hero-800.webp 800w, /images/hero-1200.webp 1200w"
  sizes="(max-width: 640px) 100vw, 720px"
  width="800"
  height="500"
  alt="Reusable water bottle on a kitchen counter"
>

يشرح دليل الصور المتجاوبة من MDN نموذج اختيار srcset و sizes. النسخة المختصرة هي: يسرد srcset المرشحين، ويخبر sizes المتصفح بمدى عرض المساحة المعروضة قبل اكتمال التخطيط.

بالنسبة لسير عمل الدفعات (batch workflow)، قم بتوليد العروض من نفس الملف الرئيسي. يغطي دليل تغيير الحجم بالدفعات نمط سطر الأوامر، ويوضح تعميق ضغط الصور سبب إجراء تغيير الحجم قبل الضغط النهائي.

متى يجب عليك استخدام picture للقص على الهاتف المحمول؟

استخدم <picture> عندما تحتاج الصورة للهاتف المحمول إلى قص مختلف، وليس مجرد ملف أصغر. يمكن أن تصبح صورة البطل (hero image) الواسعة لسطح المكتب عديمة الفائدة على هاتف إذا كان الموضوع يقع في أقصى اليسار أو كانت منطقة النص تغطي المنتج.

<picture>
  <source
    media="(max-width: 640px)"
    srcset="/images/shoe-mobile.webp 720w"
    sizes="100vw"
    type="image/webp"
  >
  <source
    srcset="/images/shoe-desktop.webp 1440w"
    sizes="min(100vw, 1440px)"
    type="image/webp"
  >
  <img
    src="/images/shoe-desktop.jpg"
    width="1440"
    height="700"
    alt="Trail running shoe with the sole tread visible"
  >
</picture>

استخدم توجيه الفن (art direction) لما يلي:

1. صور المنتجات الرئيسية حيث يصبح المنتج صغيرًا على الهاتف المحمول.
2. اللافتات التحريرية التي يجب أن يظل فيها الوجه أو الكائن في المنتصف.
3. قوائم الأسواق التي تحتاج إلى مصغرات مربعة وصور تفاصيل واسعة.
4. صور قبل/بعد حيث يجب أن تظل كلا الجانبين مقروئتين.
5. لقطات الشاشة ذات النص الصغير التي تحتاج إلى قص أو أضيق.

لا تستخدم <picture> كبديل لعروض العرض المتجاوبة العادية. إذا كان التكوين هو نفسه، فإن srcset بالإضافة إلى sizes أبسط.

كيف يتناسب WebP و AVIF و JPEG مع أداء الهاتف المحمول؟

استخدم WebP كأساس للهاتف المحمول عندما تحتاج إلى ملف حديث واحد يعمل على نطاق واسع. استخدم AVIF عندما يمكن لخطك (pipeline) إنشاؤه ويمكنك الاحتفاظ ببديل WebP أو JPEG. احتفظ بـ JPEG للبريد الإلكتروني، وأنظمة الشركاء القديمة، وأرشيفات المصادر التي تحتاج أدوات أخرى إلى فتحها.

يغطي قائمة التحقق الكاملة لتحسين الصور تسلسل النشر الأوسع. إذا كنت بحاجة إلى مقارنة الأدوات التي تنتج WebP و AVIF، فراجع بدائل TinyPNG.

استخدم مكدس <picture> عندما يمكنك:

<picture>
  <source srcset="/images/card-480.avif 480w, /images/card-800.avif 800w" type="image/avif">
  <source srcset="/images/card-480.webp 480w, /images/card-800.webp 800w" type="image/webp">
  <img src="/images/card-800.jpg" width="800" height="600" alt="Blue ceramic mug beside a notebook">
</picture>

كيف يجب أن يعمل التحميل الكسول على الهاتف المحمول؟

قم بالتحميل الكسول للصور التي تبدأ أسفل منطقة العرض الأولى. لا تقم بالتحميل الكسول للصورة الرئيسية (LCP image). يعد التحميل الكسول على مستوى المتصفح مفيدًا، ولكنه ليس خطة أداء بحد ذاته.

يوصي دليل التحميل الكسول على مستوى المتصفح من Google باستخدام loading="lazy" الأصلي للصور خارج الشاشة. ويحذر نفس التوجيه من التحميل الكسول للصور المرئية فورًا لأنه قد يؤخر المحتوى الذي ينتظره المستخدمون.

استخدم قائمة التحقق هذه:

1. امنح الصورة الرئيسية loading="eager" أو احذف خاصية loading.
2. أضف fetchpriority="high" لأكثر صورة محتملة لـ LCP.
3. أضف loading="lazy" للصور بعد الشاشة الأولى.
4. حدد width و height على كل صورة.
5. استخدم CSS aspect-ratio عندما يتغير النسبة المعروضة حسب نقطة التوقف (breakpoint).
6. تجنب حقن الصور عبر JavaScript فقط للصورة الرئيسية.
7. تحقق من أن عناوين URL لصور CDN تتضمن رؤوس ذاكرة تخزين مؤقت طويلة.
8. اختبر على ملف تعريف هاتف محمول مقيد السرعة، وليس فقط Wi-Fi لسطح المكتب.
9. راقب عنصر LCP في PageSpeed Insights.
10. أعد التشغيل بعد تغييرات التصميم، لأن عنصر LCP يمكن أن يتغير.

تدرج وثائق LCP من Google عناصر الصور، وملصقات الفيديو (video posters)، والصور الخلفية بين المرشحين المحتملين لـ LCP. ولهذا السبب لا يزال بإمكان صورة البطل الخلفية أن تضر بـ LCP حتى لو لم تكن <img>.

ما الذي يجب أن يفعله CDN للصور للهاتف المحمول؟

يجب أن يقوم CDN للصور بإزالة العمل اليدوي المتكرر: تغيير الحجم عند الحافة (at the edge)، والتفاوض على التنسيق، وتخزين متغيرات التخزين المؤقت، والحفاظ على استقرار عناوين URL العامة. لا يحل CDN محل نظافة المصدر. إن تحميل صورة منتج ضبابية بحجم 900 px إلى CDN للصور لن ينشئ تفاصيل حقيقية بحجم 1600 px.

ابحث عن هذه الضوابط:

• تحويلات العرض (Width transforms) لمساحات الهاتف المحمول وسطح المكتب الشائعة.
• WebP و AVIF المخرجان مع Content-Type الصحيح.
• مفاتيح التخزين المؤقت التي تتضمن العرض والجودة والتنسيق.
• طريقة للحفاظ على التحميلات الأصلية بشكل منفصل عن المشتقات العامة.
• عناوين URL عامة ومستقرة يمكن لـ Google Images الزحف إليها.
• المراقبة بحثًا عن أخطاء 404 بعد عمليات النشر والترحيل.

بالنسبة للبحث، تؤكد أفضل ممارسات تحسين محركات البحث للصور من Google على الصور المفيدة والمرئية القريبة من النص ذي الصلة، وأسماء الملفات ووصف alt text، وعناوين URL للصور القابلة للزحف. عنوان URL الخاص بـ CDN جيد عندما يكون قابلاً للفهرسة ومستقرًا ويتم الإشارة إليه من الصفحة.

ما الذي يجب عليك اختباره قبل النشر؟

اختبر الصفحة بالطريقة التي يتلقاها بها الزائر عبر الهاتف المحمول. إجراء تشغيل Lighthouse نظيف مفيد، ولكنه قد يخفي حالات فشل CDN، والمرشحات المتجاوبة كبيرة الحجم، وتحولات التخطيط (layout shifts) التي تظهر فقط في القوالب الحقيقية.

أمر عملي واحد للتدقيق المحلي:

curl -I https://cdn.example.com/images/product-card-480.webp

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

قائمة التحقق لـ SEO للصور و GEO

تحتاج محركات البحث ومحركات الإجابة إلى نفس الشيء الذي يحتاجه الشخص: سياق مباشر. لا تدفن الصور في شريط تمرير (carousel) بدون أي شرح قريب وتتوقع أن تحمل المادة المعنى بحد ذاتها.

قبل النشر، أكد ما يلي:

1. تحتوي الصفحة على إجابة واضحة واحدة بالقرب من الأعلى.
2. كل صورة مهمة لها نص alt وصفي.
3. تصف أسماء الملفات الموضوع المرئي، وليس IMG_9021.
4. عنوان URL للصورة قابل للزحف بدون ملفات تعريف الارتباط (cookies).
5. يوضح الفقرة المحيطة سبب وجود الصورة.
6. لا يجب أن تكون الصورة الرئيسية للهاتف المحمول أكبر من المساحة المعروضة التي تحتاجها.
7. تستخدم صور الجسم loading="lazy" فقط عندما تكون أسفل منطقة العرض الأولى.
8. تلخص الجداول القرارات التي يمكن للقارئ إعادة استخدامها.
9. الروابط الخارجية تشير إلى مصادر موثوقة.
10. الروابط الداخلية تشير إلى سير العمل الحقيقي التالي، وليس صفحة تجميع عشوائية.

للتمرير الخاص بتحسين محركات البحث بعد الضغط، استخدم قائمة التحقق لتحسين SEO للصور. بالنسبة لعمليات الملفات المنفردة، يغطي كل من Image Compressor، وImage Converter، وImage Resizer الخطوات اليدوية الشائعة.

حقوق صور (Image credits)

• تم إنشاء مخطط العرض المتجاوب، ومخطط عرض العرض، وقص توجيه الفن، ومخطط أولوية التحميل لهذا المقال باستخدام ImageMagick وتصديره كـ WebP. يستخدم مخطط العرض المتجاوب مخرجات WebP q82 مقاسة من نفس الرسم المصدر بحجم 1600 x 1000.