اختر بحسب الوظيفة التي يجب أن تؤديها الصورة
ابدأ بالأصل، لا بالامتداد. الصورة الفوتوغرافية هي محتوى ذي نغمات مستمرة؛ لذا قد يكون فقدان طفيف مقبولًا عند حجم العرض. لقطات الشاشة والمخططات والشعارات أو الرسوم الخطية لها حواف ونص واضح، حيث تكون التشوهات بارزة. احفظ هذه العناصر بإخراج بلا خسارة أو بموافقة دقيقة. استخدم SVG لشعار أو مخطط متجه عندما يتوفر.
ثم حدّد القدرات المطلوبة. قناة ألفا تعني الشفافية لكل بكسل. التحريك يعني سلسلة إطارات. تغطية المتصفحات المطلوبة، حجم النشر، ووقت البناء هي قيود للتسليم قد تغلب على اختيار التنسيق الأصغر.
اختبر AVIF و WebP بفقدان أولاً. احتفظ بـ JPEG متاحًا عندما يكون مطلوبًا خيار تراجع واسع التوافق للصور غير الشفافة.
احتفظ بأصل بلا خسارة. قارن PNG مع WebP أو AVIF بلا خسارة عند مقياس العرض الفعلي قبل الاختيار.
استخدم AVIF أو WebP أو PNG؛ لا تختَر JPEG لأنه لا يحمل قناة ألفا.
افهم ما يقدمه كل تنسيق
AVIF يخزن صورًا مشفّرة بـ AV1 داخل تنسيق قائم على HEIF. تتضمن مواصفاته الصور الثابتة، تسلسل الصور، وعناصر صورة الألفا. يدعم الترميز بفقدان وبدون فقدان، الشفافية، والتحريك. لا تكون الوفورات ثابتة: المحتوى المصدر، المشفر، السرعة، جودة الهدف، والبيانات الوصفية تغير النتيجة.
يدعم WebP أوضاعًا بفقدان وبدون فقدان، الشفافية، والتحريك. JPEG هو تنسيق صور ثابت بفقدان ذو دعم تاريخي واسع، مفيد كخيار تراجع للصور غير الشفافة. PNG بلا خسارة ويدعم ألفا، مما يجعله خيار تراجع موثوقًا للرسوم الدقيقة، رغم أن PNG الفوتوغرافي غالبًا ما يكون غير فعّال. PNG العادي ثابت؛ اختبر تنسيقًا منفصلاً للتحريك عند الحاجة للحركة.
يجدر استكشافه للصور النقطية عالية القيمة حيث يمكن لحجم نقل أصغر أن يبرّر عمل الترميز وخيارات التراجع.
مفيد كخيار نقطي عصري عام، بما في ذلك الشفافية والتسلسلات المتحركة.
استخدمه كخيار تراجع للصور الفوتوغرافية غير الشفافة، وليس لشعار شفاف أو قصّ.
استخدمه كتراجع نقطي بلا خسارة وشفاف، وللموارد التي تهم فيها دقة البيكسل أكثر من تقليل البايتات.
ابنِ مسار تراجع بدلًا من المراهنة على تنسيق واحد
يسمح عنصر picture للمستعرض بتقييم البدائل. ضع AVIF أولًا، ثم WebP، ثم عنصر img كخيار تراجع بـ JPEG أو PNG، مع نوع MIME الصحيح. يتخطى المتصفح مصدرًا غير مدعوم ويستخدم التراجع عندما لا يكون أي مصدر قابلاً للاستخدام. احتفظ بنفس نص البديل المعنوي ما لم تغير القص عمدًا.
استبدال التنسيق لا يلغي الحاجة إلى الاختيار التكيفي للأحجام. زود مرشحين اعتمادًا على العرض وقيّم قيمة sizes الحقيقية عندما تختلف المساحة. أدرج width و height حتى يتمكن المتصفح من حجز المساحة. ملف بحجم صغير وبأبعاد بكسل كبيرة ما يزال يهدر بايتات.
AVIF أولًا، WebP ثانيًا، ثم JPEG للصور الفوتوغرافية غير الشفافة أو PNG عندما يحتاج التراجع للشفافية أو حواف بلا خسارة.
إذا اختار الخادم التنسيقات بناءً على قدرات الطلب بدلًا من ترميز picture، فقم بتكوين تباين التخزين المؤقت (cache variation) بشكل صحيح واختبر أن كل عميل يتلقى تمثيلًا قابلاً للفك.
استخدم عميلًا بدون فك تشفير المفضل أو عطل مصدرًا عمدًا في بيئة التجريب؛ أكد أن الصورة والأبعاد ونص البديل تبقى صحيحة.
خصص وقت الترميز واحمِ الجودة البصرية
الضغط الحديث ينقل العمل إلى مرحلة الترميز. يقدم مشفر AVIF المرجعي نطاق سرعة من 0 الأبطأ إلى 10 الأسرع؛ كما يتبادل WebP أيضًا وقت المشفر مقابل حجم المخرج والجودة. عامل إعادة الترميز الدفعي أو التحويل عند الطلب كقرار تشغيلي، ليس إعدادًا مجانيًا.
حدّد سياسة قابلة للتكرار حسب فئة الأصل وراجع الأصليات عند أحجام العرض الشائعة. افحص الوجوه، التدرجات، النص، الحواف، والحدود الشفافة. احتفظ بالأصل وسجل إصدار المشفر والإعدادات حتى يمكن إعادة إنتاج العيب والتراجع إذا لزم.
الترميز الأسرع قد يخفف ضغط البناء لكنه قد ينتج ملفًا أكبر أو ضغطًا أقل كفاءة؛ قم بقياس مجموعتك المصدرية الخاصة بك.
لا يمكن لدرجة أو إعداد أن يحل محل مراجعة بصرية لمناطق الصورة التي تحمل معنى للزوار.
اجعل تغييرات تنسيق الصورة ممارسة موثوقة واستباقية
For Status Is UP، تحسين الصور عمل صيانة استباقية عندما يمنع إصدارًا من إضعاف صفحة حرجة. قم بجرد عناوين URL للصور الحرجة، نفِّذ تحويلًا تمثيليًا على بيئة التجريب، وتحقق من نوع المحتوى، سلوك CDN، وإبطال التخزين المؤقت قبل ترحيل الموقع على نطاق واسع.
انشر في دفعة قابلة للعودة. قارن السلوك العرضي ونقل البيانات على مرشح الإصدار، ثم احتفظ بالتمثيل القديم حتى يثبت المسار الجديد. إذا فشل تحويل أو قاعدة تخزين مؤقت، استعد الأصل المعروف الجيد. هذه دورة تسليم مرنة، ليست فرضًا عامًا على AVIF أو تنسيقات متعددة.
أعطِ الأولوية للصورة القيادية وصور المحتوى التي تؤثر على أول عرض مفيد، وليس لكل صورة أرشيفية دفعة واحدة.
احتفظ بأسماء أصول حتمية أو خريطة إصدار حتى يمكن استعادة مسار JPEG أو PNG أو WebP السابق بسرعة.