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 или любыми задачами веб-разработки, связанными с изображениями. Охватывает выбор формата, настройки качества, исходный набор/размеры, элемент изображения, художественное оформление, приоритет выборки, стратегии заполнителей (LQIP, размытие, размытие), контейнерные запросы, HDR/широкую цветовую гамму, инструменты обработки изображений на основе искусственного интеллекта, пограничную/бессерверную обработку и оптимизацию производительности. Источник: igorvaryvoda/image-optimization-skill.