튜토리얼
중요한 디테일을 잃지 않고 제품 이미지를 압축하는 방법
전송 형식을 선택하고, 내보낸 파일을 비교하며, 업로드된 제품 이미지를 확인하세요. 실용적인 품질 체크리스트와 예시 파일 크기 예산이 포함되어 있습니다.
제품 이미지를 압축하려면, 대상이 필요로 하는 크기로 전송용 사본을 만들고, 허용되는 형식을 선택하며, 고객이 반드시 보아야 할 세부 사항과 내보낸 파일을 비교하세요. 원본은 보관하세요. 대상이 파일을 크기 조정하거나 재압축할 수 있으므로, 업로드 전뿐만 아니라 업로드 후에도 결과를 판단해야 합니다. 모든 제품 이미지에 적용되는 단일 킬로바이트 목표는 없습니다.
단색 배경의 단순한 병과 4개 패널로 구성된 일러스트 광고는 서로 다른 실패 지점을 가집니다. 병은 라벨 디테일을 잃을 수 있고, 광고는 얇은 패널 선과 작은 텍스트를 잃을 수 있습니다. 가장 작은 파일은 중요한 정보가 손상되지 않고 남아있을 때만 유용합니다.
치수, 형식 및 파일 용량 분리
픽셀 치수는 이미지의 너비와 높이를 나타냅니다. 파일 용량은 저장되거나 전송되어야 하는 바이트를 나타냅니다. 형식과 압축은 해당 픽셀이 어떻게 표현되는지를 결정합니다. 픽셀이나 인코딩을 변경하지 않고 DPI와 같은 해상도 레이블을 변경하는 것은 웹 이미지를 가볍게 만드는 실용적인 방법이 아닙니다.
web.dev의 이미지 성능 가이드는 이미지 전송을 표시 크기에 맞추고 불필요한 이미지 바이트를 줄이는 방법을 설명합니다. 반응형 전송은 다양한 화면에 대해 다른 소스 크기를 제공할 수 있습니다. 이는 웹사이트 기능이며, 단순히 큰 파일을 업로드하는 것만으로는 올바른 작은 버전이 휴대폰에 도달한다고 보장할 수 없습니다.
자신의 스토어의 경우, 브라우저에서 실제로 다운로드되는 크기를 확인하세요. 마켓플레이스나 소셜 플랫폼의 경우, 현재 업로드 요구 사항과 최종 미리보기를 확인하세요. 이들은 서로 다른 전송 환경입니다.
사진과 목적지에 맞는 형식 선택
MDN의 이미지 형식 참조는 JPEG, PNG 및 최신 웹 형식의 기능을 설명합니다. 다음은 특정 업로드 양식이 모든 형식을 허용한다는 약속이 아니라, 실용적인 선택 가이드입니다.
| 파일 유형 | 유용한 후보 | 검사할 세부 사항 |
|---|---|---|
| JPEG | 투명도가 없는 사진 이미지 | 라벨 가장자리, 질감 및 압축 후광 |
| PNG | 무손실 사본 또는 투명 영역이 필요한 이미지 | 결과 파일이 대상에 비해 불필요하게 큰지 여부 |
| WebP | 손실 또는 무손실 인코딩을 적절히 사용하여 지원하는 웹사이트 전송 | 선택한 설정에서의 미세한 텍스트 및 그라데이션 |
| AVIF | 호환되는 게시 파이프라인을 사용하는 웹사이트 전송 | 품질, 지원되는 워크플로 및 실제 인코딩 결과 |
파일 이름을 변경하여 사진을 다른 확장자로 변환하지 마세요. 선택한 형식을 실제로 인코딩하는 도구를 통해 내보내세요. 또한, 무손실 내보내기는 이전 손실 내보내기에서 이미 버려진 정보를 복원할 수 없습니다.
세 가지 사본 비교 실행
네이비색 데스크 오거나이저에 대한 가상의 4개 패널 광고를 예로 들어 봅시다. 여기에는 패브릭 질감, 작은 흰색 로고, 얇은 패널 구분선, 그리고 “Room for the essentials.”라는 문구가 포함되어 있습니다. 동일한 원본에서 세 가지 전송용 사본을 준비하세요: 하나는 보수적인 품질 설정, 하나는 보통 설정, 그리고 하나는 더 작은 후보입니다.
이 비교를 위해 동일한 픽셀 치수를 사용하세요. 그래야 여러 변경 사항을 한 번에 테스트하는 것이 아니라 압축을 테스트하는 것이 됩니다. 형식, 내보내기 설정 및 결과 바이트를 기록하세요. 품질 수치는 인코더마다 다릅니다. 한 도구의 “80”이 다른 도구의 “80”과 일치할 필요는 없습니다.
각 사본을 고객이 보게 될 크기로 비교하세요. 그런 다음 잠시 확대하여 손상된 부분을 찾으세요. 극도로 확대했을 때만 보이는 결함은 의도된 배치에 중요하지 않을 수 있지만, 일반 크기에서 읽을 수 없는 단어는 중요합니다.
| 검사 지점 | 허용 가능한 결과 | 후보를 거부할 이유 |
|---|---|---|
| 제품명 | 의도된 표시 크기에서 읽을 수 있음 | 글자가 합쳐지거나 사라짐 |
| 미세 질감 | 재료를 정확하게 전달함 | 직물이 번진 얼룩이 됨 |
| 패널 경계 | 장면 간 명확한 분리 | 후광 또는 노이즈가 순서에서 주의를 분산시킴 |
| 부드러운 배경 | 일반적인 보기에서 시각적으로 균일함 | 그라데이션에 명확한 띠가 나타남 |
| 제품 실루엣 | 깨끗하고 인식 가능한 윤곽선 | 가장자리 아티팩트가 모양의 인상을 변경함 |
세 가지 버전 모두 약해 보인다면, 원본과 표시 크기를 확인하세요. 압축은 구성에서 이미 너무 작았던 텍스트를 해결할 수 없습니다.
단일 파일이 아닌 페이지 전체 예산 책정
8개의 제품 이미지를 즉시 로드하는 페이지를 상상해 보세요. 가상의 각 600KB 이미지의 경우, 십진법 단위를 사용하면 총 약 4.8MB가 됩니다. 각 180KB 이미지의 경우, 총 약 1.44MB가 됩니다. 이 계산은 누적 전송 크기를 보여주는 것이며, 측정된 로딩 시간 개선이나 권장되는 보편적인 제한은 아닙니다.
실제 경험은 또한 어떤 이미지가 초기에 로드되는지, 연결 조건, 캐싱, 다른 페이지 리소스 및 웹사이트의 이미지 처리 방식에 따라 달라집니다. 페이지 아래에 있는 큰 이미지는 사이트가 로드를 지연하는 경우 초기 전송의 일부가 아닐 수 있습니다.
계산을 사용하여 조사할 지점을 찾으세요. 첫 번째 제품 사진이 이미 선명하고 작지만, 12개의 숨겨진 갤러리 이미지가 전체 해상도로 다운로드된다면, 첫 번째 사진에 대한 또 다른 공격적인 압축은 잘못된 해결책일 수 있습니다.
게시된 사본 검사
선택한 후보를 업로드한 다음, 고객에게 표시되는 대상을 엽니다. 전송 파일과 비교하여 텍스트, 가장자리 및 색상을 확인하세요. 더 넓은 보기뿐만 아니라 휴대폰 크기 레이아웃도 확인하세요. 플랫폼은 업로드를 수락한 후 이미지를 자르거나 재압축할 수 있습니다.
작은 전송 기록을 보관하세요: 원본 파일명, 내보내기 치수, 형식, 결과 바이트, 대상 및 버전. 게시된 이미지가 더 나빠 보인다면, 이는 약한 원본, 내보내기 문제 및 대상 변환을 구분하기 쉽게 만듭니다.
Panelly Studio에서 만든 4개 패널 크리에이티브의 경우, 최종 이미지를 다운로드하고 평소 사용하는 이미지 도구에서 대상별 압축을 준비하세요. Studio가 여기에 설명된 모든 형식이나 인코더 설정을 제공한다고 가정하지 마세요. 향후 배치에 대비하여 완전한 원본을 보관하세요.
FAQ
모든 제품 이미지가 100KB 미만이어야 하나요?
대상별 예산과 시각적 비교를 사용하세요. 고정된 제한은 상세한 이미지에는 너무 엄격하고, 작은 썸네일에는 불필요하게 관대할 수 있습니다. 개별 파일뿐만 아니라 전체 페이지도 확인하세요.
동일한 JPEG를 반복해서 압축해도 되나요?
보관된 원본에서 각 새 전송 사본을 만드는 것을 선호하세요. 반복적인 손실 저장(lossy saves)은 손상을 누적시키고 중요한 디테일이 언제 손실되었는지 파악하기 어렵게 만들 수 있습니다.
업로드 후 이미지가 더 나빠 보이는 이유는 무엇인가요?
대상이 이미지를 변환할 수 있습니다. 원본, 내보낸 사본, 그리고 고객에게 표시되는 버전을 비교하세요. 이 세 가지 비교를 통해 다음 수정 사항에 집중할 지점을 식별할 수 있습니다.
