GraduART [트러블 슈팅(3)] - Pre Loading (이미지 최적화 2)

이어서 GraduART를 하면서 가장 중요한 문제였던 이미지 최적화에 대해 다뤄보려고 한다! 내용이 좀 많기 때문에 4개의 글로 나누어서 작성하려고 한다.

이미지 최적화는 크게 두 가지 방식이 존재한다. 이미지 로딩 최적화 이것의 목표는 이미지를 더 빠르게 다운로드하거나, 다운로드에 필요한 리소스를 줄이는 것이다.

그래서 네트워크 효율성을 높이는 데 중점을 두고 사용자가 이미지를 보기 전에 다운로드 시간을 최소화하거나, 필요한 이미지만 로드하는 식의 방식을 사용하게 된다. 이미지 렌더링 최적화 이것의 목표는 다운로드된 이미지가 브라우저에서 빠르게 표시되도록 최적화하는 것이다.

그래서 이미지의 시각적 표시가 빠르고 매끄럽게 이루어지도록 최적화하고 이미지의 보여지는 과정에서 지연이나 끊김을 줄이는 방식을 사용한다. 결과적으로 나는 다음과 같은 방법들을 사용해서 최적화를 했다.

이미지 로딩 최적화 1️ 이미지를 .webp로 변환하여 이미지 용량 효과적으로 줄이기 2️ 사용자가 이미지...