글 링크: https://devowen.com/544
소개
이 글은 JPEG, PNG, WebP, AVIF, JPEG XL 등 주요 이미지 형식이 다운로드 도중 이미지를 점진적으로 표시하는 방식을 비교합니다.
현재는 프로그레시브 JPEG가 비교적 안정적이지만, WebP·AVIF·JPEG XL은 브라우저별 지원 차이와 디코딩 성능 등의 한계가 있습니다.
다만 최신 이미지의 파일 크기가 이미 충분히 작고 네트워크 데이터도 끊어져 도착할 수 있어, 프로그레시브 렌더링의 실제 효과는 제한적일 수 있다고 설명합니다.
향후에는 AVIF 파일 앞부분에 작고 흐릿한 미리보기 이미지를 넣어 빠르게 보여주는 방식이 현실적인 개선안으로 제안됩니다
팀원들의 의견
Q. JPEG, WebP, AVIF 등 다양한 이미지 포맷이 있는데, 실무에서 이미지 포맷을 선택할 때 어떤 기준으로 결정하시나요? 혹은 프로그레시브 렌더링처럼 사용자 경험을 개선하기 위해 이미지 최적화에 신경 써본 경험이 있으시면 공유해 주세요!
💬. 의견 1
이전에는 브라우저 지원 범위를 확인하고서 용량이 작은 WebP나 AVIF 확장자의 이미지를 주로 쓰는 편이었는데, 지금은 이미지/아이콘과 같은 리소스를 관리해주는 제품이 있어서 딱히 고민하지 않고 그대로 쓰는 편이었던 것 같아요! 최적화를 위해서는 이미지에 placeholder를 적용하거나 lazy loading을 적용해봤어요!
💬. 의견 2
대부분은 서버측에서 지원하는 스펙에 따르고, 제약이 없다면 png, WebP 를 주로 사용하고 있습니다.
최적화는 일반적으로 lazy loading을 적용했는데, 메신저 서비스의 경우 로딩이 적절한 타이밍에 되지 않거나 로딩 되면서 레이아웃 시프트가 크게 일어나면 사용자 경험이 크게 떨어지기 때문에 신경을 많이 썼던 기억이 나네요.
이외에 이미지 관련해서는 이미지 리사이즈나 APNG 애니메이션 제어 같은 작업을 종종 했었습니다.
목차
브라우저의 프로그레시브 이미지 렌더링 현황
프로그레시브 렌더링이 정말 도움이 될까?
반응형 이미지 대신 프로그레시브 렌더링은 어떨까?