[웹 성능 최적화] 이미지 최적화

1. 이미지의 중요성

 

(1) 화소 밀도 : 화소 밀도란 물리 스크린 공간 안에 얼마나 많은 픽셀이 압축되어 있는가를 의미한다.

1x, 2x, 3x, 등의 기기 픽셀 비율(DPR)로 표현한다. 

 

- DPR(Device Pixel Ratio) : 단위 길이 안에 존재하는 픽셀의 개수를 상대적으로 나타내는 단위이다.

 

- 포인트 : 1x 에서는 40픽셀, 2x 에서는 80픽셀, 3x 에서는 120픽셀의 너비를 가진 이미지를 뜻한다.

 

- Hero 이미지(대문 이미지) : 사이트 처음 접속시 보는 가장 크고 특색 있는 이미지를 뜻한다. 사용자는 Hero 이미지를 보는 순간 홈페이지가 대부분 로딩되었다고 느낀다.

 

- 개발자 고민 : 고품질 이미지를 그대로 사용하면서 웹 성능 문제가 생기지 않게 하는 것.

 

 

 

 

 

2. 디지털 이미지의 종류와 특성 

 

(1) 래스터 이미지 VS 벡터 이미지

-래스터 이미지 : 래스터 이미지는 우리가 사용하는 대부분의 이미지 유형이다. 각각의 픽셀들이 모여 하나의 큰 이미지를 완성한다. 정보를 담은 픽셀들을 추가해야만 컴퓨터가 이를 정상으로 표현한다. 확장성은 떨어진다.

 

-벡터 이미지 : 대상의 수학적인 정보를 제공한다. 좌표, 원, 사각형 등의 형상, 크기, 등의 정보를 제공하여 컴퓨터가 그림을 그리듯 화면에 표현한다. SVG 파일이 W3C 표준 포맷으로 많이 사용한다. 메타 정보를 담고 있어서 화면에 따라 정보가 달라지지 않는다. 또한 화면 스케일에 상관없이 선명한 이미지를 표현한다.

하. 지. 만 그림이 복잡해지면 수학적인 정보로 표현하는 데에도 많은 제약이 있다.

 

(2) 무손실 이미지 형식 VS 손실 이미지 형식

 

- 무손실 이미지 형식 : 원본 이미지의 정보 손실을 허용하지 않는다. 

 

- 손실 이미지 형식 : 이동할 수 있는 형태를 만들기 위해 정보 손실을 허용한다.

 

(3) 이미지 형식

 

- GIF : 처음 등장한 이동식 이미지 형식. 몇 개 이미지를 묶어 움직임을 표현한다. 컬러(8bit)로  제한적이다.

 

- PNG : 24비트 색상을 사용 가능하다. 고품질 이미지를 표현할 수 있고, 웹사이트에는 알파 채널이라고 불리는 투명 기능 때문에 이미지의 백그라운드 투명도를 조절 가능하다.

 

- JPEG : JPEG는 사진을 저장하는 사실상의 표준 형식이다. JPEG는 사람의 눈이 인식할 수 있는 색상만 남기고 나머지를 제거하는 방식의 기술을 이용한다. 고해상도 이미지를 크게 압축한 파일로 저장할 수 있다.

 

- JPEG 2000 : JPEG의 단점을 보완하려고 개발된 형식이다. 새로운 방식으로 이미지 압축률을 높였고, 무손실 압축 및 투명 기능, 애니메이션 기능을 지원한다. 하지만 사파리를 제외한 대부분 브라우저에서 지원하지 않는다.

 

- WebP : 구글에서 개발한 이미지 형식으로 공격적 압축 방식을 사용한다. 무손실 압축, 애니메이션 기능, 투명 기능 모두 지원한다. 일반적 환경에선 JPEG보다 파일 크기가 작은 WebP를 사용하는 것이 유리하다.

 

- JPEG XR : 무손실 압축 및 투명 기능을 지원한다. 점진적 데이터 전송 기능도 지원한다. 하지만 현재 인터넷 익스플로러만 지원한다.

 

 

 

 

3. 이미지 변환 기법 

 

(1) 무손실 압축 : 

 

- GIF : 

imagemagick.org/index.php

ImageMagick

www.npmjs.com/package/giflossy

giflossy

