프로그레시브 이미지 렌더링 (Progressive Image Rendering)

이미지 리소스는 웹 사이트의 로딩 시간에 많은 부분을 차치합니다.

그렇기 때문에 웹 사이트가 고려해야 하는 부분에 있어서 "이미지 최적화"는 매우 중요합니다.

Progressive Image란?

이미지는 압축 방식을 어떤것으로 사용하는지에 따라 구분할 수 있습니다.(GIF, PNG, JPEG...)

여기서, 추가적으로 Interlaced 옵션을 통한다면 Progressive Image를 얻을 수 있습니다.

Progressive Image는 이미지가 저품질로 시작하여, 시간에 따라 해상도가 향상되는 이미지를 말합니다.

이를 통해, 브라우저가 받는 리소스 파일의 크기를 줄여 랜더링 속도 향상 효과를 얻을 수 있습니다. (전체 이미지의 크기는 약간 증가합니다. )

1. Interlaced GIF

통신회선을 통해 도착하는 속도에 따라, 마치 천천히 열리는 베네치아 블라인드를 통해 보이는 이미지처럼 나타나는 GIF 이미지를 의미한다. 처음에는 희미했던 이미지 외형이, 이어지는 7개의 비트스트림에 의해 교체되면서, 이미지가 완전한 해상도로 도착할 때까지 빠진 줄이 차츰 채워진다.^[각주:1]

Interlaced GIF에 대응되는 형식으로는 JPEG 에는 'progressive JPEG'가 있습니다.

2. Progressive JPEG

JPEG는 가장 일반적으로 사용되는 이미지 형식 중 하나로 주로 사진과 같이 다채롭고 복잡한 이미지에서 주로 사용됩니다.

이미지 프로그램을 사용할 경우 아래와 같이 'Progressive Mode' 옵션을 사용할 수 있습니다.

https://forums.adobe.com/message/9193622#9193622 

이미지를 저장할 때 JPEG 옵션은 Baseline mode로 지정되는데 이를 Progressive Mode로 선택하여 저장할 수 있습니다.

2-1. Baseline Mode JPEG vs Progressive Mode JPEG

Baseline mode는 none-interlaced 방식으로 이미지가 맨 위에서 시작하여 라인 단위로 해석되는 것을 의미합니다.

https://www.liquidweb.com/kb/what-is-a-progressive-jpeg/

그러나, 'Progressive JPEG'는 전체 이미지를 보여줍니다.

하지만 일부 이미지 데이터만 로드 하므로 전체 이미지가 매우 낮은 해상도로 희미하게 보입니다.

이후 완전히 로드되면서 데이터를 받아 점차 선명해집니다.

https://www.liquidweb.com/kb/what-is-a-progressive-jpeg/

이러한 방식은 일정 시간이 소요됨에도 불구하고, 사용자에게 마치 더 빠르게 다운로드 되는 듯한 착각을 불러일으킬 수 있습니다.

또한, 시각적 경험 외에도 'Progressive JPEG' 는 초기 이미지의 크기가 작아지기 때문에 웹 사이트 로딩 속도를 향상시킵니다.

2-2. Progressive Image loading

모든 이미지가 'Progressive JPEG'일 수는 없습니다. 그래서 'Progressive JPEG'와 유사한 형태의 경험을 제공할 수 있는 이미지 렌더링 방식이 있습니다.

예를 들어, 27x17 정도와 같은 작은 사이즈의 이미지를 원하는 요소를 추가하여 미리 낮은 해상도의 이미지를 요청합니다.

이때, 더 자연스러운 이미지를 원한다면 CSS나 Canvas를 사용해 blur 처리를 해주는 것도 좋습니다.

렌더링이 종료된 후에 'Lazy loding'과 같은 방식으로 원래의 이미지를 로딩하는 방식입니다.

이렇게 하면 'Progressive Image'가 로딩되는 것 같은 사용자 경험을 제공할 수 있습니다.

하지만, 여전히 추가 네트워크 비용이 발생한다는 점은 인지하고 사용해야 하는 것이 현명할 것 같습니다.

---

참고자료

• https://www.liquidweb.com/kb/what-is-a-progressive-jpeg/
• https://www.hostinger.com/tutorials/website/improving-website-performance-using-progressive-jpeg-images#gref
• https://optimus.keycdn.com/support/progressive-jpeg
• https://optimus.keycdn.com/support/progressive-images
• https://speckyboy.com/introduction-progressive-image-rendering/
• https://blog.codinghorror.com/progressive-image-rendering/
• https://nuwen.net/png.html

1. 발췌 : http://www.terms.co.kr/interlacedGIF.htm [본문으로]