كيف تجهز صور المواقع دون أن تصبح ضبابية؟

اضبط الحجم لأكبر عرض فعلي

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

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

طابق الصيغة مع نوع الصورة

استخدم JPG أو WebP بفقد للصور الفوتوغرافية، وPNG للشفافية ورسومات الواجهة الحادة عندما يبقى الحجم معقولًا. WebP صيغة عرض حديثة قوية، مع الاحتفاظ بالأصول القابلة للتعديل.

لا يكفي تغيير الصيغة وحده؛ قد تبقى WebP بعرض 5000 بكسل ضخمة، وقد تظل JPG صغيرة ومضغوطة جدًا ضعيفة.

اضغط بعد تغيير الأبعاد

غيّر الأبعاد واقص أولًا ثم اضغط المقاس النهائي. غالبًا تناسب جودة 75–85% الصور، لكن افحص الصورة نفسها لأن النص والتدرجات والبشرة والأوراق والأنماط تكشف الآثار بطرق مختلفة.

استخدم هدف بايت فقط عندما تفرضه المنصة. في الموقع العادي تكون الجودة ووزن الصفحة الكلي أهم من إجبار كل صورة على رقم KB واحد.

امنع مشاكل التخطيط وإمكانية الوصول

احجز العرض والارتفاع حتى لا تقفز الصفحة أثناء التحميل. استخدم نصًا بديلًا مفيدًا للصور المعلوماتية وفارغًا للزخرفية. حمّل صور أسفل الصفحة بكسل، لكن لا تؤخر الصورة الرئيسية المؤثرة على LCP.

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

• استخدم أفضل مصدر متاح.
• اقص لتحسين التكوين.
• غيّر الحجم وفق العرض الفعلي.
• اختر JPG أو PNG أو WebP بوعي.
• اضغط وافحص واختبر الصفحة النهائية.