Image Optimization

## 1. Learning Objectives By the end of this lesson, you will be able to use `next/image`, prevent layout shift, configure responsive sizes, prioritize LCP images, and safely allow remote image hosts. Difficulty: Beginner. ## 2. Prerequisites - React components. - HTML image basics. - Core Web Vitals awareness. ## 3. Overview Next.js Image optimization improves image loading with resizing, modern formats, lazy loading, and layout stability. The `Image` component gives Next.js enough information to serve the right image at the right size. ## 4. Why This Topic Matters Images are often the largest assets on a page. Poor image sizing and loading can hurt Largest Contentful Paint, waste bandwidth, and create layout shift. ## 5. Real-World Analogy Image optimization is like serving meals in the right portion size. You do not hand every person a family platter when they only need a small plate. ## 6. Core Concepts | Concept | Meaning | |---|---| | `next/image` | Optimized image component. | | `width` and `height` | Reserve space to prevent layout shift. | | `sizes` | Tells browser expected rendered sizes. | | `priority` | Marks important above-the-fold image. | | Remote patterns | Allowed external image sources. | ## 7. Syntax & API Reference

## 8. Visual Diagram

## 9. Live Example - Full Working Code

What just happened? The browser receives an appropriately sized image candidate and the layout reserves image space. ## 10. Interactive Playground Try this: - Replace `` with `Image`. - Add missing `alt` text. - Tune `sizes` for a grid layout. ## 11. Common Mistakes | Mistake | Why It Happens | Correct Approach | |---|---|---| | Missing dimensions | CSS controls final size. | Provide width/height or fill with stable parent size. | | Overusing `priority` | It sounds faster. | Use it only for likely LCP images. | | Bad `sizes` value | Responsive images are subtle. | Match actual rendered widths. | ## 12. Best Practices - Use `Image` for content images. - Provide meaningful `alt` text. - Reserve layout space. - Mark only critical above-the-fold images as priority. - Configure remote hosts explicitly. ## 13. Browser Compatibility | Feature | Browser Impact | Notes | |---|---|---| | Responsive images | Broad support | Browser chooses best source. | | Modern formats | Browser dependent | Next.js can serve supported formats. | | Lazy loading | Modern browser behavior | Built into image loading flow. | ## 14. Interview Questions **Easy:** What component optimizes images in Next.js? Answer: `next/image`. **Medium:** Why provide width and height? Answer: To reserve space and reduce layout shift. **Hard:** What does the `sizes` prop do? Answer: It tells the browser how wide the image will render at different viewport sizes so it can choose the right source. ## 15. Debugging Exercise Bug report: "The hero jumps after the image loads." Solution Reserve image space with width/height or a stable aspect-ratio container when using fill. ## 16. Practice Exercises - Easy: Convert a static product image to `Image`. - Medium: Add responsive `sizes` for a card grid. - Hard: Configure remote images from a CDN safely. ## 17. Scenario-Based Challenge A landing page's LCP is a remote hero image. What should you check? Walkthrough Use `Image`, configure remote patterns, set correct dimensions and `sizes`, consider `priority`, and compress the original asset. ## 18. Quick Quiz 1. Image component import? Answer: `next/image`. 2. What prevents layout shift? Answer: Reserved dimensions/aspect ratio. 3. Should every image use priority? Answer: No. 4. What config allows remote hosts? Answer: Image remote patterns. 5. What metric can hero images affect? Answer: LCP. ## 19. Summary & Key Takeaways - Images heavily affect performance. - `next/image` optimizes size, format, and loading. - Dimensions prevent layout shift. - `priority` is for key above-the-fold images. - `sizes` should match real layout behavior. ## 20. Cheat Sheet | Need | Prop/Config | |---|---| | Source | `src` | | Accessibility | `alt` | | Stable size | `width` / `height` | | Responsive width | `sizes` | | LCP preload | `priority` | ## 21. Further Reading - Next.js Docs: Image Component. - Next.js Docs: Image Optimization. - web.dev: Optimize LCP. ## 22. Next Lesson Preview Next, you will learn font optimization and how to prevent text-related layout shifts.