nextjs,tailwindcss,vercel

๋งฅ ํ„ฐ๋ฏธ๋„์—์„œ ๋ฐ”๋กœ PNG๋ฅผ WebP๋กœ ๋ณ€ํ™˜ ํ•˜๋Š”๋ฒ• (cwebp)

์ฃผ์˜ ๐Ÿฑ 2025. 4. 1. 02:17
728x90
๋ฐ˜์‘ํ˜•

๊ฐœ๋ฐœํ•˜๋‹ค๋ณด๋ฉด ๋‹ค๋Ÿ‰์˜ png ํŒŒ์ผ์„ webp๋กœ ์ฒ˜๋ฆฌํ•ด์•ผํ•  ๋•Œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋•Œ ํŒŒ์ด์ฌ์œผ๋กœ ์ฝ”๋“œ๋ฅผ ์งœ๊ณ  ์‹คํ–‰์‹œํ‚ค๋Š”๊ฒƒ๋ณด๋‹ค ํ„ฐ๋ฏธ๋„์—์„œ ๋ฐ”๋กœ ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ํฌ๊ฒŒ ๋‘ ๊ฐ€์ง€ ์žˆ์Šต๋‹ˆ๋‹ค. 

๋งฅ ํ„ฐ๋ฏธ๋„์—์„œ ๋ฐ”๋กœ PNG๋ฅผ WebP๋กœ ๋ณ€ํ™˜ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ImageMagick์ด๋‚˜ cwebp ๊ฐ™์€ ๋ช…๋ น์ค„ ๋„๊ตฌ๋ฅผ ํ™œ์šฉ.

1. cwebp ์‚ฌ์šฉํ•˜๊ธฐ (Google์˜ WebP ๋ณ€ํ™˜ ๋„๊ตฌ)

๋จผ์ € Homebrew๋กœ cwebp ์„ค์น˜:

 

brew install webp

 

ํŠน์ • ํด๋”์˜ ๋ชจ๋“  PNG ํŒŒ์ผ์„ ๋ณ€ํ™˜

# ํŠน์ • ํด๋”๋กœ ์ด๋™
cd /path/to/your/folder

# ๋ชจ๋“  PNG ํŒŒ์ผ์„ WebP๋กœ ๋ณ€ํ™˜
for file in *.png; do
  cwebp -q 80 "$file" -o "${file%.png}.webp"
done

 

2. ImageMagick ์‚ฌ์šฉํ•˜๊ธฐ

brew install imagemagick

# ํŠน์ • ํด๋”๋กœ ์ด๋™
cd /path/to/your/folder

# ๋ชจ๋“  PNG ํŒŒ์ผ์„ WebP๋กœ ๋ณ€ํ™˜
for file in *.png; do
  convert "$file" -quality 80 "${file%.png}.webp"
done

ํ•œ ์ค„ ๋ช…๋ น์–ด (์–ด๋А ์œ„์น˜์—์„œ๋“  ์‹คํ–‰ ๊ฐ€๋Šฅ)

# cwebp ์‚ฌ์šฉ
find /path/to/your/folder -name "*.png" -exec bash -c 'cwebp -q 80 "$0" -o "${0%.png}.webp"' {} \;

# ๋˜๋Š” ImageMagick ์‚ฌ์šฉ
find /path/to/your/folder -name "*.png" -exec bash -c 'convert "$0" -quality 80 "${0%.png}.webp"' {} \;

 

์ด ๋ช…๋ น์–ด๋“ค์€ ์ง€์ •๋œ ํด๋”์˜ ๋ชจ๋“  PNG ํŒŒ์ผ์„ ๋™์ผํ•œ ์œ„์น˜์— WebP ํŒŒ์ผ๋กœ ๋ณ€ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ํ’ˆ์งˆ์€ -q 80 ๋˜๋Š” -quality 80 ๋ถ€๋ถ„์—์„œ ์กฐ์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค(0-100)

 

cwebp (๊ถŒ์žฅ)

  • ์žฅ์ : Google์—์„œ ์ง์ ‘ ๊ฐœ๋ฐœํ•œ WebP ์ „์šฉ ๋„๊ตฌ๋กœ ๋ณ€ํ™˜ ํ’ˆ์งˆ๊ณผ ์ตœ์ ํ™”๊ฐ€ ๋” ์ข‹์Šต๋‹ˆ๋‹ค
  • ์žฅ์ : WebP ํฌ๋งท์— ํŠนํ™”๋˜์–ด ์žˆ์–ด ๋” ํšจ์œจ์ ์ธ ์••์ถ•๊ณผ ๊ณ ๊ธ‰ ์˜ต์…˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค
  • ์žฅ์ : ์ผ๋ฐ˜์ ์œผ๋กœ ๋” ์ž‘์€ ํŒŒ์ผ ํฌ๊ธฐ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค
  • ๋‹จ์ : WebP ํฌ๋งท๋งŒ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค

ImageMagick

  • ์žฅ์ : ๋‹ค์–‘ํ•œ ์ด๋ฏธ์ง€ ํฌ๋งท์„ ์ง€์›ํ•˜๋Š” ๋ฒ”์šฉ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค
  • ์žฅ์ : ๋ณ€ํ™˜ ๊ณผ์ •์—์„œ ์ถ”๊ฐ€ ์ด๋ฏธ์ง€ ์ฒ˜๋ฆฌ(ํฌ๊ธฐ ์กฐ์ •, ํ•„ํ„ฐ ๋“ฑ)๋ฅผ ํ•จ๊ป˜ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค
  • ๋‹จ์ : WebP ๋ณ€ํ™˜์— ์žˆ์–ด์„œ๋Š” cwebp๋ณด๋‹ค ์ตœ์ ํ™”๊ฐ€ ๋–จ์–ด์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹จ์ˆœํžˆ PNG๋ฅผ WebP๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๊ฒƒ์ด ๋ชฉ์ ์ด๋ผ๋ฉด cwebp๊ฐ€ ๊ฐ€์žฅ ์ข‹์€ ์„ ํƒ์ž…๋‹ˆ๋‹ค. ํŠนํžˆ ์›น์‚ฌ์ดํŠธ ์ตœ์ ํ™” ๋ชฉ์ ์ด๋ผ๋ฉด Google์˜ ์ „์šฉ ๋„๊ตฌ์ธ cwebp๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ํŒŒ์ผ ํฌ๊ธฐ์™€ ํ’ˆ์งˆ ์ธก๋ฉด์—์„œ ๋” ์ข‹์€ ๊ฒฐ๊ณผ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฐ˜์‘ํ˜•