친절한효자손 취미생활

이태원 참사에 대한 깊은 애도를 표합니다. 타인의 불행을 악용하는 사이버렉카가 되지 않겠습니다.

반응형

현재 이 문제는 티스토리에서도 보여지는 문제입니다. 친효스킨에서도 문제입니다. 이것을 해결하기 위해서 한 달 전부터 머리를 끙끙 싸메고 노력중인데 별다른 뾰족한 방법이... 있긴 있습니다. 문제는 이게 기본 아이콘 이미지에도 영향을 준다는 부분입니다. 이게 문제인 것입니다.

 

현재 상황입니다. 댓글 리스트에서의 사용자 아이콘 부분입니다. 위는 기본 이미지죠. 기본 이미지의 경우는 문제 없습니다. 보시는 것처럼 정상 출력됩니다.

 

문제는 사용자가 프로필 이미지로 지정한 이미지의 경우입니다. 이게 친효스킨만 이러는건지 타스킨도 비슷한 상황인건지는 확실치 모르겠지만 (확인해보니 타스킨도 일부는 이미지가 흐림) 검색해보면 유독 크롬 브라우저에서 이런 현상이 발생한다는것을 알 수 있습니다. 해결은 어떻게 할까요? 아래의 CSS 코드를 추가하면 됩니다.

 

img 태그에서의 이미지 렌더링 변경

img {
    image-rendering: -webkit-optimize-contrast !important;
}

이것은 이미지의 렌더링 방식을 변경하는 코드입니다. -webkit- 벤더픽스만 사용한 이유는 파이어폭스에서는 정상적으로 출력이 되고 있기 때문입니다. 유독 크로미움엔진계열의 브라우저가 문제입니다. 엣지에서도 동일한 문제를 보이고 있습니다. 따라서 위의 코드만 CSS에 넣어놓으면 우선 본문의 이미지 출력문제는 어느정도 해결됩니다. 크롬에서요.

 

background-img 에서 이미지 렌더링 변경

image-rendering: pixelated;

다음은 이미지를 div같은 태그의 백그라운드로 적용시켰을 경우입니다. 사용 방법은 전과 동일합니다. 단지 백그라운드 이미지가 적용된 태그 혹은 부모 요소에 위의 코드를 삽입하면 됩니다.

 

주의사항

하지만 몇 가지 짚고 넘어가야 할 주요 이슈가 있습니다. 말그대로 위의 코드는 이미지의 렌더링을 강제로 변경하는 것입니다. 크롬이 업데이트가 되고, CSS나 HTML이 버전업을 어떻게 하느냐에 따라서 내용이 변경될 수 있습니다. 그러니 늘 새로운 변화에 귀를 쫑긋 세우고 있어야 합니다.

 

먼저 본문의 이미지의 경우는 정상적으로 잘 적용이 되었습니다. 사실 전과의 차이가 크게 벌어지지는 않습니다만 그냥 체감상 좀 더 선명해진 기분이 듭니다. 문제는 댓글 아이콘 이미지입니다.

 

보시는 것처럼 이번에는 너무 선명하다못해 이미지가 깨지는 현상이 발생했습니다. 포토샵에는 샤프(Sharp)툴이 있습니다. 이미지가 다소 흐릴 때 이 샤프툴을 사용해서 강제로 선명하게 보이도록 만드는 겁니다. 원리는 비트맵 이미지를 구성하는 도트들의 채도, 색상을 원색에 가깝게 강제로 변경함으로서 각자의 경계가 뚜렷하게 보여지는 기능입니다. pixelated라는 단어를 검색해보니 「픽셀화된」이라는 뜻을 내포하고 있었습니다. 즉 샤프툴과 엇비슷한 기능을 하지 않나라는 생각이 듭니다. 단지 아쉬운 부분은 값을 설정할 수 있도록 만들면 좋겠는데 그러지 못해서 좀 아쉽습니다.

 

당연히 기본 이미지도 영향을 받아서 이미지의 일부가 깨집니다. 그러므로 사용에 각별히 주의해 주시기 바랍니다. 제 생각에는 큰 이미지에 적용시키면 나름 준수한 효과를 보이는데 작은 이미지일수록 손실이 커보이는 것 같습니다. 끝.

공유하기

facebook twitter kakaoTalk kakaostory naver band

댓글