웹브라우저 이미지 렌더링 품질 비교 (Opera 10 vs IE 7 vs FF 3.1)

Internet/WebBrowser 2008.12.07 13:03
  • 이미지도 브라우저마다 다르게 출력되는군요.
    ie7 계단현상.... ^^;;

    밥먹자 2008.12.07 13:32 신고
    • 예, 브라우저마다 개성이 있네요. 댓글 감사합니다. 좋은 하루 되세요. ^^

      youngjr 2008.12.11 14:12 신고 DEL
  • 안녕하세요:D 시험공부 때문에 포스팅이 늦었습니다.앞으로도 youngjr님의 흥미로운 포스팅들 기대하겠습니다XD

    재오리 2008.12.11 12:08 신고
    • 시험은 다 끝나셨나요? 맥은 OS 차원에서 이미지 렌더링을 다 관리하기 때문에 웹브라우저간 이미지 차이가 없군요. 그래도 사파리는 색공간까지 제대로 표현해준다니 대단한 것 같습니다. 트랙백 감사합니다. ^^

      youngjr 2008.12.11 12:39 신고 DEL
크리에이티브 커먼즈 라이선스
Creative Commons License
오페라에서 아무렇지 않게 보고 있던 이미지들을 어느 날 IE에서 보니 화질이 좀 떨어져 보인다는 생각이 들었습니다. 이미지에 계단 현상이 너무 두드러져 보였기 때문이죠.
느낌뿐 아니라 실제로 그랬던 것인데요. 웹페이지에 올라온 사진의 실제 크기와 웹페이지에서 화면에 표시되도록 지정한 크기가 정확히 맞지 않으면, 실제 사진을 화면에 표시되는 크기로 맞출 때 어떻게 할 것인지는 웹브라우저에 따라 다른 것 같습니다. (원본 사진의 크기와 화면에 표시하는 크기가 일치하는 경우에는 브라우저에 상관없이 동일한 결과를 보여줍니다. 아닐 수도 있나요? 아뭏든 그렇기를 기대합니다. 그래야 이 포스트 내용이 제대로 보여질테니까요. ^^)
이런 차이를 없애려면 이미지를 웹화면에서 보여지는 크기로 정확히 미리 조절해서 올리면 되긴 하겠지만, 블로그 등에 대량의 이미지를 올릴 때 그 많은 이미지를 일일이 리사이징하는 것도 번거로운 일일뿐더러, 스킨 같은게 바뀌어서 이미지 크기를 다르게 보여주고 싶다든지 할 때는 문제가 될 수 있습니다.
따라서 이러한 이미지를 표시할 때의 품질은 웹브라우저의 렌더링 엔진의 성능 중 하나로 평가할 수 있을 것 같습니다. (사실 오페라 자랑을 좀 하고 싶었어요. ^^)
그럼, 오페라, IE, 파이어폭스의 세 브라우저에서 동일한 사진 혹은 그림이 어떤 식으로 표현되는지 알아보도록 하겠습니다. 각 브라우저 버전은 Opera 10 alpha 1, FireFox 3.1 beta 1, IE 7 입니다.
먼저 그림의 예입니다. 얼마전 제 블로그에 올렸던 글에 있는 그림으로 해당 페이지를 각기 다른 세 브라우저에서 표시하고 화면을 캡춰해서 비교하였습니다.

MS IE7 (원본 크기 100%)
사용자 삽입 이미지

FireFox 3.1 beta1 (원본 크기 100%)

