레티나, HD 디스플레이용 배경이미지 설정

우선 결과물 부터 보도록 하죠. 아이폰 5나 갤럭시S3 등 HD급 화면을 가진 단말기에서 확인하면, 다음 2개의 DIV중 아래쪽의 배경 패턴이 더 깨끗하게 나오는 반면, 위쪽은 흐릿하게 보이는 것을 확인해 볼 수 있습니다. 단, 일반 디스플레이의 단말기나 PC에서 보면 차이가 없습니다.

div{ background:url(pattern.gif); }
@media (-webkit-min-device-pixel-ratio:2){
div{ background-image:url(pattern@2x.gif); background-size:4px 4px; }
}

실제 이런 모습으로 보여집니다.
galaxy_ipad2
HD 해상도에 맞춰서 이미지를 2배로 늘려서 표시 하다보니, 이미지가 흐릿하게 보이는 현상이 생기게 되는 것입니다. 이를 방지하기 위해서 미디어 쿼리를 사용해, HD 해상도에는 미리 준비한 HD용 이미지를 사용하도록 처리해 주어야 합니다.


우선 다음과 같이 2개의 이미지를 준비합니다.
pattern.gif
pattern@2x.gif
이때 포토샵에서 일반 이미지의 크기만 2배로 늘리거나, 반대로 HD 이미지를 반으로 축소시키는 경우에 크기가 변경된 이미지가 흐릿하게 되는 문제가 발생하기 때문에, 두가지 버전의 이미지를 각각 작업해 주어야 모두 선명한 이미지를 만들 수 있습니다.

그리고 일반 디스플레이용으로 먼저 CSS를 설정해 줍니다.

div{ background:url(pattern.gif); }

다음 HD 디스플레이용으로 미디어 쿼리를 사용해서 CSS를 추가해 줍니다.

@media (-webkit-min-device-pixel-ratio:2){
    div{ background-image:url(pattern@2x.gif); background-size:4px 4px; }
}

이때 background-size는 일반 이미지의 크기로 설정해 줍니다. 배경의 크기를 지정해 주지 않으면 pattern@2x.gif 파일도 일반 이미지와 마찬가지로 2배 확대해서 화면에 표시를 해버리기 때문에, 크기만 2배인 흐릿한 이미지로 표시되게 됩니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다