이미지

로딩 성능 최적화 - 이미지, 동영상

이미지 사이즈 최적화 이미지 크기 확인하기 이미지 크기를 적절하게 줄여서 로딩 성능을 향상시킨다. Lighthouse의 Opportunity의 Properly size images 항목을 보면 적절하지 않은 크기의 이미지들의 목록을 볼 수 있다. 이미지 요소의 src 링크에 커서를 올려보면 rendered size: 화면에 그려진 이미지의 크기와 Intrinsic size: 불러온 이미지의 크기를 확인할 수 있다. 예시를 보면 화면에 그려지는 이미지의 크기에 비해 불러오는 이미지의 크기가 너무 크다. 적절한 크기는 화면에 그려지는 이미지의 너비,높이 기준으로 2배정도 되는 크기이다. 이미지 크기를 줄여서 로딩 시간을 줄일 수 있다. 이미지 크기 줄이기 그렇다면 이미지는 어떻게 줄일까? image proc..