تدقيق صور AVIF
تحويل JPEG إلى AVIF فقط عندما يسرّع الصفحة فعلاً
يكون AVIF أكثر فائدة عند التعامل معه كتدقيق للصور وليس كإعداد تصدير شامل. هذا الدليل يساعدك في اختيار صور JPEG التي تستحق AVIF، واختيار عملية مراجعة، وتجنب نشر ملفات أصغر لكنها أقل جودة بصريًا.
الحكم السريع
حوّل الاستثناءات فقط، وليس مجلد الوسائط بأكمله
أفضل قرار لتحويل JPEG إلى AVIF يبدأ بتأثير الصفحة. حوّل الملفات الفوتوغرافية الكبيرة التي لا تزال تبطئ الصفحة بعد تغيير الحجم. اترك الصور المصغرة الروتينية، لقطات واجهة المستخدم، المخططات، والملفات الصغيرة لمسار أبسط.
استخدم AVIF عندما تظل صورة البطل أو صفحة الهبوط تهيمن على الوزن بعد تغيير الحجم وتصدير WebP.
اختبر AVIF فقط إذا كان الملف الحالي لا يزال ثقيلًا بشكل ملحوظ أو إذا كانت الصفحة تعاني من مشكلة سرعة واضحة.
تجنب AVIF عندما تكون الصورة صغيرة، أو واجهة مستخدم في الغالب، أو تحتوي على نصوص كثيرة، أو لا يمكنك فحص النتيجة قبل النشر.
تدقيق الصور أولاً
اطرح هذه الأسئلة قبل اختيار AVIF
يمكن أن يكون AVIF ممتازًا، لكنه ليس حلاً سحريًا. التنسيق مهم فقط بعد ضبط حجم الصورة بشكل صحيح، وتعيينها للدور المناسب، ومراجعتها في التخطيط الذي سيراه الزوار فعليًا.
| سؤال | سبب الأهمية | إجراء |
|---|---|---|
| هل حجم العرض الحالي صحيح؟ | لا يمكن لـ AVIF إصلاح صورة بحجم 4000 بكسل معروضة بحجم 900 بكسل. | غير الحجم أولاً، ثم قارن التنسيقات. |
| هل تؤثر هذه الصورة على LCP أو الانطباع الأول؟ | الصور الكبيرة فوق الطية لها تأثير أكبر من الزخارف العميقة في الصفحة. | أعطِ الأولوية للصور الرئيسية، وصفحات الهبوط، والحملات. |
| هل المحتوى فوتوغرافي؟ | عادةً ما يتألق AVIF في الصور الفوتوغرافية وليس في واجهات المستخدم المسطحة أو الرسومات الشعارية. | استخدم PNG أو SVG أو WebP عندما تكون الحواف الحادة أكثر أهمية. |
| هل يمكنك مراجعة النتيجة في السياق؟ | يمكن لـ AVIF إخفاء العيوب حتى توضع الصورة في التخطيط الحقيقي. | تحقق من عرض الجوال، التدرجات، الوجوه، والقص. |
| هل لديك مسار بديل؟ | ليست كل البيئات تتعامل مع التنسيقات الحديثة بنفس الطريقة. | انشر مع ترميز الصور أو ما يعادله في إطار العمل الخاص بك. |
اختيار المرشحين
أي صور JPEG هي مرشحة جيدة لـ AVIF؟
ابحث عن الصور التي يؤدي فيها تصغير الملف إلى تغيير الصفحة، وليس فقط مدير الملفات. المرشحون الأقوى عادة ما يكونون فوتوغرافيين، مهمين بصريًا، وكبيرين بما يكفي للتأثير على سرعة التحميل المدركة.
صورة بطل LCP
الصورة الفوتوغرافية الكبيرة التي تحدد العرض الأول للصفحة وتظل ثقيلة بعد تغيير الحجم هي عادة أقوى حالة لاستخدام AVIF.
صورة حملة صفحة الهبوط
يمكن لصورة حملة أو منتج أن تبرر المراجعة الإضافية عندما تظهر في أعلى الصفحة وتحتاج إلى الحفاظ على مظهرها البصري المتقن.
صورة مميزة تحريرية
استخدم AVIF عندما تكون الصورة كبيرة بما يكفي لتؤثر، وليس فقط لأن كل صورة مقال تُصدر مجددًا.
لقطات شاشة تحتوي على نصوص كثيرة
غالبًا ما تفشل لقطات الشاشة، والتقاطات واجهة المستخدم، والمخططات، والرموز في وضوح النص قبل أن تستفيد من ضغط AVIF.
مراجعة الجودة
لا تنسخ أرقام الجودة بين أدوات AVIF
مقاييس جودة AVIF ليست موحدة. القيمة التي تبدو جيدة في مشفر قد تكون ناعمة جدًا أو ثقيلة جدًا في آخر. ابدأ بالإعداد الافتراضي أو جودة متوسطة، ثم قيم النتيجة على الصفحة الحقيقية.
الهدف ليس أصغر ملف AVIF ممكن، بل أصغر ملف يدعم الصفحة: تفاصيل نظيفة كفاية، تدرجات مقبولة، لا فقدان مزعج للنسيج، ولا تغير ملحوظ في اللون.
- قارن مع JPEG أو WebP بعد تغيير الحجم، وليس مع ملف الكاميرا الأصلي.
- افحص الصورة بحجم العرض المكتبي المعروض وعرض الجوال.
- تحقق من الوجوه، السماء، التدرجات، الظلال، التفاصيل الصغيرة، وألوان العلامة التجارية.
- تأكد من تحميل الملف فعليًا على الصفحة التي تخطط لنشرها.
أنماط الفشل البصري
عيوب AVIF التي تستحق الفحص قبل النشر
يمكن لتصدير AVIF الجيد أن يبدو ممتازًا، أما السيء فقد يفشل بهدوء: الملف أصغر، لكن الصورة تبدو مسطحة أو مشوشة أو بها ضوضاء في الجزء الذي يلاحظه المستخدمون أولاً.
التسليم
انشر AVIF مع مسار بديل، وليس كبديل أعمى
لصور الصفحات المهمة، اجعل التسليم بسيطًا ومتوقعًا. استخدم AVIF أولاً عند الدعم، واحتفظ بمسار بديل WebP أو JPEG، وحدد العرض والارتفاع، ولا تدع المتصفح يكتشف حجم التخطيط متأخرًا.
قم بتحميل AVIF مسبقًا فقط عندما تكون الصورة هي LCP الحقيقية. تحميل كل الأصول المحولة مسبقًا قد يجعل الصفحة أكثر ازدحامًا بدلاً من تسريعها.
<picture>
<source srcset="/images/landing/hero.avif" type="image/avif">
<source srcset="/images/landing/hero.webp" type="image/webp">
<img
src="/images/landing/hero.jpg"
width="1600"
height="900"
alt="Product photo in the landing page hero"
loading="eager"
fetchpriority="high">
</picture>الخصوصية والتحكم
أبقِ صور الحملات غير المنشورة خارج تدفقات التحميل العشوائية
غالبًا ما لا تكون صور JPEG الكبيرة ملفات محايدة. قد تحتوي على منتجات غير منشورة، أعمال عملاء، دلائل موقع، مواد حملة معدة، أو أسماء ملفات تكشف عن سياق داخلي. يجب أن يكون رفعها إلى محول قرارًا مدروسًا وليس افتراضيًا.
يحافظ سير العمل المحلي على الملفات المصدرية وأسماء المخرجات وخطوات المراجعة قريبة من المشروع، وهو مفيد خصوصًا عندما تحتاج صفحة الهبوط إلى عدة محاولات تصدير قبل تحقيق التوازن البصري المناسب.
سير عمل عملي
عملية متكررة لتحويل JPEG إلى AVIF دون تحويل كل صورة إلى مشروع
- 01
اجمع فقط المرشحين الثقيلين
ابدأ بقائمة قصيرة من صور JPEG الكبيرة التي لا تزال مهمة بعد تغيير الحجم العادي وتصدير WebP.
- 02
صدّر نسخ AVIF بشكل منفصل
احتفظ بمخرجات AVIF في مجلد مخصص ليظل من السهل مقارنة ملفات JPEG المصدرية وملفات WebP الروتينية.
- 03
راجع في الصفحة الفعلية
ضع المرشح في المكون أو القالب الحقيقي وتحقق من النتيجة المرئية، وليس فقط معاينة المحول.
- 04
انشر مع ترميز مسار بديل
قدّم AVIF حيثما كان مدعومًا واحتفظ بتسليم WebP أو JPEG كمسار بديل لسلوك متوقع.
- 05
وثّق القاعدة
دوّن الأدوار التي تحصل على AVIF حتى لا يصبح التحديث التالي لعبة تخمين.
حد التنسيق
استخدم WebP كأساس وAVIF كتصعيد
عادةً ما يحتوي سير العمل السليم على مسار افتراضي ومسار استثنائي. WebP هو الافتراضي للصور الروتينية على المواقع لأنه عملي ومدعوم على نطاق واسع. AVIF يستخدم عند الحاجة لتحسين الصور الفوتوغرافية الكبيرة التي لا تزال ثقيلة.
هذا الحد يحافظ على سرعة سير عمل المقال مع توفير طريقة لإنقاذ الصور التي تهيمن على الوزن أو LCP.
قائمة التحقق قبل النشر
تحقق من هذا قبل استبدال JPEG بـ AVIF
الأسئلة الشائعة