올바른 이미지 크기 조정: 800px 슬롯에 4000px 사진을 넣지 마세요

이미지가 렌더링되는 가장 넓은 가로폭을 측정하고, 고해상도 화면을 위해 이를 2배로 늘린 다음, 라이브러리의 크기를 해당 수치로 조정하세요. 800픽셀 슬롯에 4000픽셀 사진을 제공하는 것은 브라우저가 표시할 수 있는 것보다 약 25배 더 많은 픽셀 데이터를 다운로드한 다음 나머지를 버리게 만듭니다.

모바일 연결 환경에서 방문자는 시간과 데이터 측면에서 이 모든 비용을 지불하게 됩니다. 이미지 크기를 올바르게 조정하는 것은 대개 사이트에서 가능한 단일 항목 중 가장 큰 페이지 용량 절감 방법이며, 디자인을 개편하는 대신 한 번의 일괄 작업만으로 해결할 수 있습니다.

크기가 너무 큰 이미지가 많은 비용을 초래하는 이유

파일 크기는 픽셀 수에 비례하므로 가로와 세로를 절반으로 줄이면 데이터의 약 75%가 제거됩니다. 이 관계는 선형이 아니라 2차 함수 관계이므로 낭비가 빠르게 늘어납니다.

첫 번째 행은 편집자가 카메라에서 찍은 사진을 그대로 업로드하는 사이트에서 흔히 볼 수 있는 사례입니다. 브라우저는 4.2 MB를 다운로드하고 크기를 축소하여 결국 180 KB 파일에 해당하는 이미지를 표시합니다.

실제 표시 크기를 측정하는 방법

실제 페이지에서 이미지를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택한 다음, 고유 크기가 아닌 표시된 크기를 확인하세요. 브라우저는 두 수치를 모두 보고하며, 그 차이가 바로 낭비되는 부분입니다.

일반적인 경우가 아니라 가장 넓게 표시되는 경우를 확인하세요. 기사 본문 안의 이미지는 데스크톱에서 700픽셀, 휴대폰에서 380픽셀로 렌더링될 수 있으므로 중요한 숫자는 700입니다. 전체 너비 배너는 뷰포트에 따라 커지므로 다른 계산이 필요하지만, 방문자가 실제로 사용하는 가장 넓은 브라우저 창을 기준으로 테스트하세요.

고해상도 화면을 위한 2배 법칙

표시 너비에 2를 곱하고 거기서 멈추세요. 그 이상의 해상도에서는 사람이 인지할 수 있는 수준의 화질 향상이 없기 때문입니다. 700픽셀로 표시되는 이미지는 1400픽셀로 내보내야 합니다.

가끔 3배를 곱하라는 제안이 있지만 타당한 경우는 거의 없습니다. 일반적인 시청 거리에서 2배 해상도와 3배 해상도의 차이는 감지할 수 없는 반면, 파일 크기는 절반 이상 커집니다. 2배 해상도에서 더 강하게 압축하는 것이 3배 해상도에서 약하게 압축하는 것보다 더 나은 결과를 냅니다. 추가된 픽셀이 압축 흔적을 감춰주기 때문입니다.

크기 조정을 위한 일반적인 표시 너비

• 기사 본문 이미지: 약 700 px로 표시됨, 1400 px로 내보내기.
• 전체 너비 히어로 이미지: 최대 1920 px로 표시됨, 1920 px로 내보내고 더 강하게 압축하기.
• 절반 너비 피처 이미지: 약 600 px로 표시됨, 1200 px로 내보내기.
• 제품 그리드 썸네일: 약 300 px로 표시됨, 600 px로 내보내기.
• 작성자 또는 프로필 사진: 약 80 px로 표시됨, 160 px로 내보내기.
• 헤더 로고: 약 180 px로 표시됨, 360 px로 내보내거나 벡터 그래픽 사용하기.

전체 너비 이미지가 예외인 이유

전체 너비 배너는 고정된 표시 크기가 없으므로, 2배로 늘리는 대신 최대 1920픽셀로 제한하고 더 강하게 압축하세요. 전체 너비 이미지를 2배인 3840픽셀로 늘리면 어떤 페이지에서도 감당할 수 없는 파일 크기가 됩니다.

배너는 대개 멀리서 보며 제품 사진보다 미세한 디테일이 적기 때문에 공격적인 압축을 해도 덜 두드러집니다. WebP 형식에서 품질 70으로 설정한 1920픽셀 배너는 보통 200 KB 미만이며 모든 화면에서 올바르게 보이는 반면, 3840픽셀 버전은 용량이 4배나 되면서도 시각적 이점은 전혀 주지 못합니다.

전체 라이브러리를 한 번에 수정하는 방법

기존 사이트의 이미지 크기를 올바르게 조정하려면 다음 6단계를 따르세요.

1. 디자인에서 이미지 슬롯을 나열합니다. 보통 수십 개가 아니라 4~6개의 고유한 크기로 정리됩니다.
2. 실제 페이지에서 브라우저 검사기를 사용하여 각 슬롯의 표시 너비를 측정합니다.
3. 각 너비를 2배로 곱하여 내보낼 크기를 구합니다.
4. 일괄 작업은 폴더 내의 모든 파일에 하나의 크기를 적용하므로, 라이브러리를 슬롯별 폴더로 분류합니다.
5. 각 폴더의 이미지를 대상 너비로 조정하고, 동일한 단계에서 압축 및 변환을 수행합니다.
6. 기존 페이지가 계속 작동하도록 동일한 이름을 유지하면서 파일을 교체합니다.

