썸네일 이미지들이 모여있고, 그 썸네일을 클릭하면 해당 이미지가 크게 나타나게 하는 기본적인 갤러리 구조를 가진 웹사이트를 만들어 보고 있습니다.

현재는 썸네일을 원본 이미지와 같은 경로에서 가져오지만, 이미지 사이즈만을 줄여 불러왔습니다.

그런데 이미지들이 하나 둘 씩 점점 늘어나다보면 , 원본 이미지를 수십, 수백여개 불러오는 꼴이 되어 버리니 상당히 낭비인데, 어떻게 해결하는게 현명한 방법인지 여쭤보고 싶습니다.

원본이미지를 통해 썸네일을 불러올때 단순히 크기만을 줄이는게 아닌 용량또한 줄이는 방법이 있나요?

아니면 원본이미지를 통해 불러오는게 아닌 썸네일 파일들을 모아놓는 곳을 따로 만들고 , 그 썸네일 이미지들을 불러오는 것이 좋은가요? 아니면 다른 방법이 있을까요?

하나 더 질문을 드리자면 , div 요소에 background-image : url 을 사용하여 인라인 스타일 형태로 이미지 경로를 입력해주는 것이 좋은지, 스타일 시트에 따로 입력해주는 것이 좋은지.

div 요소 안에 img 태그로 불러와야 좋다면 그 이유도 궁금합니다 ...!! 도와주세요