밴드 웹사이트에서 이미지를 최적화하는 5가지 방법

오늘날 웹사이트는 동일한 기기에서 다양한 방향(가로 또는 세로)으로 수백 가지의 다양한 화면 크기에 나타날 수 있습니다. 사람들이 귀하의 사이트를 보는 디스플레이의 너비는 모바일에서 불과 수백 픽셀, 최신 고화질 와이드스크린 모니터에서 최대 수천 픽셀이 될 수 있습니다.

새로운 기술은 사람들이 사이트를 볼 수 있는 다양한 화면 크기를 제공했기 때문에 사이트가 크든 작든, 높든 넓든 모든 화면에서 멋지게 보이도록 하는 사이트 디자인에 대한 새로운 사고 방식도 필요했습니다.

이것은 '반응형' 웹사이트 디자인의 개념이 작동하는 곳입니다!

반응형 디자인 작동 방식

반응형 웹사이트는 위치와 크기가 사이트가 보이는 공간에 '상대적'이도록 제작되었습니다. 사이트가 여러 디스플레이에서 표시되면 늘어나거나 줄어들면서 조정됩니다. 사용 가능한 공간에 맞게 이동합니다.

Bandzoogle 웹사이트에 업로드하는 모든 사진은 사진의 '공간' 크기에 따라 늘어나고 크기가 조정됩니다.

헤더 이미지의 경우 반응형 이미지가 가능한 한 프레임에 가장 잘 맞기 때문에 이것이 특히 중요합니다. 많은 사진을 자르는 작업이 적다는 것은 음악을 연주하는 데 더 많은 시간을 할애할 수 있다는 뜻이겠죠?

밴드 웹사이트의 이미지를 최적화하여 디자인을 올바르게 만드는 5가지 방법을 살펴보겠습니다.

1. 올바른 이미지 선택

반응형 디자인은 헤더 이미지와 같은 페이지 요소의 크기를 사용하는 이미지 파일의 원래 크기에 '비례적으로' 조정하고 페이지에서 이미지가 설정된 공간에 '상대적으로' 이 작업을 수행합니다.

이는 이미지 비율이 모든 장치에서 유지되고 이미지가 항상 가능한 한 최선을 다해 해당 공간을 '채우려고' 시도함을 의미합니다. 이로 인해 그림의 일부가 잘린 헤더 이미지가 나타날 수 있습니다. 이는 반응형 디자인에서 피할 수 없는 일이지만 잘 맞도록 잘리는 이미지를 선택하는 것이 도움이 됩니다.

아티스트: Tragedy Ann

데스크탑 및 와이드스크린

랩톱에서 헤더 이미지는 화면 너비를 기준으로 크기가 조정됩니다. 모바일 장치에서 이미지는 화면 높이에 따라 크기가 조정됩니다.

즉, 사진은 항상 공간의 가장 긴 면을 기준으로 크기가 조정됩니다.

이제 너비가 1,000픽셀인 화면에서 이것을 상상해 보세요. 데스크탑/노트북 화면은 높이보다 더 넓으며 이 동일한 화면의 높이도 570픽셀이라고 가정해 보겠습니다(많은 디스플레이의 경우 약 16:9 비율).

이 시나리오에서 우리 이미지는 이 디스플레이에서 너비가 1,000픽셀이지만 높이가 900픽셀로 조정되었습니다. 즉, 높이가 570픽셀에 불과한 공간에서 위쪽과 아래쪽에서 300픽셀 이상의 가치가 잘립니다. 사진. 머리 없는 사진, yikes!

모바일 및 세로 방향

높이가 600픽셀인 모바일 화면 예제와 동일한 계산을 수행합니다. 이 동일한 디스플레이의 너비는 약 320픽셀에 불과합니다. 그림이 이 디스플레이에 적응하면 이미지의 절반 이상이 양쪽에서 잘립니다(600픽셀 높이의 세로 화면에서 이미지의 너비가 667픽셀로 축소됨을 기억하십시오).

