웹 개발자를 위한 이미지 및 비디오 압축

마케팅 팀이 4MB 크기의 PNG 히어로 이미지를 저장소에 넣었습니다. Lighthouse에서 LCP를 경고했습니다. 또는 자동 재생 MP4 배경이 모바일 로드 시간에 2초를 추가했습니다. 또는 온라인 최적화 도구를 실행하고 파일이 실제로 어디에 있는지 궁금해했을 수도 있습니다.

프론트엔드 성능은 자산이 public/ 또는 CDN에 도달하기 전에 적절한 차원, 형식, 로딩 동작을 선택하는 것에서 시작됩니다. 잘못된 픽셀을 전달하거나 폴드 아래 미디어를 강제로 로드하면 압축으로 보완할 수 없습니다.

최적화되지 않은 미디어가 페이지 로드와 코어 웹 바이탈에 미치는 영향

큰 히어로 이미지와 최적화되지 않은 비디오 포스터는 Largest Contentful Paint와 총 바이트 가중치에 직접적인 영향을 미칩니다. 압축되지 않은 자산 몇 개만으로도 신중한 코드 스플리팅이 무효화될 수 있습니다.

인코딩 전에 오버사이즈 소스를 리사이즈하고, 대표 자산 세트를 기준으로 형식을 비교하세요. 결과물은 투명도, 질감, 텍스트, 브라우저 지원, 반응형 전달에 따라 달라지며, 모든 PNG, JPEG, 비디오에 적용할 수 있는 책임감 있는 비율 목표치는 존재하지 않습니다.

현대 웹 전달을 위한 이미지 및 비디오 형식

현대적인 사이트는 정적 및 모션 자산을 혼합하여 사용합니다:

• 이미지: UI, 마케팅, OG 이미지를 위한 PNG, JPEG, WebP, AVIF, SVG, HEIC, GIF.
• 비디오: 배경, 제품 데모, 문서용 MP4, WebM, MOV.
• PDF: 임베드된 스크린샷이 포함된 다운로드 가능한 가이드 및 스펙 시트.

디자인 인수 인계 시 하나의 형식만 제공된 경우, 하나의 도구에서 PNG 마스터로부터 WebP 또는 AVIF 변형을 생성하세요. 히어로 JPEG 세트, 자동 재생 MP4 루프, OG 이미지 PNG 파일은 종종 같은 스프린트에 도착합니다. 병렬 처리하여 머지 전에 준비하면 Lighthouse 점수가 플레이스홀더 내보내기가 아닌 실제 프로덕션 가중치를 반영합니다.

프로덕션 자산을 위한 손실 및 무손실 선택

평평한 색상과 작은 텍스트가 있는 UI 스크린샷은 무손실에 가까운 또는 무손실 출력이 필요합니다. 마케팅 사진과 B-롤은 큰 바이트 절약을 제공하는 손실 압축을 사용할 수 있습니다. public/에서 파일을 교체하기 전에 자산 유형별 실용적인 분할을 보려면 손실 및 무손실 압축 을 참조하세요.

이미지 중심 페이지의 경우, Mac에서 웹용 이미지 최적화 는 컴포넌트 라이브러리 및 정적 사이트 저장소에 직접 매핑되는 리사이즈 우선 워크플로우, WebP, AVIF, PNG 경로를 다룹니다. WordPress 및 기타 CMS 빌드는 동일한 로컬 프리페이를 얻습니다. 자산이 미디어 라이브러리에 도달하기 전에 Mac에서 WordPress용 이미지 최적화 를 참조하세요. 무손실 마스터는 디자인 저장소에 보관하고, 손실 또는 현대식 형식 변형을 프로덕션에 전달하세요.

시각적 품질을 해치지 않고 자산 압축하기

손실 압축은 사진에 적합합니다. UI 스크린샷은 때때로 무손실 또는 무손실에 가까운 설정이 필요합니다. 프로덕션 파일을 교체하기 전에 1:1 줌으로 출력을 미리보세요.

자산 유형별로 프리셋을 저장하세요: 사진 갤러리는 공격적으로, 평평한 색상과 텍스트가 있는 UI 캡처는 보수적으로 설정합니다. 고해상도 노트북에서 압축 아티팩트가 표시되지 않도록 레티나 히어로 이미지는 2x 줌으로 미리보세요.

비디오 코덱과 웹 전달의 트레이드오프

