오늘의 질문
이미지 크기가 클 경우 렌더링 속도가 느려질 텐데, 이를 개선하기 위한 방법들을 설명해주세요.
내답변
이미지 태그의 옵션을 통한 lazyloading 처리를 통해 개선이 가능함. 사용자가 보고있는 페이지의 이미지만 먼저 표시하고 사용자가 실제로 해당 위치에 도달했을때만 로딩하게 하는 방식이 고려될 수 있음
또는 정적데이터 혹은 텍스트등을 모두 먼저 보여주게 하고 스켈레톤을 이용하여 이미지 로딩을 사용자가 잠시 기다릴 수 있게 하는 방안
이미지 형식을 확인하고 webp 와 같은 포맷으로 변경하는 방안 제시. 해당 방식을 통해 이미지 크기를 줄여 속도를 늘릴 수 있음 (서버와 커뮤니케이션 필요)
사실 이미지가 너무 커서 렌더링 속도가 느려질 정도로 사용자 경험이 문제라면 리스트와 같은 곳에서는 썸네일 이미지를 별도로 구성하여 낮은 해상도를 제공하고 상세 페이지에서도 적당한 크기를 , 만약 클릭으로 전체 화면이 가능할때만 원본을 주는 방식을 고려해보는게 좋아보임.
답변
3가지 방법
이미지 포맷 최적화 : JPEG 또는 PNG 대신 WebP AVIF 와 같은 최신 포맷 사용.
이미지 사이즈 조정 : srcset sizes 속성을 활용하여 화면 크기에 최적화된 이미지를 선택하여 로드
지연로딩(Lazy Loading): 사용자가 화면에 스크롤할 때 해당 위치에 도달하는 이미지가 로드되도록 설정하는 방법. 초기 로딩 속도 개선 가능
CDN(Content Delivery Network): 사용자가 지리적으로 가까운 서버에서 이미지를 다운로드하게 하는 방법
WebP 혹은 AVIF 의 호환성 문제 해결방법 : HTML 의 요소를 통해서 fallback 이미지 적용하는 방식
배운점
우리 회사는 onpromise 환경에서 작동하는 경우가 많다보니 클라우드 시스템에 관련된 CDN 을 미쳐 생각하지 못했다. 해당 방식에 대해서도 인지는 하고 있어야 할듯 함.
이미지 사이즈 조정방식
사이즈에서 srcset 을 통해서 서버측에 미리 준비된 여러 이미지를 자동으로 선택하게 되는 방식이 존재함을 써보지 못했었음.
예시 코드)
<img
srcset="image-500w.jpg 500w,
image-1200w.jpg 1200w,
image-3200w.jpg 3200w"
sizes="(max-width: 500px) 100vw,
(max-width: 1200px) 50vw,
33vw"
src="image-1200w.jpg"
alt="설명">해당 방식을 통해 서버에서 이미지만 준비되면, 필요한 크기를 알아서 가져올 수 있기 때문에 효과적으로 보인다.
