이미지 리사이저

소셜 미디어 및 웹용 이미지 크기

각 플랫폼마다 고유한 이미지 크기 요구사항이 있습니다. 잘못된 크기를 사용하면 정교하게 디자인한 시각 자료가 잘리거나, 늘어나거나, 축소되어 브랜드에 손상을 줄 수 있습니다. Facebook은 링크 미리보기용으로 1200x630, 피드 게시물용으로 1080x1080을 권장합니다. Instagram은 정사각형 게시물에 1080x1080, 세로형에 1080x1350, 가로형에 1080x608을 사용합니다. Twitter/X 이미지의 최적 표시 크기는 1200x675 픽셀입니다. 이러한 크기를 정확히 맞추는 것은 선택이 아니라, 전문적인 존재감과 아마추어 수준의 차이를 결정합니다.

웹사이트에서는 이미지가 실제 표시될 크기와 정확히 일치하도록 제공하는 것이 핵심 원칙입니다. CSS에서 가로 600px로 표시되는 이미지는 원본이 3000px와 같이 크게 제공되어서는 안 됩니다—브라우저는 축소하기 전에 전체 파일을 다운로드하므로 대역폭이 낭비되고 페이지 로드가 느려집니다. 예외는 레티나 디스플레이로, 고밀도 화면에서 선명도를 유지하려면 CSS 표시 크기의 2배(예: 600px 슬롯에 1200px) 이미지가 필요합니다.

반응형 이미지 및 레티나 디스플레이

현대 웹 개발에서는 디바이스별로 다른 이미지 크기를 제공해야 합니다. 1920px 너비 모니터를 사용하는 데스크톱 사용자는 375px 화면을 사용하는 모바일 사용자와 다른 이미지가 필요합니다. HTML srcset 속성과 sizes 속성을 사용하면 뷰포트 너비와 디바이스 픽셀 비율에 따라 브라우저가 선택할 여러 이미지 버전을 정의할 수 있습니다. 이는 각 이미지에 대해 일반적으로 400px, 800px, 1200px, 1600px 너비의 여러 버전을 만드는 것을 의미합니다.

레티나 디스플레이(2x 및 3x 픽셀 밀도)는 동일한 화면 영역에 물리적 픽셀을 두세 배 더 많이 담습니다. 레티나 대응 이미지가 없으면 iPhone, iPad, MacBook 및 대부분의 최신 Android 디바이스에서 사진이 부드럽고 흐릿하게 보입니다. 해결책은 간단합니다: 이미지를 표시 크기의 2배로 리사이즈하고 CSS가 제한하도록 합니다. 600x400 이미지 슬롯에는 1200x800 원본 이미지가 필요합니다. 이 도구를 사용해 각 크기 변형을 만든 뒤, 이미지 압축기로 파일 크기를 관리 가능한 수준으로 압축하세요.

성능을 위한 최적 이미지 크기

가장 빠른 이미지는 여전히 품질이 좋은 가장 작은 이미지입니다. 히어로 섹션에서는 압축 후 200KB 이하를 목표로 하고, 인라인 콘텐츠 이미지에서는 100KB 이하, 썸네일은 30KB 이하로 유지하세요. 이러한 목표는 WebP와 같은 최신 포맷을 사용할 경우를 전제로 합니다—JPEG를 사용하면 동일 품질에 비해 25-35% 더 큰 파일이 됩니다. 압축하기 전에 항상 이미지 크기를 표시 크기에 맞게 조정하세요. 4000x3000 사진을 150KB로 압축하면, 동일한 크기로 압축된 1200x900으로 적절히 리사이즈한 버전보다 품질이 떨어집니다. 이는 같은 파일 용량에 더 많은 픽셀을 맞추기 위해 압축이 더 많이 필요하기 때문입니다.