이미지 화질에 대해 질문있습니다

jjang9

작성한 질문수 36

2

안녕하세요, juuu o 님,

이미지 사이즈에 대해서 질문을 주셨는데요,

10배 크기의 이미지를 2배로 바꿨다는게 어떤 의미일까요?

10 만큼의 크기인 이미지를 2로 이미지 자체를 압축해서 렌더링 했을 때를 말씀하시는 걸까요?

만약 그렇다면, 말씀하신대로 성능과 품질에 대한 조율을 하시면 될 것 같습니다.
예를 들어, 이미지 갤러리 서비스와 같이 이미지가 메인인, 혹은 이미지의 선명함이 중요한 서비스를 개발한다고 하면, 이미지 로딩이 조금 오래 걸리더라도 고화질의 이미지를 넣는 것이 좋고,
그런게 아니라 사소한 이미지일 경우, 굳이 고화질의 이미지로 넣어주실 필요가 없습니다.

고화질의 이미지를 넣을 때에도 몇 가지 팁이 있는데,
- 가능하면 PNG 대신 JPG 또는 WEBP 로 압축
- 이미지 로드 전후에 Layout Shift가 발생하지 안도록 영역 잡아두기
- 이미지 로딩에 대한 UX 적용 (스켈레톤, 로더 등)
등등 이렇게 적용을 하시면 이미지 로드가 오래걸려도 사용성을 크게 해치지 않을 것이라고 생각됩니다.

추가로, 일반적으로 이미지는 실제 화면에 렌더링 되는 사이즈의 2배 이미지로 넣어주시는게 최적입니다.
(ex - 100x100 으로 화면에 넣어줘야 한다면, 200x200 이미지 사용)
자세한 내용은 아래 링크를 참고하시면 좋습니다.
- https://www.danrodney.com/blog/retina-web-graphics-explained-1x-versus-2x-low-res-versus-hi-res/
- https://www.sleeplessmedia.com/2018/12/14/optimizing-website-images-and-graphics-for-retina-displays/

답변이 도움되었기를 바라며, 강의에 관심을 가져주셔서 감사합니다. :)