النص رخيص (كيلوبايت). الصور باهظة الثمن (ميجابايت). إذا قمت بتحميل ملف JPEG بحجم 5 ميجابايت مباشرة من كاميرا DSLR إلى صفحتك الرئيسية، فقد ارتكبت جريمة ضد الأداء. على شبكة 3G، يستغرق تحميل هذه الصورة 20 ثانية. لقد ذهب المستخدم. تحسين الصورة هو الشيء الوحيد الأكثر تأثيرًا الذي يمكنك القيام به لـ Core Web Vitals.

لماذا تتحدث Maison Code عن هذا

في Maison Code Paris، نعمل كضمير معمari لعملائنا. غالبًا ما نرث حزمًا “حديثة” تم بناؤها دون فهم أساسي للحجم.

نناقش هذا الموضوع لأنه يمثل نقطة تحول حاسمة في النضج الهندسي. التنفيذ الصحيح يميز MVP الهش عن منصة مؤسسية مرنة يمكنها التعامل مع حركة مرور الجمعة السوداء.

حرب التنسيق: JPG vs WebP vs AVIF

JPG/PNG: الحرس القديم. ثقيل. PNG جيد للشفافية، ولكنه ضخم.
WebP: معيار Google. أصغر بنسبة 30% من JPG. مدعوم من جميع المتصفحات الحديثة.
أفيف: الملك الجديد. استنادًا إلى برنامج ترميز الفيديو AV1. أصغر بنسبة 50% من JPG. دعم تقرير التنمية البشرية. الاستراتيجية: خدمة AVIF للمتصفحات التي تدعمه (Chrome، Safari). الرجوع إلى WebP. الرجوع إلى JPG. يقوم Next.js <Image /> بتنفيذ ذلك تلقائيًا.

التحجيم المستجيب (srcset)

لا يحتاج المستخدم على جهاز iPhone (شاشة عريضة 375 بكسل) إلى شعار سطح مكتب بعرض 4000 بكسل. إنه يهدر عرض النطاق الترددي وذاكرة GPU (تصغير الحجم). تحتاج إلى تقديم أحجام مختلفة لأجهزة مختلفة. طريقة HTML:

<img 
  إس آر سي = "small.jpg"
  srcset="medium.jpg 1000 واط، كبير.jpg 2000 واط"
  الأحجام = "(الحد الأقصى للعرض: 600 بكسل) 100 فولت واط، 50 فولت واط"
/>

ينظر المتصفح إلى العرض الخاص به، ويحسب كثافة البكسل (Retina 2x)، ويختار الملف المثالي. إذا كنت تستخدم إطار عمل مثل Next.js، فما عليك سوى تحديد الخاصية sizes بشكل صحيح. “تشغل هذه الصورة 100% من شاشة الهاتف المحمول، و50% على سطح المكتب.”

التحميل البطيء مقابل التحميل المتلهف

تحميل كسول: “لا تقم بتحميل هذه الصورة حتى يقوم المستخدم بالتمرير بالقرب منها.”

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

** التحميل السريع (الأولوية) **: “قم بتحميل هذا على الفور.”

حالة الاستخدام: عنصر LCP (أكبر طلاء محتوى). عادة شعار البطل.
حرج: إذا قمت بتحميل صورة البطل ببطء، فسينتظر المتصفح حتى يتم ترطيب JS قبل تحميل الصورة. هذا يقتل نقاط LCP الخاصة بك.
القاعدة: قم بتمييز الصورة العلوية بأنها أولوية={true}.

منع تغيير التخطيط

إذا قمت بإدراج صورة بدون أبعاد:

يعرض المتصفح النص.
تحميل الصور (ارتفاع 500 بكسل).
يتم دفع النص للأسفل. هذا هو CLS (إزاحة التخطيط التراكمي). جوجل يكره ذلك. الإصلاح: احتفظ دائمًا بمساحة نسبة العرض إلى الارتفاع. يقوم المتصفح برسم “مربع نائب” بالحجم الصحيح على الفور. يتم تحميل الصورة في الصندوق.

شبكة CDN (شبكة تسليم المحتوى)

لا تخدم الصور من خادم الويب الخاص بك. قم بخدمتهم من Image CDN (Cloudinary، Imgix، Vercel Blob). لماذا؟

التحويل الفوري: image.jpg?w=500&q=80. يمكنك إنشاء الحجم/الجودة المطلوبة بالضبط.
Global Edge: يتم تخزين الصورة مؤقتًا في 200 مدينة.
الاقتصاص الذكي: يكتشف الذكاء الاصطناعي الوجه في الصورة ويقوم باقتصاصه من أجل الصورة المصغرة للهاتف المحمول.

6. الرسومات المتجهة (SVG): الدقة اللانهائية

