CSS | 이미지 선명하게 만들기
개요
사이트 개발을 하는 도중 이미지 흐림 문제가 있었습니다. 해상도가 달라서 생기는 문제였는데, 이 자료를 재활용해야하는 상황이었기에 구글 검색을 했는데, 다행이게도 해결방법을 적어주신 분이 있어 정리하고자 합니다.
왼쪽과 같이 흐릿했던 부분을 오른쪽의 화면처럼 선명해지게 하는 방법입니다. 이미지가 흐릿했던 이유가 워드프레스 강제 압축 기능 때문인줄 알았는데 CSS 로 해결이 가능한 모습을 보니 신기하네요.
이 문제는 크롬에서 두드러지게 흐려지는 부분을 발견했습니다. 그 이유는 정확히 예측할 수 없지만 Z축을 0으로 맞추면 흐림이 줄어드는 현상이 있는 걸 보니 3D 엔진 기능상의 문제이지 않을까? 라는 추측을 하고 있습니다. (지극히 개인적인 추측)
image-rendering
.rdg-image {
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit 표준 X */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE 표준 X */
}먼저 <img> 태그여야 합니다. 우리가 활용할 방법은 image-rendering 함수를 활용하게 됩니다. webkit-optimize-contrast 인데요, 이 기능은 브라우저마다 다르게 표시될 수 있기 때문에 테스트를 거친 다음 적용하는 것을 권장합니다.
Translate Z
.rdg-image {
-ms-transform: translateZ(0); // ie
-moz-transform: translateZ(0); // firefox
-0-transform: translateZ(0); // opera
-webkit-transform: translateZ(0);
transform: translateZ(0);
}z축을 0으로 맞추어 흐림을 해결하는 방법입니다. 이 방법이 통할줄 몰랐는데 실제로도 흐림이 해결되니 신기했습니다. 대신, 3D 렌더링과 관련이 되어 있어 미세하지만 속도의 저하가 발생할 수 있다고 합니다.
backface-visibility
.rdg-image {
-moz-backface-visibility: hidden; // firefox
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}뒷면을 숨김으로써 흐림 효과를 제거하는 방법입니다. 두번째 방법인 z 축을 0으로 만드는 방법을 역발상으로 생각하여 아이디어를 내지 않았을까 싶은 마음입니다
웹 폰트 깨짐 현상
p {
transform: rotate(0.04deg);
}
p {
transform: skew(-0.1deg);
}두가지 방법이 있습니다. transform 를 활용하며 rotate(회전) 혹은 skew(기울기) 를 활용하는 방법입니다. 원리는 글자를 살짝 비틈으로써 너무 각진 부분을 둥글게 만드는 효과를 만들게 됩니다.