الصور تشكل 50-70% من وزن أي صفحة ويب، وفقاً لـ HTTPArchive. لكن رغم ذلك، معظم المواقع ترفع الصور كما هي من الكاميرا، تضيف alt text عاماً، وتتساءل لماذا لا تظهر صورها في Google Images. في 2026، تحسين الصور هو أعلى استثمار تقني من حيث العائد على الجهد: يحسن سرعة الموقع (LCP)، يمنع الاهتزاز (CLS)، يزيد الزيارات من بحث الصور، ويجعل موقعك متوافقاً مع WCAG.
لماذا تحسين الصور مهم في 2026؟ - 22-27% من جميع عمليات البحث هي في Google Images - صور Google Lens زادت 40% في السنتين الأخيرتين - الصور غير المحسّنة هي السبب الأول لبطء LCP - ملايين المستخدمين يعانون من إعاقات بصرية ويعتمدون على alt text - أنظمة AI تستخدم الصور وال alt text لفهم المحتوى
اختيار الصيغة المناسبة:
| الصيغة | أفضل استخدام | الحجم vs JPEG | الشفافية |
|---|---|---|---|
| JPEG | الصور الفوتوغرافية | أساسي | لا |
| PNG | لقطات شاشة، شفافية | 20-40% أكبر | نعم |
| WebP | بديل JPEG/PNG | 25-35% أصغر | نعم |
| AVIF | أفضل ضغط | 40-55% أصغر | نعم |
| SVG | شعارات، أيقونات | متغير (قابل للتمدد) | نعم |
التوصية 2026: استخدم WebP كصيغة أساسية (97%+ دعم متصفحات). AVIF للتحسين الإضافي مع fallback WebP.
Alt Text: أقوى إشارة سيوية للصور
Alt text هو النص الذي تقرأه Google لتفهم محتوى الصورة، وتقرأه قارئات الشاشة للمستخدمين ضعاف البصر. لا يوجد إشارة سيوية أقوى منه.
قواعد كتابة Alt Text: 1. صف الصورة وليس الصفحة: "حذاء جلدي بني مع أحزمة قماش" أفضل من "منتج". 2. كن محدداً: "دراجة نارية حمراء هوندا CB650R" أفضل من "مركبة". 3. ضع الكلمة المفتاحية طبيعياً مرة واحدة. 4. حافظ على 80-125 حرفاً. 5. لا تبدأ بـ "صورة" أو "صورة لـ" - قارئات الشاشة تعرف أنها صورة. 6. استخدم alt="" للصور الزخرفية (عناصر تزيينية فقط).
التحسين التقني:
الضغط والحجم: - صورة الهيرو: تحت 500KB، يفضل تحت 200KB - الصور داخل المحتوى: تحت 100KB - الصور المصغرة: تحت 50KB - استخدم مستوى جودة 80-85 (غير ملحوظ بصرياً لكنه يقلص الحجم 30-50%)
الأبعاد width/height: أضف width و height لكل <img>. هذا يمنع CLS تماماً. المتصفح يحسب aspect ratio ويحجز المساحة قبل التحميل.
Lazy Loading الصحيح: ```html <!-- صورة الهيرو (لا تستخدم lazy) --> <img src="hero.webp" width="1200" height="630" fetchpriority="high">
<!-- الصور أسفل الشاشة --> <img src="body-image.webp" width="800" height="500" loading="lazy" decoding="async"> ``` لا تستخدم loading="lazy" على صورة الهيرو أبداً. هذا يدمر LCP.
Responsive Images مع srcset: ```html <img src="image-800.webp" srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w" sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px" alt="وصف الصورة" width="800" height="500" loading="lazy"> ``` هذا يخدم الصورة المناسبة لكل جهاز بدلاً من إجبار الموبايل على تحميل صورة 2000px.
خريطة XML للصور: أضف image sitemap تخبر Google بجميع صور موقعك و alt texts. معظم إضافات السيو (Yoast، RankMath) تفعل ذلك تلقائياً.
Structured Data للصور: استخدم ImageObject schema لتربط الصورة بالمؤلف والترخيص: ```json { "@context": "https://schema.org", "@type": "ImageObject", "contentUrl": "https://example.com/image.webp", "author": "اسم المصور", "license": "https://creativecommons.org/licenses/by/4.0/" } ``` المواقع التي تستخدم ImageObject schema تُستشهد 4 مرات أكثر في إجابات AI.
الأخطاء الشائعة: - أسماء ملفات IMG_4827.HEIC (لا قيمة سيوية) - صورة الهيرو أكبر من 2MB - عدم تحويل JPEG إلى WebP - Lazy loading على صورة الهيرو - Alt text عام مثل "image" أو "photo" - عدم تحديد width/height (CLS) - صور زخرفية مع alt نص بدلاً من alt="" - حشو الكلمات في alt text (يضر أكثر مما ينفع)
افحص صور موقعك مع Waxbix SEO Tool: اكتشف الصور غير المحسّنة، المفقود alt text، وحجم مشاكل LCP.