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

리사이즈 중심 워크플로우, 포맷 비교, 반응형 변형, 시각적 검수, 측정 가능한 프로덕션 배포를 통해 Mac에서 웹용 이미지를 최적화하세요.

마케팅 사이트는 이미지 무게를 제외한 모든 항목에서 높은 점수를 받습니다. 히어로 이미지는 너비 2800 px의 PNG이며, 인라인 사진은 풀 해상도의 카메라 JPEG입니다. CDN은 모든 바이트를 충실히 캐시합니다. 레이아웃 너비에 맞게 리사이즈하고, 올바른 포맷을 선택하며, 배포 전 품질을 조정하여 웹용 이미지를 최적화하세요.

웹 이미지가 느리게 느껴지는 이유

브라우저는 CSS로 표시 크기를 줄여도 전체 파일 바이트를 다운로드합니다. 큰 소스 파일은 LCP, 모바일 데이터 요금제, CMS 업로드 제한에 부정적인 영향을 미칩니다.

문제	일반적인 원인
무거운 히어로	CSS 너비의 2배보다 넓은 PNG 또는 JPEG
레티나에서 흐림	소스가 너무 작거나, 너무 큼
잘못된 포맷	사진이 무손실 PNG로 저장됨
폴백 없음	JPEG 백업 없이 WebP만 사용

Mac에서 이미지 압축하는 방법 의 표시 크기 규칙으로 시작하세요. 항상 포맷 변환 전에 리사이즈하세요.

웹용 포맷 선택

스택의 콘텐츠와 브라우저 지원에 맞게 포맷을 맞추세요.

콘텐츠	주요 포맷	폴백
사진 히어로	WebP 손실 압축	JPEG
투명도 있는 UI	PNG 또는 무손실 WebP	PNG
아이콘 같은 평면 아트	벡터 소스가 있을 경우 SVG	PNG
이메일 임베드	JPEG	N/A

모든 사진을 무손실 인코딩하기 전에 손실 압축과 무손실 압축 을 읽어보세요. 적절한 리사이즈 후 히어로에는 품질 80에서 85 사이의 손실 WebP 또는 JPEG가 보통 충분합니다.

PNG를 WebP로 변환하는 단계는 Mac에서 PNG를 WebP로 변환하기 를 참조하세요. <picture> 또는 정적 사이트 생성기 구성 파일에 JPEG 폴백을 유지하세요.

크기, 품질, 반응형 배포

고해상도 화면의 경우 CSS 열 너비의 약 2배에 해당하는 너비로 내보내세요.

CSS 표시 너비	내보내기 너비 힌트
960 px 히어로	1600에서 1920 px
720 px 콘텐츠 열	1440 px
400 px 카드	800 px
풀블리드 1280 레이아웃	아트가 필요할 경우 최대 2560 px

리사이즈 후 품질 가이드라인:

사진 히어로: WebP 또는 JPEG 품질 80에서 85
인라인 블로그 사진: 75에서 82
텍스트가 있는 스크린샷: 100% 줌으로 확인; PNG 또는 더 높은 품질의 WebP 선호

HTML의 반응형 이미지는 여러 너비를 가진 srcset을 사용합니다. 빌드 파이프라인이 지원하면 하나의 마스터 내보내기에서 1x와 2x 변형을 생성하세요.

Google의 이미지 SEO 가이드 는 표준 이미지 요소, 폴백이 있는 반응형 후보 src, 설명적인 파일 이름, 유용한 alt 텍스트를 권장합니다. 압축은 전달을 돕지만, 크롤링 가능한 마크업이나 이미지의 정확한 설명을 대체하지는 않습니다.

지연 로딩은 인지된 속도를 높이지만, 모든 방문자가 전체 기사를 스크롤할 때 다운로드되는 총 바이트 수는 줄이지 않습니다. 이미지가 폴드 아래에 로드되더라도 모바일 데이터 요금제와 CDN 요금에는 작은 소스 파일이 여전히 중요합니다.

히어로를 교체한 후 브라우저 개발자 도구에서 스로틀링된 4G 프로필로 페이지를 하나 테스트하세요. 너비가 레이아웃과 일치하면 일반적인 블로그 인라인 사진의 네트워크 워터폴에서 200 KB 미만의 수치가 나와야 합니다.

Mac에서의 내보내기 워크플로우

반복 가능한 로컬 워크플로우가 일회성 업로드보다 낫습니다.

모니터 캡처 크기가 아닌 레이아웃 너비로 디자인에서 내보냅니다.
내보내기 너비가 초과될 경우 미리보기에서 리사이즈합니다(도구 → 크기 조정…).
터미널에서 cwebp를 사용하여 히어로를 WebP로 변환합니다.

brew install webp
cwebp -q 82 -m 6 hero.png -o hero.webp

동일한 리사이즈된 PNG 소스에서 일치하는 JPEG 폴백을 내보냅니다.
병합 전 브라우저 개발자 도구 네트워크 패널에서 스팟 체크합니다.

리사이즈 후 oxipng는 PNG로 유지해야 하는 투명도 PNG 자산에 도움이 됩니다.

oxipng -o 4 --strip safe icon.png

저장소에 너비, 품질, 포맷 규칙을 문서화하여 다음 캠페인이 3x 아트보드 내보내기로 되돌아가지 않도록 하세요.

스테이징용 자산에 대한 로컬 처리

미출시 히어로, 가격 스크린샷, 베타 UI는 출시할 때까지 디스크에 보관됩니다. 온라인 최적화 도구는 업로드 시 풀 해상도 소스를 받습니다.

제3자 업로드가 기밀 크리에이티브에 미치는 영향은 온라인 파일 압축기가 안전한지 를 참조하세요. 로컬 앱과 터미널 도구는 파일을 압축 웹사이트로 보내지 않고 처리할 수 있습니다.

GPS 태그가 공개 페이지에 표시되지 않을 경우 사진 히어로에서 위치 EXIF를 제거하세요. 메타데이터 제거는 바이트 최적화와 별개 단계이지만 프라이버시에 중요합니다.

GetCompress가 웹 자산 준비에 적합한 경우

간헐적인 자산에는 미리보기, cwebp 또는 빌드 플러그인으로 충분합니다. 디자인 팀이 일관된 너비, 미리보기, 웹 포맷 변형이 필요한 혼합된 PNG, JPEG, HEIC 및 기타 소스를 엔지니어링 팀에 반복적으로 전달할 때 GetCompress가 더 적합합니다. 프리셋과 일괄 처리 큐는 빌드에 진입하기 전에 이러한 파일을 로컬에서 준비합니다.

GetCompress와 반응형 마크업, CDN 구성, 캐싱 또는 성능 측정의 역할은 다릅니다. 배포된 페이지를 테스트하고 소스 마스터를 생성된 웹 자산과 별도로 유지하세요.