성능과 UX를 개선하기 위해 웹사이트에서 이미지를 최적화하는 방법

웹 사이트에 있는 이미지와 비디오의 수가 계속 증가함에 따라 부정적인 사용자 경험을 초래하는 느린 로드 시간은 모든 회사에 대한 우려가 커지고 있습니다. The Fiscal Times의 기사에서는 인터넷 데이터 측정 회사인 HTTP Archive를 인용하여 평균 웹사이트 크기가 2년 전의 1.5MB에서 현재 2.1MB라고 언급했습니다. 이러한 성장의 주요 이유 중 하나는 사이트로 더 많은 트래픽을 유도하도록 설계된 비디오 및 매력적인 이미지와 같은 콘텐츠의 추가입니다.

The Fiscal Times – 웹 속도 저하 – 차트

이 기사에서는 콘텐츠 유형별로 이미지가 평균 페이지의 거의 63% (총 2,087KB 중 1,312KB)를 차지한다고 설명했습니다. 비디오는 10%(208KB)로 2위를 차지했습니다.

이미지가 웹사이트에 미치는 영향은 극적일 수 있으며 값비싼 대역폭을 소모하고 웹사이트 방문자가 페이지가 로드되기를 기다리는 시간을 증가시킵니다. 매초마다 웹 사이트의 전체 전환율과 궁극적으로 수익이 감소할 때 이미지와 전달을 최대한 최적화하려는 것이 완벽합니다.

웹사이트 성능 문제가 있는 경우 이미지에서 하나 또는 그 이상의 주요 실수를 저지를 수 있습니다. 2부로 구성된 이 시리즈에서는 최상의 사용자 경험을 보장하고 비용은 물론 대역폭 및 스토리지 요구 사항을 최소화하기 위해 이미지와 네트워크를 모두 최적화하는 방법을 살펴봅니다.

다음은 이미지를 관리할 때 저지를 수 있는 가장 일반적인 실수와 이를 피할 수 있는 방법입니다.

보다 효율적이고 현대적인 이미지 형식을 사용하지 않음

Google은 Chrome 브라우저에 WebP 이미지 형식에 대한 지원을 추가했고 Microsoft는 대부분의 Internet Explorer 및 Edge 브라우저에서 JPEG-XR에 대해 동일한 지원을 제공했지만 개발자는 여전히 이를 수용하지 않았습니다. 아마도 이러한 형식을 알지 못하거나 다양한 브라우저와 장치에 다양한 이미지 형식을 전달하는 것이 너무 어려울 수 있습니다. 결과적으로 동일한 JPG 및 PNG 형식을 사용하고 최신 형식이 사이트를 최적화할 수 있는 방법을 활용하지 못할 수 있습니다.

해결 방법: 이미지를 WebP 및 JPEG-XR 최신 형식으로 변환하고 압축 품질을 조정하여 형식 간의 균형을 유지합니다. 또한 각 이미지에 액세스하는 특정 브라우저를 감지하고 각 브라우저에 다른 버전의 이미지를 전달하여 사용자가 시각적 품질 및 파일 크기 최적화 측면에서 가능한 최상의 이미지를 받을 수 있도록 보장할 수 있습니다.

16.9KB JPG	6.9KB 웹피

GIF 형식을 사용하여 짧은 비디오 클립 포함

GIF 이미지 형식을 사용하여 뉴스 사이트, 미디어 사이트 및 소셜 공유 사이트에 짧은 비디오 클립을 표시할 수 있습니다. GIF 형식은 간단한 HTML 이미지 태그를 사용하여 비디오 클립을 포함하는 데 사용하기 쉽지만, 특히 모바일 장치에서 파일이 거대하고 로드 속도가 느려 대역폭 비용이 높고 CPU 사용률이 높기 때문에 캡처한 동영상에는 효율적이지 않습니다. .

해결 방법: Chrome 브라우저 사용자를 위한 Animated WebP와 같은 최신 파일 형식을 사용하여 동일한 클립과 애니메이션을 제공하고 포함하는 방법에는 여러 가지가 있습니다. 또 다른 접근 방식은 GIF 파일에 손실 압축을 적용하는 것입니다. 이렇게 하면 시각적 품질이 약간 떨어지지만 파일 크기가 크게 줄어듭니다.

