Search

Next.js Image Component and Image Optimization

subject
nextjs
image
optimization
์ด๋ฏธ์ง€์ตœ์ ํ™”
date
2022/02/10
1 more property
nextjs๊ฐ€ ์ด๋ฏธ์ง€ ์ตœ์ ํ™”๋ฅผ ํ•ด์ค€๋‹ค๋Š”๋ฐ, ์–ด๋–ป๊ฒŒ ํ•ด์ค€๋‹ค๋Š”์ง€ ๊ถ๊ธˆํ•ด์„œ ์ฐพ์•„๋ณธ ์˜์ƒ - nextjs๊ฐ€ ๊ฐ๊ฐ์˜ ์‚ฌ์ด์ฆˆ๋ณ„ ๋‹ค๋ฅธ ์ด๋ฏธ์ง€๋ฅผ ๋งŒ๋“ค๊ณ  ๋ทฐํฌํŠธ์— ๋”ฐ๋ผ ์ ์ ˆํ•œ ์ด๋ฏธ์ง€๋ฅผ ์š”์ฒญ - ๋ ˆ์ด์ง€ ๋กœ๋”ฉ ๋“ฑ โ†’ ์„ฑ๋Šฅ๊ณผ ์œ ์ €๊ฒฝํ—˜ ํ–ฅ์ƒ
โ€ข
nextjs 10์—์„œ image ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์†Œ๊ฐœ๋จ
โ€ข
html img ํƒœ๊ทธ์˜ ํ™•์žฅ ๋ฒ„์ „
โ€ข
nextjs์™€ ํฌ๋กฌํŒ€์—์„œ ์ฝœ๋ผ๋ณด๋ ˆ์ด์…˜ํ•จ
โ—ฆ
์ด๋ฏธ์ง€๊ฐ€ ์„ฑ๋Šฅ๊ณผ ํฐ ๊ด€๋ จ ์žˆ๊ธฐ ๋•Œ๋ฌธ
โ—ฆ
ํŽ˜์ด์ง€ ์‚ฌ์ด์ฆˆ์˜ ๋ฐ˜ ์ •๋„๊ฐ€ ์ด๋ฏธ์ง€์ž„.
โ€ข
props
โ—ฆ
width, height: ๋ ˆ์ด์•„์›ƒ ๋ฏธ๋ฆฌ ์žก์•„์„œ ๋กœ๋”ฉ ์ดํ›„ ๋ฆฌํŽ˜์ธํŠธ ๋ฐฉ์ง€ (cumulative layout shift)
โ—ฆ
priority: ํŽ˜์ด์ง€ ์ƒ๋‹จ์—์„œ ๋ฐ”๋กœ ๋ณด์—ฌ์ ธ์•ผ ํ•˜๋Š” ์ด๋ฏธ์ง€์˜ ๊ฒฝ์šฐ pre-load ๋˜๋„๋ก ์„ค์ •
โ–ช
pre-load ํ•˜์ง€ ์•Š์œผ๋ฉด first contentful paint ๊ฐ€ ์˜ค๋ž˜ ๊ฑธ๋ฆผ โ†’ ์„ฑ๋Šฅ๊ณผ ์œ ์ €๊ฒฝํ—˜์— ๋‚˜์œ ์˜ํ–ฅ
โ€ข
core-vital ๊ณผ๋„ ๊ด€๋ จ์žˆ๋Š”๋ฐ, ์š”์ฆ˜์€ core-vital์ด ์ข‹์•„์•ผ ๊ตฌ๊ธ€ ์ƒ๋‹จ์— ๋žญํฌ๋จ โ†’ ๋…ธ์ถœ๊ณผ ๊ด€๋ จ
โ—ฆ
layout: fill | fixed | intrinsic... ์–ด๋–ป๊ฒŒ ๊ณต๊ฐ„ ์ฑ„์šธ๊ฑด์ง€
โ€ข
ํŠน์ง•
โ—ฆ
lazy loading
โ—ฆ
automatically responsive
โ—ฆ
url, local, external image ์ƒ๊ด€์—†์ด ์ ์šฉ ๊ฐ€๋Šฅ (next.config.js์— ์„ค์ • ํ•„์š”)
โ—ฆ
๋นŒ๋“œ ํƒ€์ž„์— ์ตœ์ ํ™”ํ•˜๋Š” ๋Œ€์‹  ์š”์ฒญํ•  ๋•Œ ์ตœ์ ํ™”ํ•จ
โ–ช
์ด๋ฏธ์ง€๊ฐ€ ๋งŽ์•„์ง€๋ฉด ๋นŒ๋“œ ํƒ€์ž„์ด ์ฆ๊ฐ€ํ•˜๋‹ˆ๊นŒ ๋นŒ๋“œ ํƒ€์ž„ ๋•Œ๋Š” ์ด๋ฏธ์ง€ ๋นผ์„œ ๋นจ๋ฆฌ ๋นŒ๋“œํ•˜๊ณ  ์š”์ฒญํ•  ๋•Œ ์ตœ์ ํ™”ํ•ด์„œ ์„ฑ๋Šฅ ์˜ฌ๋ฆฌ๊ณ .
โ—ฆ
sourset ์‚ฌ์šฉ - ๋ทฐํฌํŠธ์— ๋งž๋Š” ์ด๋ฏธ์ง€ ์ ์šฉ
โ€ข
description ์— ์ ํ˜€์žˆ๋˜ ๋งํฌ๋“ค
Links โ€“โ€“โ€“โ€“โ€“ Next.js 10:
Docs:
Demo:
Demo Code:
Analytics:
Core Web Vitals:
Image Preloading:
How will this affect SEO?: