Windows에서 웹용 이미지 최적화하기

Windows에서 리사이즈 우선 워크플로우, 포맷 비교, 반응형 변형, 시각적 확인, 그리고 측정 가능한 납품을 통해 웹용 이미지를 최적화하세요.

디자인 내보내기가 아닌 네트워크 요청부터 시작하세요. 640픽셀 카드에서 CSS가 이미지를 축소하더라도 브라우저는 여전히 큰 원본을 전송하므로, 3000픽셀 제품 사진이 올바르게 보일 수 있습니다. 아래 Windows 워크플로우는 이러한 불일치를 찾아 합리적인 변형을 생성하고, 배포 후 페이지를 확인합니다.

비용이 가장 많이 드는 이미지 찾기

Microsoft Edge에서 페이지를 열고 F12를 눌러 네트워크 탭을 선택한 후 새로고침합니다. Img로 필터링하고 전송된 크기로 정렬합니다. 비용이 많이 드는 요청마다 다음 세 가지 사실을 기록하세요.

파일의 픽셀 차원.
Elements 패널에서의 렌더링 너비.
화면 상단(fold) 위에 있는지 나중에 로드되는지 여부.

1200픽셀로 렌더링되는 히어로 이미지는 고밀도 디스플레이에 1920픽셀 또는 2400픽셀 원본이 필요할 수 있습니다. 원래 6000픽셀 카메라 내보내기가 항상 필요한 것은 아닙니다. 360픽셀로 렌더링되는 카드는 히어로와 동일한 파일을 요청해서는 안 됩니다.

Paint로 이미지 하나 리사이즈하기

Paint는 단일 오버사이즈 원본을 수정하기에 충분합니다.

이미지를 열고 크기 조정 및 기울이기를 선택합니다.
종횡비 유지가 활성화되어 있는지 확인합니다.
파일 크기에서 추측한 퍼센트가 아닌 필요한 픽셀 너비를 입력합니다.
마스터 파일이 그대로 유지되도록 다른 이름으로 저장을 사용합니다.

640픽셀 카드의 경우 800픽셀 표준 이미지와 1280픽셀 고밀도 디스플레이용 이미지를 만드세요. 크기를 조정한 뒤 작은 글자와 제품의 가는 가장자리를 확인합니다. 원본에 투명도가 있다면 JPEG로 저장하지 마세요.

PowerToys로 일괄 리사이즈하기

Microsoft PowerToys에는 Image Resizer 가 포함되어 있어 파일 탐색기에 리사이즈 명령을 추가합니다. 사이트의 실제 브레이크포인트에 맞는 너비(예: 480, 960, 1600픽셀)를 정의한 후 원본을 대체하지 않고 사본을 생성합니다.

PowerToys는 차원에 유용하지만 완전한 전달 파이프라인은 아닙니다. 파일 이름 지정, 포맷 변환, 반응형 마크업, 시각적 검토가 여전히 중요합니다. 생성된 후보를 별도의 폴더에 넣어 소스 아트웍과 혼동되지 않도록 하세요.

JPEG, PNG, WebP, AVIF 중 선택하기

에셋	적절한 전달 포맷	주의 깊게 확인
제품 또는 편집 사진	WebP, AVIF, 또는 JPEG	질감, 그라데이션, 피부 톤
작은 텍스트가 있는 스크린샷	PNG 또는 고품질 WebP	글리프 가장자리와 얇은 선
로고 또는 아이콘	소스가 벡터일 경우 SVG	올바른 뷰 박스와 접근 가능한 레이블
부드러운 그림자가 있는 투명도	WebP 또는 PNG	밝고 어두운 배경의 할로 효과

모든 PNG를 JPEG로 변환하지 마세요. 투명도가 제거되고 텍스트 주변에 링 현상이 발생할 수 있습니다. JPEG 사진을 PNG로 변환하는 것도 일반적으로 파일 크기를 늘릴 뿐 손실된 디테일을 복원하지 않습니다. 근본적인 트레이드오프에 대해서는 손실 및 무손실 압축 을 참조하세요.

반응형 이미지를 올바르게 전달하기

압축만으로는 이미지가 반응형이 되지 않습니다. 너비 후보를 제공하고 브라우저가 선택하도록 하세요.

<img
  src="product-960.webp"
  srcset="product-480.webp 480w, product-960.webp 960w, product-1600.webp 1600w"
  sizes="(max-width: 720px) 100vw, 50vw"
  width="960"
  height="640"
  alt="Black travel bag open to show the interior compartments"
>

Google은 이미지 SEO 가이드 에서 표준 이미지 요소, 유용한 alt 텍스트, 반응형 후보, 그리고 대체용 src를 권장합니다. width와 height는 레이아웃 공간을 예약합니다. alt 텍스트는 키워드 목록을 반복하는 것이 아니라 이미지의 목적을 설명해야 합니다.

Edge에서 결과 확인하기

데스크톱과 모바일 너비에서 캐시를 비활성화하고 새로고침합니다. 브라우저가 예상되는 srcset 후보를 선택했는지, 히어로가 레이아웃을 밀어내지 않는지, 텍스트가 가독성이 있는지 확인합니다. 그런 다음 PageSpeed Insights 또는 필드 데이터를 사용하여 이미지 변경이 실제 페이지에 개선 효과를 가져왔는지 판단하세요. Google은 코어 웹 바이탈을 페이지 경험의 일부로 간주하지만 유용한 콘텐츠의 대체재로 보지는 않습니다.

출시 전 제품 이미지의 경우 게시할 때까지 변환을 로컬에서 유지하세요. 위임된 에셋을 서드파티 서비스에 보내기 전에 Windows의 온라인 압축기 프라이버시 위험 을 참조하세요.

GetCompress가 웹 에셋 준비에 적합한 경우

Paint와 PowerToys는 가끔 리사이즈하기에 충분합니다. Windows 팀이 일관된 차원, 포맷 변형, 시각적 검토가 필요한 혼합된 PNG, JPEG, HEIC, TIFF 및 기타 원본을 반복적으로 받을 때 GetCompress가 더 적합합니다. 저장된 프리셋과 일괄 처리 대기열은 리포지토리나 CMS에 들어가기 전에 로컬 납품 사본을 준비합니다.

GetCompress와 반응형 마크업, CDN 구성, 캐싱 또는 성능 측정의 역할은 다릅니다. 배포된 페이지를 테스트하고 소스 마스터를 생성된 웹 에셋과 분리해 두세요.