GIF 파일은 또한 이미지 태그 대신 클립과 HTML5 비디오 태그를 포함하여 MP4 또는 WebM 비디오 형식으로 변환할 수 있습니다. 대부분의 최신 브라우저에서 이는 원활하게 작동하며 사이트는 완전히 동일하게 보이지만 훨씬 빠르게 로드됩니다. 이러한 단계 중 하나를 수행하면 파일 크기를 크게 줄여 페이지 로드 시간을 절약하고 사용자 경험을 개선하고 대역폭 비용을 절감할 수 있습니다.

6.3MB GIF	311KB MP4

모든 사용자에게 2배(레티나 디스플레이) 이미지 제공

최신 모바일 장치 및 랩톱은 장치 픽셀 비율(DPR)이 높습니다. 이러한 장치에서 사이트가 멋지게 보이기를 원하기 때문에 이중 해상도 이미지를 포함할 수 있습니다. 이는 좋은 방법이지만 많은 개발자는 모든 사용자에게 동일한 크기의 이미지를 제공하는 경향이 있습니다. 결과적으로 일반 디스플레이(예: 비 Retina 디스플레이)를 사용하는 사용자는 고해상도 이미지를 다운로드해야 하지만 디스플레이는 해상도의 절반만 사용할 수 있습니다. 그 결과 페이지가 로드되기를 기다리는 시간이 낭비되고 대역폭 비용이 불필요하게 증가합니다.

해결 방법: 각 DPR 값(예: 일반 이미지 및 이중 해상도 이미지)에 대해 다른 해상도를 만들고 현재 사용자의 브라우저에서 웹 페이지의 DPR 값을 자동으로 감지합니다. 이를 통해 일반 디스플레이 사용자에게는 일반 이미지를 제공하고 레티나 디스플레이 장치 사용자에게는 2배 해상도 이미지를 제공할 수 있습니다.

DPR 1.0 – 100×100 – 4.6KB	DPR 2.0 – 200×200 – 12.1KB

낭비적인 브라우저 측 크기 조정

개발자가 사용하는 일반적인 단축키 중 하나는 서버 측에서 이미지 크기를 조정하는 대신 브라우저 측 이미지 크기 조정을 사용하는 것입니다. 최신 브라우저에서 최종 결과는 정확히 동일하게 보이지만 대역폭 측면에서는 이야기가 상당히 다릅니다. 웹 사이트 방문자는 불필요하게 큰 이미지를 다운로드하는 데 귀중한 시간을 낭비하고 이를 전달하는 데 대역폭을 낭비합니다. 구형 브라우저의 경우 크기 조정 알고리즘이 일반적으로 수준 이하이므로 문제가 훨씬 더 두드러집니다.

해결 방법: 제공하는 이미지가 필요한 웹사이트 크기에 완벽하게 맞는지 확인하세요. 동일한 이미지를 다른 페이지에 맞게 다른 크기의 축소판으로 만들어야 하는 경우에도 큰 이미지를 제공하고 브라우저에 의존하여 크기를 조정하는 것보다 다른 축소판을 만드는 것이 좋습니다.

낭비적인 브라우저 측 크기 조정의 예

불필요하게 높은 품질의 JPEG

JPEG는 웹에 진정으로 혁명을 일으켰습니다. 수년 동안 이 손실 형식을 통해 웹 개발자는 경쟁 이미지 형식에 필요한 대역폭의 일부를 사용하여 고해상도 이미지를 매우 자세하게 묘사할 수 있습니다. 그러나 많은 개발자와 그래픽 디자이너는 JPEG 압축을 실험하지 않습니다. JPEG 압축은 화질 저하 없이 파일 크기를 크게 줄일 수 있습니다.

85%의 JPEG 품질이 일반적인 것처럼 보이지만 95%의 품질이 일반적인 반면 훨씬 낮은 품질은 전반적인 경험을 해치지 않고 파일 크기를 크게 줄이는 많은 웹 사이트를 보았습니다. 최종 결과는 더 높은 대역폭 소비와 방문자 경험의 움푹 들어간 곳입니다.

