[HTML] 이미지 캐싱

웹사이트의 이미지가 변경된 경우 캐쉬가 남아있어 변경사항이 적용안되는 경우가 있다. 이럴경우 강력 새로고침을 해주면 적용이 된다.

• 새로고침 : f5
• ctrl + f5 : 강력 새로고침
• shift + f5 : 강력 새로고침(크롬)
• shift + ctrl + r : 강력 새로고침(크롬)

하지만 수정이 빈번한 프로젝트의 경우 매번 캐쉬를 지우고 그러기에는 사용자 입장에서 썩 좋은 방법은 아니다. 몇가지 방법이 있는데 수정이 될때마다 이미지명을 버전별로 바꾸는 것이다.

• 변경 전 : “img.png”
• 변경 후 : “img_v01.png”

브라우저는 이미지명이 다를경우 다른 이미지라고 인식하여 불러오기 때문인데, 위 방법은 수정사항이 잦아질 경우 리소스 관리가 까다롭기 때문에 그렇게 좋은 방법은 아니다.
조금 더 효율적인 방법은 이미지를 불러오는 경로 마지막에 파라미터를 추가하는 방법을 사용하면 된다.

• 변경 전 : “img.png”
• 변경 후 : “img.png?ver=1.0”