www.npmjs.com/package/gifsicle

gifsicle

- PNG : 

pngcrush.com/

PNG Crush

pngquant.org/

pngquant — lossy PNG compressor

- JPEG : 많은 메타 데이터(주석, 공백, 편집 애플리케이션 정보, 카메라 정보 등) 포함되어 있다. 

www.npmjs.com/package/mozjpeg

mozjpeg

 

github.com/google/guetzli

google/guetzli

 

(2) 손실 압축 :  이미지를 손실시켜 파일 크기를 줄이는 방법이다. 이미지 색이 비슷한 부분을 하나의 색으로 통일한다. 하. 지. 만 원하는 만큼의 화질을 얻지 못하는 위험이 있다. 그래서 100~75% 사이의 품질을 권장한다.

 

- 원본 이미지와 손실 압축 이미지의 시각적 차이를 정량 계산하는 알고리즘 :

1. 평균 제곱 오차(MSE)

2. 최대 신호 대 잡음비(PSNR)

3. 구조적 유사도(SSIM)

 

- 자동 최적화 도구 :

www.jpegmini.com/

JPEGmini - The Photo Optimization Tool Trusted by Tens of Thousands Image Perfectionists

 

- 브라우저 특화 이미지로 변환 : WebP, JPEG2000, JPEG XR

 

 

 

 

 

4. 반응형 웹에서의 이미지 배치 전략

(1) 엠닷(m.) 사이트 문제 : 

 

- 1 : 모바일 크기가 다양해지면서 엠닷 사이트 하나만으로는 모든 기기의 사용자를 만족하지 못한다.

 

- 2  유지보수 : PC와 모바일 동시에 개발하고 관리해야 하므로 비용, 시간을 두 배로 투자해야 한다.

 

- 3 사용성 문제 : 모바일 환경에 익숙해진 사용자들은 점차 모바일 기기에서도 데스크톱과 동일한 사용성을 요구한다. 

 

(2) 반응형 웹 : 각종 기기가 제공하는 화면 크기에 맞추어 최적화된 웹을 제공하는 것. SEO측면에 이점을 제공한다.

 

(3) 반응형 웹의 문제점 : 성능 측면에서 효과적이지 못하다. 무게는 반응적이지 못했기 때문이다.

 

(4) 반응형 웹의 이미지 문제 : 화면의 크기가 변해도 웹 사이트의 무게가 변하지 않는다. 그 이유는 바로 웹 환경에 따라 변하지 않는 이미지의 크기 때문이다. 작은 화면에서 필요 이상의 웹 리소스들을 과하게 내려받는 현상은 크게 세 가지 유형이다.

 

- 내려받아 줄이기 : 유동형 이미지는 편리한 기능을 제공한다. 하. 지. 만 화면의 이미지 크기가 작아진다고 해서 실제 이미지가 작아지지 않기 때문에 문제가 발생한다. 가로 X 세로 값이 명시되지 않기 때문에 실시간으로 이 값을 계산하는 추가 과정이 필요하다. 게다가 모바일에서도 큰 이미지를 다운로드하여 네트워크 낭비가 발생한다.

 

- 내려받아 숨기기 : PC 화면에서는 더 많은 정보를 나타내는 것이 유리하다. 하지만 이러한 불필요한 리소스들이 모바일 환경에서 여전히 다운로드되는 것이 문제이다. 즉 CSS 미디어 쿼리를 이용해서 모바일 버전에서 display : none를 하여도 보이지 리소스를 다운로드한다는 것이다.

 

- 화면 바깥 부분 : 화면 바깥부분의 이미지들은 화면에 보이지 않는다. 그러나 여전히 불필요한 리소스인데도 다운로드된다.

 

(4) 반응형 이미지 : 

 

- 반응형 이미지란? : 사용자의 환경에 따라 그 환경에 적합한 상태로 변경해 제공되는 이미지를 반응형 이미지라고 한다. 유동형 이미지와 다르게 사용자가 특정 환경에서 특정 이미지를 요청하면 그 환경에 맞도록 이미 변경된 이미지가 전송되는 것이다.

 

 

 

 

 

5. 반응형 이미지 구현 방법

 

(1) sercset과 size 속성 :

