كيف تحسّن صور موقعك: الصيغ والمقاسات والتحميل المؤجل
كيف تجهّز الصور للويب: الاختيار بين JPEG وPNG وWebP وAVIF وSVG، والمقاس والضغط الصحيحان، والصور المتجاوبة، والتحميل المؤجل.
الصور هي عادةً أثقل جزء في صفحة الويب. قد تزن صورة واحدة غير محسّنة من هاتف حديث أكثر من بقية الصفحة مجتمعة. وضبط الصور من أسهل الطرق لتسريع الموقع، كما يحسّن سهولة الوصول والظهور في البحث عند تنفيذه جيدًا.
- اختر الصيغة حسب نوع الصورة: الصور الفوتوغرافية بـ WebP أو AVIF (مع JPEG كبديل)، والشعارات والأيقونات بـ SVG.
- غيّر مقاس الصور إلى أكبر مقاس تُعرض به، ثم اضغطها.
- استخدم الصور المتجاوبة، وحدد الأبعاد، وأجّل تحميل الصور أسفل الشاشة الأولى.
اختر الصيغة المناسبة
| الصيغة | الأنسب لـ | ملاحظات |
|---|---|---|
| JPEG | الصور الفوتوغرافية | مدعومة في كل مكان، ولا تدعم الشفافية |
| PNG | لقطات الشاشة والصور التي تحتاج دقة تامة أو شفافية | كبيرة الحجم للصور الفوتوغرافية |
| WebP | الصور والرسوم | أصغر غالبًا بكثير من JPEG/PNG بجودة مماثلة، وتدعم الشفافية |
| AVIF | الصور الفوتوغرافية | أصغر في الغالب، لكن الترميز أبطأ |
| SVG | الشعارات والأيقونات والرسوم البسيطة | متجهية وحادة بأي مقاس، وحجمها صغير جدًا |
| GIF | تجنّبها للحركة | استخدم فيديو MP4/WebM قصيرًا بدلًا منها |
تدعم كل المتصفحات الحديثة صيغتي WebP وAVIF، وتستطيع أنظمة إدارة محتوى وشبكات CDN كثيرة توليدهما تلقائيًا من الصور المرفوعة.
غيّر المقاس قبل الرفع
إذا كانت الصورة تُعرض بعرض 1200 بكسل كحد أقصى، فرفع أصل بعرض 6000 بكسل يهدر البيانات حتى لو أنشأ النظام نسخًا أصغر. صغّر الصورة إلى نحو أكبر مقاس عرض، مع مراعاة الشاشات عالية الكثافة (غالبًا حتى ضعف عرض CSS للصور المهمة).
اضغط بحكمة
- الضغط مع فقد بإعدادات جودة متوسطة يبدو عادةً مطابقًا للأصل في نظر الزوار ويوفر بيانات كثيرة.
- احذف البيانات الوصفية غير الضرورية مثل تفاصيل الكاميرا والموقع الجغرافي، فهذا يحمي الخصوصية أيضًا.
- افحص النتيجة بصريًا بالمقاس الفعلي، خاصة لصور المنتجات والنصوص داخل الصور.
قدّم صورًا متجاوبة
تتيح الصور المتجاوبة للمتصفح اختيار المقاس المناسب لكل شاشة، ويستخدم HTML لذلك الخاصيتين srcset وsizes. ينشئ WordPress عدة مقاسات عند الرفع ويضيف هذه الخصائص تلقائيًا عندما تستخدم القوالب دواله الخاصة بالصور، فتنزّل الهواتف ملفات صغيرة وتحصل الشاشات الكبيرة على ملفات كبيرة.
امنع تحولات التخطيط
أضف دائمًا الخاصيتين width وheight (أو نسبة أبعاد عبر CSS) ليحجز المتصفح المساحة قبل وصول الصورة، فلا تقفز الصفحة، وهذا يحسّن مؤشر CLS ضمن Core Web Vitals.
أجّل التحميل، لكن ليس لكل شيء
تؤخر الخاصية loading="lazy" تحميل الصور حتى توشك على الظهور عند التمرير. استخدمها للصور أسفل الشاشة الأولى، ولا تؤجل الصورة الرئيسية أعلى الصفحة لأنها غالبًا عنصر أكبر عرض للمحتوى (LCP)؛ يمكنك بدلًا من ذلك منحها fetchpriority="high".
اكتب نصًا بديلًا مفيدًا
يصف النص البديل (Alt) الصورة لمستخدمي قارئات الشاشة، ويظهر عند فشل تحميلها. صف ما يهم في السياق: «غرفة معيشة في شقة بغرفتي نوم مع إطلالة من الشرفة» أنفع من «image1» أو قائمة كلمات مفتاحية. أما الصور الزخرفية فاترك نصها البديل فارغًا (alt="").
سمِّ الملفات ونظّمها
- استخدم أسماء ملفات وصفية مثل
red-running-shoes.webpبدلIMG_4821.jpg. - احذف الصور غير المستخدمة والمقاسات القديمة التي لم تعد تحتاجها لتوفير التخزين ووقت النسخ الاحتياطي.
اجعلها تلقائية
تستطيع إضافات تحسين الصور وخدمات الصور في شبكات CDN وأدوات البناء تغيير المقاس والضغط والتحويل تلقائيًا، فتضمن الأتمتة معالجة كل صورة يرفعها أي محرر، لا الصور التي تتذكر تحسينها فقط.
أسئلة شائعة
هل أحوّل كل الصور إلى WebP أو AVIF؟
للصور الفوتوغرافية ومعظم الرسوم نعم، ويفضَّل أن يتم ذلك تلقائيًا. واحتفظ بصيغة SVG للشعارات والأيقونات.
هل يساعد تحسين الصور في تحسين محركات البحث؟
نعم، عبر صفحات أسرع وسهولة وصول أفضل. كما تساعد أسماء الملفات الوصفية والنص البديل على ظهور الصور في البحث عن الصور.
كم يجب أن يكون حجم صورة الويب بالكيلوبايت؟
لا توجد قاعدة واحدة. يمكن أن تكون صور محتوى كثيرة أقل بكثير من 200 كيلوبايت، وقد تكون الصور الرئيسية أكبر. وازن بين حجم الملف والجودة البصرية وسرعة الصفحة.
