가벼운 이미지를 넘어: 웹 이미지 최적화 실전 원칙

이미지 최적화는 품질을 낮춰 파일을 작게 만드는 일이 아닙니다. 사용자의 화면에 필요한 픽셀을 적절한 형식과 우선순위로 전달하고, 검색엔진과 보조 기술이 이미지의 의미를 이해하게 하는 전달 설계입니다.

이 글에서 다루는 내용

원본보다 표시 크기에서 시작합니다

400픽셀 카드에 2400픽셀 원본을 보내면 최신 포맷을 써도 낭비가 큽니다. 실제 레이아웃의 표시 폭과 기기 픽셀 비율을 기준으로 몇 개의 후보 크기를 만들고 브라우저가 srcset과 sizes로 선택하게 합니다.

아트 디렉션이 필요하면 picture의 media 조건으로 모바일에서 다른 크롭을 제공합니다. 단순 축소와 다른 구도 선택을 섞지 않으면 콘텐츠 팀도 의도를 이해하기 쉽습니다.

사진과 복잡한 그래픽은 AVIF·WebP 후보가 좋고, 로고와 단순 아이콘은 SVG가 적합합니다. 애니메이션, 투명도, 인코딩 시간, 브라우저 지원, CMS 변환 파이프라인까지 함께 비교합니다.

하나의 품질 숫자를 모든 이미지에 적용하지 않습니다. 대표 비주얼, 작은 카드, 배경 텍스처는 눈에 띄는 손상 지점이 다르므로 시각 검수 표본과 파일 크기 기준을 용도별로 둡니다.

첫 화면의 대표 이미지가 LCP 후보라면 초기 HTML에서 발견되어야 하며 loading=lazy를 붙이지 않습니다. 필요하면 fetchpriority=high를 제한적으로 사용하되 모든 이미지에 우선순위를 높여 경쟁을 만들지 않습니다.

화면 아래 이미지는 네이티브 지연 로딩으로 초기 전송과 디코딩 부담을 줄입니다. 모든 img에 width와 height 또는 안정적인 aspect-ratio를 제공하면 늦게 로드되어도 레이아웃 이동을 예방할 수 있습니다.

대체 텍스트는 키워드 칸이 아니라 이미지가 이 문서에서 하는 일을 전달합니다. 장식 이미지는 빈 alt를 쓰고, 정보 이미지는 주변 문장에서 이미 말한 내용을 기계적으로 반복하지 않도록 핵심 의미를 적습니다.

설명적인 파일명, 이미지 가까이의 관련 본문, 크롤링 가능한 URL, 적절한 구조화 데이터는 검색 시스템의 발견을 돕습니다. CSS 배경에 핵심 정보를 숨기거나 자바스크립트 이후에만 이미지 URL을 만드는 패턴은 피합니다.

모든 이미지를 AVIF로 바꾸면 되나요?

아닙니다. 콘텐츠 유형, 인코딩 비용, 폴백, 운영 도구를 봐야 합니다. 로고·아이콘은 SVG가 더 적합하고 경우에 따라 WebP가 더 단순한 운영 선택입니다.

lazy loading은 많이 적용할수록 좋은가요?

아닙니다. 첫 화면과 LCP 후보까지 지연하면 가장 중요한 콘텐츠가 늦어집니다. 초기 화면 밖의 이미지에 선택적으로 적용하세요.