실제 용도에 맞게 선택하기
웹 사진이라면 WebP와 JPEG부터 비교하세요. 정확한 경계가 필요한 도표, 스크린샷, 로고라면 PNG와 무손실 대안을 비교합니다. WebP는 투명도와 손실·무손실 압축을 지원하지만 JPEG는 알파 채널을 보존하지 않습니다. 다만 변환기가 형식의 모든 기능을 내보낼 수 있는 것은 아닙니다. 실험하기 전에 수정하지 않은 원본을 보관하세요.
품질보다 크기를 먼저 정하기
너비 800픽셀로 표시할 이미지에 같은 자리용 6,000픽셀 파일이 필요한 경우는 드뭅니다. 표시 크기와 고밀도 화면에 필요한 선명도를 정한 뒤 가로세로 비율을 유지하며 크기를 조절하세요. 자르기는 구도를, 크기 조절은 치수를 바꿉니다. 제품 페이지의 확대 보기에는 별도의 큰 이미지를 사용합니다. 작은 썸네일을 주 사진으로 확대하지 마세요.
실제로 보이는 크기에서 비교하기
중간 정도의 품질로 내보내고 의도한 표시 크기에서 확인한 다음 실제 파일 크기를 비교하세요. 글자, 머리카락, 섬세한 천, 부드러운 그라데이션은 압축 손상을 쉽게 보여줍니다. 품질 80이라는 값이 모든 인코더에서 같은 화질을 뜻하지는 않습니다. 일정한 감소율을 보장하지 마세요. 이미 효율적인 파일은 거의 줄지 않거나 커질 수 있습니다.
투명도, 방향, 애니메이션 확인하기
투명한 그림은 알파 채널을 보존하는 출력 형식이 필요합니다. JPEG를 만들 때는 예상치 못한 검은 경계를 피하도록 배경색을 직접 고르세요. 저장된 파일을 다시 열어 방향과 색상을 확인합니다. 정지 이미지 변환기는 애니메이션의 한 프레임만 남길 수 있고, 내보내면서 메타데이터가 사라질 수도 있습니다. 이 속성이 중요하면 원본을 보관하세요.
반복 가능한 게시 절차 만들기
구도를 정하고 크기를 한 번 조절한 뒤 두 형식으로 내보내 허용 가능한 결과 중 작은 파일을 선택하세요. 의미 있는 파일명과 이미지의 목적을 설명하는 대체 텍스트를 붙입니다. 완성된 페이지를 모바일과 데스크톱에서 확인하세요. 이는 편집상 권장 절차이며 특정 인코더의 벤치마크가 아닙니다. 유용한 기준은 방문자가 실제로 받는 결과입니다.
developers.google.com · developer.mozilla.org