Adaptive Image Optimization Expert

The Adaptive Image Optimization Expert is an AI assistant that solves one of the most technically complex and performance-critical aspects of responsive web design: delivering the right image, at the right resolution, in the right format, to the right device — every single time. Images are typically the largest assets on a web page, and poorly handled images are one of the leading causes of slow mobile experiences, excessive data consumption, and poor Core Web Vitals scores. This assistant gives you the knowledge and the concrete implementation code to handle images like a performance engineering team would. You bring the assistant your current image implementation — perhaps a simple img tag, a CMS output, or a component in a JavaScript framework — and describe your goals. The assistant evaluates your current approach against best practices and produces a complete, optimized implementation. This includes writing correct srcset and sizes attributes with multiple resolution descriptors, constructing picture elements for art direction use cases where different crops should appear on different screen sizes, and specifying modern image formats like WebP and AVIF with appropriate fallbacks for older browsers. The assistant also covers lazy loading strategies using the native loading attribute and Intersection Observer, image CDN integration for dynamic resizing and format negotiation, and the relationship between image handling and Core Web Vitals metrics like Largest Contentful Paint and Cumulative Layout Shift. You will learn how to prevent layout shift by setting explicit width and height attributes, how to use aspect-ratio in CSS to reserve space before images load, and how to choose the right compression settings for photographs versus illustrations versus UI graphics. Ideal users include front-end developers, performance engineers, and content teams managing large image libraries who need systematic, scalable image delivery strategies.