Divi 내에서 이미지 사용에 대한 궁극적인 가이드
게시 됨: 2017-04-21Divi를 사용하면 웹사이트에 이미지를 쉽게 추가할 수 있습니다. 그러나 일부 사람들의 도전은 각 인스턴스에 사용할 올바른 이미지 크기를 아는 것입니다. 각 웹사이트가 다르기 때문에 모든 웹사이트에 대한 표준 "완벽한" 크기는 없습니다. 그러나, 반드시 이미지가 디비 사이트에 대한 좋은 적합하다 당신이 웹 디자이너를 만들기 위해 할 수있는 몇 가지가 있습니다. 바로 이 포스트가 등장합니다!
이 기사에서는 Divi 내에서 이미지를 사용하여 추측 작업을 수행하고 매번 Divi 웹 사이트에 대한 완벽한 이미지 크기를 찾는(또는 만드는) 방법을 알려 드리겠습니다.
큰 그림
Divi 웹사이트에 적합한 이미지 크기를 찾는 것은 세 가지 주요 요인에 따라 달라집니다.
- 가로 세로 비율 : 이미지의 높이와 너비.
- 열 레이아웃 : 이미지의 최대 너비.
- 응답성 : 다양한 화면 크기에서 이미지 크기에 대한 변경 사항입니다.
아래 섹션에서는 이 세 가지 요소에 대한 이해를 Divi 전체에서 어떻게 사용하여 모든 사용 사례에 완벽한 이미지 크기를 얻을 수 있는지 자세히 보여 드리겠습니다.
Divi 이미지 최적화 지침
Divi의 이미지 종횡비(16:9, 4:3, 3:4) 사용
가로 세로 비율은 이미지 또는 화면의 너비와 높이의 비례 치수를 나타냅니다. 콜론 왼쪽의 숫자는 너비(x축)를 나타내고 콜론 오른쪽의 숫자는 높이(y축)를 나타냅니다. 가장 널리 사용되는 두 가지 종횡비는 4:3 및 16:9입니다. 이전에 TV 화면이나 모니터 설정을 조정한 적이 있는 경우 익숙하게 보일 것입니다. 4:3 화면비는 구형 TV 및 모니터의 표준 화면 크기이며 더 상자 같은 디스플레이를 가지고 있습니다. 최신 고화질 텔레비전과 모니터는 오늘날 더 넓은 디스플레이를 가진 16:9 종횡비를 가지고 있습니다. 3:4 종횡비는 Divi에서 인물 사진을 표시하는 데 유용합니다.
Divi는 16:9, 4:3, 3:4의 세 가지 종횡비를 염두에 두고 제작되었습니다. 이 게시물에서는 이러한 종횡비를 기준으로 모든 권장 이미지 크기를 사용합니다. 아직 수행하지 않았다면 Divi의 이미지 템플릿을 확인하여 이미지에 권장되는 표준 크기와 종횡비를 확인할 수 있습니다.
참고: 올바른 이미지 크기를 찾는 데 도움이 되는 유용한 종횡비 계산기도 있습니다.
업로드하기 전에 이미지 최적화
이미지를 WordPress에 업로드하기 전에 이미지를 최적화(크기 조정, 압축, 자르기 등...)하는 것이 항상 가장 좋습니다. 또한 모든 이미지 파일 크기를 60kb에서 200kb 사이로 유지하기 위해 최선을 다하십시오. 그렇게 하면 페이지 로드 시간이 너무 느려지지 않습니다. 이미지를 최적화하는 방법에 대한 전체 가이드를 보려면 여기로 이동하십시오.
SEO를 잊지 마세요
이미지를 읽을 때 검색 엔진은 이미지의 파일 이름, 'alt' 텍스트, 캡션, 파일 유형, 파일 크기 등에 의존합니다. 이 정보는 이미지를 표시하는 img 태그에 배치됩니다. 미디어 갤러리에 새 이미지를 업로드할 때마다 이 정보를 이미지에 추가해야 합니다.
또한 Divi Builder를 사용하면 특정 모듈 내에서 'alt' 텍스트와 제목 텍스트를 추가할 수 있습니다. 특정 Divi 모듈을 사용할 때 이러한 점에 주의하십시오.
내가 조사한 바에 따르면 Google은 img 태그에 래핑되지 않은 배경 이미지를 자동으로 읽지 않습니다. 배경 이미지는 CSS를 사용하여 표시되며 대부분 순수하게 디자인 목적으로 사용됩니다.
파일 형식
일반적으로 웹상의 대부분의 이미지는 GIF 형식의 JPEG, PNG 중 하나입니다. JPEG는 호환성, 색상 사용 및 작은 파일 크기 때문에 대부분의 상황에 적합합니다.
추천 이미지 및 배경 이미지와 같은 모든 풀 컬러 사진에는 JPEG를 사용해야 합니다.
PNG는 웹과도 매우 호환되는 형식입니다. PNG는 세부 사항이 많은 작은 이미지에 적합합니다. PNG 형식은 로고 및 그래픽 요소에 적합한 투명한 배경 기능도 지원합니다.
GIF는 색상이 제한된 작은 이미지에 적합합니다. GIF는 애니메이션이 가능하기 때문에 고유하며 때로는 유용합니다.
Divi의 열 레이아웃을 기반으로 한 이미지 치수 지침
이미지 크기에 대한 다음 지침은 Divi의 기본 레이아웃 설정을 기반으로 합니다. 여기에는 1080px의 콘텐츠 너비와 3의 여백 너비가 포함됩니다. 이러한 설정을 변경하면 이미지 크기를 약간 조정해야 할 수 있습니다.
일반적으로 이미지의 너비는 이미지가 있는 열만큼 넓게 설정하는 것입니다. 다음은 각 열 레이아웃에 따라 이미지에 필요한 치수입니다.
이것은 이미지에 필요한 높이를 다루지 않습니다. 따라서 4:3 및 16:9 종횡비에 따른 치수 목록이 있습니다. 이는 이미지를 모바일에 적절하게 조정되는 너비와 높이로 유지하는 데 도움이 됩니다.
다음 이미지 크기는 16:9 종횡비 표준을 따릅니다.
1열: 1080 x 608
3/4 열: 795 x 447
⅔ 열: 700 x 394
1/2 열: 510 x 287
⅓ 열: 320 x 181
1/4 열: 225 x 128
다음 이미지 크기는 4:3 종횡비 표준을 따릅니다.
1열: 1080 x 810
3/4 열: 795 x 597
⅔ 열: 700 x 526
1/2 열: 510 x 384
⅓ 열: 320 x 241
1/4 열: 225 x 170
다양한 Divi 모듈의 이미지 크기
이미지 모듈
이미지 모듈을 사용할 때 16:9 및 4:3 레이아웃을 따라 각 열 레이아웃에 필요한 이미지 크기를 선택할 수 있습니다.
예를 들어 가로 세로 비율이 4:3인 4열 레이아웃을 사용하는 경우 각 열에 대해 225픽셀 x 170픽셀의 이미지를 삽입합니다.
각 열에 특정 크기를 사용하는 것의 장점은 페이지 로드 시간을 늦출 수 있는 이미지 파일 크기를 낭비하지 않고 필요한 정확한 이미지 크기를 제공한다는 것입니다.
단점은 태블릿과 같은 작은 화면에서 열 너비를 채우지 않는다는 것입니다. 화면 크기가 1080px 중단점 아래로 떨어지면 4열 레이아웃이 2열 레이아웃으로 변경됩니다. 이 2열 레이아웃에는 너비가 370px인 이미지 크기를 위한 공간이 있습니다. 따라서 이미지가 태블릿 디스플레이의 열 너비를 채우도록 하려면 225px 너비 대신 370px 너비의 이미지 크기로 시작하는 것이 좋습니다.
다음은 2열 태블릿 디스플레이에서 225px x 170px 이미지가 있는 4열 레이아웃의 모습입니다.
꽤 좋아 보이지만 너비가 370px인 이미지로 시작했다면 다음과 같이 2열 태블릿 디스플레이에서 열 너비를 채우는 이미지를 얻을 수 있습니다.
따라서 이미지가 모든 장치에서 열의 최대 너비를 채우도록 하려는 경우 이미지 모듈을 사용할 때 각 열 레이아웃에 대해 다음 크기를 권장합니다.
4:3 종횡비의 경우:
1열: 1080 x 810
⅔ 열: 770 x 578
3/4 열: 770 x 578
1/2 열: 770 x 578
⅓ 열: 770 x 578
1/4 열: 370 x 278
16:9 종횡비의 경우:
1열: 1080 x 608
⅔ 열: 770 x 433
3/4 열: 770 x 433
1/2 열: 770 x 433
⅓ 열: 770 x 433
1/4 열: 370 x 208
슬라이더 및 포스트 슬라이더 배경 이미지
슬라이더 배경 이미지는 적어도 해당 열의 너비여야 합니다. 따라서 이미지 크기를 결정하는 것은 매우 간단합니다. 각 열 너비의 이미지 크기에 대한 지침을 사용하십시오.
슬라이더 배경 이미지의 높이는 슬라이더의 내용에 따라 결정되므로 배경 이미지의 높이를 조정해야 할 수도 있습니다.
다음 이미지 크기는 16:9 종횡비 표준을 따릅니다.
1열: 1080 x 608
3/4 열: 795 x 447
⅔ 열: 700 x 394
1/2 열: 510 x 287
⅓ 열: 320 x 181
1/4 열: 225 x 128
다음 이미지 크기는 4:3 종횡비 표준을 따릅니다.
1열: 1080 x 810
3/4 열: 795 x 597
⅔ 열: 700 x 526
1/2 열: 510 x 384
⅓ 열: 320 x 241
1/4 열: 225 x 170
슬라이더가 모바일 장치의 열 너비에 걸쳐 있도록 하려면 다음 지침을 사용하십시오.
4:3 종횡비의 경우:
1열: 1080 x 810
⅔ 열: 770 x 578
3/4 열: 770 x 578
1/2 열: 770 x 578
⅓ 열: 770 x 578
1/4 열: 370 x 278
16:9 종횡비의 경우:
1열: 1080 x 608
⅔ 열: 770 x 433
3/4 열: 770 x 433
1/2 열: 770 x 433
⅓ 열: 770 x 433
1/4 열: 370 x 208
전각 슬라이더 배경 이미지
권장 최소 너비: 1920px
전체 너비 슬라이더 배경 이미지의 너비는 항상 브라우저 너비에 의해 결정됩니다. 표준 화면 크기에 따라 이미지의 너비는 최소 1280픽셀 이상인 것이 좋습니다. 그러나 더 큰 모니터의 경우 1920px 너비의 이미지를 사용하는 것이 더 안전합니다.
다시 말하지만 슬라이더를 사용하면 높이가 항상 콘텐츠의 양에 따라 결정되므로 필요에 맞게 높이를 조정해야 할 수도 있습니다.
슬라이더 및 포스트 슬라이더 주요 이미지
슬라이드 추천 이미지는 ⅔ 열, 3/4 열 또는 1 열 너비의 슬라이더에만 나타납니다. 데스크톱 및 모바일 장치에 맞게 조정하려면 슬라이드 이미지의 너비를 최소한 이 정도로 하는 것이 좋습니다.
1열: 450
3/4 열: 330
⅔ 열: 320
참고: 브라우저 너비가 768px 미만이면 이미지가 숨겨지고 게시물 발췌만 표시됩니다.
라이트박스 디스플레이의 이미지
이미지에 라이트박스 기능을 사용하는 경우 더 큰 이미지를 사용할 수 있습니다. 일반적으로 1500 x 844는 대형 모니터의 라이트박스 디스플레이에서 좋은 전체 화면 이미지에 적합합니다.
오디오 모듈 커버 아트 이미지
너비: 최소 780px
이미지는 작게(230 x 130) 시작하지만 780px 미만의 화면 크기에서 콘텐츠 섹션의 전체 너비에 걸쳐 있습니다.
전체 너비 레이아웃의 블로그 모듈 추천 이미지
이미지 너비: 열 너비의 크기와 동일
블로그 모듈을 사용하여 표시할 게시물에 추천 이미지를 추가하는 것은 매우 간단합니다. 추천 이미지는 해당 열만큼 넓어야 합니다. 예를 들어 오른쪽 사이드바가 있는 2/3 열에서 블로그 모듈을 사용하는 경우 추천 이미지는 너비가 700px 이상이어야 합니다. Divi에서 2/3 열의 너비입니다.
추천 이미지는 단일 게시물 템플릿(게시물 발췌문을 클릭한 후 전체 게시물을 표시하는 페이지)에도 사용된다는 점을 잊지 마십시오. 따라서 단일 페이지 템플릿이 2/3 열을 사용하여 추천 이미지를 표시하는지 확인하십시오.
1열: 1080
3/4 열: 795
⅔ 열: 700
1/2 열: 510
⅓ 열: 320
1/4 열: 225
그리드 레이아웃이 있는 블로그 모듈 추천 이미지
너비: 단일 게시물 열 너비의 크기와 동일(기본값 795px)
그리고 블로그 모듈 전체 너비 레이아웃과 마찬가지로 추천 이미지는 단일 게시물 표시를 위해 커야 합니다. Blog Grid 레이아웃의 장점은 Divi가 미디어 갤러리에 업로드된 추천 이미지의 더 작은 버전(너비 400px)을 사용한다는 것입니다. 이 작은 이미지는 자동으로 생성되어 표시되므로 그리드 열에 비해 너무 큰 이미지 파일 크기를 페이지에 로드하는 것에 대해 걱정할 필요가 없습니다.
포트폴리오 모듈 주요 이미지(전폭 및 격자 레이아웃, 표준 및 필터링 가능)
너비: 단일 게시물 열 너비와 동일(기본값: 795px)
그리드 레이아웃에서 포트폴리오 항목을 보기 위해 클릭하면 추천 이미지가 콘텐츠 섹션의 너비에 걸쳐 표시됩니다. 블로그 모듈과 마찬가지로
블로그 모듈과 마찬가지로 Divi는 포트폴리오 모듈 그리드 레이아웃에 사용할 포트폴리오 기능 이미지의 더 작은 버전(400px 너비)을 만듭니다. 이는 파일 크기를 줄이고 페이지 로드 시간을 줄이는 데 유용합니다. 따라서 새 포트폴리오 항목을 만들 때 추천 이미지가 최소한 단일 포트폴리오 게시물 템플릿의 열만큼 넓어야 합니다.
Blurb 모듈 이미지
최대 너비: 550px
블러브 이미지는 이미지 너비를 열 너비와 일치시키는 동일한 규칙을 따릅니다. 단, 최대 너비가 1080px가 아닌 550px인 1열을 제외하고. 따라서 최대 너비가 550px인 이미지를 삽입하는 것이 안전합니다. 다음은 각 열 레이아웃에서 Blurb 모듈의 이미지 너비입니다.
1열: 550px
1/2 열: 510px
⅓ 열: 320px
1/4 열: 225px
갤러리 모듈 이미지(슬라이더 및 그리드 레이아웃)
권장 크기: 1500 x 844
갤러리 모듈 이미지는 라이트박스 디스플레이에서 열리므로 라이트박스에서 이미지를 볼 때 브라우저 창을 채울 만큼 충분히 큰 이미지를 사용하는 것이 좋습니다(대형 모니터의 경우 약 1500px 너비).
그리드 레이아웃의 경우 Divi는 갤러리의 더 작은 버전(400px 너비)을 만듭니다. 따라서 라이트박스용으로 예약된 큰 이미지 파일 크기는 갤러리 그리드에 표시되지 않습니다. 이는 파일 크기를 줄이고 페이지 로드 시간을 줄이는 데 유용합니다.
슬라이더 디스플레이의 경우 슬라이드를 통해 이미지의 높이가 변경되기 때문에 모든 이미지의 너비와 높이를 동일하게 유지하는 것이 중요합니다.
사람 모듈 이미지
권장 치수
너비: 600px
인물 모듈의 경우 인물 사진에 적합한 화면비 3:4를 도입할 때입니다. 각 종횡비에 대해 권장되는 사람 모듈 이미지 크기는 다음과 같습니다.
3:4 – 600 x 800(인물에 권장)
16:9 – 600 x 338
4:3 – 600 x 400
반응형 기능
1열 레이아웃의 사람 모듈 이미지는 콘텐츠 왼쪽에 320px로 표시됩니다.
화면 크기가 767px 미만인 경우 이미지는 최대 너비 600px에서 콘텐츠 영역의 너비에 걸쳐 있습니다.
다음 gif는 다양한 화면 크기에서 600 x 800 이미지(3:4 종횡비 사용)를 사용하는 사람 모듈을 보여줍니다.
게시물 제목 모듈 추천 이미지
너비: 열 너비와 동일
게시물 제목 모듈은 현재 게시물의 제목을 표시하고 선택적으로 게시물 추천 이미지를 표시합니다. 추천 이미지의 위치를 제목 위, 제목 아래 또는 제목의 배경으로 선택할 수 있습니다. 무엇을 선택하든 이미지는 여전히 콘텐츠 섹션의 너비에 걸쳐 있습니다. 따라서 게시물 제목 모듈에 1열 레이아웃을 사용하는 경우 1080px 너비가 추천 이미지에 이상적입니다.
쇼핑 모듈 제품 이미지
권장 사항
권장 너비: 330px
권장 컬럼 수: 3개 이상
상점 모듈을 사용하면 1열 레이아웃에서 최대 6열 레이아웃까지 제품을 표시할 수 있습니다. 각 열 레이아웃에 표시되는 제품 이미지의 너비는 다음과 같습니다.
6열: 150px
5열: 183px
4열: 240픽셀
3열: 332px
2열: 520px
1열: 1080px
기능
Shop 모듈은 실제로 ⅓ 열 이하에 제품을 표시하도록 제작되었기 때문에 Divi는 제품 이미지의 더 작은 버전(최대 너비 400px)을 생성합니다. 즉, 2열 및 1열 레이아웃에 제품 이미지가 흐릿하게 표시될 수 있습니다.
또한 상점 모듈에서 제품을 클릭하면 단일 제품 페이지에 제품 이미지가 300px로 표시됩니다.
3열 레이아웃과 단일 제품 페이지를 수용하려면 너비가 330px 이상인 제품 이미지 크기를 유지하는 것이 좋습니다.
평가 초상화 이미지
모듈 설정에 따른 이미지 크기
기본적으로 Divi는 세로 이미지를 90 x 90 크기와 90 테두리 너비로 변환하여 원으로 표시합니다. 따라서 기본 설정을 유지하는 경우 이미지 크기를 정확히 90 x 90으로 지정하는 것이 좋습니다. 가로 세로 비율이 1:1이 아닌 매우 큰 이미지를 가질 수는 있지만 파일 크기가 많이 낭비되어 속도가 느려집니다. 페이지 로드 시간을 줄입니다.
평가 모듈의 고급 설정 내에서 세로 이미지의 크기와 테두리 반경을 사용자 정의할 수 있습니다.
이러한 설정을 변경할 때 원으로 표시된 이미지를 보기 좋게 유지하려면 너비와 높이를 동일하게 유지하고 테두리 반경을 100으로 유지해야 합니다.
배경 이미지에 대한 일반 지침
모듈에 배경 이미지를 사용할 때 배경 이미지는 항상 최소한 그것이 있는 열만큼 넓어야 합니다. Divi의 열 너비에 대한 지침을 따르십시오.
1열: 1080
3/4 열: 795
⅔ 열: 700
1/2 열: 510
⅓ 열: 320
1/4 열: 225
다음은 열 너비와 일치하는 배경 이미지가 필요한 일부 모듈입니다.
포트폴리오 모듈
필터링 가능한 포트폴리오 모듈
행동 유도 모듈
포스트 슬라이더 모듈
게시물 제목 모듈
슬라이더 모듈
텍스트 모듈
전체 너비 배경 이미지에 대한 일반 지침
전체 너비 섹션 배경 이미지를 사용하는 경우 이러한 이미지는 브라우저의 전체 너비로 확장됩니다. 즉, 이러한 이미지를 적어도 약 1920px인 대부분의 더 큰 모니터 디스플레이만큼 넓게 만들어야 합니다.
다음 모듈에는 1920px 너비의 배경 이미지가 필요합니다.
전폭 헤더
전폭 포트폴리오
전각 슬라이더
전각 게시물 제목
전폭 포스트 슬라이더
전각 이미지
또한 이러한 모든 모듈에서 배경 이미지의 높이는 모듈 내의 콘텐츠 양에 따라 결정되므로 필요에 따라 이미지의 높이를 조정해야 할 수도 있습니다.
전폭 헤더 모듈
전체 화면 배경 이미지
전체 너비 배경 이미지와 혼동하지 않도록 전체 화면 배경 이미지는 헤더가 브라우저 창의 전체 크기(너비와 높이 모두)에 걸쳐 있도록 허용하는 전체 너비 헤더 모듈의 설정을 나타냅니다.
대부분의 모니터는 4:3 및 16:9 종횡비를 따르고 너비는 1280px 또는 1920px이므로 전체 화면 배경 이미지에 대해 다음 치수를 권장합니다.
4:3 – 1280 x 960(인물에 권장)
16:9 – 1920 x 1080
전폭 헤더 모듈 로고 이미지
전체 너비 헤더 모듈을 사용하면 헤더 콘텐츠 영역 내부에 로고를 배치할 수 있습니다.
로고에 대한 표준 이미지 크기는 없습니다. 일반적인 지침으로 로고를 큰 데스크탑에서는 선명하게 볼 수 있을 만큼 크게 유지하되 스마트폰과 같은 소형 장치에는 충분히 작게 유지하는 것이 좋습니다.
Divi의 테마 로고는 93 x 43으로 좋은 아이디어를 제공합니다.
전체 너비 헤더 이미지
권장 치수: 510 x 288
로고 외에도 전체 너비 헤더 모듈을 사용하면 헤더 콘텐츠 영역에 헤더 이미지를 표시할 수 있습니다. 기본적으로 헤더 이미지는 2열 레이아웃의 오른쪽 열에 표시됩니다. 이미지가 1/2 열에 있기 때문에 510 x 288 이미지가 대부분의 상황에서 가장 적합합니다.
모듈의 일반 설정에서 텍스트 및 로고 방향 옵션을 변경하면 헤더 이미지를 왼쪽 열에 표시하거나 원하는 경우 중앙에 표시할 수 있습니다.
이미지가 헤더의 하단을 감싸도록 하려면 수직 정렬을 하단으로 조정할 수도 있습니다.
마지막 생각들
앞서 언급했듯이 모든 웹사이트와 화면 크기에 완벽한 표준 이미지 치수는 없습니다. 그러나 Divi 열 레이아웃과 각 모듈이 특정 이미지를 표시하는 방법을 이해하면 Divi 사이트에 완벽하게 작동하는 치수를 생성할 수 있습니다.
향후 프로젝트에 도움이 되는 자료가 되길 바랍니다. 댓글에서 여러분의 피드백을 기다리겠습니다.
건배!