웹사이트에 가장 적합한 이미지 형식은 무엇인가요?

이미지의 종류를 알기 전에는 "최적 형식"을 묻는 것 자체가 잘못된 질문입니다. 웹사이트에는 서로 매우 다른 몇 가지 유형의 이미지가 사용되며, 유형마다 확실히 알맞은 형식이 있습니다.

• 사진(제품, 인물, 장소): 손실 압축 형식이 적합합니다. AVIF는 용량이 가장 작고, WebP는 안전한 최신 기본 형식이며, JPG는 모든 브라우저에서 표시할 수 있는 대체 형식입니다.
• 로고, 아이콘, 일러스트레이션: SVG가 적합합니다. 벡터 그래픽이므로 어떤 화면에서 어떤 크기로 표시해도 선명하며, 파일 용량도 대개 매우 작습니다. 플랫폼에서 SVG를 허용하지 않을 때만 픽셀 형식을 대신 사용하세요.
• 스크린샷, UI 그래픽, 투명도가 있는 모든 이미지: PNG 또는 무손실 WebP가 적합합니다. 단색 영역과 선명한 가장자리는 무손실 형식으로 압축하기에 안성맞춤입니다.
• 짧은 애니메이션: 작은 색상 팔레트로 제한되고 훨씬 큰 파일이 생성되는 GIF 대신 애니메이션 WebP 또는 AVIF를 사용하세요.
• 파비콘: ICO 파일을 사용하고, 가능하면 SVG 또는 PNG 버전도 함께 제공하세요. 자세한 방법은 이미지로 파비콘을 만드는 방법을 참조하세요.

대표적인 실수는 사진을 PNG로 저장하는 것입니다. PNG는 모든 픽셀을 무손실로 저장하므로 로고에는 완벽하지만 사진에는 최악입니다. 눈에 띄는 품질 향상 없이 파일이 JPG보다 몇 배나 커집니다.

사진 형식은 최신 브라우저에 얼마나 의존할 수 있는지에 따라 선택하면 됩니다.

• AVIF는 압축 효율이 가장 뛰어납니다. 일반적인 웹 품질에서 JPEG보다 약 50% 작고 WebP보다 20–30% 작으며, 필요하다면 HDR과 광색역 색상도 지원합니다. Chrome, Firefox, Safari에서 모두 표시할 수 있습니다(Safari는 버전 16.4부터, 2023년). 단점은 특히 큰 이미지의 인코딩 속도가 느리고, 데스크톱 소프트웨어와 구형 기기의 지원이 부족하다는 것입니다.
• WebP는 실용적인 기본 형식입니다. 같은 시각적 품질에서 JPEG보다 25–35% 작고 투명도를 지원하며, 2020년부터 모든 주요 브라우저에서 지원됩니다. 일부 데스크톱 앱과 구형 도구에서는 아직 열 수 없지만, 이는 방문자에게 제공하는 파일이 아니라 디자이너에게 전달하는 파일에서 중요한 문제입니다.
• JPG는 어디서나 사용할 수 있는 대체 형식입니다. 세 형식 중 효율은 가장 낮지만 품질 75–82 정도로 저장한 JPG는 일반적으로 화면에서 원본과 구별하기 어렵고, 웹상의 어떤 환경에서도 문제없이 표시됩니다.

가장 탄탄한 구성은 지원 브라우저에 AVIF를 제공하고, 나머지에는 WebP를 제공하며, 더 오래된 환경을 위해 JPG를 유지하는 것입니다. 하나만 선택하고 싶다면 JPG 대체 형식을 갖춘 WebP로 사실상 모든 사용자를 지원할 수 있습니다. 직접 비교한 내용은 WebP와 AVIF 비교 및 WebP와 JPG 비교에서 확인할 수 있으며, 사진이 아닌 그래픽에 대해서는 PNG와 JPG 비교를 참조하세요.

목표 형식을 정했다면 파일을 기기 밖으로 전송하지 않고 빠르게 변환할 수 있습니다. EditItAll 이미지 변환기는 브라우저에서 완전히 실행됩니다.

1. 변환기를 열고 이미지 하나 또는 폴더 전체를 끌어다 놓으세요. 여러 파일은 한꺼번에 처리됩니다.
2. 출력 형식을 선택하세요. 사진에는 WebP 또는 AVIF를, 투명도가 필요한 그래픽에는 PNG를 사용합니다. 자주 쓰는 작업에는 JPG에서 WebP로, PNG에서 WebP로, JPG에서 AVIF로, PNG에서 AVIF로 변환하는 바로가기 경로가 있습니다.
3. 품질을 설정하세요. 목표 용량 입력란은 없습니다. 용량은 처리 결과로 결정됩니다. 각 파일의 처리 전후 용량이 표시되므로 숫자와 이미지가 모두 적절해 보일 때까지 슬라이더를 조금씩 조정하세요.
4. 결과를 개별적으로 다운로드하거나 하나의 ZIP으로 다운로드하세요.

아무것도 업로드되지 않습니다. 페이지를 불러온 뒤 인터넷 연결을 끊어도 계속 변환할 수 있습니다. 또한 내보낸 모든 이미지에서 EXIF와 GPS 메타데이터가 제거되므로 제품 사진을 촬영한 위치가 공개되지 않습니다. 계정과 워터마크 없이 무료로 사용할 수 있습니다. 형식은 이미 알맞고 용량만 줄이면 되나요? 이미지 압축기로 바로 이동하세요. 플랫폼에서 벡터 로고의 픽셀 버전을 요구한다면 SVG에서 PNG로 변환하여 원하는 크기로 렌더링할 수 있습니다.

알맞은 형식을 선택하는 것도 중요하지만, 다음 세 가지 습관은 JPG를 AVIF로 바꾸는 것보다 더 많은 용량을 줄여 줍니다.

• 실제 표시 크기로 조정하세요. 카메라 사진은 페이지에서 차지하는 공간보다 폭이 몇 배나 큰 경우가 많으며, 남는 픽셀까지 모두 다운로드된 뒤 버려집니다. 바로 이런 상황을 위해 EditItAll 이미지 도구에는 최대 크기를 제한하는 선택 설정이 있습니다.
• 원본에서 한 번만 압축하세요. 손실 압축으로 저장할 때마다 세부 정보가 조금씩 더 사라집니다. 원본을 보관하고 그 원본에서 웹용 사본을 내보내며, JPG를 WebP로 저장한 뒤 다시 AVIF로 저장하는 연쇄 변환은 피하세요.
• 최신 형식과 대체 형식을 함께 제공하세요. AVIF 또는 WebP를 먼저 제공하고 구형 브라우저에는 JPG 또는 PNG가 표시되도록 하여, 어떤 방문자도 깨진 이미지를 보지 않게 하세요.

속도 보고서에서 "이미지를 효율적으로 인코딩"하거나 "차세대 형식으로 이미지 제공"하라고 안내한다면 바로 이런 결정을 뜻합니다. 이미지의 효율적 인코딩 경고 해결하기에서 과정을 살펴볼 수 있고, 웹용 JPEG 압축하기에서는 품질 슬라이더를 자세히 설명합니다. 더 많은 형식 안내서는 이미지 변환 모음에서 확인할 수 있습니다.