image-optimization

| Photos | AVIF | WebP → JPEG | | Graphics/logos with transparency | SVG | WebP → PNG | | Photos with transparency | WebP | PNG | | Animations | WebP | GIF (or MP4 for long animations) | | Icons | SVG | WebP → PNG | | Screenshots | WebP | PNG |

| JPEG | 75-85 | 80 is sweet spot for photos | | WebP | 75-85 | More efficient than JPEG at same quality | | AVIF | 60-75 | Much more efficient, use lower numbers | | PNG | N/A | Lossless, optimize with tools like oxipng |

Standard widths: 320, 480, 768, 1024, 1366, 1600, 1920, 2560

إرشادات الخبراء حول تحسين الصورة لأداء الويب. يُستخدم عند العمل مع تنسيقات الصور (WebP أو AVIF أو JPEG أو PNG أو GIF أو SVG أو HEIC أو JPEG XL)، أو إعدادات الضغط، أو الصور سريعة الاستجابة، أو التحميل البطيء، أو شبكات CDN، أو Core Web Vitals، أو أي مهمة تطوير ويب متعلقة بالصور. يغطي اختيار التنسيق، وإعدادات الجودة، وsrcset/الأحجام، وعنصر الصورة، والتوجيه الفني، وأولوية الجلب، واستراتيجيات العناصر النائبة (LQIP، والتمويه، والتمويه)، واستعلامات الحاوية، ونطاق ألوان HDR/عريض، وأدوات الصور التي تعمل بالذكاء الاصطناعي، ومعالجة الحافة/بدون خادم، وتحسين الأداء. المصدر: igorvaryvoda/image-optimization-skill.