폴더별로 분류하는 단계가 이 작업을 일괄 작업으로 만들어 줍니다. 대부분의 사이트는 생각보다 훨씬 적은 수의 고유한 이미지 크기를 사용하며, 슬롯별로 그룹화하면 파일을 개별적으로 처리할 필요가 없어집니다.

반응형 이미지와 srcset 속성

srcset을 사용하여 여러 크기를 제공하고 브라우저가 각 기기에 맞는 크기를 선택하도록 하세요. 이렇게 하면 동일한 마크업에서 휴대폰은 400픽셀 파일을 다운로드하고 데스크톱은 1400픽셀 파일을 다운로드합니다.

이미지당 3개의 너비(일반적으로 400, 800, 1600픽셀)를 생성하고 픽셀 너비와 함께 나열하여 브라우저가 선택할 수 있도록 하세요. 대부분의 콘텐츠 관리 시스템(CMS)은 업로드 시 이를 자동으로 생성하므로 플랫폼에서 이미 지원하는지 확인해 보세요. 지원하는 경우에도 올바른 크기의 원본을 업로드하면 생성되는 모든 변형 이미지의 품질이 향상됩니다.

항상 압축하기 전에 크기부터 조정하세요

크기를 먼저 조정하면 압축 작업량이 줄어들어 파일 크기를 작게 유지하면서도 고화질을 유지할 수 있습니다. 먼저 압축한 다음 크기를 조정하면 나중에 버려질 디테일까지 압축하느라 손실이 발생합니다.

이 순서는 결과물의 시각적 품질에도 영향을 미칩니다. 원본 크기에서 압축된 이미지는 크기를 줄일 때 압축 아티팩트가 함께 축소되면서 더 도드라져 보일 수 있습니다. 크기를 먼저 조정하면 인코더에 더 깨끗한 소스를 제공하게 되어 동일한 파일 크기에서 눈에 띄게 더 나은 결과를 얻을 수 있습니다.

이 작업이 페이지 속도에 미치는 영향

이미지 크기를 올바르게 조정하면 이 작업을 한 번도 하지 않은 사이트에서 일반적으로 이미지 용량의 60~90%를 줄일 수 있습니다. 이 개선 효과는 어떤 포맷 변경보다 크며, 보통 다른 모든 최적화 작업을 합친 것보다 큽니다.

이 효과는 연결 속도가 느리고 데이터 비용이 발생하는 모바일 방문자에게 집중됩니다. LCP(Largest Contentful Paint)는 보통 하나의 큰 이미지에 의해 결정되므로 직접적으로 개선됩니다. Lighthouse에서 '이미지 크기 적절하게 설정하기' 진단을 해결하면 대개 관련된 2~3개의 경고가 동시에 해결됩니다.

이미지를 억지로 늘리지 마세요

이미지를 늘리면 카메라가 캡처하지 않은 픽셀이 추가되므로 결과물이 흐려지고 아무런 이득 없이 파일 크기만 커집니다. 크기를 줄이는 것은 언제나 안전하지만, 크기를 늘리는 것은 확실하게 화질을 떨어뜨리는 작업입니다.

원본 이미지가 채워야 할 슬롯보다 작은 경우, 가장 정직한 방법은 원래 크기대로 사용하거나, 이미지에 맞게 레이아웃을 자르거나, 이미지를 교체하는 것입니다. 600픽셀 사진을 1600픽셀로 늘리면 원본보다 4배나 무거우면서도 흐릿한 파일이 생성되어 품질과 속도 모두를 잃게 됩니다.

페이지에서 크기가 너무 큰 이미지 확인하기

개발자 도구를 열고 네트워크 탭으로 이동한 뒤, 이미지로 필터링하고 페이지를 새로고침하세요. 목록에 각 이미지의 전송 크기가 표시되며, 가장 큰 순서대로 정렬할 수 있습니다.

단일 이미지가 500 KB를 초과하면 조사해 볼 가치가 있으며, 페이지의 총 이미지 용량이 2 MB를 초과하면 문제가 있는 것입니다. 요소(Elements) 패널에서 이미지 위에 마우스를 올리면 고유 크기와 표시 크기를 나란히 볼 수 있습니다. 두 숫자 사이의 큰 격차가 바로 잘못된 크기의 이미지를 정의하는 기준이며, 몇 초 만에 확인할 수 있습니다.

한 번의 일괄 작업으로 라이브러리 크기 조정하기

이미지 크기를 개별적으로 조정하는 대신, 대상 너비를 한 번만 설정하고 폴더 내의 모든 파일에 적용하세요. 작업을 일괄 처리하면 수백 장의 이미지 라이브러리 크기를 몇 분 만에 조정할 수 있습니다.

최대 500개의 파일을 한 번에 넣거나 ZIP 압축 파일을 그대로 끌어다 놓고, 전체 세트의 너비, 포맷, 압축 대상을 설정하세요. 모든 작업은 자체 프로세서를 사용하여 브라우저 내부에서 실행되므로 클라이언트 사이트, 스테이징 자산, 미공개 갤러리가 서버로 전송되지 않습니다. 아무것도 업로드되지 않으므로 단 하나의 파일도 네트워크를 거치지 않고 전체 라이브러리 크기 조정이 완료됩니다.