사용자 삽입 이미지
Opera 10 alpha 1 (원본 크기 100%)
사용자 삽입 이미지
좀 더 차이를 느껴보시라고 위의 화면을 이미지 편집 툴에서 2배 확대한 모습을 캡쳐해봤습니다.
MS IE7 (원본 크기 200%)
사용자 삽입 이미지
FireFox 3.1 beta1 (원본 크기 200%)
사용자 삽입 이미지
Opera 10 alpha 1 (원본 크기 200%)
사용자 삽입 이미지
IE7의 화면은 이미지를 다른 크기로 리샘플링하면서 제대로된 필터링 하나 안하는 것 같습니다. FF와 Opera의 경우 bilinear 필터링 정도를 한 것 같은데, 묘하게 직접 보면 오페라의 결과 화면이 좀 더 선명합니다. 가독성이 좋다고 해야 할까요? 뭔가 단순한 필터링 한 것 보다 선명해보입니다. Gimp라는 제가 사용하는 이미지 편집 툴에서 동일한 크기로 bilinear 필터링이나 bi-qubic 필터링한 것과 비교해 보아도 오페라쪽이 조금 더 선명해 보입니다.
사진을 보면 좀 더 차이가 드러납니다.

MS IE7 (원본 크기 100%)
사용자 삽입 이미지
FireFox 3.1 beta1 (원본 크기 100%)
사용자 삽입 이미지
Opera 10 alpha 1 (원본 크기 100%)
사용자 삽입 이미지
MS IE7 (원본 크기 200%)
사용자 삽입 이미지
FireFox 3.1 beta1 (원본 크기 200%)
사용자 삽입 이미지
Opera 10 alpha 1 (원본 크기 200%)
사용자 삽입 이미지

IE7은 말할 것도 없고, 나머지 두 브라우저의 경우는 얼핏보면 잘 구별 안가지만 오페라쪽이 외곽선이나 디테일이 조금 더 선명합니다.
윈도우 XP에 기본으로 깔려있는 기본 Windows 사진 및 팩스 뷰어의 경우 해상도를 원본 사진과 달리 볼 경우 사진이 좀 뿌옇게 보이는 경향이 있는데, 오페라를 이미지 뷰어로 쓰고 싶을 정도입니다.
요즘 브라우저들은 CTRL+마우스가운데휠 조작으로 화면을 확대/축소하는 기능이 보통 있는데요. IE7과 오페라에서 화면을 축소해 보면, 오페라의 경우 축소를 꽤 많이 하는데도 그림으로 된 글씨 같은 것을 잘 알아볼 정도로 가독성이 좋은 것을 확인할 수 있습니다.
아뭏든 오페라의 경우 이미지를 이렇게 깔끔하게 보여주면서도 아주 부드러운 스크롤을 보여주는데 렌더링 엔진(Presto 2)의 우수한 성능을 다시 한 번 느껴봅니다.
IE8은 안써봐서 모르겠는데, IE7보다는 좀 나아졌겠지요? 파이어폭스 수준만 되어도 대만족일텐데 말이죠. ㅎㅎ
사진에 등장해 준 연구실 K군에게 감사를. 옆에 티스토리 커피차 이벤트 때 오셨던 도우미분도 나왔네요. 사진 주인공들에 대한 악플은 사절합니다. ㅎㅎ

이전글
2008/12/05 - [FreeSoftware] - 오페라 10 (Opera 10) Alpha 1 버전 성능 테스트
2008/12/05 - [FreeSoftware] - 오페라 opera 10 Alpha 버전 등장!
2008/02/28 - [FreeSoftware] - 오페라(Opera) 웹브라우저의 편리함
신고
posted by youngjr

오페라 10 (Opera 10) Alpha 1 버전 성능 테스트

