Last edit : Mar 2018
img 태그에 확장자 없는 이미지를 사용해도 괜찮을까?

이 블로그의 템플릿을 만들다가 대강 아래와 같은 코드를 짤 일이 있었다.

<img src="{{ site.url }}/projects/{{ project.title }}/thumbnail.png">

맞는 제목의 폴더 아래에 thumbnail.png라는 이름의 png 파일을 넣으면 썸네일로 보이게 되도록 한 것인데, 초반엔 괜찮았지만 gif 파일을 썸네일로 넣고 싶어지자 문제가 생겼다.

그래서 확장자에 관계없이 가져오도록 하고자 방법을 생각해 봤는데, 먼저 간단하게 확장자명을 지우고 아래와 같은 코드로 고쳐보았다.

<img src="{{ site.url }}/projects/{{ project.title }}/thumbnail">

이렇게 해서 문제가 해결되었을까? 일단 의도대로 잘 작동한다. 물론 썸네일 이미지들도 확장자를 전부 지워주었다.

이게 가능한 이유는 브라우저들이 문서를 처리할 때 파일 확장자가 아니라 Content-type 헤더에 명시된 MIME type(Multipurpose Internet Mail Extensions)를 보고 구분하기 때문이라고 한다.

이 방법이 간단하기는 하지만 해당 이미지를 저장하려고 할 때 확장자가 없어 불편할 수 있으니 다른 방법을 사용해서 확장자를 명시해 주는 편이 좋을 것이라고 생각한다.

참고 링크

https://stackoverflow.com/questions/5110384/can-i-use-images-without-extension-in-img https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types