모든 웹사이트가 겪는 문제이긴한데, 이미지 리사이즈가 필요한 경우가 종종 있다.
이미지 용량이 큰 것이 문제가 될 수 있다.
용량이 큰게 무엇이 문제인데?
최근 핸드폰 사양이 좋아지면서 덩달아 카메라 사양도 이전에 비해 굉장히 발전했다.
갤럭시에서는 2억 화소 카메라 센서를 스마트폰에 탑재하기 시작했고, 그렇게 찍은 사진의 크기는 약 13mb 정도가 나온다 (필자의 핸드폰이 갤럭시라 방금 찍어봤다)
사실 한 두 개 파일이 용량이 크다고 하면 그리 큰 문제가 되진 않는다. 다만 현대의 웹 페이지는 수 많은 이미지들의 조합이며, 페이지의 모든 파일이 10mb, 20mb가 된다면 얘기가 전혀 달라진다. (3mb만 되도 꽤 크다)
일반적으로 이미지는 서버에 저장된다, 파일 서버가 됬던, CDN이 됬건, 어디에 저장되든, 이미지 파일은 서버에서 클라이언트로 전송되어야 한다.
이미지 크기가 10mb 짜리가 100개가 있는 페이지가 있다고 가정해보자 그럼 1페이지를 보기 위해서는 1gb의 데이터를 전송해야 한다.
요즘 인터넷 속도가 기가비트를 넘어가서 별 크게 문제가 되지 않는다고 생각하는가? 필자의 1기가비트 인터넷으로는 이론적으로도 10초가 소요되는 양이다.
물론 이렇게 고용량의 이미지를 100개나 사용하는 경우는 없다고 보면 된다.
문제는 인터넷 성능이 아무리 올랐다고 하지만, 여전히 느린 곳도 많고, 무제한 데이터 요금제도 아직은 드물다. 여러 브라우저의 개발자 도구에 Throttling 옵션이 있는 이유도, 아직 인터넷 속도에 대해 음영지역이 많기 때문일 것이다.
그래서 일반적으로 용량으로 인해 렌더링 속도가 느려지는 경우 아래와 같은 방법으로 이미지 용량을 줄이는 작업을 많이 하게 된다.
1. 이미지 포맷 변경
이미지 포맷, 즉 확장자를 변환하는 방법이다. 일반적으로 웹에서는 jpg, png, webp 등을 사용한다.
이 중 특히 png는 압축이 거의 되지 않아서, 같은 사이즈, 같은 퀄리티라도 다른 포맷에 비해 용량이 큰 편이다.
2. 이미지 사이즈 줄이기
이미지의 크기를 줄이는 방법이다. 가로 세로가 1920x1080인 이미지를 960x540으로 줄이면, 이미지의 용량은 1/4로 줄어든다.
3. 이미지 퀄리티 줄이기
이미지의 퀄리티를 줄이는 방법이다. 일반적으로 압축률을 높인다고 보면 된다. 퀄리티를 낮추면 용량은 줄어들지만, 이미지의 퀄리티는 떨어진다.
굳이 크게 선명할 필요가 없는 이미지라면, 퀄리티를 낮추는 것도 방법이다.
In Hugo
Hugo에서는 감사하게도, 내장함수를 통해 이미지를 줄이는 방법을 제공한다.
현재의 사이트도 Hugo Template Engine을 통해 구성되어 있는데, 처음엔 잘 모르고, 압축이 안된 원본 사진만 올리다보니, 사이트 랜더링에 1~2초 정도의 시간이 걸리게 되었다.
Google Light House에서도 점수가 50점을 하회하는 등, 최악의 사이트가 되어가고 있었다.
찾아보다 Hugo에서는 내장 함수로 이미지 변환을 할 수 있는 것을 알게 되었고, 이를 적용하니, 사이트 랜더링 시간이 1초 이하로 줄어들었다.
LightHouse 점수도 90점으로 대폭 점수가 올라가게 되었다. (Desktop 기준)
해당 포스팅에서는 어떻게 해당 페이지에서 이미지 렌더링 하는 시간을 획기적으로 줄일 수 있었는지에 대해 알아보겠다.
0. 이미지 가져오기
이미지를 가져오는 방법은 크게 2가지의 방법을 제공한다.
첫번째로는 assets 경로에서 이미지를 가져오는 것이고, 두 번째는 사용자의 content 디렉토리에서 가져오는 것이다.
Assets 에서 이미지를 가져오기
assets 내의 이미지를 가져오는 내장 함수로는 resources.Get을 사용한다.
1. 이미지 할당하기
{{ $image := resources.Get "images/some_image.png" }}
<img src="{{ $image.Permalink }}" alt="Image">
이렇게 하면 $image라는 변수에 이미지를 할당하고, 해당 변수의 값을 통해 가져온 이미지를 렌더링 할 수 있다.
2. With 사용하기
{{ with resources.Get "images/some_image.png" }}
<img src="{{ .Permalink }}" alt="Image">
{{ end }}
with를 사용하면 해당 이미지가 존재할 때만 이미지를 렌더링 할 수 있다. 또한 내부 파라미터에 대해 생략이 가능하다 (1번 방법에서는 할당한 변수 $image를 이용했어야 했다)
Content 에서 이미지를 가져오기
content 내의 이미지를 가져오는 내장 함수로는 .Resources.GetMatch를 사용한다.
페이지 객체의 내장 함수이기 때문에, 만약 with 내에서 활용하고자 한다면 $.Resources.GetMatch를 사용하던지, page 객체를 별도로 변수에 할당해서 사용해야 한다.
1. 이미지 할당하기
{{ $image := .Resources.GetMatch "some_image.png" }}
<img src="{{ $image.Permalink }}" alt="Image">
2. With 사용하기
{{ with .Resources.GetMatch "some_image.png" }}
<img src="{{ .Permalink }}" alt="Image">
{{ end }}
Static은?
아쉽게도 사람들이 많이 이미지를 포함시킬 static 디렉토리에서 가져오는 방법은 제공하지 않는다.
/assets을 가져올 폴더를 /static에 바인딩해서 resources.Get을 사용하는 경우도 있긴하지만, 기존에 /assets를 사용할 수 없기 때문에 그리 권장할 수는 없는 옵션이다.
참조: https://discourse.gohugo.io/t/the-base-path-for-resource-get/12823/9
1. 이미지 리사이즈
앞으로의 설명에선 이미지를 가져오는 함수는 ContentDir을 기준으로 설명한다. 그리고 with를 이용한 방법을 사용할 것이다.
사용자의 환경에 맞게 변수를 할당해서 사용하거나, 이미지가 assets에 있다면 위에 설명한 것과 같이 resources.Get을 사용할 수 있다.
{{ with .Resources.GetMatch "some_image.png" }}
{{ with .Resize "300x500" }}
<img src="{{ .RelPermalink }}" alt="Image">
{{ end }}
{{ end }}
다음과 같이하면 some_image.png를 300x500으로 리사이즈한 이미지를 렌더링 할 수 있다.
비율은 유지하며 가로 크기만 300으로 변경하고 싶다면 300x500을 300x로 변경하면 된다. 세로 비율을 유지하고 싶어도 x500 으로 설정하면 된다.
2. 이미지 포맷 변경
{{ with .Resources.GetMatch "some_image.png" }}
{{ with .Process "jpg" }}
<img src="{{ .RelPermalink }}" alt="Image">
{{ end }}
{{ end }}
다음과 같이하면 some_image.png를 jpg로 변환한 이미지를 렌더링 할 수 있다.
3. 리사이즈, 포맷 변경, 퀄리티를 한번에 조절하기
이미지 퀄리티만을 위한 함수는 제공하지 않는다. 다만 리사이즈를 하면서 동시에 퀄리티를 조절할 수 있다.
{{ with .Resources.GetMatch "some_image.png" }}
{{ with .Resize "300x500 jpg q50" }}
<img src="{{ .RelPermalink }}" alt="Image">
{{ end }}
{{ end }}
위의 예는 some_image.png를 300x500으로 리사이즈하고, jpg로 변환하며, 퀄리티를 50으로 조절한 이미지를 렌더링 한다.
+ɑ 크롭, 회전, 필터 적용
이미지를 리사이즈 하는 것 외에도, 크롭, 회전, 필터 적용 등의 작업도 가능하다. 다만 이미지 사이즈를 줄이는 것에 크게 기여하진 않으므로, 이번 포스팅에서는 다루지 않겠다.
만약 궁금하다면 Image Processing을 참조하면 좀 더 자세히 알아볼 수 있다.