이것은 밴드 사진의 가장자리에 있는 드러머를 짜증나게 하는 좋은 방법입니다. 재미있을 수 있습니다! 하지만 여전히...

최적화한 다음 파일 업로드

당신이 사용할 수 있는 좋은 비유는 당신이 사진의 틀을 잡는 미술관에 있다고 상상하는 것입니다. 만약 당신이 풍경 모네를 '휘슬러의 어머니' 초상화 프레임에 넣으면 그 프레임은 옆에 있는 많은 정말 멋진 수련을 잘라낼 것입니다. 당신의 그림.

여기에서 까다로울 수 있습니다. 사이트 빌더는 사용하려는 이미지(또는 이미지에 표시되는 내용)를 예상할 수 없지만 추가할 이미지를 선택적으로 선택하는 것이 좋은 첫 번째 단계입니다.

헤더에 적합한 이미지를 선택하기 위한 몇 가지 쉬운 팁:

• '잘려진' 이미지를 사용하지 마십시오. 이미지의 '초점' 주위에 공간이나 패딩이 많을수록 다른 디스플레이에서 초점이 잘릴 가능성이 줄어듭니다.
  
• 큰 이미지 사용 - 72dpi 크기의 2000 x 1800은 일반적으로 대부분의 Bandzoogle 테마에 적합하며 모든 디스플레이에서 이미지가 멋지게 보이도록 하는 데 도움이 됩니다.
  
• 방향이 '정사각형'에 가까운 이미지를 사용하십시오. - 완전한 정사각형 이미지일 필요는 없지만 가능한 한 사진에서 동일한 높이와 너비에 도달하면 모든 디스플레이에서 잘 작동합니다. 이 추가 공간은 사이트가 보이는 방향에 상관없이 숨을 쉴 수 있는 공간을 제공합니다.
  
• 사진 자체에 텍스트나 로고가 있는 이미지를 사용하지 마십시오. 방문자에게 중요한 텍스트나 브랜드가 잘리는 것을 원하지 않습니다!
  
• Bandzoogle 테마 편집기의 '제목/로고' 옵션 아래에 대신 로고를 추가하세요. 그런 다음 헤더에 원하는 텍스트를 '클릭 유도문안 헤더 기능'에 추가합니다. 이렇게 하면 디스플레이 가장자리로 인해 중요한 메시지가 잘리지 않습니다.

아티스트: 마틴과 제임스

2. 테마에 맞게 자르기

이미 업로드된 이미지가 있는 경우 Bandzoogle은 이미지를 더 잘 표시할 수 있는 몇 가지 훌륭한 도구를 제공합니다!

일부 템플릿 디자인은 로드 시 '전체 화면'을 표시하고, 헤더 높이를 조정할 수 있으며, 제한된 공간에 헤더 이미지를 다양한 모양(예: 스포트라이트 템플릿)으로 표시하거나 헤더 이미지를 배경으로 설정할 수도 있습니다. 귀하의 페이지(예: 슬라이스).

다양한 헤더 옵션을 사용하여 다양한 테마를 쉽게 시도해 볼 수 있습니다. '테마 편집' > '테마 보기'를 통해 테마 디자인을 변경하고, 원하는 테마를 선택하고, 디자인 편집기에서 해당 테마를 사용자 정의하고, '저장'을 클릭하고 게시할 수 있습니다. 변경.

테마가 머리글을 전체 페이지 배경 이미지로 설정하지 않는 경우 추가하는 사진의 상대적 확대/축소 및 위치를 조정할 수도 있습니다.

'콘텐츠 편집'에서 콘텐츠 편집 탭의 헤더 이미지를 클릭한 다음 헤더 편집기에서 헤더 이미지 축소판 아래의 '자르기' 링크를 클릭합니다.

그런 다음 확대/축소 슬라이더로 확대/축소를 조정하고 이미지를 클릭/드래그하여 상대 위치로 이동할 수 있습니다.

3. 초점 설정

