프론트엔드 개발자 관점에서 바라본 이미지 최적화

프롤로그

웹에서 이미지 파일을 사용하기 위해서는 네트워크 요청과 응답 과정을 거쳐야 합니다. 그런데, 만약 이미지 파일 요청의 응답이 느려지면 어떻게 될까요? 이미지 파일 다음에 받아올 파일들의 응답이 느려지게 됩니다. 즉, 네트워크 상에서 blocking 현상이 발생하게 되는 거지요. 이러면 페이지 로드 시간이 늦어지고 사용성이 저하될 것입니다.

이러한 문제점을 개선하기 위해서는 이미지를 최적화하여 웹 페이지 로드 시간을 줄여야만 합니다. 본 글에서는 간단하게 이미지 최적화를 위한 방법을 소개하고자 합니다.

어떻게 이미지 최적화를 할 수 있는가?

2가지 관점으로 바라볼 수 있습니다.

1. 이미지 파일의 크기를 줄여야 합니다

그러면, 이미지 크기를 어떻게 줄일 수 있을까요?

1.1 이미지의 크기를 리사이징 하여 파일의 크기를 줄이기

생각해 보면, 고해상도의 이미지 파일의 크기는 꽤나 큽니다. 그러나, 항상 고해상도의 이미지가 필요한 것은 아닙니다. 간단한 프로필 사진을 업로드하는데 4K 이미지가 필요할 것은 아닌 것처럼요.

리사이징은 사용자가 업로드할 때 직접 할 수도 있고, 애플리케이션에서 업로드 요청 전 리사이징을 수행할 수 있수도 있습니다. 예를 들어, Github은 사용자가 프로필 이미지 업로드하기 전 이미지에서 원하는 지점을 선택하여 리사이징 시킵니다.

1.2 이미지의 확장자를 변경하여 파일의 크기를 줄이기

이미지의 확장자는 꽤나 다양합니다. png, jpg, jpeg, webp, avif 등이 있는 것처럼요. webp 확장자는 png 대비 1/3 정도 크기가 작으며, jpg와 달리 압축 과정에서 손실도 많이 발생하지 않습니다.

2. 이미지 요청 시점을 늦춰야 합니다.

이미지는 웹 페이지가 로드될 때 요청됩니다. 그런데, 꼭 웹 페이지가 로드될 때 이미지가 필요할까요? 생각해 보면, 사용자가 현재 보고 있는 화면에 필요 없는 이미지들은 웹 페이지가 로드될 때 요청 할 필요가 없습니다.

이러한 문제점을 개선하기 위한 방법으로 레이지 로딩(Lazy loading) 기법이 존재합니다. 간단히 설명하면, 현재 뷰포트(viewport)를 기반으로 보이는 화면에서 필요한 이미지만 요청시키는 방법입니다. 즉, 아직 뷰포트에 없는 이미지들은 굳이 요청하지 않게 됩니다.

글을 마무리 하며

본 글에서 제시한 방법이 항상 정답이 아닐 수 있습니다.

예를 들어, 이미지 파일의 크기를 줄이기 위해 webp 확장자로 변경하면 무엇이 문제가 될 수 있을까요? webp 확장자는 모든 브라우저에서 완벽하게 지원되지는 않고 있습니다. 즉, webp 확장자를 지원하지 않는 브라우저에 대한 폴백 이미지를 적용해야 합니다. 또한, 레이지 로딩 기법을 사용하면 사용자가 뷰포트에 도달한 시점과 이미지가 로드되는 시점 달라 일종의 flicker(깜빡임) 현상하여 사용성이 저하될 수 있습니다.

다만, 본 글이 이미지 최적화를 위한 방법에 대한 작은 인사이트를 전달할 수 있는 글이었기를 바랍니다.

감사합니다.

레퍼런스

• 프론트엔드 성능 최적화 가이드 : 웹 개발 스킬을 한 단계 높여 주는