확장자 jpg, gif, png....뭐가 이렇게 많지?
이미지 파일 확장자 jpg, gif, png, tiff 등... 많고 다양한 합니다. 각기 다른 장점과 단점을 가지고 있습니다. 이처럼 확장자가 다양한 이유는 각 확장자가 서로 다른 특징과 용도를 가지고 있기 때문입니다. JPEG, GIF, PNG는 우리가 흔히 알고 있으며 대표적인 래스터 이미지 포맷입니다. 각각 압축 방식, 색상 지원, 투명도 처리 등에서 차이를 보이는 차이점 때문에 사용 목적에 따라 적절한 확장자를 선택하는 것이 중요합니다.
각기 뭐가 다른지 확장자를 비교해 볼까요?
JPG / JPEG는 손실 압축 형식이며, 파일 크기는 작고 화질 손실 있어 사진에 적합니다. 이는 압축률이 높아 파일 크기를 줄일 수 있지만, 압축 과정에서 화질 손실이 발생할 수 있습니다. 주로 사진과 같이 색상 변화가 많은 이미지에 사용됩니다.
PNG는 무손실 압축 형식으로 투명도를 지원하고 원본 화질 유지가 가능하지만 용량이 큽니다.
압축률도 좋은 편이어서 주로 웹 이미지나 로고나 아이콘, 로고, 아이콘, UI 등에 적합합니다.
GIF는 PNG처럼 무손실 압축 형식으로 애니메이션 제작이 가능합니다. 또한 투명한 배경(투명도)을 지원하지만 RGB 색상(최대 256색)은 제한이 있습니다. 짧은 움직이는 이미지에 적합하디만 섬세한 표현에는 한계가 있습니다.
WEBP는 손실/무손실 두 가지의 압축 형식으로 JPG보다 더 압축되며 투명도 및 애니메이션 지원하나 일부 버전이 낮은 브러우저에서는 지원을 하지 않습니다. 웹 이미지에 최적화된 이미지 저장방식입니다.
BMP는 무압축 형식이며 보통 비트맵 이미지라고 불리는 경우도 있습니다. 화질은 좋지만 파일 용량 매우 큰게 단점입니다. 현재는 거의 사용을 하지 않습니다. BMP는 보통 윈도우에서 사용하는 대표적인 비트맵 이미지 포맷으로 압축을 하지 않아 파일 크기가 크고, 요즘 웹에서는 잘 사용되지 않습니다.
TIFF는 무손실/손실 형식으로 고화질, 전문 작업용 (인쇄 등)에 사용되며, 파일이 커서 웹에서는 적합하지 않습니다.
또한, tiff는 손실 압축을 사용하지 않고, 고해상도 이미지를 저장하는 데 주로 사용되며, 인쇄나 전문적인 작업에 활용됩니다.
SVG는 벡터 이미지 형식으로 확대해도 깨지지 않아서 텍스트 기반(코드로 표현)에 사용되며, 아이콘, 로고, 일러스트에 적합합니다.
RAW는 디지털 카메라에서 이미지 센서가 받아들인 이미지 데이터를 그대로 저장하는 포맷으로 편집을 위해 원본 데이터를 보존하는 데 사용됩니다.
그렇다면 언제, 어떻게, 어떤 확장자를 써야 할까?
보통 웹을 보면 이미지를 많이 사용하는데 예전에는 BMP나 JPG, GIF, PNG을 많이 사용했습니다. 그러나 최근 웹에서는 이미지를 사용해도 여러 가지 이유(반응형, 텍스트 위즈, css 등)로 웹에 최적화되어있는 이미지 저장방식을 많이 사용하고 있습니다. 예를 들면 webp나 svg의 경우 20년 전에는 들어보거나 있는지도 몰랐던 확장자들인데 현재에는 기본적으로 많이 사용되고 있다는 것입니다.
각 이미지 포맷은 장단점을 가지고 있습니다. 사용 목적과 이미지의 특성에 따라 적절한 포맷을 선택해야 합니다.
예를 들면, 사진는 JPG, 로고/아이콘/UI는 PNG 또는 SVG, 움짤은 GIF (또는 WEBP), 웹 최적화에는 WEBP, 인쇄/디자인 작업에는 TIFF가 적합할 수 있습니다.
웹 사이트를 만들 때 이미지를 많이 사용하는 경우에는?
사이트를 만들 때에는 UX, SEO에 영향 있는 페이지 로딩 속도, 화질과 용량, 브라우저 호환성을 생각해 제작합니다.
로고, 아이콘의 경우- SVG는 벡터라 확대해도 깨지지 않습니다. PNG는 배경을 투명으로 제작이 가능해 SVG 또는 PNG로 만듭니다.
일반 사진의 경우- WEBP 또는 JPG를 사용하는 이유로 WEBP는 JPG보다 용량이 작고 화질 좋기 때문입니다.
움직이는 이미지 (짧은 애니)- WEBP을 사용하는데GIF보다 더 효율적이며, WEBP는 용량 작고 더 부드럽습니다.
배경 이미지- JPG 또는 WEBP를 사용합니다. 품질 조절하며 압축 가능하기 때문입니다.
웹사이트를 제작할 때 이미지 최적화 필수입니다. 이미지 크기를 줄이고 압축, 필요 없는 메타데이터 제거합니다.
적절한 크기로 업로드합니다. 예를 들면, 4000x3000 이미지는 웹에선 800x600만 필요할 수 있수 있습니다.
Lazy Loading 사용합니다. 스크롤될 때 이미지를 로드하도록 해서 초기 로딩 빠르게 하는데 html 코드는 <img src="image.webp" loading="lazy" alt="설명 텍스트" />입니다.
Responsive(반응형) 이미지를 사용 사용하는데 이는 디바이스 해상도에 맞춰 다른 크기 이미지 제공합니다.
html 코드는 <img src="image-400.jpg" srcset="image-800.jpg 800w, image-1200.jpg 1200w" sizes="(max-width: 600px) 100vw, 50vw" alt="설명 텍스트" />입니다.
웹사이트에서 이미지 많이 쓸 때는 가능하면 WEBP 사용하고, 벡터는 SVG, 배경/사진은 압축된 JPG/WEBP
최적화 + Lazy Load + Responsive 이미지, 웹 성능 향상 + 사용자 경험 + SEO까지 챙길 수 있습니다.
HTML/CSS 예제
이미지 최적화와 반응형 웹을 고려한 HTML/CSS 예제로 실제 웹사이트에서 많이 쓰이는 방식으로 구성했습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 최적화 예제</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
img {
max-width: 100%;
height: auto;
display: block;
margin-bottom: 20px;
border-radius: 8px;
}
.logo {
width: 150px;
}
</style>
</head>
<body>
<div class="container">
<h1>이미지 최적화 예제</h1>
<!-- 웹P 지원 + 반응형 + lazy load -->
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="풍경 사진" loading="lazy">
</picture>
<!-- SVG 벡터 로고 -->
<img src="logo.svg" alt="사이트 로고" class="logo">
<!-- PNG 투명 배경 아이콘 -->
<img src="icon.png" alt="아이콘 이미지" width="64" height="64">
</div>
</body>
</html>
HTML/CSS 예제 코드 설명
<picture> 태그- 브라우저가 지원하는 형식에 따라 이미지 선택 (WEBP 우선)합니다.
loading="lazy" - 스크롤 시 이미지가 로드되어 속도 최적화합니다.
max-width: 100%- 반응형(모바일 대응) 이미지입니다.
SVG / PNG 분리- 로고는 벡터(SVG), 아이콘은 투명한 PNG입니다.
예제 코드 사용시 참고사항
image.webp, image.jpg, logo.svg, icon.png 파일은 실제 프로젝트에 맞게 경로를 수정하시고, 이미지 최적화 도구로 파일 크기 줄이는 것도 꼭 하세요.
웹사이트에서 배경 이미지 처리는?
CSS를 이용하면 배경 이미지에 다양한 효과를 줄 수 있고, 반응형으로도 만들 수 있습니다.
배경 꽉 채우기, 반응형 조절, 고정 배경 (스크롤시 배경 고정), 반투명 오버레이, 텍스트와 함께 사용처럼
목적에 따라 배경 이미지 처리 방식은 다양합니다.
다양한 배경 이미지 처리
1. 전체 화면 배경 이미지 (cover)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배경 이미지 예제</title>
<style>
body, html {
height: 100%;
margin: 0;
}
.background {
background-image: url('background.jpg');
background-size: cover; /* 이미지가 영역을 꽉 채움 */
background-position: center; /* 중앙 정렬 */
background-repeat: no-repeat; /* 반복 없음 */
height: 100vh; /* 화면 전체 높이 */
display: flex;
align-items: center;
justify-content: center;
color: white;
text-shadow: 0 2px 5px rgba(0,0,0,0.6);
}
</style>
</head>
<body>
<div class="background">
<h1>환영합니다!</h1>
</div>
</body>
</html>
2. 배경 고정 (패럴랙스 느낌)
<style>
background-attachment: fixed;
.background {
background-image: url('background.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed; /* 스크롤해도 배경 고정 */
}
</style>
3. 반투명 오버레이 효과
<style>
.hero {
background-image: url('background.jpg');
background-size: cover;
background-position: center;
height: 100vh;
position: relative;
}
.overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.5); /* 반투명 검정 */
display: flex;
align-items: center;
justify-content: center;
color: white;
}
</syle>
<div class="hero">
<div class="overlay">
<h1>텍스트 위에 반투명 배경</h1>
</div>
</div>
4. 특정 섹션에만 배경 이미지
<style>
.section-bg {
background-image: url('section.jpg');
background-size: cover;
background-position: center;
padding: 60px 20px;
color: white;
}
</style>
<section class="section-bg">
<p>이 섹션만 배경 이미지가 있습니다.</p>
</section>
참고로, 배경 이미지는 웹용으로 압축해서 사용하시면 용량이 작아집니다. 또한, 가독성을 위해 텍스트 위엔 반투명 오버레이 자주 사용하고, 모바일에서는 background-attachment: fixed;가 작동하지 않을 수도 있으니 주의하세요.