아티클
속도와 Core Web Vitals를 위한 웹사이트 미디어 최적화
이미지와 동영상은 보통 웹 페이지 전체 용량의 60~80퍼센트를 차지합니다. 이를 제대로 다루는 것은 로딩 속도, Core Web Vitals 점수, 검색 순위를 위해 할 수 있는 가장 효과가 큰 일입니다. 좋은 소식은, 그 어느 것도 전문 소프트웨어나 서버가 필요 없고, 파일이 기기를 떠날 필요도 전혀 없다는 점입니다.
무엇보다 먼저 올바른 포맷을 고르세요
포맷 선택은 어떤 품질 슬라이더보다 중요합니다. 웹 페이지의 사진에는 WebP가 올바른 기본값입니다. 같은 시각적 품질에서 JPEG보다 25~35퍼센트 작고 모든 최신 브라우저가 지원합니다. AVIF는 더 느린 인코딩을 대가로 JPEG보다 최대 50퍼센트까지 더 압축합니다. 한 번 압축하는 히어로 이미지와 제품 사진에는 AVIF를, 일괄 처리하거나 빠르게 필요한 것에는 WebP를 쓰세요. PNG는 무손실 정확도나 투명 배경이 필요한 경우에만 어울립니다. SVG는 로고, 아이콘, 일러스트레이션에 유일하게 합리적인 선택입니다. 어떤 크기로든 확대되며, 래스터화된 등가물이 수백 킬로바이트인 데 비해 흔히 몇 킬로바이트에 그칩니다.
눈에 띄는 화질 손상 없이 이미지 압축하기
실제 표시 치수에 맞춰 리사이즈하는 것부터 시작하세요. 가로 1280픽셀로 표시되는 히어로 이미지에 4000픽셀의 데이터는 필요 없습니다. 먼저 리사이즈하고 그다음에 압축하세요. 사진의 경우 WebP나 JPEG의 품질 80은 그 아래부터 일반 사용자가 차이를 알아채기 시작하는 현실적인 하한선이므로, 75~85를 목표로 하고 게시 전에 결과물을 최대 확대해 살펴보세요. 텍스트와 단색 면이 있는 그래픽에는 무손실 PNG나 SVG가 손실 포맷이 뭉개는 선명함을 보존해 줍니다. 이 사이트의 이미지 압축기는 이 모든 포맷을 처리하고, 전적으로 브라우저 안에서 동작하며, 전용 데스크톱 도구와 동일한 알고리즘을 적용합니다.
업로드 없이 웹용으로 동영상 변환하기
배경 루프와 임베드 영상은 웹 미디어 최적화가 흔히 미흡해지는 지점입니다. H.264를 쓰는 MP4는 어디서나 재생되지만, VP9를 쓰는 WebM은 같은 품질에서 20~40퍼센트 더 작아 제한된 연결의 모바일 사용자에게 의미가 큽니다. 현실적인 접근법은 한 번 WebM으로 변환해 video 요소에서 선호 소스로 제공하고, MP4를 대체 수단으로 두는 것입니다. 여기 있는 비디오 변환기는 WebAssembly로 컴파일된 FFmpeg를 사용합니다. 변환은 브라우저 안에서 실행되고, 아무것도 업로드되지 않으며, 기기에 메모리가 충분하다면 어떤 크기의 파일도 동작합니다. 인라인 배경 영상이라면 인코딩 전에 비디오 트리머로 불필요한 초들을 잘라내는 것도 고려하세요. 길이가 파일 크기의 가장 큰 결정 요인입니다.
인라인 자산: base64와 SVG
HTML이나 CSS에 base64 문자열로 직접 삽입한 아주 작은 이미지, 아이콘, 파비콘은 자산당 네트워크 왕복을 한 번씩 없애 줍니다. 이는 로고 스프라이트나 로딩 표시기처럼 모든 페이지에 나타나는 약 2KB 미만의 자산에 적합합니다. 더 큰 자산은 별도 파일로 두어야 합니다. base64는 바이너리보다 33퍼센트 더 크게 인코딩되고, 브라우저는 파일 참조는 캐시하지만 인라인 데이터는 독립적으로 캐시하지 않기 때문입니다. SVG 최적화 도구는 시각적 출력은 건드리지 않고 내보낸 SVG에서 편집기 잔여물을 제거합니다. 이미지-base64 변환기는 곧바로 붙여넣을 수 있는 데이터 URI를 브라우저 안에서 생성합니다.
이 아티클의 도구
- 이미지 압축 업로드 없이 이미지 파일 크기를 줄입니다. 품질 슬라이더 또는 목표 크기(KB). 일괄 처리 지원.
- 이미지 크기 조정 이미지(JPEG, PNG, WebP)를 업로드 없이 크기 조정하고 변환하세요.
- SVG 최적화기 SVGO로 SVG 파일을 브라우저에서 바로 최적화 및 압축. 업로드 없음.
- 동영상 변환기 동영상을 MP4, WebM, MKV, MOV(H.264/H.265/VP9) 간에 브라우저에서 변환합니다. 업로드 없음.
- 이미지를 Base64로 이미지를 Base64 데이터 URI로(그리고 다시 거꾸로) 브라우저에서 바로 변환. 복사, CSS 스니펫, 업로드 없음.
자주 묻는 질문
이미지 압축이 제 검색 순위에 영향을 주나요?
Google은 Core Web Vitals를 순위 신호로 사용하며, Largest Contentful Paint는 거의 항상 이미지이거나 동영상 포스터입니다. 히어로 이미지가 1초 안에 로드되는 페이지가 3초 걸리는 페이지보다 좋은 점수를 받습니다. 압축과 올바른 포맷은 이 지표에 직접 영향을 주므로, 그렇습니다, 이미지 최적화는 측정 가능한 SEO 효과가 있습니다. 그 효과는 연결이 더 느리고 무거운 이미지에 대한 페널티가 더 큰 모바일에서 가장 강하게 나타납니다.
왜 웹 서비스를 쓰지 않고 미디어를 로컬에서 처리하나요?
대부분의 온라인 미디어 도구는 파일을 원격 서버로 업로드해야 하는데, 이는 시간이 걸리고 대역폭을 소모하며, 통제할 수 없는 인프라에 파일 사본이 존재한다는 뜻입니다. 이 사이트의 도구들은 전적으로 브라우저 안에서 동작합니다. 이미지와 동영상은 기기에서 처리되고 결과물은 곧바로 내려받습니다. 계정도 없고, 업로드 대기도 없으며, 파일에 관한 그 무엇도 서버로 전송되지 않습니다.