البرامج التعليمية
تدقيق الصور المتجاوبة مع Claude Opus 5.5: إصلاح صور المنتجات الضبابية
استخدم Claude Opus 5.5 لمقارنة مساحة عرض الصورة والملفات المرشحة وطلب المتصفح قبل تصدير صورة أكبر.
استخدم Claude Opus 5.5 لمقارنة مساحة عرض الصورة والملفات المرشحة وطلب المتصفح قبل تصدير صورة أكبر. قد يأتي الغبش من اختيار مورد غير مناسب، بينما قد ينتج التنزيل الثقيل على الهاتف من المبالغة في عرض المساحة المعلن. أعط النموذج قياسات، لا لقطة شاشة فقط.
اختر الإصلاح وفق الأدلة
| الملاحظة | ما تفحصه أولًا | أصغر إصلاح مفيد |
|---|---|---|
| الأصل واضح والصفحة ضبابية | عرض العنصر وDPR والملف المطلوب | تصحيح المرشحات أو وصف المساحة |
| الهاتف ينزل أكبر ملف | `sizes` وتخطيط CSS و`currentSrc` | مطابقة الوصف مع التخطيط الفعلي |
| جزء من المنتج مقصوص | الاقتصاص و`object-fit` | تصحيح التكوين أو الاتجاه الفني |
| الملف صحيح لكن التفاصيل تالفة | بكسلات المصدر والترميز | إعادة التصدير من الأصل |
يفصل شرح MDN للصور المتجاوبة بين تبديل الدقة وتغيير التكوين. تصف `sizes` مساحة العرض، ولا تضبط عرض CSS. استخدم `picture` عندما تحتاج فعلًا إلى اقتصاصات مختلفة. لا تطلب من Opus إصلاح مقبض مقصوص برفع جودة JPEG.
حساب عملي لعرض المورد
لنفترض صفحة كوب بعرض نافذة 390 بكسل CSS وحشوة 24 بكسل في كل جانب. تصبح مساحة الصورة 390 − 48 = 342 بكسل CSS. عند DPR 2، يكون عرض المورد المبدئي 342 × 2 = 684 بكسل. بين مرشحات بعرض 480 و800 و1200، يعد 800 اختيارًا محتملًا وليس قرارًا مضمونًا للمتصفح. هذه قيم مثال افتراضي محسوبة، وليست نتيجة اختبار Opus.
إذا كان الترميز يحدد `sizes="100vw"` فهو يصف 390 بدلًا من 342 بكسل، أي زيادة تقارب 14% من المساحة الحقيقية. قد لا يغير ذلك الملف المختار مباشرة، لكنه مهم قرب حدود المرشحات. وعلى سطح المكتب لا ينبغي لبطاقة نصف العرض أن ترث وصف عرض النافذة كاملًا لمجرد أن الصورة الرئيسية تملأ الهاتف.
سجل عرض النافذة والتكبير و`devicePixelRatio` ومستطيل العنصر و`currentSrc` وأبعاد الاستجابة والبايتات المنقولة. افحص الطلب الفعلي في لوحة الشبكة وسجل حالة التخزين المؤقت. قد يبقى المورد الكبير مخزنًا بعد تغيير حجم النافذة، فلا تثبت إعادة تحجيم واحدة أن القواعد خاطئة. يشرح دليل web.dev ترك اختيار المورد المناسب للمتصفح.
مطالبة مراجعة كاملة
راجع اختيار مورد صورة المنتج هذه. المدخلات: HTML أو كود المكون، CSS المرتبط، أسماء الملفات المرشحة وأبعادها الفعلية بالبكسل، عرض النافذة وDPR، مستطيل الصورة المعروض، currentSrc وحجم النقل في الشبكة. اعتبر القياسات الغائبة مجهولة.
افصل بين اختيار الدقة والاقتصاص الفني وتلف الضغط. احسب عرض المساحة × DPR للظروف المقدمة وقارنه بالملف المطلوب. تحقق من تطابق كل واصف عرض مع أبعاد الملف. اشرح هل يطابق sizes تخطيط CSS عند كل نقطة توقف مقدمة. لا تضمن اختيار المتصفح من الترميز وحده.
أعد جدول أدلة، والسبب الأرجح مع درجة عدم اليقين، وأصغر تعديل للكود، ومصفوفة تحقق للشاشات الضيقة والواسعة عند DPR 1 و2. حافظ على تأطير المنتج والنص البديل وواجهة المكون الحالية. إذا كانت الأدلة ناقصة فحدد القياس التالي بدل إعادة كتابة نظام الصور كله.تستفيد هذه المطالبة من تقديم السياق وتحديد المخرجات كما في دليل Opus الرسمي. سير العمل توضيحي؛ لا ندعي تشغيل اختبار للنموذج هنا.
تحقق مما يصل إلى العميل
كرر فحص المنتج نفسه عند العروض المسجلة، وراجع الحواف الدقيقة بالحجم المعتاد. تحقق من الملف والبايتات والمظهر معًا. حافظ على عرض وارتفاع محددين أو حجز موثوق لنسبة الأبعاد حتى لا يقفز التخطيط أثناء التحميل. اقبل التعديل حين يبقى التأطير صحيحًا وتتوفر موارد مناسبة دون فرض أكبر أصل على كل شاشة.
أسئلة شائعة
**هل يجب أن يكون كل مصدر ضعف عرض العرض؟** DPR 2 حالة اختبار واحدة، وليس قاعدة تصدير عامة. يظل التخطيط وتباعد أحجام المرشحات واختيار المتصفح مؤثرًا.
**هل يصلح الضغط الإضافي قيمة `sizes` الخاطئة؟** قد يقلل البايتات ويترك خطأ الاختيار كما هو. أصلح وصف المساحة أولًا.
**هل تثبت لقطة الشاشة المورد المحمل؟** لا. اربطها بـ`currentSrc` واستجابة الشبكة؛ قد يبدو موردان مختلفا الحجم متشابهين في لقطة صغيرة.
انقل الأصل المعتمد إلى الحملة
اجمع صورة المنتج المعتمدة مع اقتصاصها قبل إنشاء تنويعات الحملة في Panelly Studio. راجع انعكاس صور المنتجات ومنظورها عندما تبدو هيئة المنتج نفسها خاطئة. دور Panelly هنا تسليم العمل الإبداعي، وليس تكاملًا معلنًا مع Opus.
