본문 바로가기

[ programing ]/HTML + CSS

가변이미지에서 고려할 사항

가변이미지에서 고려할 사항

레티나급의 이미지를 크기만 줄여서 모바일 기기에 표시한다고생각해 보세요. 화면에 보여지는 모습은 작아 보여도 이미지 파일을 다운로드 하는데 꽤 오랜 시간이 걸립니다. 브라우저 에서는 사이트에 포함된 모든 이미지를 일단 불러온(preload) 후 기기에 따라 어떤 이미지는 감추고 어떤 이미지는 표시하는 방법을 사용합니다. 따라서 모바일 기기 입장에서는 불필요한 레티나 이미지파일까지 로딩하게 됩니다.