이미지를 1 MB로 압축

불러오는 속도는 독자도 검색 엔진도 신경 씁니다. 이미지는 대개 페이지에서 가장 무거운 요소입니다. 손대지 않은 카메라 사진 한 장이 5~10 MB일 수 있어, 기사에 세 장을 넣으면 모바일 회선의 휴대폰은 본문이 나타나기 전에 멈춥니다.

각 이미지를 약 1 MB로 유지하면 페이지가 경쾌하게 움직이고, Largest Contentful Paint 같은 Core Web Vitals 지표에 도움이 되며, 노트북이나 고해상도 디스플레이의 전체 폭 대표 이미지에 충분한 해상도를 남깁니다. 보기 좋음과 빠른 로딩을 맞춰 주는 크기입니다.

1메가바이트는 넉넉해서 보이는 품질을 희생할 일은 드뭅니다. 요령은 낭비하지 않는 것입니다. 먼저 이미지를 실제로 표시되는 최대 너비로 줄이세요. 1600픽셀 너비로 보이는 대표 이미지는 6000픽셀 원본에서 무게 말고는 얻을 것이 없습니다.

그다음 1 MB 쪽으로 압축하고, 웹에는 WebP를 고려하세요. 대개 JPG와 같은 선명함을 뚜렷이 작은 크기로 유지합니다. 사진, 그러데이션, 디테일이 많은 장면은 모두 1 MB를 넉넉히 견딥니다. 손해를 보는 것은 압축 전에 지나치게 줄인 이미지뿐입니다.

축소와 재인코딩이 브라우저에서 이뤄지므로 미공개 제품 사진이나 블로그 초안은 공개하기 전에 아무것도 업로드되지 않습니다. 이는 엠바고나 고객 자료를 제삼자 서버에서 멀리하고, 업로드를 기다리지 않고 기사의 모든 이미지를 한 번에 처리하게 합니다. 파일은 로컬에서 처리되어 다운로드로 반환되며 계정도 흔적도 없습니다.

웹 이미지에서 가장 큰 절약은 품질을 낮추는 것보다 압축 전에 줄이는 데서 옵니다. 이미지가 언젠가 표시될 최대 너비를 정하세요. 전체 폭 대표 이미지가 2000픽셀을 넘는 일은 드물고, 기사 안 이미지는 훨씬 작습니다. 먼저 거기로 줄이세요. 실제 표시 너비로 다듬은 사진은 품질 여유를 남기고 1 MB에 이르지만, 6000픽셀 그대로인 같은 사진은 담기려 눌려 거기서 흐릿함이 생깁니다. 픽셀을 레이아웃에 맞추면 나머지 1메가바이트는 저절로 들어옵니다. 너비가 헷갈리면 테마나 템플릿의 본문 열 너비를 보는 편이 추측보다 빠릅니다.