웹 이미지 해상도 미디어쿼리

Question

현재 웹 개발을 하고있습니다한 컴포넌트에서 특정 이미지들을 보여주어야하는데PC에선 760*668모바일은 240*190크기로 보여주고 있습니다사용중인 이미지 확장자는 webp 확장자를 사용하고 있고 폴백으로는 png를 사용합니다.webp의 이미지 해상도를 760x668, 1520x1336(2배), 3040x2672(4배)로 준비했습니다이렇게 준비한 이유는 모바일같은 px밀집도?가 높은곳에선 고해상도를 써야한다는 글을 본 것 같아서 준비는했는데어떤걸 기준으로 어떤 해상도의 이미지를 띄워주어야 하는지 그 기준이 뭔지 모르겠어서 헤매고있습니다뷰포트의 가로길이가 768px이하일 경우 모바일로 취급하고 있습니다마냥 4배짜리의 이미지를 PC와 모바일에 보여주자니 렌더링 속도가 느려질 수 있다고 생각해서 상황에 맞는 이미지를 넣고싶은데 그 기준을 잡지못하고있습니다 도와주세요ㅠㅠ

siyex42080 · Answer

devicePixelRatio 값을 사용하시면 됩니다.

O-h-y-o · Answer

실제로 렌더링 시켜보시고, 고화질, 저화질 차이가 없다면 굳이 고화질을 사용하지 않아도 된다 생각하는데요.. 실제로 보여지는게 제일 중요하니까요.

웹 이미지 해상도 미디어쿼리

2개의 답변

Q&A 목록