헤더 편집기에서 헤더 이미지를 자를 때 이미지 위에 작은 파란색 점이 보일 수도 있습니다. 이것은 '초점'을 설정하기 위한 것입니다. 이것이 하는 일은 이미지의 크기나 방향에 관계없이 이 점이 이미지의 어디에 위치하든 항상 '초점'이 되도록 하는 것입니다.

이것은 업로드한 사진의 '초점'이 완전히 중앙에 있지 않은 이미지에 매우 유용할 수 있습니다. 이미지 초점 위로 초점을 클릭/드래그하면 다른 화면에서 잘리는 것과 상관없이 초점이 정면과 중앙에 있게 됩니다. .

자르기, 확대/축소 및 초점을 설정했으면 '저장'을 클릭하여 자르기를 적용한 다음 헤더 편집기에서 다시 '저장'을 클릭하여 변경 사항을 적용하십시오.

아티스트: Anna Bassy

4. 모바일 헤더 높이 사용자 지정

모바일 화면과 모바일이 아닌 화면 사이의 경계가 항상 흐려지고 있습니다. 예를 들어 태블릿 장치를 들 수 있습니다. '데스크톱'이 될 만큼 크지는 않지만 모바일 화면에는 충분하지 않습니다.

많은 태블릿에서 '가로'로 사이트를 볼 때 사이트가 데스크탑이나 노트북 화면에서와 같이 나타날 수 있습니다. 태블릿을 '세로'처럼 옆으로 돌리면 모든 것이 바뀔 수 있습니다. 화면 너비를 줄이면 휴대전화에서 볼 수 있는 것과 더 가까운 '모바일' 요소가 더 많이 나타날 수 있습니다.

대부분의 Bandzoogle 테마는 기본적으로 세로 방향 화면에서 '전체 높이' 헤더를 표시하도록 설정되어 있습니다. 이는 헤더 이미지에 왼쪽과 오른쪽에 초점이 맞춰져 있는 경우 문제가 될 수 있습니다.

이를 위해 테마가 헤더를 페이지의 배경 이미지로 설정하지 않는 경우 '테마 편집' 탭을 통해 '헤더' 설정에서 '맞춤 모바일 헤더 높이' 옵션을 활성화할 수 있습니다.

활성화되면 테마 편집기에서 '모바일 미리보기' 아이콘을 클릭하고 '헤더 높이(모바일)' 슬라이더를 조정합니다. 이렇게 하면 이미지 비율에 더 잘 맞도록 이미지가 있는 공간을 조정하고 더 많은 영상. 설정 후 '저장'을 누르시면 됩니다!

5. 필터 추가

마지막으로 필터를 설정하여 헤더 이미지에 정말 놀라운 분위기를 추가할 수 있습니다. 블루스를 꺼내 사진에 더 '70년대 영화' 느낌을 주거나 빈티지 흑백으로 전환하십시오. 여기에는 많은 옵션이 있습니다!

Bandzoogle 제어판에서 '테마 편집' 탭을 클릭하고 '헤더' 옵션에서 조립식 필터를 선택하거나 사용자 정의 필터 스타일을 만들 수 있습니다.

아티스트: 칼린 윌리엄스

때때로 머리를 감쌀 수 있지만 웹 디자이너의 전반적인 합의는 반응형이 웹사이트 측면에서 더 나은 방법이라는 것입니다.

현재와 ​​미래에 사용 가능한 모든 화면에서 귀하의 사이트가 보기 좋고 읽기 쉽게 표시되도록 보장하며, 사이트에서 좋은 반응형 사례를 사용하면 Google과 같은 사이트에서 귀하의 순위를 더 높일 것입니다.

장기적으로 이것은 또한 자신의 사이트를 관리하는 사람들에게 큰 시간 절약 효과가 있습니다. 이미지와 콘텐츠를 최적화하는 가장 좋은 방법을 아는 것이 첫 번째 단계이며 나머지는 Bandzoogle이 알아서 합니다!

클릭 몇 번으로 반응형 이미지로 음악 웹사이트를 만드세요. 지금 Bandzoogle로 웹사이트를 구축하세요!