웹사이트 이미지 형식 선택 방법
이미지 형식은 파일 크기, 모양, 지원 기능에 영향을 주지만 모든 이미지에 가장 좋은 선택은 없습니다. 로딩 속도도 페이지 경험의 일부입니다. Google은 Core Web Vitals가 순위 시스템에 사용된다고 설명하지만, 한 가지 점수만으로 높은 순위가 보장되지는 않습니다. 실제 파일로 형식을 비교하고 방문자가 쓰는 브라우저와 기기에서 결과를 확인하세요.
WebP: 크기와 모양 비교
WebP는 손실·무손실 압축, 투명도, 애니메이션을 지원합니다. 웹 사진, 그래픽, 애니메이션에 쓸 수 있지만 결과는 이미지, 인코더, 설정에 따라 달라집니다. 사본을 내보내 세부 표현, 투명도, 파일 크기를 원본과 비교하세요. 게시 시스템과 받는 쪽이 WebP를 지원하는지도 확인하세요.
JPEG: 사진에 널리 사용
JPEG는 사진에 널리 쓰이며 손실 압축을 사용합니다. 품질을 지나치게 낮추거나 반복 저장하면 압축 흔적이 보일 수 있습니다. JPEG는 투명도를 저장하지 않습니다. 로고, 작은 글씨, 선명한 가장자리는 콘텐츠와 호환성 요구에 따라 PNG, 무손실 WebP, SVG와 비교하세요.
PNG: 손실 없는 래스터 이미지
PNG는 투명도를 지원하는 무손실 래스터 형식입니다. 픽셀 보존이 중요한 화면 캡처나 그래픽에 적합할 수 있지만 파일 크기는 이미지마다 다릅니다. 사진은 다른 형식과 크기 및 모양을 비교해 보세요.
SVG: 벡터 그래픽
SVG는 고정된 픽셀 격자 대신 도형과 지침으로 벡터 그래픽을 표현합니다. 크기를 바꿔야 하는 아이콘, 도표, 일러스트에 적합할 수 있습니다. 사진을 일반적으로 대체하지는 않습니다. 복잡도, 파일 크기, 표시 시스템의 보안 규칙을 고려하세요.
실용적인 선택 기준
사진은 대상이 지원한다면 JPEG, WebP, AVIF를 비교하세요. 벡터 아이콘에는 SVG를 고려할 수 있습니다. 투명 이미지에는 PNG나 WebP, 화면 캡처의 가는 선을 보존하려면 PNG 같은 무손실 형식이 유용할 수 있습니다. 이는 출발점이며 모든 경우에 적용되는 규칙은 아닙니다.
게시 전 이미지 준비
표시 영역에 맞는 크기로 사본을 만들고 용도에 맞게 압축한 뒤 실제 화면에서 확인하세요. 여러 대체 형식을 제공한다면 방문자 환경에 맞는 호환 형식도 유지하세요. 연결된 가이드에서 이미지 축소와 형식 비교 방법을 볼 수 있습니다.
출처 및 사양
인용한 사양 문서가 형식의 기능을 정의합니다. Google은 페이지 경험이 순위 시스템에서 맡는 역할을 설명하지만, 단일 점수로 순위가 보장되지는 않습니다.
이미지 도구와 안내
사양 및 검색 문서
형식의 기능은 각 사양에 정의되어 있습니다. Google은 페이지 경험이 검색 순위 시스템에서 어떤 역할을 하는지 설명하지만, 하나의 점수로 순위가 보장되지는 않습니다.
자주 묻는 질문
WebP는 항상 JPEG보다 파일이 작나요?
아닙니다. 원본 이미지, 인코더, 설정에 따라 결과가 달라집니다. 내보낸 파일을 눈으로 확인하고 비교하세요.
어떤 크기의 이미지를 올려야 하나요?
표시 영역에 맞는 크기를 선택하고 필요하면 반응형 변형을 제공하세요. 다른 용도를 위해 원본을 보관하세요.
Core Web Vitals 점수가 높으면 검색 순위도 보장되나요?
아닙니다. Google 검색 시스템은 여러 신호를 사용하며, 페이지 경험 점수만으로 상위 노출이 보장되지 않습니다.