[BASIC] 4장 이미지 최적화 - 태은

basic/4장-이미지-최적화/tanney.md

@@ -0,0 +1,199 @@
+# Chapter 04 이미지 최적화
+
+## 4.1 이미지의 중요성
+
+<br>
+
+- 최근 네트워크, 디스플레이 등의 발전으로 이미지의 수, 크기가 크게 증가함
+- 화소밀도
+  - 화소밀도는 물리 스크린 공간에 얼마나 많은 픽셀이 압축되어 있는가를 의미한다.
+  - 1x, 2x와 같은 픽셀 비율(DPR)로 표현한다.
+- Hero
+  - 사용자가 사이트에 처음 접속해서 보는 가장 크고 특색 있는 이미지를 Hero 이미지라고 한다.
+  - Hero의 로딩 성능이 사용자 경험을 좌우한다.
+  - Hero 이미지로 고화질의 선명한 이미지를 사용하는 것도 중요하지만 로딩 속도 또한 신경써야한다.
+
+<br>
+
+## 4.2 디지털 이미지의 종류와 특성
+
+### 4.2.1 래스터 이미지 vs 벡터 이미지
+
+<br>
+
+- 레스터 이미지
+  - 각 픽셀별로 표현하고자 하는 색상 정보를 입력해 이를 컴퓨터로 표현하는 방식
+  - 더 큰 사이즈, 더 좋은 품질의 이미지를 만들기 위해서는 그 만큼 많은 픽셀의 정보를 담아야한다.
+- 벡터 이미지
+  - 그리고자 하는 대상의 수학적인 정보를 제공하는 방식
+  - 그림이 위치할 좌표나 각 형상에 대한 정보등을 제공한다.
+  - 사이즈에 상관없이 같은 품질의 이미지를 보여줄 수 있다.
+  - 그림이 복잡하면 수학적으로 표현하는데 제약이 있다.
+  - 대표적으로 svg가 있다.
+
+<br>
+
+
+### 4.2.2 무손실 이미지 형식 vs 손실 이미지 형식
+
+<br>
+
+- 이미지 정보의 손실 여부에 따라 이미지 형식을 구분할 수 있다.
+- 손실 이미지의 경우 단순 복사나 저장을 할 때도 정보 손실이 발생할 수 있다.
+- 무손실 이미지로는 대표적으로 GIF, PNG가 있고 손실 이미지로는 JPEG, WebP, JPEG XR, JPEG 2000 등이 있다.
+- GIF(Graphic Interchange Format) 
+  - 몇 개의 이미지를 묶어 짧은 움직임을 표현할 수 있는 이동식 이미지 형식
+  - 무손실 타입의 이미지
+  - 사용할 수 있는 색이 256가지로 제한됨
+  - 단순한 형태의 이미지 표현에 적합
+- PNG(Portable Network Graphic)
+  - 무손실 타입의 이미지
+  - 24비트의 색상 사용
+  - 알파채널(alpha channel)이라는 이미지 변환 기법을 사용
+  - 배경 이미지 레이어를 제거해 전체 이미지를 투명하게 만들어 사용할 수 있다.
+  - 같은 품질의 JPEG 대비 파일의 사이즈가 커지는 단점이 있다.
+- JPEG(Joint Photographic Experts Group)
+  - Joint Photographic Experts Group에서 개발한 이미지 형식
+  - 사람의 눈이 인식할 수 있는 색상만 남기고 나머지를 제거하는 방식으로 이미지를 압축
+  - 품질에 어느정도 손실을 허용
+  - 사용자가 품질 값을 정할 수 있다.
+  - 투명이나 애니메이션 기능을 지원하지 않는다.
+- JPEG 2000
+  - JPEG의 단점을 보완하기 위해 개발된 형식
+  - JPEG보다 더 향상된 이미지 압축률 제공
+  - 무손실 압축, 투명, 애니메이션 기능 지원
+  - 16, 24, 32비트 등 다양한 색상 지원
+- WebP
+  - 구글에서 개발한 이미지 형식
+  - JPEG보다 25~35% 작게 만들 수 있다.
+  - 무손실 압축, 애니메이션, 투명기능 모두 제공
+  - 점진적 데이터 전송 기능을 제공하지 않는다.
+- JPEG XR
+  - MS에서 개발한 형식
+  - 더욱 많은 색상 지원
+  - 무손실 압축, 투명 기능 지원 
+  - 점진적 데이터 전송 가능
+  - IE와 Edge에서만 지원
+
+<br>
+
+## 4.3 이미지 변환 기법
+
+### 4.3.1 무손실 압축
+
+<br>
+
+- GIF
+  - 애니메이션이 없다면 압축률이 더 높은 형식으로 변환하는 것이 권장된다.
+  - ImageMagicK, Giflossy, Gifsicle, gifwebp converter 등으로 형식을 변환하거나 압축할 수 있다.
+
+<br>
+
+### 4.3.2 손실 압축
+
+<br>
+
+## 4.4 반응형 웹에서의 이미지 배치 전략
+
+### 4.4.1 반응형 웹의 문제점
+
+<br>
+
+- 반응형 웹은 데스크탑과 모바일 기기에서 같은 사용자 경험을 제공할 수 있다는 장점을 가진다.
+- 그러나 성능면에서는 다소 이슈가 있다.
+- 모바일 환경은 데스크탑에 비해 네트워크 환경, GPU, 메모리 등 좋지 못한 사양을 가지고 있다.
+- 화면 크기에 관계없이 리소스의 크기는 동일하기 때문에 모바일에서는 비교적 좋지 못한 성능을 보인다.
+
+<br>
+
+### 4.4.2 원인은 이미지
+
+<br>
+
+- 위에서 언급한 이슈의 가장 큰 원인은 웹 환경에 따라 변하지 않는 이미지의 크기이다.
+- 즉, 작은 화면에서도 필요 이상의 리소스를 받고 있는 것이다.
+- 모바일 환경에서는 큰 리소스를 다운받아 크기를 줄이거나, 보여주지 않을 리소스도 다운을 받거나, 뷰포트 바깥에 있는 이미지까지 모두 다운로드를 받는 등의 네트워크 낭비 현상이 발생한다.
+
+<br>
+
+
+### 4.4.3 반응형 이미지
+
+<br>
+
+- 반응형 이미지는 다른 환경 조건에 반응해 적합한 이미지를 제공받는 것을 의미한다.
+- 즉, 작은 화면에서는 작은 이미지를 다운로드 받는 것을 의미한다.
+
+<br>
+
+### 4.4.4 반응형 이미지 구현 방법
+
+<br>
+
+1. 프론트엔드 측면에서의 구현
+  - img태그의 srcset이나 picture태그를 사용해 구현
+  - 과도하게 사용할 경우 프론트엔드 코드가 무거워질 수 있음
+  - srcset
+    - srcset을 통해 환경에 따라 다양한 이미지 URL을 지정할 수 있다.
+    - 각 URL은 쉼표로 구분하며 경로 + 공백 + 크기 순으로 작성한다.
+    - 예시
+        ```html
+        <img 
+          srcset="pic-normal.jpg 1x,
+                  pic-retina.jpg 2x">
+        <!-- 화소 밀도에 따라 구분 -->
+
+        <img 
+          srcset="pic-normal.jpg 200w,
+                  pic-retina.jpg 400w">
+        <!-- 화면 크기에 따라 구분 -->
+        ```
+    - 브라우저가 사용하는 연산 방식이나 메모리 등에 따라 낮은 해상도의 이미지를 선택할 수도 있다.
+    - 해상도 별로 다른 비율의 이미지를 사용하거나 부분만 확대한 이미지를 사용할 경우 이미지가 비정상적으로 보일 수 있다.
+  - sizes
+    - 미디어 조건문을 정의하고 조건에 따라 이미지 크기를 지정한다.
+    - 미디어 조건문 + 공백 + 이미지 너비 순으로 작성한다.
+    - 예시
+        ```html
+        <img
+          sizes="(max-width: 320px) 280px,
+                 (max-width: 480px) 440px,
+                 800px">
+        ```
+  - picture 태그
+    - img srcset의 단점을 보완한다.
+    - source 태그를 통해 다양한 이미지 URL을 설정한다.
+    - 이때, 미디어 쿼리를 통해 로딩 조건을 구체적으로 정의할 수 있다.
+    - 정의된 조건에 맞는 이미지만 사용하도록 브라우저를 강제할 수 있다.
+    - 예시
+        ```html
+        <picture>
+          <source media="(min-width: 45em)" srcset="large.jpg, large-hd.jpg 2x">
+          <source media="(min-width: 18em)" srcset="med.jpg, med-hd.jpg 2x">
+          <source srcset="small.jpg, small-hd.jpg 2x">
+        </picture>
+        ```
+  - 지연 로딩 
+    - 화면에 보이지 않는 이미지의 경우 자바스크립트를 통해 지연 로딩되도록 구현할 수 있다.
+2. 백엔드 측면에서의 구현
+  - 서버에서 클라이언트의 환경에 맞는 이미지를 선택하여 전송하는 방법
+  - 프론트엔드 코드가 추가되지 않는다는 장점이 있지만 환경을 어떻게 판단할지에 대한 과제가 있다.
+  - Client Hints
+    - 아직 실제 사용하는 표준은 아니지만 사용자의 환경을 서버에 전달하는 방식이다.
+    - Client Hints 헤더는 HTTP 헤더의 일부로 포함되어 전송된다.
+    - 동작 과정
+      - 브라우저가 서버로 HTTP 요청 전송
+      - 서버는 응답헤더에 Accept-CH를 추가해 Client Hints를 지원하고 있음을 알린다. 그리고 동시에 필요한 정보를 요청한다.
+      - 브라우저에서는 관련 정보를 헤더에 추가해 보낸다.
+      - 서버에서는 최적화된 이미지를 전송한 후 사용한 DPR 정보를 마지막 응답 메시지로 보낸다.
+<br>
+
+4.5 적응형 이미지 전략
+
+4.5.1 적응형 이미지 아키텍처
+
+4.5.2 기기 정보에 따라 서버 로직 수행
+
+4.5.3 브라우저별 이미지 전달
+
+4.5.4 캐시 고려 사항