<img src="small_imgae.jpg" srcset ="normal.jpg 1x, retina,jpg 2x">

 <img> 속성의 srcset로 사용자의 다양한 관경에 따라 다른 이미지의 URL을 지정할 수 있다.

위의 코드처럼 고해상도에서는 retina.jpg를 그렇지 않으면 normal.jpg를 지정할 수 있다.

<img src="small_imgae.jpg" srcset ="small.jpg 200w, middle.jpg 400w" 
size="(max-width: 400px) 100vw, (max-width: 800px) 30vw, 300px">

size속성으로 브레이크 포인트에 따른 이미지 크기를 지정할 수 있다. size는 이미지가 화면에 표현될 크기를 결정한다.

 

(2) <picture> 태그 이용 : 정의에 맞는 이미지만 사용하도록 브라우저를 강제할 수 있다.

<picture>
	<source media="(min-width : 45em)" srcset="large.jpg", large-hd.jpg 2x">
	<source media="(min-width : 18em)" srcset="middle.jpg", med-hd.jpg 2x">
	<source srcset="small.jpg", small-hd.jpg 2x">
	<img src="small-1.jpg" alt="rwd">
</picture>

 

- HTML 소스가 다소 길어진다. 모든 브라우저가 이 태그를 지원하지 않는다는 단점이 있다. 브라우저가 <picture> 태그를 지원하지 않으면 정의된 이미지를 다운할 수 없다. 그땐 polyfill, Picturefill 같은 플러그인을 사용하면 된다.

 

(3) Art direction : 

 

- 같은 이미지를 크기만 다르게 하는 것이 아니라 이미지의 특징이나 가치가 기기 특성에 따라 표현되도록 정교한 작업이 필요하다.

 

- 기기의 크기, 방향에 따라 이미지가 어떻게 달라져야 하는지 잘 나타낸다. 이미 치 초점이 중요하다. Scene7이라는 도구로 구현 가능하다.

 

(4) Client Hints : 호스팅 하는 서버에서 사용자 환경을 고려해 응답할 내용을 최적화한 후 브라우저에 전달하는 방안이 도입된다.

1. 브라우저에서 최소 서버로 HTTP 요청을 보낸다.

2. 서버는 응답 헤어데 Accept-CH를 추가해 Client Hints를 지원하고 있음을 브라우저에 알린다. 동시에 필요한 정보를 보내줄 것을 요청한다.

3. 위의 예에서 서버는 다음 요청부터 DPR, Width, Viewport-Width 정보를 함께 보내줄 것을 브라우저에 요청한다.

4. 서버는 최적화된 이미지를 전송한 후 사용한 DPR 정보를 마지막 응답 메시지로 보낸다.

5. 이 DPR 정보는 브라우저가 서버로부터 받은 이미지를 처리할 때 사용된다.

 

(5) 이미지 지연 로딩 : below the fold 이미지를 최적화하지 못하는 문제점을 해결한다.

 

-

<script>
	function loadReal(img){
    	if(img.display != "none"){
        	img.onload =null;
            img.src=img.getAttribute("data-src");
        }
    } 
</script>
<img src="1px.git" data-src="book.jpg" alt="book" onload="loadReal(this)">

JS를 사용한 지연 로딩 방법을 권장한다. src에 1x1 가짜 이미지를 넣어 성능에 영향을 주지 않는다.

 

- www.google.com/search?q=lazyload&newwindow=1&bih=937&biw=1920&hl=ko&ei=z0FdYNKXDoLW-QaKpYjQAQ&oq=lazyload&gs_lcp=Cgdnd3Mtd2l6EAMyAggAMgIIADICCAAyAggAMgQIABAKMgIIADICCAAyAggAMgIIADIECAAQClDi0lhY4tJYYIrVWGgAcAJ4AIABxQGIAb4CkgEDMC4ymAEAoAECoAEBqgEHZ3dzLXdpesABAQ&sclient=gws-wiz&ved=0ahUKEwiSu7Hr78zvAhUCa94KHYoSAhoQ4dUDCA0&uact=5 

lazyload - Google 검색

오픈소스 lazyload 사용하는 것도 방법이다.

 

(6) 모바일 우선 접근 : 데스크톱 화면을 먼저 개발하는 게 아닌 모바일 기기에 적합한 페이지부터 개발하는 방법이다