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

이미지 포멧

가능하다면 .webp 포맷을 사용합니다.
.webp 포맷의 이미지는 .jpeg, .png 이미지보다 용량이 25~35% 작습니다.

Youtube는 .webp 형식으로 썸네일을 바꾸면 페이지 로드 속도가 10% 빨라지는 것을 발견했으며 페이스북은 .webp 형식을 사용할 때 JPEG 파일크기를 25 ~ 35% 줄였고, .png 파일 크기를 80% 줄였습니다.

.webp 포맷은 비손실 압축과 손실 압축 모두 지원하므로 .jpeg, .png, .gif의 뛰어난 대체품입니다. 하지만 지원하는 브라우저 버전을 확인해야 합니다.

미세한 디테일을 최고 해상도로 보존해야 할 경우, 이미지에 포함되는 색상이 단순한 스타일일 경우 .png 파일을 사용합니다.

→ .png는 화려한 색상의 이미지의 경우 효율이 낮아지고 용량이 증가합니다.

사진과 같은 이미지를 최적화 해야 할 경우, 이미지에 포함되는 색상이 많은 경우에는 .jpeg 파일을 사용합니다.

투명도가 0 또는 1인 단순한 투명 이미지의 경우, 한두 가지 단색 이미지의 경우 GIF 파일을 사용합니다.

애니메이션 이미지를 사용해야 할 경우

gif 포맷의 애니메이션 이미지를 .mp4 , .webm 등의 동영상 형식으로 제공해야 합니다.

gif는 불필요하게 높은 용량을 차지하며 사용자 관점에서 대용량의 .gif 파일은 페이지의 응답 속도를 저하하고 디바이스의 배터리를 빨리 소모합니다.

공급자 관점에서는 웹을 느리게 만들어 접근성을 떨어뜨리고 서버 공급 비용을 증가시킵니다.

.gif 를 동영상 형식으로 제공하는 방법

FFmpeg

동영상, 음악, 사진 포맷들의 디코딩과 인코딩을 지원하는 오픈소스 프로젝트
FFmpeg 를 활용한 .gif 파일 컨버팅

.mp4 확장자 동영상 제공하기

ffmpeg -i gifsf.com_0026.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p gifsf.com_0026.mp4

.webm 확장자 동영상 제공하기

.webm 동영상은 기존 .mp4 동영상과 비교해 훨씬 더 작은 용량을 가지지만 모든 브라우저가 .webm 을 지원하는 것이 아니기 때문에 웹에 제공할 때는 2가지 형식 모두를 제공해야 합니다.

ffmpeg -i gifsf.com_0026.gif -c vp9 -b:v 0 -crf 41 gifsf.com_0026.webm

.gif를 동영상 형식으로 제공할 때 요구되는 특성

자동 실행
일시 정지가 가능한 반복 재생
음소거
3가지 기능 모두 태그의 속성으로 구현할 수 있습니다.

<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm">
<source src="my-animation.mp4" type="video/mp4">
</video>

적절한 압축 정도

이미지의 포맷이나 유형, 제공 목적과 디바이스에 따라 적절한 정도의 압축을 실행하여 성능면에서도, 사용자 경험 측면에서도 모두 만족스러운 최적화를 합니다.

SVG의 메타 정보 축소

렌더링할 필요가 없는 레이어 정보, 주석, XML 네임스페이스와 같은 많은 메타 정보를 SVGO와 같은 툴을 이용해 축소할 수 있습니다.

XML 기반 SVG 이미지의 압축 → 약 58%가 줄여집니다.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg
  version="1.2"
  baseProfile="tiny"
  id="Layer_1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  x="0px"
  y="0px"
  viewBox="0 0 612 792"
  xml:space="preserve"
>
  <g id="XMLID_1_">
    <g>
      <circle
        fill="red"
        stroke="black"
        stroke-width="2"
        stroke-miterlimit="10"
        cx="50"
        cy="50"
        r="40"
      />
    </g>
  </g>
</svg>
<svg
  version="1.2"
  baseProfile="tiny"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 612 792"
>
  <circle
    fill="red"
    stroke="#000"
    stroke-width="2"
    stroke-miterlimit="10"
    cx="50"
    cy="50"
    r="40"
  />
</svg>

Image CDN(Origin, Image, Security key, Transformations)

이미지를 변환하고 최적화하여 전달하는 URL 입니다.
사이트에서 사용되는 이미지에 접속하여 조작하기 위한 API라고도 할 수 있습니다.
transformations 부분에서 크기, 형식, 품질 등을 조절하여 이미지 파일의 크기를 40% ~ 80% 줄일 수 있습니다.

URL 구성

Origin
mage CDN의 도메인주소 or 자신의 도메인 주소를 지정합니다.

Third-Party CDN의 경우 사용자 정의 도메인을 유료로 사용하는 옵션을 제공합니다.

자체 도메인을 사용하면 URL 변경이 필요 없기 대문에 추후 image CDN을 쉽게 전환할 수 있습니다.

Image

필요에 따라 기존 Origin에서 이미지를 자동으로 가져오도록 구성할 수 있습니다.

image CDN에 이미지를 업로드하는 방법 중에는 HTTP POST request를 통해 image CDN의 API로 전송하는 방법이 있습니다.

Security key

보안키를 사용하면 다른 사용자가 새로운 버전의 이미지를 생성할 수 없습니다.

타인이 이미지 URL 매개 변수를 변경하려고 할 때 보안키를 제공하지 않으면 새로운 버전을 생성할 수 없습니다.

image CDN이 보안키 생성과 추적에 대한 상세사항을 처리해줍니다.

Transformations

해당 파트에 따라 수십, 수백개의 서로 다른 이미지 변환이 가능합니다.

가장 중한 부분은 크기, 픽셀 밀도, 포맷형식, 압축여부입니다.

CSS SPRITE(이미지 스프라이트) 기법이란?

아이콘, 버튼 같은 자주 쓰는 이미지들을 한 이미지 파일로 통합해 배경이미지로 만들어 놓고 position 값으로 각각의 이미지를 불러옵니다.

• 이미지를 요청하는 HTTP 통신 횟수를 줄여 서버의 부하를 줄일 수 있습니다.
• 이미지를 한 번에 불러오기 때문에 나중에 불러올 때 생기는 로딩 시간을 줄일 수 있으며 한번만 로딩하기 때문에 이미지 깜빡임이 없습니다. 하지만 개별 이미지의 위치를 정확히 확인하여 CSS코딩을 해주어야 하기 때문에 번거로운 점이 있으며 이미지를 묶어서 한 번에 관리하기 때문에 수정이 잦은 이미지에는 Sprite 기법이 적절하지 않습니다.

출처 참고
https://velog.io/@sonwj0915/%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%B5%9C%EC%A0%81%ED%99%94