웹 이미지 최적화 도구

웹 최적화를 쓰는 경우

이미지가 웹 페이지에 올라가고, 파일 하나가 휴대폰과 노트북과 고밀도 디스플레이를 모두 감당해야 할 때 쓰는 도구입니다. 모든 방문자에게 큰 이미지 하나를 보내는 것이 페이지가 느려지는 가장 흔한 원인입니다. 휴대폰은 절대 표시할 수 없는 데스크톱 크기의 픽셀을 내려받게 됩니다. 해법은 여러 크기와, 브라우저가 그중에서 고르게 하는 마크업입니다.

어떤 도구를 고를까

웹사이트 이미지 최적화

원본 하나에서 여러 가로 크기를 만들고 그에 맞는 HTML을 함께 제공합니다. 업로드한 크기가 아니라 필요한 크기를 브라우저가 요청하게 됩니다.

압축 도구와 함께 쓰세요

반응형 크기와 압축은 서로 다른 절반을 해결합니다. 여기서 크기 세트를 만든 다음, 그중 가장 큰 것이 여전히 무겁다면 이미지 압축에 넣으세요.

주의할 점

• 반응형 이미지는 마크업이 함께 배포되어야 효과가 있습니다. 생성된 코드를 복사해 쓰세요. 크기별 파일만 폴더에 두는 것으로는 아무것도 달라지지 않습니다.
• 가로 크기 값은 페이지에서 실제로 렌더링되는 크기에 맞추세요. 짐작으로 넣은 값은 브라우저가 잘못 고르게 만듭니다.
• 아주 작은 이미지는 여러 크기로 나눌 가치가 없습니다. 추가 요청 비용이 절감되는 용량보다 클 수 있습니다.

대표적인 작업

• 기사 대표 이미지의 480 / 960 / 1440픽셀 버전과 <picture> 마크업 만들기.
• 고밀도 노트북 화면에서도 선명해야 하는 제품 사진 준비하기.