해결 방법: 더 낮은 JPEG 품질 수준으로 실험하는 것을 두려워하지 마십시오. 특정 웹 사이트의 경우 50% JPEG 품질을 사용하면 매우 합리적인 결과를 얻을 수 있었고 비용보다 이점이 훨씬 더 많았습니다. 더 높은 품질의 JPEG가 항상 더 좋아 보이지만 품질의 개선이 항상 추가 대역폭과 대기 시간의 가치가 있는 것은 아닙니다.

95% JPEG – 34KB	80% JPEG – 17KB

잘못된 이미지 파일 형식

JPEG, PNG 및 GIF는 오늘날 웹사이트에서 가장 많이 사용되는 파일 형식이지만 각각의 역할이 매우 다르기 때문에 잘못된 형식을 사용하면 방문자의 시간과 비용을 낭비하게 됩니다.

자주 하는 실수는 PNG를 사용하여 사진을 제공하는 것입니다. PNG는 무손실 형식으로 사진을 최대한 재현할 수 있다는 일반적인 오해가 있습니다. 이것은 일반적으로 사실이지만 이는 또한 상당히 불필요한 최적화이기도 합니다. 비교적 높은 품질의 JPEG는 PNG 파일 크기의 일부에서 비슷한 품질의 사진을 반환합니다.

수정 방법: 표시된 콘텐츠에 어떤 이미지 형식을 사용해야 하는지 항상 염두에 두십시오. PNG는 컴퓨터에서 생성된 이미지(차트, 로고 등) 또는 이미지의 투명도가 필요한 경우(이미지 오버레이)에 사용해야 합니다. 캡처한 사진을 보여줄 때는 JPEG를 사용해야 합니다. GIF는 애니메이션이 필요할 때 사용해야 합니다(Ajax 로딩 애니메이션 등).

PNG – 110KB	JPEG – 15KB

최적화되지 않은 이미지 전달

PNG는 무손실 형식이지만 무료로 사용 가능한 압축 도구를 사용하여 압축할 수 있으며 이를 최대 50%까지 줄여도 여전히 똑같은 이미지를 제공합니다. 불행히도 많은 개발자와 웹 디자이너는 이 단계를 건너뛰고 최적화되지 않은 이미지를 제공합니다.

수정 방법: PNGCrush 및 OptiPNG는 두 개의 오픈 소스 이미지 최적화 라이브러리이며, 이미 사용하지 않는 경우 반드시 확인해야 합니다. 최적화 프로세스를 자동화할 필요가 없다면 야후의 온라인 smush.it 서비스로 이동하여 수동으로 PNG를 더 압축할 수 있습니다.

작동 중인 Yahoo smush.it의 예

이미지 메타데이터 제거를 잊어버린 경우

많은 현대 웹사이트에서 방문자가 사진을 업로드할 수 있습니다. 사용자의 프로필 사진이든 최근 여행에서 공유한 사진이든, 이 사진은 원래 최신 카메라를 사용하여 촬영되었으며 사진에 많은 메타 데이터가 도입되었을 가능성이 큽니다. 대부분의 경우 이 메타 데이터를 제거하는 것이 좋지만 개발자는 그렇게 하는 데 시간이 거의 걸리지 않으므로 이미지를 제공하는 데 더 많은 대역폭이 필요하고 사용자의 검색 환경이 느려집니다.

해결 방법: 이미지와 사용자가 업로드한 사진에서 메타데이터를 제거해야 합니다. 이 정보가 필요한 경우 이미지의 일부가 아닌 어딘가에 보관할 수 있습니다. 이미지 메타데이터가 웹사이트에 필요하지 않더라도 웹사이트에 사진을 올바르게 표시하는 데 실제로 중요한 정보가 있습니다. 바로 이미지의 원래 촬영 방향입니다. Exif 정보를 제거할 때 이 정보를 손실하기 전에 Exif 데이터를 기반으로 이미지를 올바른 방향으로 회전해야 합니다.

완성 된!

이 기사는 포괄적이지는 않지만 쉽고 비용 효율적으로 수정할 수 있는 가장 일반적인 이미지 관련 문제에 대해 설명하고 과도한 대역폭 사용을 제거하고 웹 사이트 방문자에게 더 나은 경험을 제공합니다. 이 시리즈의 마지막 부분에서는 이미지를 전달할 때 네트워크 최적화를 보장하기 위한 팁에 대해 설명합니다.