Internet/WebBrowser 2008.12.05 21:45
  • FF 3.1 beta 2는 표준점이 93점 나오는군요.-_-; 제가 beta 2를 사용하고 있어서. ^^

    우리팬 2008.12.05 21:56 신고
    • 앗, 글을 쓰자마자 댓글이.. 감사합니다. 예, 그렇군요. 제가 파폭 베타1로만 테스트해서 그랬군요. 본문에 해당 내용 추가 하겠습니다. 정보 감사드립니다. ^^

      youngjr 2008.12.05 21:58 신고 DEL
  • 글 잘 읽고 갑니다 웹브라우저 성능테스트 할수있는 것들이 이렇게 많았군요.
    파폭의 확장성이나 사파리의 빠른 속도 같은 장점들도 결국 엑티브 엑스 까세요 하는 사이트에서는닥치고 익스플로러를 열어야 되는 이 안타까움을 어찌할까요;
    그리고 여기 소개된 벤치도구들로 맥용 브라우저 벤치마킹을 제가해도 괜찮을까요?ㅎ

    재오리 2008.12.05 23:20 신고
    • 예, 여기 있는 벤치마크 사이트들은 제가 만든 곳도 아닌데, 얼마든지 테스트 하셔도 됩니다. 맥용 오페라와 사파리의 성능 비교가 궁금하네요. 테스트 후 결과 꼭 올려주세요. 댓글 감사합니다. ^^

      youngjr 2008.12.05 23:25 신고 DEL
  • 오페라는 벤치마크에서 다른 브라우저와 비슷하게 결과가 나와도.. 웬지 실제 서핑시에는 속도 체감이 훨씬 빠르게 느껴집니다. 벤치마크로 측정 할 수 없는 뭔가가 있는것 같다는.. -_-;
    아무튼 좋은 벤치마크 해주셔서 감사합니다. 잘 읽고가요.. ^^;

    웹초보 2008.12.06 00:04 신고
    • 예, 사실 저도 느끼고 있었는데요, 아마 화면을 뿌려주는 방법의 차이에서 오는 체감상의 빠름인 것 같은데요. 오페라는 콘텐츠를 다 읽지 않은 상태에서도 미리미리 화면을 뿌려주면서 페이지를 로딩하는데 비해 다른 브라우저는 어느 정도 콘텐츠가 모여야 화면을 보여주는 것 같습니다. 여기서 사용자 입장에서는 오페라가 더 빨리 반응한다고 느끼는 것 같네요. 자세한 분석은 해보지 않아서 정확한 것인지는 모르겠지만, 느낌상 대충 그런 것 같아요. 댓글 감사합니다. ^^

      youngjr 2008.12.06 00:09 신고 DEL
  • 정말 감사합니다...일단 저의 무지(?)에 의한 실수를 찍어주셔서 정말감사합니다.
    본문에도 약간 표현을 했지만...정말 기쁜나머지(기쁘지만 뭔가 디숭숭~~)에
    그리고 급히 글을 작성하다보니 실수가 생겼네요...ㅋㅋㅋ
    감사드립니다. 전 아직 오페라 10의 테스트버전을 사용전이었습니다...결국 단순히
    기사만 보고 너무 흥분한 나머지...자주 들러서 좋은 정보 그리고 좋은 글 읽고 가겠습니다...감사합니다...

    앵겨 2008.12.06 01:35 신고
    • 감성이 풍부하신 분 같아요. 도움이 되었다니 저도 기분이 좋습니다. 본의 아니게 오페라 정보가 블로그에 많이 올라왔는데, 가끔 들러서 참고해주시면 감사하겠습니다. 좋은 하루 되세요. ^^

      youngjr 2008.12.06 02:34 신고 DEL
  • youngjr님 포스팅을 참고로 맥용 브라우저 벤치마크들 했습니다.
    부족한 글이지만 트랙백 하나 걸고 갑니다.

    재오리 2008.12.06 02:28 신고
    • 예, 잘 보았습니다. 트랙백, 댓글 감사드립니다. ^^

      youngjr 2008.12.06 02:35 신고 DEL
  • 아마 저는 오페라9를 제대로 사용안해보고 10으로 넘어왔더니..
    그리고 맥에서 항상 느린 파이어폭스를 원망하다 사용했더니..
    확 땡기는 느낌을 받았습니다만...

    재오리님의 포스팅을 보니, (^^) 생각보다 빠르진 않았나라는 느낌도 살짝 ㅋㅋ

    좋은 정보감사합니다.

    BKLove 2008.12.06 10:21 신고
    • 저 Webwait 라는 사이트가 웹페이지 속도를 어떻게 재는지는 정확히 모르겠는데, 실제 느끼는 속도와 벤치마크 속도는 차이가 좀 있는 것 같습니다. 테스트하는 사이트가 어떤 식으로 구성되어 있는지에 따라서도 차이가 많고요. 사람은 눈에 보여지는 화면이 얼마나 빨리 보여지는지를 느끼고, 벤치마크는 눈에 보이지 않는 부분까지 다 로딩되는 속도를 재는 것 같기도 하고 말이죠. 뭐 내가 느끼기에 빠르면 좋은 거 아니겠어요? 좋은 하루 되세요. ^^

      youngjr 2008.12.06 14:25 신고 DEL
  • 음.. 아직 알파에 베타들이니 정식이 나오면 조금이라도 더 좋아지겠죠.
    FF나 Opera나 ㅎㅎ
    수고스럽게 벤치마크까지 하신 글이니만큼 정독하고 갑니다. :)

    infeel 2008.12.06 11:22 신고
    • 현재 오페라 데스크탑팀 블로그나 사용자 포럼 등에서 버그 보고나 개선 사항을 취합하고 있는 것 같습니다. IE나 FF나 오페라나 사파리나 크롬이나 경쟁적으로 발전해서 사용자는 입맛에 따라 편한거 쓸 수 있으면 좋겠어요. ActiveX 때문에 휴대폰 풀브라우징도 요원한 일이고. ㅎㅎ 댓글 감사합니다. ^^

      youngjr 2008.12.06 14:22 신고 DEL
  • 다른 브라우저도 그렇겠지만,
    "이미지 안보기" 모드로 해두면,
    국내 서버같은 경우는 클릭하면 페이지 열립니다.

    opera:config에 "turbo mode"라는 항목이 있는데,
    그게 예전엔 "Draw images instantly"라는 항목으로
    youngjr님 말씀과 같이 안 보이는 화면 아래쪽은 나중에 가져오는 기능이였죠.
    화면에 나타나는 부분을 먼저 보여주기 때문에 빠르게 느껴질 수도 있겠습니다.

    빠르기나 ACID3 테스트 못지않게,
    한글문제와 웹호환성이 좋아졌으면 하는 바램이 간절한데요,
    시간이 필요할 것 같습니다.

    seemille 2008.12.06 11:39 신고
    • 예, 지금 보니 turbo mode가 기본값으로 사용함으로 체크되어 있네요. 벤치마크에서 다루지 못하는 체감 속도라는 것도 무시하지 못하는 것 같아요. 써보면 안다는 말이 그래서 있는듯합니다. 댓글 감사합니다. ^^

      youngjr 2008.12.06 14:20 신고 DEL
  • 오페라가 일어나서 IE부터 보내버리고 싸워야지..

    화군 2008.12.06 17:05 신고
    • IE 너무 미워하진 마세요. ^^ IE도 하나의 개성있는 브라우저로 인정해줘야 하지 않겠어요? 댓글 감사합니다. 좋은 하루 되세요. ^^

      youngjr 2008.12.06 20:43 신고 DEL
  • 메모리 점유가 하락한게 눈에 띄는군요. +_+
    그동안 오페라가 정말 빠르게 느껴졌었는데, 크롬이 나오고 나서는 크롬이 더 빠르게 느껴질때가 많습니다.
    대신 크롬은 편의성이 많이 떨어지고, 가끔씩 하드를 드르륵~ 읽는것 때문에 못쓰겠더군요.
    최근에는 youngjr님의 오페라 팁 덕분에 거의 오페라만 쓰고 있네요.
    다시한번 고맙습니다 ^^

    WARP 2008.12.14 12:42 신고
    • 저의 경우는 메모리 점유율이 많이 줄었던 것 같은데, 일부오히려 메모리 점유율이 늘고 불안정하다는 보고도 있는 것 같습니다. 정식버전까지 좀 더 기다려봐야할 것 같습니다. 답글 감사합니다.

      youngjr 2008.12.15 13:59 신고 DEL
