Hero 이미지 크기를 적절하게 조정하고 사이트 속도에 맞게 최적화하기 위한 Hero 이미지 크기 가이드

당신이 나와 같다면 당신은 이것을 셀 수 없을 정도로 너무 많이 겪었습니다.

웹 페이지의 영웅 섹션 또는 페이지 상단 부분에 대한 새 이미지가 필요합니다. 이 이미지는 모든 화면 크기에 맞게 충분히 크되 페이지 로드 시간이 크게 느려질 정도로 크지 않아야 합니다. 당신은 너무 높은 것을 원하지 않습니다.

이 작업을 여러 번 수행했지만 영웅 이미지를 만들기 위해 디자인 도구를 열 때마다 영웅 이미지의 크기를 기억할 수 없습니다.

가장 먼저 해야 할 일은 이미지의 크기를 올바르게 설정하는 것입니다.

영웅 배경 치수

이미지가 헤더/히어로 배경 이미지가 될 경우 16:9 화면 비율을 유지하는 것이 좋습니다. 헤더 이미지를 1600 x 500px로 만듭니다.

전체 페이지 배경 이미지 크기

전체 페이지 배경 이미지를 만드는 경우 4:3 종횡비를 유지하고 싶을 것입니다. 저는 이 이미지를 1600 x 1000px 또는 경우에 따라 1920 x 1200px로 만듭니다. 나는 보통 두 가지 크기를 모두 수행한 다음 압축합니다. 더 큰 이미지가 잘 압축되고 너무 크지 않으면 더 큰 이미지로 이동합니다.

모바일 이미지 크기

모바일에서 사물이 어떻게 반응하고 보이는지에 따라 작은 화면에 올바른 종횡비를 사용하기 위해 때때로 모바일에서 영웅 이미지를 전환합니다(미디어 쿼리 사용). 저는 일반적으로 이러한 모바일 이미지를 800 x 1200px로 만듭니다.

다음과 같이 영웅 이미지를 교체할 수 있습니다.

.hero-image {
  background: url('my-hero-image.jpg') no-repeat center top;
  background-size: cover;
}
@media (max-width: 768px) {
  background: url('my-mobile-hero-image.jpg') no-repeat center top;
}

이렇게 하면 화면 크기가 768px 너비로 줄어들 때까지 배경 이미지가 표시됩니다. 그런 다음 히어로 이미지가 768px 와이드 뷰 포트보다 작으면 모바일 이미지가 대신 표시됩니다.

스케치 파일 다운로드

다음에 이 항목을 검색하지 않아도 되도록 시간과 노력을 절약하려면 다음 머리글을 만들어야 합니다. 바로 download this sketch template 입니다. 템플릿에는 헤더 이미지, 전체 페이지 이미지 및 모바일 이미지 각각에 대한 아트보드가 있습니다.

다음에 웹 사이트용 이미지를 만들어야 할 때 찾을 수 있도록 알 수 있는 곳에 저장하십시오. 따라서 다음에 새 이미지를 만들어야 할 때 이 스케치 파일을 열기만 하면 됩니다.

이미지 최적화

이미지의 높이와 너비를 알게 되면 이미지 크기를 충분히 작게 유지하는 데 초점을 맞추고 싶을 것입니다.

때로는 jpg가 더 ​​작고 때로는 png가 더 작습니다. 일반적으로 이러한 유형의 이미지의 경우 jpg가 더 ​​작아집니다. 그러나 확실하지 않은 경우 jpg와 png를 모두 내보냅니다. 다음 단계를 위해 자연스럽게 더 작은 것을 사용하십시오.

이제 이미지를 픽셀화하지 않고 가능한 한 가장 작은 크기로 만들기 위해 이미지를 압축하고 싶을 것입니다. 일반적으로 이미지 크기를 약 400kb 이하로 줄이십시오.

이미지 압축 도구

이미 이 작업을 수천 번 수행하지 않은 경우 웹사이트에 게시하는 모든 단일 이미지에 대해 이 작업을 수행해야 합니다. 이 작업을 수행할 때마다 웹 페이지의 로드 시간이 빨라집니다.

도구가 없으면 Tiny PNG을 사용할 수 있습니다. 저는 개인적으로 인터넷 연결 없이 언제 어디서나 사용할 수 있는 도구를 컴퓨터에 두는 것을 선호합니다. 그래서 png인 모든 이미지에 PNG Compressor(macOS 앱)을 사용합니다. 이미지가 jpg인 경우 Compressor(macOS 앱)을 사용합니다.

요약

Download this sketch template 각 페이지에 사용할 헤더 이미지 각각. 이미지를 다운로드한 후에는 이미지를 내보내고 압축하여 픽셀화되지 않고 가능한 가장 작은 크기(400kb 미만)가 되도록 합니다. 압축된 이미지만 웹사이트에 올려야 한다는 점을 기억하세요.