๐Ÿ–ผ๏ธ

Base64 ์ด๋ฏธ์ง€ & Data URI ๋ณ€ํ™˜๊ธฐ Base64 Image Studio

PNG, JPG, SVG, WebP ์ด๋ฏธ์ง€๋ฅผ Data URI ์ฝ”๋“œ๋กœ ์ฆ‰์‹œ ๋ณ€ํ™˜ํ•˜๊ณ  HTML, CSS, Markdown์œผ๋กœ ์ถ”์ถœ

โœ…์ด๋ฏธ์ง€๋ฅผ ์—…๋กœ๋“œํ•˜๊ฑฐ๋‚˜ Base64 ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”.
ํƒ€์ž…: -ํ•ด์ƒ๋„: -์›๋ณธ: 0 BBase64: 0 B์˜ค๋ฒ„ํ—ค๋“œ: +0%
IMAGE SOURCE์ด๋ฏธ์ง€ ํŒŒ์ผ & ์‹ค์‹œ๊ฐ„ ๋ฏธ๋ฆฌ๋ณด๊ธฐ
๐Ÿ“

์ด๋ฏธ์ง€๋ฅผ ์—ฌ๊ธฐ์— ๋“œ๋ž˜๊ทธํ•˜๊ฑฐ๋‚˜ ํด๋ฆญํ•˜์—ฌ ์„ ํƒ

๋˜๋Š” ์–ด๋””์„œ๋‚˜ ํด๋ฆฝ๋ณด๋“œ ์ด๋ฏธ์ง€ ๋ถ™์—ฌ๋„ฃ๊ธฐ (Ctrl + V)

์ง€์›: PNG, JPG, JPEG, WebP, SVG, GIF, ICO, BMP

DATA URI OUTPUT์ถ”์ถœ ์ฝ”๋“œ ํฌ๋งท
INPUT CODEData URI ๋˜๋Š” Base64 ๋ฌธ์ž์—ด ์ž…๋ ฅ
DECODED IMAGE๋ณต์›๋œ ์ด๋ฏธ์ง€ ๋ฏธ๋ฆฌ๋ณด๊ธฐ
์ขŒ์ธก์— Data URI๋ฅผ ์ž…๋ ฅํ•˜๋ฉด ๋ณต์›๋œ ์ด๋ฏธ์ง€๊ฐ€ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.
๐Ÿ’ก

Data URI (Base64 ์ด๋ฏธ์ง€) ํ•ต์‹ฌ ๊ฐœ๋… & ์‹ค๋ฌด ๊ฐ€์ด๋“œ

1. Data URI ํ˜•์‹ ๊ตฌ์กฐ

๊ธฐ๋ณธ ํ‘œ์ค€ ๊ตฌ์กฐ๋Š” data:[MIME-type];base64,[data]์ž…๋‹ˆ๋‹ค. ์˜ˆ: data:image/png;base64,iVBORw...

2. ์ฃผ์š” ์žฅ์  (HTTP ์š”์ฒญ ๋‹จ์ถ•)

๋ณ„๋„์˜ HTTP ์š”์ฒญ ์—†์ด HTML/CSS ํŒŒ์ผ ๋‚ด์— ์ด๋ฏธ์ง€๋ฅผ ์ธ๋ผ์ธ์œผ๋กœ ์ง์ ‘ ํฌํ•จ์‹œ์ผœ ๋„คํŠธ์›Œํฌ ์™•๋ณต ์‹œ๊ฐ„(RTT)์„ ์ ˆ์•ฝํ•ฉ๋‹ˆ๋‹ค.

3. ์šฉ๋Ÿ‰ ์˜ค๋ฒ„ํ—ค๋“œ ์ฃผ์˜ (+33%)

Base64 ์ธ์ฝ”๋”ฉ์€ 3๋ฐ”์ดํŠธ์˜ ๋ฐ”์ด๋„ˆ๋ฆฌ๋ฅผ 4๊ธ€์ž์˜ ํ…์ŠคํŠธ๋กœ ๋ณ€ํ™˜ํ•˜๋ฏ€๋กœ ํŒŒ์ผ ํฌ๊ธฐ๊ฐ€ ์•ฝ 33% ์ฆ๊ฐ€ํ•˜๋ฉฐ, ๋ธŒ๋ผ์šฐ์ € ์บ์‹ฑ์ด ๋ถˆ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

4. ์‹ค๋ฌด ๊ถŒ์žฅ ์‚ฌ์šฉ์ฒ˜

10KB ๋ฏธ๋งŒ์˜ ์†Œํ˜• UI ์•„์ด์ฝ˜, ์Šคํ”ผ๋„ˆ ๋กœ๋”, ์ด๋ฉ”์ผ ๋‰ด์Šค๋ ˆํ„ฐ ๋ณธ๋ฌธ ์ด๋ฏธ์ง€, ์บ”๋ฒ„์Šค(Canvas) ์Šคํฌ๋ฆฐ์ƒท ๋‚ด๋ณด๋‚ด๊ธฐ์— ๊ฐ€์žฅ ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ’ฌ

์˜๊ฒฌ ๋ฐ ์งˆ๋ฌธ

0
0 / 1500