Deployment & Environment Variables in Next.js Quiz – 15 Questions with Answers
15 questions · 12 min · Medium
Image & Font Optimization in Next.js
Test your knowledge of image and font optimization in Next.js, including next/image, next/font, responsive images, image formats, loading strategies, and performance optimization.
- 15
- Questions
- 12 min
- Time limit
- Medium
- Difficulty
No sign-up needed · Last updated:
Score: 0 00:00
Save your score
Create a free account to keep your scores and track your progress. It is optional.
Questions to review
Related quizzes
Dynamic Routing & Catch-all Routes in Next.js
15 questions · 12 min · Medium
Next.js API Routes & Server Actions Quiz – 20 Questions with Answers
20 questions · 15 min · Medium
Data Fetching (SSR, SSG, ISR) in Next.js Quiz – 15 Questions with Answers
15 questions · 12 min · Medium
State Management in Next.js Quiz
15 questions · 12 min · Medium
Layouts & Pages in Next.js
15 questions · 12 min · Medium
All 15 questions and answers Spoilers: this shows the questions and answers. Try the quiz first! Open
-
1. Which Next.js component is primarily used for optimized images?
- A. Image
- B. NextImage
- C. next/image
- D. OptimizedImage
Show answer
C. next/image
The Image component is imported from next/image and provides features for optimized image loading, sizing, and responsive delivery.
-
2. What is a major benefit of using the Next.js Image component?
- A. It automatically converts every image into SVG
- B. It provides image optimization and responsive delivery features
- C. It removes the need for CSS
- D. It prevents all image downloads
Show answer
B. It provides image optimization and responsive delivery features
Next.js Image provides optimization features such as responsive sizing, optimized formats, and lazy loading in appropriate situations.
-
3. Which property is commonly required when using a local image with the Next.js Image component?
- A. src
- B. href
- C. path
- D. source
Show answer
A. src
The src prop specifies the image source. With statically imported local images, Next.js can also infer dimensions from the imported image.
-
4. Why are image dimensions important when using the Next.js Image component?
- A. They help prevent unexpected layout shifts
- B. They disable image optimization
- C. They make images downloadable only
- D. They remove the need for a source
Show answer
A. They help prevent unexpected layout shifts
Knowing an image's dimensions allows the browser to reserve appropriate space before the image loads, helping reduce layout shifts.
-
5. Which property can be used with next/image when the image should fill the dimensions of its positioned parent?
- A. fill
- B. expand
- C. cover
- D. responsive
Show answer
A. fill
The fill prop makes the Image component fill the dimensions of its parent container, which should provide an appropriate positioning context.
-
6. Which CSS property is commonly used with a fill image to control how the image fits within its container?
- A. object-fit
- B. image-fit-mode
- C. fit-image
- D. background-size-only
Show answer
A. object-fit
The CSS object-fit property can control how a replaced element such as an image fits within its container.
-
7. What is the purpose of the priority-related loading configuration for an important image in Next.js?
- A. To indicate that the image is important for initial loading
- B. To prevent the image from being displayed
- C. To convert the image into a font
- D. To disable all image optimization
Show answer
A. To indicate that the image is important for initial loading
For an image that is important to the initial viewport, Next.js provides mechanisms to prioritize its loading so it is not treated like a typical lazy-loaded image.
-
8. Which Next.js feature is designed to optimize and load fonts efficiently?
- A. next/font
- B. next/fonts
- C. font/next
- D. next/typography
Show answer
A. next/font
The next/font module provides built-in font optimization and allows fonts to be loaded efficiently as part of the application.
-
9. Which function can be used to load a Google Font with next/font/google?
- A. Inter
- B. loadGoogleFont
- C. GoogleFont
- D. useGoogleFont
Show answer
A. Inter
next/font/google exports individual Google Font functions, such as Inter, which can be imported and configured in a Next.js application.
-
10. What is a key benefit of using next/font?
- A. It removes the need for HTML
- B. It helps optimize font loading and can self-host supported fonts
- C. It converts fonts into images
- D. It prevents CSS from loading
Show answer
B. It helps optimize font loading and can self-host supported fonts
next/font integrates font loading into the Next.js build process and can self-host supported fonts, helping reduce dependence on external font requests.
-
11. Which module is used for loading a local font file with next/font?
- A. next/font/local
- B. next/local-font
- C. next/font/file
- D. next/fonts/local
Show answer
A. next/font/local
The next/font/local module allows local font files to be loaded and optimized within a Next.js application.
-
12. What is the purpose of the sizes prop in the Next.js Image component?
- A. To tell the browser how large the image will appear at different viewport sizes
- B. To specify the image file extension
- C. To define the image's alt text
- D. To disable responsive images
Show answer
A. To tell the browser how large the image will appear at different viewport sizes
The sizes prop provides responsive size information that helps the browser select an appropriate image resource.
-
13. When using a remote image source with next/image, what may need to be configured in Next.js?
- A. The remote image host must be allowed by the image configuration
- B. The image must always be converted to PNG
- C. The image must be stored in the public directory
- D. The image must be embedded as base64
Show answer
A. The remote image host must be allowed by the image configuration
For remote images, Next.js requires the remote source to be permitted through the appropriate image configuration, such as remotePatterns.
-
14. Which image format can modern Next.js image optimization commonly serve when supported by the browser?
- A. WebP
- B. BMP only
- C. TIFF only
- D. PSD
Show answer
A. WebP
Next.js image optimization can serve modern formats such as WebP when appropriate and supported by the browser.
-
15. What is the overall goal of image and font optimization in a Next.js application?
- A. To increase unnecessary network requests
- B. To improve loading performance and reduce unnecessary resource costs
- C. To prevent users from accessing images
- D. To replace JavaScript with CSS
Show answer
B. To improve loading performance and reduce unnecessary resource costs
Optimizing images and fonts can reduce resource size, improve loading behavior, minimize layout shifts, and contribute to better overall web performance.