HTML srcset이 모바일에서 적용이 안될 때

img 태그에 srcset을 사용해서 크기별로 이미지를 다르게 사용하려고 했다.
vutify의 v-carousel로 동적 이미지 바인딩을 하려 했기 때문에 css media query도 쓰기 어려웠다.

그래서 적용해보았는데 아래 그림처럼 크롬 개발자도구에서 모바일 버튼만 누르면 원하는 사이즈의 이미지가 나오질 않았다.

sizes를 이렇게도 수정해보고 저렇게도 수정해봤지만 다 안 됐다.

크롬 개발자 모드를 통해 보면 적용이 안 된 것 처럼 보일 수 있다는 stackoverflow 답변에 aws로 배포해서 직접 폰으로 보기도 했는데 적용 안된 게 맞았다.

그렇게 열심히 검색하던 중 해결방법을 찾을 수 있었다. 바로 picture 태그와 source 태그를 사용하는 것이다.

<picture>
  <source :srcset="slide.w320" media="(max-width: 400px)" />
  <source :srcset="slide.w640" media="(max-width: 640px)" />
  <source :srcset="slide.w960" media="(max-width: 960px)" />
  <source :srcset="slide.w1280" media="(max-width: 1280px)" />
  <source :srcset="slide.w1920" media="(max-width: 1920px)" />
  <img :src="slide.w1920" />
</picture>

이렇게 picture 태그와 source 태그를 사용하니까 귀신같이 해결됐다. 아주 만족스럽다.
프론트는 어려워😥