왜 귀하의 사이트가 구글에 잘 순위를하지 않거나 소비자가 참여하지 않는 이유는 확실하지? 웹 사이트 및 웹 사이트 속도 및 검색 엔진 최적화 문제에 대한 이미지 크기는 종종 반송률과 순위에 영향을 볼 수 있습니다.
많은 사람들에게 웹에 대한 이미지를 저장하는 것은 항상 수수께끼였습니다. 무거운 이미지(5000 픽셀 폭,최적화되지 않은 사진에서 원본 이미지 크기)뿐만 아니라 귀하의 사이트에 사용자 경험을 저하뿐만 아니라 귀하의 검색 엔진 최적화 전략(로딩 속도,반송 속도,순위 등)에 부정적인 영향을 미칠 것입니다).
웹 사이트 이미지 크기 가이드 라인 목록을 정리해 보겠습니다.
이미지 크기와 웹 사이트 성능이 중요한 이유는 무엇입니까?
그래픽이 최적화되지 않으면 웹 사이트가로드되는 데 시간이 오래 걸립니다. 느린 웹 사이트는 가난한 사용자 경험,구글 검색에서 순위의 낮은 확률,그 결과,적은 쿼리 및 소비자 결과.
웹 사이트 이미지 크기 가이드 라인에는 사진을 적절한 비율로 저장하고 웹에 최적화하는 것이 다음과 같은 다양한 작업에 도움이 될 수 있다고 언급되어 있습니다.
•속도
구글 리서치에 따르면 웹 페이지를 로드하는 데 5 초 이상 걸리면 모바일 방문자가 페이지를 버릴 가능성이 90%증가합니다. 당신은 축소 및 사진 크기를 낮춤으로써 웹 사이트 페이지 속도를 높일 수 있습니다.
•사용자 경험
방문자가 고품질의 매력적인 이미지를 사용하는 경우 웹 사이트를 탐색 할 때 더 매력적인 경험을 갖게됩니다. 방문자에게 최적화된 사진을 유지하고 신속하게 로드하여 사이트에 더 많은 시간을 할애하고 콘텐츠를 탐색하도록 유도하여 원활하고 원활한 환경을 제공합니다.
•검색 엔진 최적화 순위
빨리 귀하의 사이트 로드,높은 순위 수 있습니다. 데스크톱 및 모바일 장치 모두에서 그래픽이 최적화 된 웹 페이지가 훨씬 빠르게로드됩니다.
•판매
빠른 로딩 속도와 향상된 검색 엔진 최적화는 연락 및 예약되는 기회를 증가,귀하의 사이트에 더 많은 방문자를 유치 할 수 있습니다.
웹 사이트에 가장 적합한 이미지 크기는 무엇입니까?
다양한 화면 크기,섹션,스타일 및 디자인에 대해 다양한 이미지 크기로 작동하도록 놀랍도록 제작되었습니다. 그러나 업로드 할 차원에 대한 대략적인 개념을 갖는 것이 때때로 유용합니다.
다음은 따라야 할 몇 가지 일반적인 웹 사이트 이미지 크기 지침입니다!
이미지는 눈에 띄게
1 에서 가져옵니다. 배경 이미지
놀랍게의 배경 사진은 모니터에서 태블릿,휴대 전화에 이르기까지 다양한 화면 크기에 맞게 설계되었습니다. 배경이 모든 화면에서 우수하게 보이도록 하려면 너비 1600 픽셀,높이 900 픽셀 크기를 권장합니다. 사람,브랜드 및 기타 정보의 배경이 아닌 사진을 신중하게 포함하십시오!
2. 배경 설정
배경을 크기 조정/정렬하려면 몇 가지 대안이 있습니다.
스트레치/커버 기본값:이 옵션은 높이와 너비 모두에서 전체 화면을 채우기 위해 이미지를 늘립니다. 이미지가 모든 화면 크기에 배경으로 작동하기 때문에,이 일반적으로 가장 좋은 솔루션입니다. 그러나 이미지가 측면(특히 왼쪽 및 오른쪽)에 콘텐츠가있는 경우 휴대 전화에 표시되지 않을 수 있습니다.
포함:포함은 전체 이미지를 표시하여 그 일부가 잘려지지 않도록 합니다. 일부 장치에서,그러나,이 약간의 공백이 발생할 수 있습니다.
가운데:이미지가 섹션 중앙에 표시되며 가운데를 선택하면 크기가 조정되지 않습니다. 반면에,배경은 이미지의 가장자리가 너무 작은 주위에 공백을 표시합니다. 이미지의 일부 요소는 너무 큰 경우,특히 작은 디스플레이에서 잘게 잘릴 수 있습니다.
타일:타일을 가운데에 놓은 다음 그림을 반복하여 패턴을 만드는 데 편리합니다.
웹 사이트 이미지 크기 지침을 시작하려면 페이지에 이미지가 얼마나 넓게 나타나는지 기록하십시오.
이미지는 눈에 띄게
•배경 이미지
배경 이미지의 이상적인 크기는 1600•9585>
*전체 너비 이미지
최상의 결과를 얻으려면 너비가 1400 픽셀 이상이어야 합니다. 웹 사이트 이미지 크기 가이드 라인에 따라
•반 너비 이미지
반 너비 이미지는 최상의 품질을 위해 최소 700 픽셀 너비 여야합니다.
•2000 너비 이미지
최상의 품질의 1/3 너비 이미지를 얻으려면 이미지가 최소 480 픽셀 너비여야 합니다.
•2000 너비 이미지
최고 품질의 1/4 너비 이미지를 얻으려면 너비가 360 픽셀 이상이어야합니다.
•작은 아이콘 및 로고
너비가 100 픽셀 이상이어야 합니다.
•갤러리 이미지
모든 크기는 갤러리 이미지에 적합합니다! 갤러리의 이미지는 웹 사이트의 상단에 라이트 박스에서 열립니다.
웹 사이트에 필요한 크기의 이미지는 무엇입니까?
이미지는 페이지 레이아웃에 따라 최대 웹 사이트 성능을 위해”컨테이너”에 맞게 필요한만큼 커야합니다. 예를 들어,슬라이드쇼 사진은 종종 더 크며,블로그 이미지는 중간 크기(페이지 너비에서 사이드바를 뺀 너비와 같음)이며,축소판 그림은 더 작습니다.
웹 사이트 이미지 크기 지침에 따라 사이트의 콘텐츠 영역의 너비를 계산하려면 먼저 그림 크기를 확인하는 것이 중요합니다. “페이지 눈금자”브라우저 플러그인을 사용하여 조치를 취하는 데 도움을 주거나 경험이있는 경우 웹 브라우저에 통합 된 개발자 도구를 사용할 수 있습니다:모든 페이지 요소를 마우스 오른쪽 버튼으로 클릭하고 드롭 다운 메뉴에서”검사”를 선택하십시오.
이미지는 눈에 띄게
에서 가져온 다음 도구 모음에서 요소 선택기 도구를 사용하여 관심있는 그림 또는 콘텐츠 섹션 위로 마우스를 가져갑니다:
이미지는 눈에 띄게
이미지는 눈에 띄게
에서 가져옵니다.이 경우 위의 열에는 너비가 525 픽셀 이상인 이미지가 필요합니다.
우리는”적어도”고밀도의”망막”화면을 가진 최신 스마트 폰의 이미지가 가능한 한 선명하게 보이기 위해보다 커야하기 때문에”적어도”라고 말합니다.
다음 시나리오를 고려하십시오.
이것은 27″및 30″모니터의 일반적인 해상도 폭입니다.
선택한 종횡비를 달성하기 위해 이미지를 원하는 만큼 높이 지정할 수 있습니다. 예를 들어 웨딩 사진 웹사이트에서 흔히 볼 수 있는 전체 페이지 슬라이드쇼는 사진의 원래 가로 세로 비율을 유지합니다. 다른 웹 사이트는 페이지의 전체 너비에 걸쳐 있지만 높이가 적은 슬라이드 쇼를 사용합니다(약 3:1 의 종횡비로 이어짐).
다음은 사진 웹 사이트의”파노라마”슬라이드쇼의 예입니다:
이미지는 2560 픽셀(2500 픽셀로 반올림)폭이어야하며 브라우저의 전체 너비에 걸쳐 이미지에 대해 선택한 높이(이미지의 기본 종횡비를 유지할지 또는 더 파노라마 컷을 할지에 따라 다름)여야합니다.
이것은 우리가 그 대규모 5000 픽셀 이미지(큰 파일 크기,이미지 도용의 위험을 추가하지 않음)가 발생할 것이기 때문에 망막 디스플레이의 이미지 크기를 두 배로 할 필요가 경우가 아닙니다.
페이지의 전체 너비를 차지하지 않고 일부만 차지하는 작은 슬라이드쇼에 필요한 이미지 크기를 조정합니다(2000 픽셀 또는 1800 픽셀 등).)
갤러리의 이미지 크기(라이트박스 보기에서 확대되는 썸네일)
썸네일 갤러리는 축소판 크기가 무시되어 사진을 확대할 때 충분히 커지도록 하는 독특한 상황입니다.
클릭하면 전체 화면 슬라이드 쇼(일반적으로 반투명 오버레이 아래)에서 열리는 썸네일 사진 격자를”라이트박스 보기”라고 합니다.
이러한 사진은 전체 화면 모드로 열리기 때문에 웹 사이트 이미지 크기 가이드라인은 데스크톱과 태블릿에서 잘 보이도록 최소 1500 픽셀 너비(가장 긴 가장자리)로 만드는 것이 좋습니다.
“와우 팩터”를 추가하려는 경우 최대 2000 픽셀까지 갈 수도 있지만 일반적으로 그렇지 않습니다.
이미지는 어쨌든 모바일 장치에서 브라우저에 의해 조정되고,1500 픽셀은 높은 피피”망막”화면과 스마트 폰에 선명 볼 수있을만큼 크다.
최대 높이가 1200 픽셀 인 세로/세로 이미지(예:2:3 세로 이미지의 경우 1200 픽셀 800 픽셀 또는 3:4 세로 사진의 경우 1200 픽셀 900 픽셀)는 더 작을 수 있습니다.페이지 레이아웃의 블로그 게시물 및 기타 정적 사진에 대한 권장 이미지 크기
블로그 사진에 클릭-투-확대(또는”라이트박스”)기능이 필요하지 않은 경우 열 또는 내용에 따라 크기를 조정해야 합니다.영역의 너비.
하나의 블로그 게시물의 다음 예를 보자:
이미지 촬영에서 현저하게 usre 웹사이트
확인할 수 있습니다 실제로 폭의 콘텐츠 영역을 측정하여 어떤 단락의 텍스트 방법을 사용하여 위에서 설명한 예제:
이미지 촬영에서 현저하게 usre 웹사이트
또는,당신은 이미 이미지를 가지고,당신이 볼 수있는 어떤 크기의 브라우저의 크기를 조정합니다.
동일한 정보를 얻으려면 이미지 정보보기(속성)와 같은 브라우저 플러그인을 사용할 수 있습니다.
해당 정보(예:825 픽셀)를 사용하면 이제 망막 디스플레이(너비 1650 픽셀)를 설명하기 위해 크기를 두 배로 늘릴 수 있습니다.
사이트의 테마 및 사진 도용에 대한 위험 허용도에 따라 가장 긴 가장자리에서보다 합리적인 1200 픽셀로 그 양을 줄일 수 있습니다(그래서 수평 이미지는 1200 픽셀이어야하며,수직 이미지는 1200 픽셀이어야한다,원래의 종횡비를 유지하면서).
축소판으로 사용되는 작은 사진(확장 할 필요가 없음)은 동일한 의사 결정 프로세스의 적용을받습니다.
결론
이 웹 사이트 이미지 크기 가이드라인은 포토헬터나 스머그머그(내장된 보안 조치를 갖추고 있으며 사이트의 필요에 따라 원본 고해상도 파일에서 저해상도 썸네일을 생성하는)와 같은 사진 보관 서비스나 처음에 언급한 것처럼 이러한 이미지를 다운로드 또는 인쇄물로 판매하는 경우에는 적용되지 않습니다.
이 웹 사이트 이미지 크기 가이드 라인을 따르는 것은 자체 호스팅 사이트가 있고 웹에 사진 만 제시해야하는 경우 필수입니다.
적절한 이미지를 선택하는 것은 시각적으로 매력적이고 빠른 로딩 웹 사이트를 만드는 중요한 측면입니다. 의심의 여지없이 학습 곡선이 있습니다. 그런데,있을 것이다 다른 이점 있고,웹사이트를 창조하고 유지하기의 흥분의 모든 부분 이다!