웹 디자이너에게 가장 좋은 이미지 형식
최근 업데이트
웹 디자이너가 웹 페이지에 사용할 이미지를 고를 때 고려해야 할 요소는 두 가지예요. 바로 이미지 형식과 페이지 최적화예요. 모든 브라우저에서 이미지가 선명하게 보이고 페이지가 빠르게 로드되려면 이 두 가지를 제대로 챙겨야 해요.
하나라도 놓치면 웹사이트는 순식간에 로드되지만 이미지가 형편없어 보일 수 있어요. 반대로 이미지는 정말 멋진데 페이지가 로드되는 데 한참 걸릴 수도 있죠. 어느 쪽이든 곤란한 상황이에요. 꼭 피해야 해요! 이 글을 준비한 이유도 바로 그거예요. 오늘날 웹 디자인 트렌드에서 이미지 형식은 그만큼 중요해요.
이미지 형식이 중요한 이유
성능: 이미지 형식마다 파일 크기가 달라요. 어떤 형식은 다른 형식보다 더 많은 공간을 차지해요. 용량이 큰 이미지는 페이지 로딩 속도를 떨어뜨려 사이트 성능에 부정적인 영향을 줘요.
확장성: 이미지를 지나치게 줄이거나 늘리면 화질이 떨어져요. 어떤 화면 크기에서도 높은 화질을 유지하려면 크기를 조절해도 품질이 유지되는 이미지 형식을 사용해야 해요.
외관: 일부 이미지 형식은 더 많은 세부 정보를 담을 수 있어서 다른 형식보다 화질이 좋아요.
브랜드의 일관성을 유지하기 위해 대부분의 디자이너는 웹사이트 전체에서 한두 가지 형식을 사용하는 걸 선호해요. 저희가 권하는 기본 원칙은 화질과 성능 사이의 균형을 맞춰 주는 형식을 선택하는 거예요.
웹에 가장 좋은 이미지 형식
이미지 파일은 크게 래스터와 벡터 두 가지로 나뉘며, 이를 바탕으로 다양한 이미지 형식이 개발되었어요.
래스터 이미지는 색상 그라데이션에서 여러 색상을 섬세하게 혼합할 수 있어요. 시각 효과를 쉽게 담을 수 있어 주로 카메라 이미지에 사용돼요. 반면 벡터 이미지 파일은 많은 색상을 지원하거나 색상 그라데이션을 만들 수 없어요. 수학적 계산을 통해 만들어지므로 크기를 쉽게 조절할 수 있어요.
웹에 가장 좋은 래스터 파일 형식에는 JPG, PNG, GIF, WebP, HEIC가 있어요. 가장 좋은 벡터 파일 형식은 SVG, AI, EPS예요.
이 파일들을 살펴보기 전에, 이 형식들은 서로 변환할 수 있다는 점을 알아 두면 좋아요. 선택한 형식이 잘 맞지 않아도 걱정하지 마세요. 언제든 Filestar로 변환할 수 있어요. 예를 들어 GIF 애니메이션을 사용하고 싶지만 사이트 로딩 속도가 느려질까 걱정된다면 GIF를 WebP로 변환할 수 있어요. 정말 쉽고 빨라요. 이 WebP를 GIF로 변환하는 방법 영상도 확인해 보세요.
1. JPG
JPEG/JPG 형식은 수백만 가지 색상을 표현하고 싶을 때 가장 적합해요. 실제 모습을 담은 이미지를 다루거나 사진 사이트를 만들고 있다면 이 형식을 사용해 보세요. 눈길을 끄는 색상을 표현할 수 있어서 소셜 미디어에서도 사용하기 좋아요.
높은 압축률 덕분에 이미지 파일 크기가 작아져요. 그래서 JPG 이미지는 업로드하고 다운로드하기가 아주 쉬워요. 일반적으로 이미지 최적화 과정에서 손실 압축으로 인해 화질이 떨어져요. 하지만 압축을 반복하지 않는 한, 사라진 세부 정보는 보는 사람이 거의 알아채지 못해요.
가장 큰 단점은 투명도를 지원하지 않는다는 거예요. JPG 이미지를 다른 요소와 겹쳐 배치할 수 없어요. 그래도 온라인에서 사진 이미지를 보여 주는 용도로는 여전히 가장 많이 쓰이는 형식이에요.
2. GIF
요즘 GIF는 애니메이션을 지원한다는 장점 덕분에 모든 소셜 플랫폼에서 소통 수단으로 자리 잡았어요. 웹사이트에서는 주로 짧은 애니메이션 클립을 보여 주는 데 사용해요. 하지만 여러 프레임을 사용하기 때문에 용량이 커요. 따라서 웹사이트에서는 꼭 필요할 때만, 애니메이션을 보여 주는 용도로 사용하세요.
투명도를 지원하지만 표현할 수 있는 색상은 256가지뿐이에요. 저희 조언은 정지 이미지에는 사용하지 말라는 거예요. 이미지가 보기 좋지 않게 나올 수 있어요. 복잡한 이미지도 GIF로 보여 주지 않는 게 좋아요.
3. PNG
PNG는 수백만 가지 색상을 지원해서 온라인에서 JPG만큼 널리 쓰여요. GIF를 대체하기 위해 도입되었으며, GIF보다 파일 크기가 작아요. PNG 파일은 무손실 압축을 사용하므로 이미지를 수정해도 화질이 손상되지 않아요. 그래서 색상 정보가 적은 이미지에는 JPG 대신 PNG를 사용해도 좋아요.
또한 스크린샷을 보여 줄 때는 PNG 형식이 가장 좋아요. JPG로 저장하면 가장자리가 흐릿해져요. 배너처럼 텍스트가 많은 이미지도 JPG 형식으로 저장하면 가장자리가 거칠게 보일 수 있어요. 투명도를 지원하기 때문에 로고와 아이콘에도 많이 사용해요.
전반적으로 이미지 품질을 유지하는 데 훨씬 유리해서 JPG보다 인기가 있어요. 스크린샷이나 색상 정보가 적은 이미지를 저장할 때 가장 좋은 형식이기도 해요.
4. HEIC/HEIF
HEVC 압축을 기반으로 한 비교적 새로운 이미지 컨테이너예요. 다른 형식보다 더 다양한 이미지 기능을 지원하는 다용도 이미지 파일이에요. 다중 프레임 압축부터 다중 프레임 이미지, 이미지 외 데이터, 애니메이션 등까지 지원해요.
JPG 이미지 파일보다 크기가 작고 화질도 좋아요. HDR, 4K 또는 8K 해상도를 제공하는 사이트에서는 HEIC를 사용할 수 있어요. 공간을 덜 차지하면서도 시각적 품질을 높여 주기 때문이에요.
하지만 가장 큰 문제는 브라우저와 운영체제의 지원 여부예요. Mac에서는 HEIC/HEIF를 아주 쉽게 다룰 수 있지만, 사이트 방문자가 사용하는 브라우저와 운영체제도 고려해야 해요.
5. WebP
Google은 PNG, JPG, GIF를 대체하기 위해 2010년에 WebP를 개발했어요. 손실 압축과 무손실 압축을 모두 활용해 크기는 작으면서 화질은 좋은 이미지를 만들어요. 투명도와 애니메이션도 지원해요. 페이지 최적화를 위한 웹용 이미지 형식으로 만들어졌기 때문에 WebP를 사용하면 페이지가 더 빠르게 로드되고 성능도 좋아져요.
유일한 단점은 Firefox, Microsoft Edge, Chrome, Android 네이티브 앱에서만 지원된다는 점이에요. Apple과 IOS는 아직 WebP를 지원하지 않아요.
6. SVG
Scalable Vector Graphics(SVG)는 웹에서 사용할 수 있는 최고의 벡터 파일 형식 중 하나예요. PNG, GIF처럼 무손실 형식이며, 어떤 해상도나 크기에서도 뛰어난 이미지 품질을 제공해요. 이미지를 줄이거나 확대해도 왜곡되지 않아요. 애니메이션과 투명도를 지원하고, 인덱스 기반 이미지와 스크립트 기반 이미지도 표시할 수 있어요.
웹사이트에서 로고를 보여 주는 데 가장 적합해요. SVG 대신 AI와 EPS를 사용할 수도 있어요.