웹 최적화 브라우저에서 처리

웹사이트 이미지 최적화

반응형 웹용 이미지 크기 세트와 그에 맞는 <picture> 코드를 생성해 페이지를 빠르게 만듭니다.

도구를 불러오는 중…

Your images are processed in your browser and are not uploaded to our servers.

웹 이미지 최적화 사용법

  1. 고해상도 이미지 한 장을 고르세요.
  2. 용도, 가로 크기, 형식, 품질을 고르세요.
  3. 크기를 생성하고 HTML 코드를 복사하세요.
  4. 코드를 포함한 전체를 ZIP으로 내려받으세요.

이 도구에 대하여

웹사이트 이미지 최적화는 WebP나 JPG로 여러 반응형 가로 크기(원하면 2배 버전도 함께)를 만들고, 내려받는 파일명과 정확히 일치하는 <picture>/srcset 코드를 바로 붙여 넣을 수 있게 만들어 줍니다.

권장 설정

이렇게 설정해 보세요

  • 웹 전달용으로는 품질 80 정도의 WebP가 훌륭한 기본값입니다.
  • 고밀도 화면에서도 선명하도록 2배 버전을 포함하세요.

지원 형식

입력: JPG, PNG, WebP, AVIF, GIF, BMP. 출력: WebP, JPG.

입력 형식

JPGPNGWebPAVIFGIFBMP

출력 형식

WebPJPG

품질과 용량

손실 형식(JPEG, WebP, AVIF)은 품질을 낮출수록 디테일을 내주고 용량을 얻습니다. PNG는 슬라이더와 무관하게 무손실을 유지합니다. 이 도구는 원본과 결과 용량을 항상 보여 줘서 그 맞바꿈을 직접 판단하게 하고, 원본보다 커진 결과를 “최적화”라고 권하지 않습니다.

개인정보

모든 이미지는 Canvas API와 Web Worker를 사용해 브라우저 안에서 디코딩되고 변형되고 다시 인코딩됩니다. 파일은 업로드되지 않고 localStorage에도 저장되지 않으며, 제거하거나 페이지를 닫으면 메모리에서 지워집니다.

자세한 내용: 이미지 처리 방식, 보안 개인정보 처리방침.

자주 겪는 문제와 제약

  • 원본 가로보다 큰 크기는 흐릿해지지 않도록 건너뜁니다.
  • 이 도구는 한 번에 원본 이미지 하나를 처리합니다.
  • 모든 처리가 사용자 기기에서 이뤄지므로, 제한은 서버가 아니라 본인의 브라우저를 보호하기 위한 것입니다: 파일당 25MB, 한 번에 20개, 이미지당 40메가픽셀.

자주 묻는 질문

이 도구는 무엇을 만들어 주나요?

WebP나 JPG로 여러 가로 크기(예: 480, 768, 1200픽셀)를 만들고, 내려받는 파일명과 정확히 일치하는 <picture>/srcset 코드를 바로 붙여 넣을 수 있게 제공합니다.

HTML이 실제 파일과 일치하나요?

네. 생성된 코드는 ZIP에 담긴 파일명을 그대로 참조하므로 프로젝트에 바로 넣어 쓸 수 있습니다.

이미지가 서버로 전송되나요?

아니요. 모든 이미지는 Canvas API를 사용해 브라우저 안에서 디코딩되고 처리되고 인코딩됩니다. 파일은 기기를 벗어나지 않으며 페이지를 닫으면 사라집니다.

관련 도구