IE7에서 리사이즈된 이미지 계단현상 Resampling scale

먼저 왼쪽의 이미지는 제 블로그의 테터데스크를 이용한 화면입니다.

"사진" 블로그를 운영하시는 많은 분들이 스킨을 선택할때 가장 고민되는 부분이 아마도 스킨의 폭일겁니다.

저역시 1000px이상이 되는 스킨을 찾으려고 했고 생각보다 그런 스킨이 많지 않아 수정을 하거나 아니면 가변폭을 사용한 스킨을 사용할 수 밖에 없었습니다. 

또 하나의 문제는 스킨을 바꾸려고 할때 기존의 사진을 자동으로 줄여주는 것이 있는가하면 그렇지 않은 스킨은 일일이 포스팅한 사진의 사이즈를 줄여줘야 하는 문제가 있었죠. 설령 무한 노가다(?)를 해서 사진의 폭을 재설정한다고 하여도 우리의 "IE"란 놈은 리사이즈된 이미지가 아주 보기싫게 나옵니다. "계단현상" 이라고 해야 할까요?

하지만 오페라브라우져나 크롬, 파이어폭스, 사파리의 경우 사진 실제 크기와 스킨의 폭이 다르더라도 이쁘게 랜더링되어 원래이미지를 작게보는것처럼 아주 매끄럽게 나옵니다. 대부분의 블러거들이 아직은 IE를 더 많이 사용한다고 볼때 사진이 깨져보이는것은 그대로 둘 수 없는 문제였습니다.

몇일을 이문제로 고심했습니다. 말이 고심이지 뭐 css나 html, skin에 관해서는 아는게 없는 관계로 구글링에 의존했습니다.
분명 같은 불만을 가지고 있을 거란 생각에..

오늘 결국 해답(?)이랄까..계단현상을 줄이는 방법을 찾고 적용해봤습니다.
아주 훌륭하게 적용이 잘되서 나옵니다.

방법은 그간 고민하던게 무색할 만큼 아주 간단합니다.
어느 스킨에나 포함되어 있는 style.css에 아래와 같은 내용만 추가해주시면 매끄러운 이미지를 "IE"에서도 보실 수 있습니다.

img {-ms-interpolation-mode:bicubic;}

출처 : http://www.aaronwpearson.com/2009/01/15/image-resizing-in-internet-explorer-7/

네 허무하죠? 이 내용만 추가해주시면 타 브라우져와 같이 아주 깔끔하게 리사이즈된 이미지를 보실 수 있습니다.
못믿겠다면 한번 해보세요.
제 블로그에 포스팅되어있는 사진들은 현재 모두 기존에 올렸던 사이즈 1000px입니다. 음 1500px도 있군요
모두 자동으로 스킨폭에 맞춰졌고 또 매끄럽게 보이시죠? (음.저만 그렇게 보이는건 아니겠죠?)

여기까지가 리사이즈된 이미지를 "IE"에서 매끄럽게 표현하도록 바꿔주는 내용이었습니다. 달랑 한줄
그럼 이제 자동으로 이미지를 리사이즈 하는 방법에 대해서도 말해야겠군요

OLokLiR 님의 블로그 포스팅 중 http://oloklir.tistory.com/127 에 가시면 이미지를 자동으로 스킨폭에 맞도록 줄여주는 스크립트를 올려주셨습니다.
그간 귀찮게 많이 해드렸는데 링크까지 걸어서 피해를 주는건 아닌지 모르겠네요. 

그럼 지금까지 왕 초보 문외한이 같은 상황에 고민하는 분들을 위해 간단하게 작성해봤습니다.

# IE6은 적용되지 않습니다.