بالنسبة للشعارات والأيقونات، لا تستخدم أبدًا ملف PNG. استخدم SVG (رسومات متجهة قابلة للتحجيم). شعار PNG بحجم 5000 بكسل هو 1 ميجابايت. نفس الشعار في SVG هو 2 كيلو بايت. ويتناسب حجمه مع حجم لوحة الإعلانات بدون بكسلات. تحذير أمني: ملفات SVG هي ملفات XML. يمكن أن تحتوي على JavaScript (XSS). قم دائمًا بتطهير جانب خادم ملفات SVG التي تم تحميلها بواسطة المستخدم باستخدام مكتبات مثل “isomorphic-dompurify”.

7. ثورة الفيديو (WebM وAV1)

الصور الثابتة مملة. تنتقل التجارة الإلكترونية إلى “التشغيل التلقائي للفيديو” عند التمرير. صور GIF فظيعة (حجم ضخم، 256 لونًا). استخدم WebM أو MP4 (H.264) بدون صوت. <حلقة التشغيل التلقائي للفيديو مع كتم صوت التشغيل عبر الإنترنت>. غالبًا ما يكون هذا أصغر من ملف GIF وألوان 32 بت كاملة. برنامج الترميز الجديد AV1 أصغر حجمًا، ولكن تحقق من دعم المتصفح.

10. تحسين LCP على المنشطات

عادةً ما تكون مؤشرات الويب الأساسية “أكبر رسم محتوى” عبارة عن صورة. لتصل إلى <2.5 ثانية:

رأس التحميل المسبق: أرسل <link rel="preload" as="image" href="hero.avif"> في الاستجابة الأولية لمستند HTML.
جلب الأولوية: استخدم <img fetchpriority="high"> (Chrome 101+).
خلفيات CSS مضمنة: إذا كان نمطًا صغيرًا، يقوم Base64 بتشفيره في CSS لتجنب طلب الشبكة.

11. استراتيجيات الصور الخلفية

تعتبر صور “الغلاف” صعبة لأن نسبة العرض إلى الارتفاع تتغير. CSS: “تناسب الكائن: الغلاف”. المشكلة: قد يتم اقتصاص “الجزء المهم” (الوجه) على الهاتف المحمول. الحل: اقتصاص نقطة الاتصال. نحن نستخدم نقاط اتصال Sanity CMS. نقوم بتمرير إحداثيات النقطة المحورية (x=0.5, y=0.3) إلى Image CDN. يقوم CDN بإنشاء اقتصاص مركزي لسطح المكتب واقتصاص أعلى للجوال. يظل الاتجاه الفني سليمًا على جميع الأجهزة.

13. ثورة AVIF (الغوص العميق)

لماذا AVIF يغير قواعد اللعبة؟ وهو يدعم HDR (النطاق الديناميكي العالي). إذا كنت تبيع المجوهرات، فإن التألق يعتمد على نطاق التباين. يقوم JPEG بتثبيت الألوان على النطاق الديناميكي القياسي (SDR). يحافظ AVIF على عمق الألوان الكامل 10 بت أو 12 بت للصورة المصدر. على شاشة OLED iPhone، الماسة تلمع بالفعل. نقوم بتكوين خطوط أنابيب الوسائط الخاصة بنا لاكتشاف دعم HDR (عبر استعلامات وسائط CSS النطاق الديناميكي: عالي) وتقديم HDR AVIF فقط للأجهزة القادرة. هذه هي “الإخلاص البصري” كميزة تنافسية.

14. لماذا ميزون كود؟

في Maison Code، نحن نسعى إلى الكمال بالبكسل. نحن لا نقبل الضغط “الضبابي”. نقوم بضبط معلمة “الجودة” حسب نوع الصورة.

حزم المنتج: q=85 (خطوط واضحة).
خلفيات نمط الحياة: q=60 (التركيز الناعم جيد). نحن نبني خطوط أنابيب الصور التكيفية التي تعمل على تحسين السرعة (LCP) والجمال (الاحتفاظ). لأنه في Luxury، تعتبر الصورة المنقطة إهانة للحرفية.

15. الاستنتاج

الصور هي أثقل شيء على شبكة الإنترنت. وهم أيضا الشيء الأكثر أهمية. يجب عليك موازنة التوتر بين “سريع” و”جميل”. باستخدام برامج الترميز الحديثة (AVIF)، وبناء الجملة سريع الاستجابة (srcset)، وشبكات Edge CDN، يمكنك الحصول على كليهما. توقف عن تقديم ملفات JPEG بحجم 5 ميجابايت. احترم خطة بيانات المستخدم الخاص بك.

تحميل الصور بطيء؟

نقوم بتحسين خطوط أنابيب الوسائط للحصول على LCP الفوري والدقة المرئية المثالية على جميع الأجهزة.

[ضغط الأصول الخاصة بي](/جهة الاتصال). قم بتوظيف مهندسينا.