크리에이티브 커먼즈 라이선스
Creative Commons License

오페라 10 Alpha 1 버전의 성능 테스트를 해 보았습니다.
사용된 벤치마크들은 12월 1일에 전자신문에 실린 박창근 월간 PC라인 기자님의 기사 끝나지 않은 웹브라우저 전쟁에 나온 테스트를 참조하였습니다.
기사에서는 오페라는 아예 다뤄지지 않았었는데, 현재 안정 버전인 오페라 9.62와 새로 나온 오페라 10 alpha 1을 같이 비교하였습니다.
먼저, 벤치마크들은 컴퓨터 시스템이나 환경에 따라 차이가 많이 날 수 있기 때문에 어디까지나 상대적인 평가로 비교하여야 하고, 그 차이가 미미할 경우 어느 것이 특별히 뛰어나다고 할 수는 없다는 점을 유의하시기 바랍니다.
이 글은 특정 브라우저를 선호하는 분들에게 어느 브라우저가 우수하다는 쓸데없는 논쟁을 만들려는 의도가 아니고, 하나의 브라우저만 알고 있는 분들에게 세상에는 많은 브라우저들이 있다는 것을 소개하려는 의도와, 모든 브라우저들이 경쟁하면서 성능 개선을 하는 과정을 북돋우려는 의도로 쓰는 글임을 알려드립니다. ^^
기자님의 기사에서 크롬과 IE8 beta의 비교가 되어 있기 때문에, 여기서는 오페라 9.62, 오페라 10 alpha 1, 파이어폭스 3.1beta1 의 3가지만 비교하도록 하였습니다. 나머지 브라우저들은 파이어폭스와 오페라의 상대적인 성능 차이를 고려해서 생각하시면 될 것 같습니다. ^^

