통계자료를 보면, 웹 페이지에서 대부분의 용량을 차지하는 것은 이미지이다.
이미지 최적화를 통해 이미지 용량을 줄인다면, 다음과 같은 이점을 얻을 수 있다.
1.웹 페이지 바이트를 절약할 수 있다.따라서 사이트 성능 또한 향상할 수 있다.
2.브라우저가 다운로드해야하는 바이트가 줄어든다.클라이언트의 대역폭에 여유가 생긴다.
3.콘텐츠를 더 빨리 다운로드하여 화면에 렌더링한다.최적의 사용자 경험을 제공할 수 있다.
사이트 방문자의 40%가 3초안에 웹페이지가 로딩되지 않으면 떠난다.
4.서버 저장공간이 적게 필요한다. (비용절감)
5.구글의 SEO 순위를 결정할 때 모바일 응답성을 고려하여, 검색순위에 노출한다.이미지 최적화를 통해서 모바일 응답성을 빠르게 한다면, 검색 결과의 상위권에 노출될 수 있다.
이미지 최적화 방법론
웹 화면에 렌더링을 빠르게 하기 위해선, 이미지의 리소스 최적화가 반드시 필요하다. 이미지를 최적화 하는 방법으로 8가지의 방법론을 소개하고자 한다.
이미지 폭을 조절하라.
최적화된 이미지 포맷을 사용하라.
img에 width, height 값을 선언해 Reflow를 방지하라.
여러 버전의 이미지를 제공하라.
이미지 크기 조절 툴을 사용하라.
Image CDNs을 사용하라
CSS Sprite 기법을 사용하라.
lazy loading을 활용하라.
출처 : hustle-dev.log
내가 직접 이미지 최적화를 해본 결과를 토대로 포스팅 하겠다.
이미지 폭(사이즈) 조절
이미지가 400 x 400 크기의 공간에 들어가야 하는데 이미지의 크기가 4000 x 4000 이라면 그 이미지를 그대로 넣지말고 이미지 폭을 줄여서 넣는게 웹 성능에 좋다.
사진에서 보다시피 웹에서 이미지 공간은 311 x 203 의 공간을 사용하는데 이미지 원본의 크기는 1613 x 1048 이다.
이렇게 크기에서 많은 차이가 날때 최적화를 위해서 이미지를 줄여줘야 하는데 그 기준을 찾다니보 2배정도로 줄이면 좋다는 글을 보아서 바로 줄여보았는데 그 결과 692kb까지 용량을 줄일 수 있었다.
이미지 형식 변경
보통 이미지 형식하면 jpg, png를 떠올릴 것이다.
나는 처음에 png파일 형식을 사용하였지만 여기저기 블로그를 읽어보면서 현재 상용에서 많이 쓰이는 포맷인 WebP와 최근 각광을 받고 있는 AVIF가 성능에 좋다는 글을 많이 보았다.
WebP는 구글이 2010년에 발표한 포맷으로 파일 크기를 줄이기 위해 손실 없는 압축과 무손실 압축을 모두 사용하고 있다. 웹사이트의 트래픽 감소 및 로딩 속도 단축을 겨냥한 것으로, 주로 사진 이미지 압축 효과가 높은 것으로 알려졌다.
AVIF는 AOMedia에서 개발한 이미지 포맷으로 손실 압축과 비 손실 압축을 전부 지원하기 때문에 WebP처럼 GIF, PNG, JPEG 등의 상용 이미지 포맷을 대체할 수 있다. 또한 애니메이션 기능이 있어 움짤로 쓸 수 있고, 압축 효율이 뛰어나다는 점에서 WebP를 닮았다.
우선 png를 webp와 avif로 바꿔야 한다.
Squoosh.app
이 사이트에선 무료로 폭 조절과 형식을 변환할 수 있어 이 사이트를 이용하였다.
Avif : 99%(38.6kb)
Webp : 98%(59.4kb)
PNG : 78%(692kb)
원본의 3.2MB보다 굉장히 용량이 줄어든게 눈에 보인다.
막상 용량을 확인하고나니 '그냥 Avif가 제일 용량 작은데 저걸로 다 바꿔주면 되는거 아닌가?' 하는 생각이 들었는데 브라우저에서 이 형식들을 지원하는지의 유무에 따라 사용형식이 달라진다.
그렇다면 제일 합리적인 방법은 다음과 같이 picture 태그와 source태그, img태그를 이용하여 avif파일 및 webp파일을 지원하지 않는 경우에 jpeg파일을 사용하게 하는 것이다.
<picture>
<source srcset="image.avif" type="image/avif" />
<source srcset="image.webp" type="image/webp" />
<img src="image.jpeg" alt="image 1" />
</picture>궁금증
여기 한가지 궁금점이 생겼다.
코드에 이 3가지 종류의 파일을 넣게되면 그만큼 코드도 더러워지고 코드 자체의 용량도 늘어나는게 아닌가 하는 생각이 들었다.
'과연 이 3가지 이미지를 코드에 들고 갈 만큼 웹 성능 최적화에 메리트가 있을까?'
이에대한 명쾌한 답은 아직 얻지 못했지만 문득 궁금해져서 이곳저곳 찾아보았지만 구글링으론 해답을 찾을 수 없었고 ChatGPT에게서 갈증을 조금 해소해주는 답변을 얻었는데 장점과 단점을 적어보겠다.
장점
성능 최적화: 브라우저가 웹 페이지를 로드할 때, 네트워크 대역폭을 절약하고 페이지 로딩 속도를 높일 수 있습니다. 브라우저는 클라이언트 디바이스 및 브라우저 지원 형식에 따라 가장 적합한 이미지 형식을 선택합니다."
압축 및 품질: 각 이미지 형식은 다른 압축 및 품질 알고리즘을 가지고 있습니다. 이렇게 하면 이미지 품질을 향상시키고 파일 크기를 줄일 수 있습니다.
SEO 개선: 이미지 형식 선택은 검색 엔진 최적화 (SEO) 측면에서도 중요할 수 있습니다. 더 빠르게 로드되는 웹 페이지는 검색 엔진에서 높은 순위를 얻을 가능성이 높아질 수 있습니다.
단점
코드 가독성 및 유지 관리: 각 이미지 형식을 위한 source 태그를 추가하는 것은 코드를 더 복잡하게 만들 수 있습니다. 또한, 이미지를 업데이트하거나 교체할 때 모든 형식을 따로 처리해야 합니다.
서버 리소스: 서버 측에서 이미지를 여러 형식으로 변환 및 저장해야 하므로 서버 리소스가 추가로 필요할 수 있습니다.
브라우저 호환성: 모든 브라우저가 이러한 source 및 srcset 속성을 지원하지는 않을 수 있습니다. 오래된 브라우저와 버전에서는 예상대로 동작하지 않을 수 있습니다.
이렇게 답변을 듣고나니 역시 최선의 선택을 하였을뿐 완벽한 정답은 아니다 라는 생각을 하긴 했는데 그래도 SEO개선 이 부분까지 적용된다는게 좀 충격이여서 놀랐다.
어떤 방식을 선택할지에 대해서는 신중한 판단이 필요한것 같다.
