كيفية تحسين الصور لموقعك: دليل عملي
تمثل الصور غالباً جزءاً كبيراً من نقل الصفحة وقد تؤثر في الاكتشاف والفك والتخطيط وLargest Contentful Paint. قد يحقق التحسين مكاسب مهمة، لكن لا ينطبق توفير ثابت أو نتيجة ترتيب على كل صفحة. إليك مساراً قابلاً للقياس خطوة خطوة.
لماذا تحسين الصور أهم من أي وقت مضى
يبين تقرير وزن الصفحات في HTTP Archive أن الصور تظل مهمة في صفحات كثيرة رغم تغير القيم الوسطية. يقيس Largest Contentful Paint (LCP) رسم أكبر عنصر مؤهل في منطقة العرض؛ وغالباً لا دائماً يكون صورة.
تصنف حدود LCP المنشورة من Google حتى 2.5 ثانية جيداً وفوق 4 ثوانٍ ضعيفاً عند المئين 75 للزيارات. قد تنقل معالجة الصور الصفحة بين الحدود حين يكون مورد LCP عنق الزجاجة، لكنها لا تضمن وحدها اجتياز Core Web Vitals أو موضع بحث.
الخطوة 1: اختر الصيغة المناسبة
قد يؤثر اختيار الصيغة بقوة في الحجم والقدرات. المقارنة نوعية لأن الاختبارات تعتمد على المصدر والمرمّز والإعدادات وهدف الجودة:
| الصيغة | الأفضل لـ | سلوك الحجم | دعم المتصفحات |
|---|---|---|---|
| JPEG | الصور الفوتوغرافية، الدعم القديم | خط الأساس | واسع جداً |
| WebP | الصور والرسومات | فعال غالباً؛ اختبر المرمّز | المتصفحات الرئيسية الحالية؛ افحص جمهورك |
| AVIF | خطوط تسليم حديثة مختبرة | قد يكون فعالاً جداً؛ الترميز أعلى كلفة | المتصفحات الرئيسية الحالية؛ قد يلزم بديل |
| PNG | الشعارات والأيقونات والرسومات النصية | فعال لبعض الرسومات المسطحة؛ كبير لصور كثيرة | واسع جداً |
| SVG | الأيقونات والرسومات التوضيحية | ترميز متجه يعتمد على المحتوى | واسع في المتصفحات؛ نظف SVG غير الموثوق |
WebP مرشح افتراضي مفيد لا جواب عام. إن دعم الخط والجمهور AVIF فاختبره كعنصر <source> أسبق مع WebP أو JPEG بديلاً. تستطيع في Vizua تحويل JPG إلى WebP أو إلى AVIF؛ يعالج الملف في المتصفح ولا يرسل إلى خادمنا.
للمزيد راجع مقارنة WebP وAVIF وشرح الضغط الضياعي وعديم الفقد.
الخطوة 2: غيّر الأبعاد لتتناسب مع حجم العرض الفعلي
تحتوي صورة 4000 × 3000 بكسل المعروضة 800 × 600 على بكسلات أكثر بكثير مما يحتاجه الموضع. قد تحتاج شاشة متجاوبة عالية الكثافة نسخة أكبر، لكن إرسال أصل الكاميرا يضيف عادة نقلاً وفكاً بلا حاجة.
المبدأ هو تقديم نسخ قريبة من الحجم والكثافة المرسومين. استخدم srcset وsizes ليختار المتصفح، وراع عرض التخطيط وكثافة الجهاز والجودة والتكبير والاتجاه الفني بدلاً من مضاعف «Retina» ثابت.
أمثلة أحجام بداية لتكييفها مع التخطيط:
- صورة رئيسية كاملة العرض: ابدأ بأكبر موضع مرسوم وأنشئ نسخاً للكثافات ونقاط التوقف المهمة
- صورة المحتوى: طابق عمود المحتوى والحالات المتجاوبة الأوسع
- الصورة المصغرة: أنشئ نسخة قريبة من كل حجم بطاقة بدلاً من إعادة استخدام الرئيسية
- الصورة الشخصية: راع الدائرة أو المربع وكثافة الجهاز وعرض الملف المفصل
استخدم أداة تغيير حجم الصور في Vizua قبل الضغط. يعتمد التوفير على عدد بكسلات المصدر والهدف؛ قِس الملفات.
الخطوة 3: اضغط بإعداد الجودة الصحيح
بعد اختيار الصيغة والحجم اضبط المرمّز. مقاييس الجودة غير خطية وغير موحدة بين المرمّزات أو الصيغ. تتبادل القيمة الأقل عادة معلومات أكثر مقابل بايتات أقل في الوضع الضياعي، لكن يجب قياس الحجم والتغير المرئي في الناتج.
إعدادات الجودة الموصى بها:
- JPEG: يمكن أن تكون 75–85 نقطة بداية حذرة للصور. تختلف المقاييس؛ افحص الناتج.
- WebP: 75–80 نطاق بداية، لا مكافئ مضمون لقيمة JPEG.
- AVIF: قد تكون 60–75 بداية في بعض الأدوات؛ تختلف المقاييس والمرمّزات.
- PNG: جرب أولاً ضغطاً أقوى عديم الفقد. قد يوفر تقليل اللوحة إلى 256 إدخالاً كحد أقصى أكثر، لكنه تقليل لوني ضياعي يحتاج للفحص.
تتيح أداة ضغط JPEG في Vizua ضبط الجودة ومراجعة الناتج. للطريقة المفصلة راجع الضغط دون فقدان الجودة.
الخطوة 4: وصّل الصور إلى المتصفح بكفاءة
الضغط الجيد هو نصف القصة فقط. طريقة تقديم الصور للمتصفح لا تقل أهمية عن الضغط نفسه.
حدّد الأبعاد بشكل صريح
أعط كل <img> قيم width وheight داخلية دقيقة أو احجز الموضع بقاعدة تخطيط. يحدد المتصفح النسبة مبكراً ويقلل حركة الصورة؛ لكن الخطوط والمحتوى المضاف والحركة والأنماط الخاطئة تظل تؤثر في Cumulative Layout Shift (CLS).
التحميل الكسول للصور أسفل الطية
فكر في loading="lazy" للصور البعيدة عن منطقة العرض الأولى. لا تطبقه آلياً على صورة LCP أو المحتوى المطلوب فوراً. قواعد المتصفح والشرائح والطباعة والتمرير السريع والتخطيطات المخفية تحتاج إلى اختبار.
أعطِ الأولوية لصورة الغلاف
لا تؤجل صورة LCP المرجحة. فكر في fetchpriority="high" إذا استحقت النطاق المبكر واجعلها قابلة للاكتشاف في HTML الأول. لا توزع الأولوية العالية؛ تحقق من الأثر في trace والبيانات الميدانية.
استخدم الصور المتجاوبة
يقدم srcset وsizes النسخ ويصفان الموضع. يراعي المتصفح منطقة العرض والكثافة والذاكرة والتنفيذ. طابق sizes مع التخطيط الحقيقي؛ قد تختار القيمة الخاطئة نسخة أكبر أو أصغر من اللازم.
الخطوة 5: دقق وقِس بانتظام
تحسين الصور ليس مهمة تُنجز مرة واحدة. كل صورة جديدة تُضيفها هي فرصة محتملة للتراجع.
- PageSpeed Insights: شغّل PageSpeed Insights على صفحات ممثلة. راجع LCP الميداني والمختبري منفصلين والتشخيص الحالي، لا اسم تدقيق قد يتغير.
- شبكة DevTools: رتب الطلبات حسب الحجم وافحص الصور الكبيرة في سياقها. طابق الأبعاد والصيغة والضغط والذاكرة والأولوية مع الدور بدلاً من حد KB عام.
- الأتمتة: أضف تحسين الصور إلى البناء لاكتشاف الصور الضخمة قبل النشر.
قائمة مراجعة سريعة
- أنشئ وقارن نسخ JPEG وWebP وAVIF وPNG وSVG مناسبة
- غيّر الحجم إلى أبعاد العرض الفعلية، بلا عرض زائد
- ابدأ بإعدادات حذرة وقارن البايتات والمظهر؛ لا تساو أرقام الجودة بين الصيغ
-
احجز موضعاً دقيقاً لكل
<img>عادة عبرwidthوheightالداخليين -
فكر في
fetchpriority="high"لصورة LCP ثم قِس - أجّل الصور المناسبة خارج الشاشة؛ اختبر التمرير والتخطيط
- استخدم
srcset/sizesللتوزيع المتجاوب - حدد ميزانية الأداء من الصفحة والجمهور والبيانات الميدانية
- احذف البيانات الخاصة غير اللازمة، واحفظ ملفات اللون أو البيانات المطلوبة — راجع EXIF والخصوصية
- راقب أداء صفحاتك بانتظام باستخدام PageSpeed Insights
الأسئلة الشائعة
ما أفضل صيغة صور للمواقع؟
لا توجد صيغة واحدة أفضل. JPEG واسع التوافق للصور؛ ويدعم WebP الضياعي وعديم الفقد والشفافية والحركة؛ وقد يكون AVIF فعالاً إن دعمه خط التسليم والجمهور؛ ويفيد PNG للرسومات الحادة عديمة الفقد؛ وSVG للرسوم المتجهة الموثوقة. أنشئ نسخاً ممثلة واختر حسب الحجم المقاس والجودة والتوافق والخصائص.
كم تبطئ الصور غير المحسنة الموقع؟
يعتمد الأثر على الصفحة ومنطقة العرض والشبكة والذاكرة ودور الصورة. قد تضيف صورة LCP أكبر من اللازم نقلاً وفكاً كبيرين، لكن لا يقابل حجم ملف قيمة LCP واحدة. استخدم Core Web Vitals الميدانية وتتبع المختبر لتحديد هل النقل أو الاكتشاف أو الأولوية أو الفك أو الرسم هو عنق الزجاجة.
هل ينبغي تحميل كل الصور كسولاً؟
لا. أجّل الصور خارج منطقة العرض الأولى حين يفيد ذلك، لكن لا تؤجل صورة LCP المرجحة. أعط أولوية جلب مرتفعة لصورة مبكرة مهمة فعلاً فقط؛ الإفراط يقلل فائدة التلميحات. اختبر لأن التخطيط واكتشاف preload واختيار المصدر المتجاوب تؤثر أيضاً.
هل يجب تحديد عرض وارتفاع كل صورة؟
في عنصر img في HTML، قدم العرض والارتفاع الداخليين الصحيحين متى أمكن ليحسب المتصفح النسبة قبل التنزيل. تستطيع حاوية CSS محددة أو قاعدة aspect-ratio حجز المساحة أيضاً. المطلوب موضع ثابت ودقيق؛ قد تسبب الأبعاد الخاطئة أو التغييرات المتأخرة Cumulative Layout Shift.
كيف يؤثر تحسين الصور في SEO؟
قد يحسن التجربة وCore Web Vitals حين تكون الصور عنق الزجاجة. تستخدم Google إشارات تجربة الصفحة ضمن نظام ترتيب أوسع، لكن الصورة الأصغر لا تضمن زيادة. حسّن للمستخدمين وتحقق من البيانات الميدانية، مع جودة المحتوى وملاءمته وقابلية الزحف وعوامل SEO الأخرى.
حسّن صورك الآن
لا يلزم حساب. يعالج الملف في المتصفح ولا يرسل إلى خادم معالجة الصور لدينا.