제 시스템의 사양은

  • CPU: Core 2 Duo E6400
  • Memory: DDR2 1GB
  • MainB/D: Asus P5B-E
  • OS: MS Windows XP SP3

입니다.

ACID3 웹표준 테스트
먼저 웹표준 준수를 얼마나 잘하고 있는지 평가하는 Acid3 테스트입니다.
http://acid3.acidtests.org
위 사이트에 접속하면 웹표준을 준수하는 명령으로 이루어진 웹페이지를 표시하게 되는데, 표준을 완전히 만족하면 100/100을 달성하고 제대로된 모양을 보여주지만, 만족시키지 못하는 경우 Fail을 표시하게 됩니다.
먼저 FF3.1beta1은 88/100입니다. (기사에는 89/100이라고 했는데 오차가 있는지요?) 댓글에 우리팬님께서 beta2는 93점이라는 정보를 주셨네요. 감사드립니다. ^^

사용자 삽입 이미지

다음은 오페라 9.62입니다. 85/100으로 조금 떨어지는 호환성을 보입니다.
사용자 삽입 이미지
마지막으로 오페라 10 alpha 1 입니다. 100/100 으로 완전한 테스트 통과를 보여줍니다.
사용자 삽입 이미지

메모리 점유율 비교
다음은 메모리 점유 비교로, 로그아웃한 상태에서 새로 로그인 후 브라우저를 띄운 상태에서 한 번 측정하고, 네이버, 다음, www.cnn.com의 3개의 사이트를 세개의 탭에서 띄운 상태에서 다시 한 번 측정하였습니다.
FF3.1beta1
초기상태 : 34MB 정도
사용자 삽입 이미지
3개 탭 사용시 : 62MB 정도
사용자 삽입 이미지
오페라 9.62
초기상태 : 33MB 정도
사용자 삽입 이미지
3개 탭 사용시 : 71MB 정도
사용자 삽입 이미지
오페라 10 alpha 1
초기상태 : 25MB 정도
사용자 삽입 이미지
3개 탭 사용시 : 62MB 정도
사용자 삽입 이미지
전체적으로 비슷한 수준의 메모리 점유를 보입니다. 오페라의 경우 9보다 10이 더 메모리를 효율적으로 쓰는 것을 확인할 수 있었습니다.

