불투명한 PNG을 WebP로 변환하고 결과를 비교합니다.

사진 PNG은 웹사이트의 WebP로 테스트해 볼 가치가 있습니다. 디자인 도구에서 내보낸 카메라 이미지, 렌더링된 실내 장면 또는 평면화된 홍보 그래픽일 수 있습니다. PNG을 바로 삭제하기보다는 별도로 내보내기를 하여 원본과 비교해 보세요. 파일 크기는 이미지에 따라 다르므로 실제로 측정한 크기만 저장하면 유용합니다.

투명성에는 특별한 관리가 필요합니다. WebP 형식은 알파를 저장할 수 있지만 이 도구는 현재 흰색 배경에 WebP 출력을 렌더링합니다. 따라서 투명한 입력은 내보내기에서 투명한 영역을 잃게 됩니다. 다양한 배경에 배치해야 하는 로고, 컷아웃 및 오버레이에 대해 PNG을 유지하고 불투명한 결과가 적절한 이미지에 대해 이 변환을 사용합니다.

사전 설정은 치수를 유지하고 선명하게 하기를 끄고 90% 품질에서 시작합니다. 작은 텍스트가 포함된 파일 하나와 사진 배경이 포함된 다른 파일을 사용해 보세요. 얇은 테두리, 컬러 문자 및 부드러운 그라데이션을 검사합니다. 원하는 크기로 표시하면 라벨 옆에 컬러 후광이 표시되면서 디자인이 한눈에 괜찮아 보일 수 있습니다.

PNG이 인터페이스의 스크린샷인 경우 몇 바이트를 줄이는 것보다 가독성이 더 중요할 수 있습니다. PNG 내보내기를 비교하거나 WebP가 중요한 세부 사항을 완화할 때 소스를 유지하세요. 크고 불투명한 사진의 경우 품질을 더 낮추기 전에 실제 디스플레이 범위 내에서 맞춤을 테스트하세요. 웹사이트에 불필요한 픽셀이 표시되지 않으면 먼저 불필요한 픽셀을 줄이고 의도한 배치에 충분한 해상도를 유지하세요.

WebP 품질 슬라이더는 이 내보내기의 손실 인코딩을 제어합니다. 설정이 높을수록 소스에서 누락된 세부 정보가 복원되지 않으며 동일한 숫자가 다양한 형식에서 동일한 시각적 결과를 의미하지 않습니다. 이를 비교 도구로 사용하십시오. 약간 조정하고 결과를 검사한 후 자신의 품질 요구 사항을 충족하는 가장 작은 버전을 유지하십시오.

PNG은 동일한 방식으로 품질 관리를 사용하지 않으므로 확장자를 변경하는 것이 실제 작업 흐름 선택입니다. PNG에 작은 다이어그램 레이블이나 정확한 색상 경계가 포함된 경우 파일이 더 크더라도 PNG을 유지하는 것이 올바른 결정일 수 있습니다. 이 변환기는 PNG 색상 팔레트를 줄이거나, 무손실 WebP 설정을 생성하거나, 병합된 그래픽 내의 개체 및 레이어를 편집하지 않습니다.

변환된 이미지를 다운로드하여 실제 웹사이트 시스템의 테스트 페이지에 업로드하세요. 브라우저가 WebP을 수신하는지, 표시된 자르기가 올바른지, 투명한 가장자리가 예기치 않게 하얗게 된 부분이 없는지 확인하세요. 특히 소스가 어두운 부분을 위해 설계된 경우 페이지 배경에서 봅니다. 변환은 파일 미리보기뿐만 아니라 상황에 맞게 확인해야 합니다.

그런 다음 모바일 디스플레이를 검토합니다. 대형 마케팅 그래픽의 경우 문자를 휴대폰에서 읽을 수 없는 경우 압축된 사본 대신 간단한 레이아웃이 필요할 수 있습니다. 반응형 이미지 선택과 예약된 크기는 별도의 웹사이트 작업으로 유지됩니다. 샘플이 완성되면 일치하는 파일을 함께 처리합니다. 이 변환 중에 이미지 데이터는 브라우저에 유지되며 소스 PNG은 변경되지 않습니다.

예를 들어 브랜드 자산을 변환하기 전에 투명 픽셀에 흰색 워드마크를 테스트해 보세요. 흰색 불투명 출력은 표시를 완전히 숨길 수 있으며, 파일 크기 비교만으로는 이를 놓칠 수 있습니다.