이미지 최적화 - Image Optimization

Jaemin Jung·2022년 6월 19일
0

Optimization

목록 보기
1/1
post-thumbnail

이미지 최적화가 중요한 이유

웹개발에서 사용자 경험은 가장 중요하게 고려해야할 부분이다.

볼품없는 디자인이 나올 경우 웹사이트 방문을 중단하겠다고 응답한 사용자는 38%에 이른다고 한다.
이것은 이미지와 같은 중요한 시각적 요소가 시각적으로 인상적이고 전문적인 웹사이트를 만드는 데 도움이 된다는 것을 보여준다.

하지만 그렇다고 너무 시각적 요소에 힘을 주면, 그만큼 용량이 과해지고, 페이지 로딩 시간과 같은 사용자 경험의 다른 측면을 희생시킨다.

페이지 로딩 시간은 온라인으로 운영되는 모든 비즈니스에서 매우 중요한 고려사항이다.
구글 리서치 자료에 따르면 페이지 로드시간이 3초 이상 걸리면 53%의 사용자가 떠나며, 표시 속도가 1초에서 7초로 늘어난다면 이탈률은 113%가 된다고 한다.

– 페이지 표시 속도가 1초에서 3초로 떨어지면 이탈률 32% 증가
– 페이지 표시 속도가 1초에서 5초로 떨어지면 이탈률 90% 증가
– 페이지 표시 속도가 1초에서 6초로 떨어지면 이탈률 106% 증가
– 페이지 표시 속도가 1초에서 7초로 떨어지면 이탈률 113% 증가
– 페이지 표시 속도가 1초에서 10초로 떨어지면 이탈률 123% 증가
– 텍스트, 타이틀, 이미지 등 페이지 내 요소가 400개에서 600개로 늘어나면 전환율은 95% 하락

그렇다면 페이지 속도를 높이기 위해서 어떻게 해야할까?
어떤 부분을 최적화해야 할지 그 원인을 파악하는 것이 무엇보다 중요한데,
먼저 구글이 가장 추천하는 방법은 페이지 사이즈를 줄이는 것이다.

이미지 용량은 사이트 속도에 정비례한다.
용량이 클수록 업로드 하는데 더 많은 시간이 소요되며 이는 사용자의 이탈률에도 부정적인 영향을 끼치기 때문이다.

내가 landing page 과업을 진행하면서 페이지 사이즈에 가장 큰 영향을 미치는 것 역시 이미지였다.
과업을 진행하면서 stage 배포 후 웹 페이지 속도 측정 사이트에서 속도를 측정해봤는데,

페이지 전체 로딩 시간이 14~20초 이상이 걸렸고, 앞서 설명했듯 이미지의 로딩 시간이 큰 영향을 끼쳤다.
이를 해결하기 위한 몇가지 방법을 찾아봤다.

이미지 로딩 최적화 방법

1. 이미지 용량 줄이기

가장 근본적인 문제부터 접근하였다.
이미지 파일 자체의 용량을 줄이는 것,
구글링 해보니 이미지 압축 서비스를 제공하는 사이트가 여럿 있었다.

<대표적인 이미지 압축 사이트>

사용법은 간단하다 원하는 이미지를 사이트에 업로드하고 압축을 진행해 다시 다운로드 하는 방식이다.
이러한 방식으로 이미지 해상도를 살짝 낮추면서 90%까지도 이미지 용량을 줄일 수 있다.

2. lazy loading

Image lazy loading은 페이지 안에 있는 실제 이미지들이 실제로 화면에 보여질 필요가 있을 때 로딩을 하게 만드는 기법이다.
웹 페이지 내에서 바로 로딩을 하지 않고 로딩 시점을 뒤로 미룬다.

이를 통해 페이지의 초기 로딩 시 필요한 이미지의 수를 줄일 수 있게 된다.
리소스 요청을 줄이는 것은 다운로드 용량을 줄이는 것이며, 이는 사용자가 사용할 수 있는 제한된 네트워크 대역폭의 경쟁을 줄여준다.

과업을 진행할 때 사용했던 프레임 워크인 Next.js에서는 이미지 최적화를 위한 <Image/> 컴포넌트를 제공한다.
앞서 언급했던 이미지 최적화 부분의 기능을 제공한다.

  • priority
    이 속성은 Next,js가 이미지 로딩을 우선시 해준다.
    실제로 이 속성이 많이 도움이 되었다. 적용 하였을 때 이미지 로딩이 시각적으로 대폭 개선되었다.
    하지만 이후 알게된건 이 props를 남발하게 될 경우 최적화의 의미가 사라진다고 한다.
    정말 중요한 이미지 대상으로만 적용하도록 하자

  • quality
    이미지 퀄리티를 지정하는 속성이다.
    default는 75이며, 1~100 사이의 값을 가진다.
    이미지 quality를 적절히 조정하여 로딩 속도를 개선 시켜준다.

  • placehodler
    empty(default), blur,
    이미지가 로딩 중일 때 표시할 대체 이미지.
    사용자에게 해당 이미지가 로드되고 있다는 걸 명확히 전달하여 유저 이탈율을 줄이도록 한다.
    placeholder="blur"와 함께 blurDataURL="블러 처리된 비교적 작은 이미지 url"를 전달해주게 되면,
    네트워크가 느린 환경에서 이미지를 로드할 때 흐린 이미지에서 뚜렷해지는 효과를 볼 수 있다. 

이외에도 이미지 최적화를 위한 여러 props가 존재한다.

나는 이미지 파일 자체의 용량을 줄여주고 Next.js의 Image 컴포넌트를 이용해 로딩 최적화를 진행했다.
실제로 이미지 로딩 시간이 많이 개선 되었다.
하지만 과업을 진행하면서 적용시킨 부분이라 좀 더 좋은 방향을 찾아보지 못한 느낌이다.
이후 리팩토링을 진행하면서 좀 더 엘라스틱한 방식으로 고쳐보려한다.

참고 사이트

https://ppss.kr/archives/244768
https://www.hedleyonline.com/ko/blog/seo-image-optimization/
https://www.beusable.net/blog/?p=2300
https://helloinyong.tistory.com/297
https://mingeesuh.tistory.com/entry/NEXTjs-%EB%84%A5%EC%8A%A4%ED%8A%B8-JS%EB%A5%BC-%EB%B0%B0%EC%9B%8C%EB%B3%B4%EC%9E%90-3%ED%8E%B8-%EC%9D%B4%EB%AF%B8%EC%A7%80

profile
내가 보려고 쓰는 블로그

0개의 댓글