인프런 커뮤니티 질문&답변
작성한 질문수
이미지 화질에 대해 질문있습니다
작성
·
840
답변 1
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/
답변이 도움되었기를 바라며, 강의에 관심을 가져주셔서 감사합니다. :)
아하 그런 의미셨군요.
그런데 4배의 이미지는 의미가 없는 걸로 알고 있습니다.
결국 렌더링 하는 영역은 정해저 있으니까요.
만약 3x이나 4x인 레티나 디스플레이에 대해서 대응을 한다면 의미가 있겠습니다만,,,
(좀 찾아보니 모바일은 3x 까지도 사용되는 것 같네요, 3배 이미지까지는 의미가 있을 것 같습니다.)
강의에서 120px로 이미지를 렌더링하기위해 unsplash API로 1200px이미지를 불러왔던것을 최적화를 위해 240px로 줄이게 돼서 10배에서 2배로 바꿨다고 표현했는데 설명이 부족했던것 같습니다ㅎㅎ
링크도 달아주시고 좋은 답변 감사합니다!!