자동 재생 배경 MP4 파일과 제품 데모 루프는 마케팅 페이지에서 비디오 바이트 가중치의 대부분을 차지합니다. 광범위한 브라우저 지원을 위해 MP4의 H.264가 가장 안전한 기본값입니다. 분석 결과 대부분의 트래픽이 지원 브라우저에서 발생한다면 H.265와 VP9 또는 AV1이 포함된 WebM은 파일을 더 줄일 수 있습니다. 모든 히어로 비디오에 단일 내보내기 프리셋을 선택하기 전에 H.264와 H.265 코덱 을 읽어보세요.

음소거된 루프 배경의 경우, 모바일 페이지 가중치를 늘리지 않으면서 모션을 부드럽게 유지하는 비트레이트 및 차원 목표는 Mac에서 웹용 비디오 최적화 를 참조하세요. 미리보기에서 루프 핸들을 트리밍하여 5초 배경 클립에 10초의 중복 프레임을 전달하지 마세요.

릴리스 워크플로우에 미디어 체크포인트 추가

컴포넌트별로 크기 예산을 정의하고, 자산이 이를 명확히 초과할 경우 리뷰에서 실패하도록 설정하세요. 생성된 자산을 디자인 마스터와 별도로 저장하고, 생성에 사용된 명령어나 프리셋을 기록하세요. 이렇게 하면 무거운 히어로 회귀가 배포 후가 아닌 풀 리퀘스트에서 눈에 띄게 됩니다.

릴리스 체크포인트에는 고유 차원, 반응형 후보, 로딩 우선순위, 대체 텍스트, 포스터 이미지, 코덱 지원, 실제 전송 크기가 포함되어야 합니다. 압축은 이 체크리스트의 한 줄에 불과합니다.

폴더 모니터링을 팀이 이미 사용하는 디자인 드롭 디렉토리를 가리키도록 설정하세요. 새 PNG 및 MP4 내보내기는 커밋하기 전에 압축되므로 PR 리뷰는 놀라운 4MB 아이콘이 아닌 레이아웃 문제를 잡아냅니다.

배포된 페이지까지 테스트

최적화된 파일이라도 전달 방식이 잘못될 수 있습니다. 프로덕션 경로를 확인하세요:

1. 정확한 너비 또는 밀도 설명자와 유용한 sizes 속성을 사용하여 반응형 이미지 후보를 서빙하세요.
2. 미디어가 레이아웃 시프트를 생성하지 않도록 고유 너비와 높이를 설정하거나 종횡비를 지정하세요.
3. 초기 HTML에서 예상 LCP 이미지를 쉽게 찾을 수 있도록 하세요. 폴드 위의 후보를 지연 로드하지 마세요.
4. 폴드 아래 미디어를 지연 로드하고, 사용자가 볼 수 있기 전에 시작되는 자동 재생 비디오 다운로드를 피하세요.
5. 비디오에는 포스터를 사용하고, 완전히 음소거된 장식용 루프에서는 오디오를 제거하며, reduced-motion 동작을 테스트하세요.
6. 스로틀링된 모바일 프로필에서 전송 바이트, 선택된 반응형 후보, 캐시 헤더, CDN 변환, LCP, CLS를 검사하세요.

자동화된 점수는 진단용이지 시각적 QA를 대체하지 않습니다. 실제 기기에서 텍스트, 그라데이션, 투명 가장자리, 모션을 비교하세요. 소스 자산을 생성된 출력 디렉토리 외부에 보관하여 향후 형식 또는 브레이크포인트 변경이 이미 압축된 파생물이 아닌 깨끗한 마스터에서 시작되도록 하세요.

GetCompress가 웹 자산 파이프라인에 적합한 경우

빌드 도구, 반응형 마크업, CDN은 브라우저에 올바른 자산을 서빙하는 책임을 집니다. 디자인에서 PNG, JPEG, WebP, AVIF, MP4, WebM 소스가 혼합되어 반복적으로 전달될 때, GetCompress는 해당 파이프라인 전에 더 잘 맞습니다. 병렬 프리셋과 폴더 모니터링은 스테이징 UI를 노출하지 않고 로컬 변형을 준비합니다. GetCompress와 srcset, 캐싱, 로딩 전략, 성능 측정의 역할은 다릅니다. 이 시스템들이 받는 입력 자산을 표준화합니다.