큰 이미지가 느릴 때 렌더링 속도를 높이는 법: 포맷, 크기, 로딩 전략 한 번에 정리 빠른 답 원본 이미지를 그대로 내려보내지 말고 실제 표시 크기와 DPR에 맞춘 파일을 서버나 CDN에서 변환해 제공합니다. AVIF와 WebP를 우선하되 로 JPEG 또는 PNG fallback을 함께 두어 브라우저 호환성을 확보합니다. 첫 화면 핵심 이미지는 무조건 lazy 처리하지 말고 fetchpriority="high" 또는 preload를 검토하고, 나머지 이미지만 지연 로딩합니다. Network와 Performance 패널에서 전송 크기, 선택된 소스, 디코드 시간, LCP 후보 이미지를 함께 봐야 병목을 정확히 찾을 수 있습니다. 브라우저 렌더링 흐름을 중심으로 초안을 다시 정리하고, 현재 기준의 포맷 지원과 우선순위 관련 공식 문서 포인트를 짧게 확인하겠습니다. 오래된 설명과 지금 설명이 갈리는 부분도 함께 정리해서 발행용 본문으로 맞추겠습니다.# 큰 이미지가 느릴 때 렌더링 속도를 높이는 법: 포맷, 크기, 로딩 전략 한 번에 정리 목차 시간 흐름으로 이해하기 흐름으로 보기 브라우저 안에서 실제로 무슨 순서로 일어날까 큰 이미지가 느린 이유는 다운로드만이 아니다 현재 기준 포맷 선택과 오래된 설명의 차이 요청 시점과 우선순위 다루기 표시 크기와 레이아웃 안정성 맞추기 CDN, 캐시, 변환 파이프라인에서 줄일 수 있는 비용 DevTools로 병목 확인하기 무엇부터 바꾸면 좋을까 공식 문서와 레퍼런스 시간 흐름으로 이해하기 HTML 파싱 시점 img 는 비교적 빨리 발견되지만 CSS 배경 이미지는 CSS를 읽은 뒤에야 요청 후보가 되는 경우가 많습니다. → 전송 시점 파일 크기, 캐시 적중 여부, CDN 거리 차이가 첫 바이트와 다운로드 시간을 바꿉니다. → 디코드 시점 압축된 파일을 화면용 비트맵으로 풀어내는 과정에서 CPU와 메모리를 사용합니다. → 레이아웃 시점 이미지 비율이 늦게 확정되면 자리 계산이 다시 일어나고 CL...