ProgrammingModel

Date

20211122

Target

C_051

Title

Image Size Info, dimensions and displayed, keep image quality problem

Contents

웹페이지를 만들 때 이미지 퀄리티가 중요하다. 이미지 퀄리티는 사진의 품질과 함께 페이지가 보여지는 데스크탑과 모바일의 화면 해상도와 밀접한 연관이 있다. mobile display의 경우 Retina방식은 두 배의 이미지를 사용해야한다고 한다. 레티나디스플레이의 특성 때문이다. 웹페이지에서 보여지는 이미지와 해상도가 일치하는 것이 우선 중요하다. 이미지는 w:2000, h:1000인데 데스크탑에서 img src로 들여진 화면 displayed가 w:1000, h:500이라면 이미지는 찌그러짐 현상이 발생한다. 그 반대의 경우에는 픽셀이 뭉게져 벌어지는 현상이 발생할 것이다. 결국 dimensions과 displayed가 1vs1을 이루는 것이 핵심이다. 이를 도와주는 크롬 브라우져의 앱이 있다. chrome에 이를 해결하기 위한 앱이 있다. image size info가 그것이다. https://chrome.google.com/webstore/detail/image-size-info/oihdhfbfoagfkpcncinlbhfdgpegcigf?hl=ko 에서 설치할 것 개요: 모바일과 데스크탑에 최상/적정한 이미지 퀄러티 보장하기 데스크탑의 해상도에 대한 이해, 4k모니터 모바일의 해상도에 대한 이해, 620p ppi에 대한 이해 1 points = 1.333 pixel Best Image Sizes and How to Save Images For the Web and Flothemes https://flothemes.com/flothemes-image-sizes/