SunSpider JavaScript Benchmark 0.9
http://www2.webkit.org/perf/sunspider-0.9/sunspider.html
이 테스트는 비교적 복잡한 여러 가지 자바 응용 프로그램을 돌리는 것 같습니다. 여러 가지 테스트를 3번 반복하기 때문에 시간이 상당히 오래 소요됩니다.
테스트 결과는 아래 차트와 같습니다.
Opera 9.62가 4135.4 ms, Opear 10 alpha1이 3833.8 ms, FireFox3.1 Beta1+TraceMonkey가 1551.6 ms입니다. Opera가 10으로 버전업하면서 8% 정도 성능 개선이 있긴한데, TraceMonkey의 경우 오페라 10보다도 2.6배 정도 빠르네요! 대단합니다.
사용자 삽입 이미지

Celtic Kane's JavaScript 2007
http://celtickane.com/webdesign/jsspeedarchive.php
이 테스트도 자바 스크립트 성능 테스트인데, 위의 벤치보다는 다소 간단한 테스트인 것 같습니다. 매번 결과가 조금씩 다르게 측정되는데, 10번 반복 후 평균치를 나타내었습니다.
뭐 오페라 10은 오페라 9에 비해 개선된 것 같아 보이지는 않습니다. 이상하게 TraceMonkey보다는 이 테스트에서는 오페라가 좋은 결과를 보여주네요. 비교적 간단한 테스트이기도 하고 오페라에 좀 더 유리한 테스트가 포함되어 있어서 그런 것 같습니다. 오페라는 거의 일정한 결과를 보여주는데 파이어폭스의 경우 10번 중 1-2번은 좀 느려지는 경향을 보였습니다.
사용자 삽입 이미지

WebWait
webwait.com 
여기는 원하는 페이지를 넣고 간격과 회수를 지정해주면 해당 페이지를 로딩해서 평균 로딩 속도를 보여주는 사이트입니다. 이 테스트는 위에 소개한 기사에서 빠져있어서, 제가 쓰는 IE7 결과를 포함했습니다.
20초 간격으로 3번 반복했고, 제 브라우저에서 한 번도 로딩한 적이 없는 cnn.joins.com 사이트를 테스트 대상으로 하였습니다. 보통 첫 실행에서 좀 느리게 나오고, 두 번째 부터는 캐쉬를 이용하기 때문인지 좀 더 빨리 나옵니다. 뭐 큰 차이는 없지만 오페라 10이 좀 좋게 나왔네요.
사용자 삽입 이미지

뭐 사실 오페라 10 alpha1 버전이 렌더링 엔진을 판올림하고 나왔다고 해서 기대를 많이 했는데, 웹 표준 준수인 acid3 테스트 100/100 달성을 제외하고 큰 성능 개선은 없는 것 같습니다. 개인적으로는 자바 스크립트 수행 능력이 파이어폭스의 TraceMonkey를 앞서기를 기대했는데, 그렇지는 못하군요.
전체적으로 오페라 10은 9에서 10이라는 메이저 버전업에는 안 어울리게 겉모습과 메뉴가 오페라 9와 거의 동일합니다.
조금은 더 사용해봐야하겠지만, 첫인상은 그리 인상적이지는 못하네요. 일단은 alpha 버전의 공개 목적이 다른 기능보다는 렌더링 엔진 presto 2.2의 시험 무대 성격이라고 하니, 다른 기능들은 정식 버전 공개때를 기대해봐도 될 지 모르겠습니다.

여담이지만 우리나라는 웹표준을 가장 잘 지키고 있는 브라우저의 점유율이 가장 낮고 웹표준을 가장 안 지키고 있는 브라우저의 점유율이 가장 높은 나라이기 때문에 acid3 테스트 100점 달성의 의미가 퇴색한다고 해야할까요...

이전글
2008/12/05 - [FreeSoftware] - 오페라 opera 10 Alpha 버전 등장!
2008/12/03 - [FreeSoftware] - 오페라(Opera) 10 곧 발표!
신고
posted by youngjr


티스토리 툴바