반응형
웹 브라우저란? (Web Browser)
- 인터넷 브라우저(Internet Browser) 또는 웹 탐색기(Web Explorer)와 같은 의미
- 웹 서버에서 이동하며 쌍방향으로 통신하고 HTML 문서나 파일을 출력
- 그래픽 사용자 인터페이스 기반의 응용 소프트 웨어
- 모질라 파이어폭스, 구글 크롬, 인터넷 익스플로러, 마이크로소프트 엣지, 오페라, 삼성 인터넷, 사파리 등
이미지 렌더링이란? (Image Rendering)
- 렌더링 (Rendering)
- 일반적으로 무엇인가를 지금과는 다른 어떤 상태로 만든다는 의미
- 컴퓨터 그래픽에서의 의미는 컴퓨터 프로그램을 사용하여 모델 또는 이들을 모아놓은 파일로부터 영상을 만들어내는 과정 또는 그러한 기법
- 이미지 렌더링 (Image Rendering)
- 이미지 파일을 브라우저에 표시하는 과정
- 브라우저에서 HTML 문서에 포함된 이미지 파일 호출
- 해당 이미지를 화면에 렌더링하는 작업 수행
- 이미지 파일을 디코딩하고 크기를 조정하는 등
- 브라우저마다 처리하는 이미지 렌더링 과정이 다르기 때문에 차이 발생
- 이미지 파일을 브라우저에 표시하는 과정
브라우저별 이미지 렌더링 차이
크롬(Chrome)
- 이미지를 WebP라는 고급 형식으로 렌더링 가능
- WebP : JPEG 또는 PNG와 같은 이미지 형식보다 훨씬 작은 파일 크기로 높은 압축률 제공
- 이미지 크기 조절
- Bicubic downsampling 알고리즘 사용
- 주변 픽셀을 고려하여 색상을 보정, 이를 통해 이미지를 더 부드럽게 보이게 함
파이어폭스(Firefox)
- 이미지를 렌더링하기 전에 이미지 데이터를 처리하는데 다운스케일링 알고리즘 사용
- 흐림 및 들쭉날쭉한 가장자리를 줄이기 위해 선명화 및 안티앨리어싱 기술을 조합
- 이미지 크기 조절
- Lanczos downsampling 알고리즘 사용
- Bicubic downsampling과 유사하지만 좀 더 복잡하며 더 많은 계산 수행
- 결과적으로 이미지의 가장자리가 더 부드럽게 보이고 품질 향상
사파리(Safari)
- 알파 채널이 포함된 이미지 사용 가능
- 이미지를 렌더링하기 전에 이미지를 비트맵으로 변환
- 이미지 크기 조절
- Lanczos downsampling 알고리즘과 Sharpening 알고리즘 사용
- 이미지를 더 선명하게 보이게하기 위해 추가적으로 선명화 작업 수행
- Lanczos downsampling 알고리즘과 Sharpening 알고리즘 사용
인터넷 익스플로러(Internet Explorer, IE)
- 이미지를 다른 크기로 조정하는 방식 사용
- 빠르게 이미지를 로드할 수 있도록하지만 이미지의 선명도 감소
- 이미지 크기 조절
- Bilinear interpolation 알고리즘 사용
- Bicubic downsampling보다 덜 복잡하지만 선명도가 떨어지고 품질 저하
엣지(Edge)
- 크롬 기반의 브라우저
- 크롬과 거의 동일한 이미지 렌더링 엔진 사용
- 이미지 크기 조절
- Bicubic downsampling 알고리즘 사용
- 주변 픽셀을 고려하여 색상을 보정, 이를 통해 이미지를 더 부드럽게 보이게 함
삼성 인터넷(Samsung Internet)
- 웹킷(Webkit) 기반의 브라우저
- 웹킷 기반의 브라우저와 비슷한 이미지 렌더링 엔진 사용
- WebP 이미지 지원
- JPEG 20000과 같은 일부 이미지 형식 지원하지 않을 수 있음
- 이미지 크기 조절
- Bicubic downsampling 알고리즘 사용
- 주변 픽셀을 고려하여 색상을 보정, 이를 통해 이미지를 더 부드럽게 보이게 함
오페라(Opera)
- 크롬과 거의 동일한 이미지 렌더링 엔진 사용
- WebP 이미지, PNG, JPEG, GIF 같은 이미지 형식 지원
- 이미지 크기 조절
- Bilinear interpolation 알고리즘 사용
- Bicubic downsampling보다 덜 복잡하지만 선명도가 떨어지고 품질 저하
참고
반응형