브라우저 확대 시 이미지가 태블릿, 모바일용으로 변경되는 문제

[senasoon]

데스크탑에서 브라우저 창 확대 시 이미지가 태블릿, 모바일용으로 변경됩니다.
저희 프로젝트에서는 이미지가 데스크탑, 태블릿, 모바일에 따라 화질이 다른데 모바일용 사진이 화질이 좋지 않아서 확대 시에 흐릿하게 보이는 문제가 있습니다.

티빙 사이트의 경우, 모바일용의 사진도 화질이 나쁘지 않기 때문에 확대를 해도 아래 사진과 같이 화질에 대해 크게 문제가 없습니다.

저희 프로젝트 이미지의 경우 화질이 좋지 않아 아래와 같이 나타나게 됩니다.

이대로 사용해도 좋을지 다른 방법이 있을지 아이디어가 있으시다면 공유 부탁드립니다!

[sykang013]

1. 미디어 쿼리를 사용해서 데탑/ 태블릿/ 모바일 이미지를 각각 다르게 보여줄 것인가(성능 최적화적인 면에서)
   -> 현재 넷플릭스, 티빙은 주력 콘텐츠의 경우에는 화질이 괜찮은것을 사용하고, 그렇지 않으면 그냥 적당히 사용하는듯.
   (아래는 넷플릭스의 주력 콘텐츠. 500% 확대했는데도 화질이 좋음)
   
   (아래는 주력 콘텐츠가 아닌 콘텐츠. 화질구지다)
   

-> 의문: OTT 서비스에서 미디어 쿼리를 이용한 사진 화질 변경기능을 실제로 사용하고 있는것인지 모르겠다(데탑에서는 얼마나 확대하든지 다 똑같아보임)
2)하지만 그러면 데스크탑에서 사용자가 웹접근성의 문제로 인해 500%까지 브라우저를 확대한다고 가정했을 때, 심각한 화질구지가 발생한다.(확대시 브라우저의 vw에 의해)

[수영과 세은이 생각한 타협방안 ]
a. 그냥 화질구지로 쓰는것은 반대(수영)
b. 미디어 쿼리를 사용한 성능최적화를 고려해보되, 데탑/ 태블릿 사진 이미지 두개만 사용
-> 하지만 그래도 화질이 구림
c. 아예 이미지를 티빙 홈페이지에 있는 것으로 다시 가져온다
-> 공수가 들어간다.

[sykang013]

[팀 논의 결론 ]
현재의 파이어 스토리지 상태 유지하고, 기능구현 한 후 여유가 있으면 사진 화질 개선 모색.
url은 같을테니 스토리지에서 이미지 파일만 변경 가능.