이미지 최적화

개요

웹 서비스를 개발 하다 보면 대량의 이미지를 화면에 띄우기도 한다.
이때 고화질의 이미지 이거나 수많은 양의 이미지를 불러오게 되면 서비스의 질의 저하 된다.
만약 Netflix, Youtubu같이 썸네일이 많은 서비스 같은 경우(심지어 영상이 주요 서비스 이다.) 이미지를 최적화 해주지 않으면 제대로된 서비스를 제공하기 어렵다.
그렇기 때문에 이미지 최적화 방법을 모색 하였고 이미지 최적화 블로그에서 잘 정리 되어 있는 내용을 찾았다.
이 글은 위의 블로그 내용을 한번 더 정리 한 내용이다.

이미지 최적화의 장점

1. 웹 페이지 바이트를 절약할 수 있다.
   • 사이트 성능 향상
2. 브라우저가 다운로드해야하는 바이트가 줄어든다.
   • 클라이언트의 대역폭에 여유가 생긴다.
3. 콘텐츠를 더 빨리 다운로드하여 화면에 렌더링한다.
   • 최적의 사용자 경험을 제공할 수 있다.
4. 서버 저장공간이 적게 필요한다.
   • 비용절감
5. 구글의 SEO 순위를 결정할 때 모바일 응답성을 고려하여, 검색순위에 노출한다.

이미지 최적화 방법

1. 이미지 폭을 조절
2. 최적화된 이미지 포맷을 사용
3. 에 width, height 값을 선언해 Reflow를 방지
4. 여러 버전의 이미지를 제공
5. 이미지 크기 조절 툴을 사용
6. Image CDNs을 사용
7. CSS Sprite 기법을 사용
8. lazy loading을 활용

경험해본 이미지 최적화

그동안 회사에서 사용해본 방법은 1, 4, 7 번 정도 이다.
(아니면 다른 분들이 개발을 해 놓은것을 확인을 못했거나...)
이미 경험 해본 1, 4, 7번은 간단하게 정리 하겠습니다.

1. 이미지 폭 조절

말 그대로 이미지의 Width * Height사이즈를 제한 하는것이다.
일반적인 웹 서비스를 사용하거나 이력서 이미지 사진을 넣을때 지정된 사이즈를 원하는 홈페이지를 자주 볼수있다.
ex) 800 * 600 사이즈 이미지를 넣어주세요

4. 여러 버전의 이미지를 제공

이미지를 사용되는 장비에 따라, 사용되는 위치에 따라 여러 버전을 준비 해 놓는것이다.

1. 장비
   • 컴퓨터, 노트북에서 확인하는것 과 모바일 에서 확인 할때는 실질적으로 보여지는 이미지의 사이즈는 많이 차이가 난다.
     이때 에는 기기 정보나 OS 정보등을 받아서 맞는 이미지 버전을 제공하면된다.(어플일 때는 대부분 모바일 이므로 작은 사이즈를 사용한다.)
2. 위치
   사용자 ThumbNail을 업로드시 각 버전에 맞게 잘라서 저장을 하면 메인 화면일때, 댓글을 남겼을때 각각 다른 버전의 이미지를 제공하면 성능 향상에 도움이 된다.

7. CSS Sprite 기법을 사용

이 방법은 하나의 이미지에 여러가지 이미지를 붙여 올린 다음 원하는 부분만 짤라서 사용하는 방법이다.
이 방법을 사용하면 이미지는 1회만 호출 할수 있으므로 불필요한 이미지 요청을 줄일 수가 있다.

    <style>
        // 이미지를 불러온 다음
        .up, .down, .right, .left {
            background: url("image_sprites.png") no-repeat;
        }
        // 각 목적에 맞게 background-position으로 잘라서 사용한다.
        .up {
            width: 21px;
            height: 20px;
            background-position: 0 0;
        }
        .down {
            width: 21px;
            height: 20px;
            background-position: -21px 0;
        }
        .right {
            width: 22px;
            height: 20px;
            background-position: -42px 0;
        }
        .left {
            width: 22px;
            height: 20px;
            background-position: -65px 0;
        }
    </style>

경험하지 못한 이미지 최적화

1. 최적화된 이미지 포맷을 사용

같은 사진이라고 하더라도 이미지 포맷에 따라 용량차이가 있다.
이미지 포맷이 많다 보니 인터넷에 찾아서 필요한 포맷을 사용하면 되겠지만
주로 AVIF < WebP < PNG < JPEG 순 으로 사용하면 되겠다

3. 에 width, height 값을 선언해 Reflow를 방지

Reflow란?

Reflow는 화면 구조(Layout)이 변경되었을 때, 뷰포트 내에서 렌더 트리의 노드의 정확한 위치와 크기를 계산하는 과정
따라서 화면에 출력되는 Width * Height를 선언 않으면 이미지를 받은 후에 다시 계산하는 동작이 추가 되므로 Width * Height를 선언하는것이 좋다.

<img src="" width="800" height="600" />

주의

px 말고 %로 선언하면 브라우저 사이즈를 계산하는 동작이 필요하기 때문에 되도록이면 px 및 고정된 값으로 입력하는 것이 좋다.

4. 이미지 크기 조절 툴을 사용

가장 많이 사용되는 조절 툴은 sharp npm package 그리고 ImageMagick CLI tool이 있다고 하는데 사용해 본적이 없다...
블로그에서 얻은 정보 이므로.. 테스트 해보는 과정이 필요 할꺼 같다.

• sharp 패키지는 이미지 크기 조절을 자동화하는데 적합하다.
  • 예를 들어 웹사이트의 모든 비디오에 대해 여러 크기의 썸네일 생성
• 반면 ImageMagick 은 전부 커맨드 라인으로부터 사용되기 때문에 일회성 이미지 크기 조절에 편리하다.

6. Image CDNs

AWS 에서도 지원하는데 S3, CloudFront 등 몇개의 셋팅이 필요하다.
이미지 CDN에 자세한 내용이 작성 되어 있다.
간단히 말하면 이미지를 전문적으로 Custom해주는 서비스 라고 할수있다.

• Origin: 도메인
• Image: 이미지 검색
• Security key: 다른 사람이 이미지의 새 버전을 만드는 것을 방지
• Transformations: 다양한 이미지 변환 제공
• 위의 예시처럼 사용할수있다.

8. Lazy loading

Lazy loading이란 무엇인가?
페이지를 로드할 때, 모든 이미지를 로드하는 것이 아니라 중요하지 않은 자원 또는 당장 필요 없는 자원의 경우
서버에 요청을 미루고 필요한 경우 해당 자원을 요청 받는 방법을 말한다.
아마 네이버 웹툰을 볼때 아직 보여지지 않은 컷은 나중에 받거나(하단으로 빨리 내리면 로딩 바를 볼수있다.)
마인 크래프트에서도 현재 위치 말고 멀리 보이는 맵은 나중에 렌더링 되는 것과 같다.

사용법

<img src="photo.jpg" loading="lazy"> 같이 사용하면된다.