window.addEventListener(‘message’, function (event) {
if (!event.data || event.data.type !== ‘resize’) return;

const iframe = document.getElementById(‘lovable-frame’);
if (iframe && typeof event.data.height === “number”) {
iframe.style.height = event.data.height + “px”;
}
});

WebP를 PNG로 왜 변환해야 할까요?

WebP는 우수한 압축으로 알려진 현대적인 이미지 형식이지만, 모든 소프트웨어, 플랫폼 또는 편집기가 아직 완전히 지원하지는 않습니다. 반면 PNG는 투명성을 지원하며 모든 브라우저, 그래픽 도구 및 장치에서 널리 받아들여지는 범용 이미지 형식입니다.

WebP를 PNG로 변환하면, 특히 이미지를 편집하거나 투명성을 유지하거나 오래된 시스템 및 디자인 워크플로에서 사용해야 하는 경우 최대 호환성을 보장할 수 있습니다.

PNG 형식의 주요 이점

• ✅ 무손실 압축 – PNG는 전체 이미지 세부 정보와 선명도를 유지합니다.

• ✅ 투명성 지원 – 투명한 배경이 필요한 아이콘, 로고 또는 그래픽에 적합합니다.

• ✅ 넓은 호환성 – PNG는 모든 디자인 도구, 브라우저 및 플랫폼에서 지원됩니다.

이 도구를 사용하는 방법

1. WebP 파일 업로드
   “WebP 파일 선택”을 클릭하거나 이미지를 업로드 영역으로 드래그 앤 드롭합니다.

2. 자동 변환
   도구가 WebP 이미지를 높은 품질의 PNG로 변환합니다.

3. PNG 다운로드
   “PNG 다운로드” 버튼을 클릭하여 파일을 저장합니다.

4. 어디서나 사용
   PNG 파일이 편집, 공유 또는 웹, 인쇄 또는 디자인 프로젝트에 통합할 준비가 되었습니다.

자주 묻는 질문

변환된 PNG에서 투명성을 유지할 수 있나요?
예. 원본 WebP 파일에 투명성이 포함된 경우, 이 변환기는 PNG 출력에서 이를 유지합니다.

무손실이란 무엇을 의미하나요?
무손실 압축은 파일 크기를 줄이는 동시에 이미지 품질을 손상시키지 않습니다. PNG는 무손실 형식이므로 변환된 이미지는 원본과 시각적으로 동일하게 유지됩니다.

이 도구는 무료이고 비공개인가요?
绝对적으로. WebP를 PNG로 변환하는 도구는 브라우저 기반으로 완전히 무료이며, 변환 후 파일을 저장하거나 공유하지 않습니다.

다른 이미지 형식으로 변환할 수 있나요?
예, 아래 파일 형식을 선택하세요.

.conversion-footer {
font-family: system-ui, sans-serif;
margin: 30px 0;
}

details.convert-dropdown {
margin-bottom: 8px;
border: 1px solid #e0e0e0;
border-radius: 6px;
background-color: #fff;
transition: box-shadow 0.3s;
}

details.convert-dropdown[open] {
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.convert-dropdown summary {
font-weight: 600;
font-size: 15px;
padding: 12px 16px;
background-color: #f7f8f9;
border-bottom: 1px solid #e0e0e0;
cursor: pointer;
list-style: none;
position: relative;
}

.convert-dropdown summary:hover {
background-color: #eef0f2;
}

.convert-dropdown summary::marker {
display: none;
}

.convert-dropdown summary::after {
content: “▾”;
position: absolute;
right: 16px;
font-size: 12px;
transition: transform 0.3s ease;
}

details[open] summary::after {
transform: rotate(180deg);
}

.convert-dropdown a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #0073aa;
font-size: 14px;
border-top: 1px solid #f1f1f1;
transition: background 0.2s;
}

.convert-dropdown a:hover {
background-color: #f1f7fb;
color: #005177;
}