이미지 저장하기 위해 웹상의 신비를 위한 많습니다. 이미지를 업로드하는 것은 무거운(원본 이미지 크기 조정에 5000px 폭,최적화되지 않은 이미지)지 않습니다만 문제를 만들과 함께 사이트의 사용자 환경이지만,또한 영향을 미칠 것이 귀하의 SEO 전략(로딩 속도,반사율,순위,etc.).,
이 문서는 분할에서 여러 부분을 덮고 알아야 할 모든 것을 준비하는 방법에 대한 당신의 이미지를 웹. 게시물의 첫 번째 부분에서 우리는 당신의 Flothemes 사이트에 대한 권장 이미지 크기를 나열합니다. 다음으로,문서에서 방법을 검사하는 다양한 섹션에서 당신의 웹 사이트를 식별하는 올바른 크기 위한 당신의 이미지를 업로드하기 전에 web. 또한 이미지를 올바르게 내보내기/저장하는 방법에 대해서도 설명 할 것이므로 속도에 최적화되어 있습니다.,
마지막으로,우리는 우리가 제공할 것입니다 일부 이미지 검색 엔진 최적화 팁에게 제목으로 귀하의 이미지를 올바르게 저장하는 경우 그들에게 그리고 왜 ALT 태그를 사용하여 개선의 SEO. 사이트에 이미 업로드 된 이미지의 경우 너무 커서 사이트의 속도가 느려지는 이미지를 식별하는 방법을 보여 드리겠습니다. 시작하자!
이미지 크기와 사이트 성능이 중요한 이유는 무엇입니까?
최적화되지 않은 이미지로 인해 웹 사이트가 느려집니다. 느린 웹 사이트=나쁜 사용자 경험,Google 검색에서 순위를 매길 가능성이 낮고 궁극적으로 문의 및 고객이 적습니다.,
절약 당신의 이미지와 적절한 크기와 최적화에 대한 이미지는 웹을 도울 수 있는 몇가지 짚어볼 부분이 있습니다.
- 속도 연구에 따르면 Google 에 의해 수행됩는 경우 웹 페이지에서 5 초 이상,확률 모바일 사용자가 떠나는 페이지가 증가하여 90%. 크기를 조정하고 이미지 크기를 줄임으로써 웹 사이트 페이지를 더 빠르게 만듭니다.
- 사용자 환경이 좋은 품질로,강렬한 이미지는 데 도움이 방문자가 더 흥미로운 경험으로 검색하는 동안 당신의 웹 사이트입니다., 사람들을 유지하여 이미지를 최적화하고 선적 빠른 당신 손님들의 매끄러운 경험을 당신의 방문자를 위한 동기를 부여하는,그들이에 더 많은 시간을 보내고 귀하의 사이트를 탐구하는 내용입니다.
- SEO 순위-사이트 속도는 순위 요소입니다. 사이트가 빠를수록 잠재적으로 순위를 매길 수 있습니다. 최적화 된 이미지가있는 웹 페이지는 데스크톱 및 모바일 장치 모두에서 훨씬 빠르게로드됩니다.
- 판매–더 빠르게 로딩 시간이며 더 나은 검색 엔진 최적화할 수 있는 도움을 가지고 더 많은 사용자의 사이트의 기회를 증가되고 물었다습니다.,
참고:이미지 크기에 대해 이야기 할 때 이미지 치수를 픽셀 단위로 의미합니다.
웹 및 플로템에 가장 적합한 크기의 이미지는 무엇입니까?
이미지를 업로드할 때 웹사의 수 있다는 것을 고려 사항으로,이러한 연구는 미래창조과학부 이미지는 사용되는 방법에 대해 큰 파일 확장,그리고 어떤 형식의 이미지를 사용되어야 다른 영역에서 귀하의 사이트입니다.,
이미지 사용과 유형
있는 다양한 경우에는 사용할 다른 이미지 크기에 대한 다른 지역의 사이트 아래에 나를 덮을 것이 가장 일반적인 영역 및 크기 조정 옵션을 사용할 수 있습니다. 이러한 권고,망막,친절한 크기 옵션을 고려하는 대부분의 사용자가 본 사이트에 장치 하나 이동 또는 13-15 인치 평균 크기입니다. 그러나,당신이 목표로 하는 사이트를 만들 보는 중대한 27 인치 모니터링(는 정말 고해상),참고가 되지 않을 수도 있습니다 무엇의 잠재적인 고객 사용.,
하려면 더 정확하게하기 위해 어떻게 귀하의 사용자가 사이트를 보고 당신의 포트폴리오를 확인할 수 있습니다,사용되는 장치에 액세스하는 사이트를 통해 Google 애널리틱스(이동하는 고객 기술–브라우저&OS 화면의 해상도),조정한 권장 크기에 맞게 필요한 비율의 평균 사용자.
전부
2400x1600px,jpeg,저장에 대한 웹 및 최적화
통해 사이트에 있는 섹션을 사용할 필요가 전체 폭 이미지는 전체를 커버 왼쪽에서 오른쪽으로 화면., 이 영역은 영웅 이미지,전체 화면 슬라이드 쇼,배너 이미지 일 수 있습니다. 전체 너비 이미지가 크거나 작은 모든 장치에서 잘 보이도록하려면 권장 크기는 2400x1600px 입니다. 장치는 당신이 촬영하는 것과 다른 비율을 가지고 있으며 웹에서 볼 때 이미지가 잘릴 가능성이 있습니다. 추천으로 중요한 이미지 콘텐츠의 자르기를 피하기 위해,웹 콘텐츠에 대한 평소보다 넓은 샷을 촬영하려고합니다.,
내용 내부 이미지
수평 최대 폭 1500px,jpeg,저장에 대한 웹 및 최적화
수직 최대 폭 1000px,jpeg,저장 웹, 고 최적화된
사이트 페이지에 있는 섹션으로 구성된 이미지,텍스트 영역,작업을 호출 버튼,etc. 기본적으로 이들은 이미지가 내부 콘텐츠의 일부인 섹션입니다(“전폭이 아님”으로 읽음)., 이러한 경우에 한 권장 크기를 지정으로 우리의 일부 Flothemes 블록을 수행할 수 있습 따라 위의 권고에 대한 수평 및 수직 이미지입니다. 당신의 비율에 따라 당신이 당신의 이미지를 저장할 때 높이가 그에 따라 조정됩니다.,갤러리를 표시합니다:그들은 모두 동일한 높이 추천 1500px 경우에 관계없이,그들은 수평 또는 수직
블로그 포스팅의 이미지
- 를 준비하는 경우 이미지를 업로드 내부에 블로그 게시물, 그들은 모두 동일한 폭 권장 1500px 경우에 관계없이,그들은 수평 또는 수직
주요 이미지
3 종류가 있의 이미지를 추천:인물,풍경과 영웅 이미지입니다., 초상화와 풍경 이미지 크기 조정 다음과 같은 추천으로 내부에 콘텐츠,이미지,동 권장 크기에 대한 영웅의 이미지가 전체 폭 이미지입니다. 좋은 추천 이미지를 갖는 열쇠는 일관성입니다. 당신은 그들이 같은 크기인지 확인 모든 초상화를 사용하려는 경우,같은 풍경과 영웅 이미지에 간다. 벽돌 격자를 사용하는 경우 위의 크기 조정이 그다지 관련이 없으므로 이미지 너비가 최소 1000px 인지 확인하십시오.,
있을 경우에는 모든 문제는 이미지 크기를 가지고 있는지 확인을 살펴 이미지 크기 조정 옵션에서 당신의 Flothemes 설정을 수 있는지 확인하기 위해 올바르게 설정 합니다.
방법을 찾아 올바른 이미지 크기 위해 귀하의 웹
그럴 수도 있는 권장 크기와 일치하지 않을 수 귀하의 필요로 인해 특정 레이아웃이 있습니다. 에 대해 잘 모르는 경우 오른쪽 이미지는 차원,다행히도,거기에 몇 가지 방법으로 당신을 도울 수 있는 쉽게 점검하고 웹사이트 이미지를 식별하고,정확한 크기 위해 필요한 각 요소에 귀하의 사이트입니다.,기억해야 할 중요한 점은 망막 장치의 경우 이미지 픽셀 밀도를 두 배로 늘려야한다는 것입니다. 그것이 의미하는 바는 망막 장치의 두 배 크기의 이미지가 필요하므로 멋지고 선명하게 보입니다. 그래서 한 번 발견한 올바른 이미지 크기 각 섹션에 대한 귀하의 사이트에,당신이하고 싶을 것이 그 크기,그런 다음에 수출하고 그들을 업로드하는 귀하의 사이트입니다.
에이., 를 사용하는 이미지 크기 정보는 확장자
첫 번째 방법을 찾기 이미지 크기에 대한 귀하의 사이트를 사용하여 이미지 크기 정보에 대한 확장 크롬(를 사용하지 않는 경우에는 크롬에서 귀하의 컴퓨터는 우리가 사용하는 동안 그것을 만드는 사이트). 당신이 확장을 설치 한 후,이 도구는 당신이 당신의 사이트에있는 모든 이미지 요소의 이미지 크기를 찾을 수 있습니다.
인 이미지를 귀하의 사이트에 메모를 확인하고 다음으로 이식할 수 있을 거리에 당신의 사진을 정확하게 맞이 공간으로는 그들도에서 테마를 디자인합니다., 그냥 기억,망막 화면으로 당신은 당신의 이미지가 의도 한 공간보다 두 배 큰 것을 필요로 않습니다. 따라서 750x500px 의 이미지 공간이있는 경우 Retina 의 경우 WordPress(또는 다른 플랫폼)에 업로드 할 때 1500x1000px 여야합니다.
예를 들어:할 때 우리는 검사 이미지와 함께 이 확장,그것은에 표시되는 780x520px 지만,그것의 실제 크기가 1560x1040px. 이미지를 검사 할 때 망막 화면을 사용하고 있기 때문입니다. 이 경우 치수 크기를 사용하여 이미지 크기를 선택할 수 있습니다.,
에 비 망막 장치에 표시 및 치수 크기는 동일하게 유지됩니다. 이 경우 숫자를 두 배로 늘리고 해당 크기로 이미지를 업로드하십시오.
이 도구의 주요 제한 사항은 크기 조정을 위해 배경 이미지를 검사 할 수 없다는 것입니다. 많은 테마에서 배경 이미지는 이미지를 표시 할 때 더 유연하기 때문에 이미지 HTML 요소 대신 사용됩니다. 할 수 없는 경우를 검사하는 이미지 때문에 그들은 배경 이미지를 사용할 수 있습니다 다음 방법을 검토한 이미지 크기에 귀하의 사이트입니다.
b., 를 사용하는 계수검사 도구
크롬을 가진 및 사파리 사용할 수 있습니다 또한 개발자는 관리자를 찾을 수있는 도구는 이미지 크기가 있습니다. 원칙은 이전과 동일 할 것이며,사이트의 다양한 요소를 검사하고 크기를 적어 두십시오. Retina 장치의 이미지 크기를 두 배로 늘린 다음 WordPress 에 업로드하면 웹에 최적화되고 SEO 에 올바르게 제목이 지정됩니다.
의 한계는 이 방법이 있는 경우에는 사이트를 사용하여 어떤 대답하는 요소 세트에 REM 값을 수 있습니다 이미지를 축소할 때 사용하여 관리자에서 같은 창입니다., 사이트가 반응 형 요소도 사용하는 경우 더 큰 화면에서는 더 커지고 다른 화면에서는 더 작아집니다. 그것은 최고의 사용을 큰 화면 가능할 때 검사하는 사이트,그래서 당신을 얻을 수있다 가장 정확한 이미지 크기 조정. 어떤 경우에,이 방법을 사용하여 줄 것이다 당신은 좋은 표시의 크기에 대한 귀하의 사이트를 허용할 것이 접근하는 이미지를 추가하와 함께 귀하의 웹사이트에 더 관심이있다.
크롬
크롬 내장되어 있는 개발자 도구입니다 왜 그것의 가장 인기 있는 브라우저에는 웹 개발자와 디자이너가 있습니다., 다음과 같은 비디오는 방법을 설명할 수 있는 검사에 이미지를 알아보려면 귀하의 사이트 크기:
Firefox
Firefox,훨씬 크롬,그들은 내장 검사 도구를 확인 할 수있는 이미지에 대한 귀하의 사이트입니다.
Safari
사용하는 경우에는 사파리,사용할 수 있는 계수검사 도구를 참조하십시오 크기 이점 유의하여 주시기 바랍니다. 개발자 도구를 활성화하는 방법에 대한 다음 가이드를 확인하십시오.,
이제 이동할 수 있습니다 다른 부분에서 당신의 사이트를 준비하는 이미지 크기입니다.
갤러리 당신이 보고 싶어의 높이에서 이미지,그들은 일반적으로 제약을 높이(그래서 폭 설정할 수 있습을 자).
블로그 게시물의 경우 너비(높이가 자동 일 수 있음)로 제한되므로 이미지의 너비를주의하고 싶을 것입니다.,
을 위해 요소의 나머지 부분에 귀하의 사이트를 사용해야 하는 위에서 설명한 방법을 올바른 치수,업로드에서 최적의 크기에 대한 귀하의 사이트입니다.
이제 당신이 알고있는 어떤 차원에 필요한 모든 요소 사이트에서,우리는 설명하는 방법을 최적화하는 모든 이미지에 대한 크기,그것의 관점에서의 데이터 크기. 이미지의 파일 크기도 웹에 매우 중요합니다. 업로드하는 붓고 무거운 이미지를 귀하의 웹사이트에 대한 변형이 서버에 자원의 사이트에서 효과를 만들 부정적인 사용자 경험을 제공합니다.,
웹용 이미지 최적화 및 저장
웹용 이미지 최적화 및 저장 시 고려해야 할 사항이 많습니다. 목적에 따라 JPG,PNG 또는 GIF 를 사용할 파일 형식을 고려해야합니다. SEO 목적으로 이미지에 올바르게 레이블을 지정하고 올바른 색상 형식(웹용 sRGB)으로 저장하고 싶을 것입니다.
목적에 따라 다음 형식 중 하나로 이미지를 저장해야합니다.jpg,.gif,또는.png. JPG 는 포트폴리오 웹 사이트에 이미지를 저장할 때 가장 일반적인 형식이 될 것이며,또한 크기가 가장 가벼울 것입니다.,
파일 이름의 경우 각 특정 이미지 또는 블로그 게시물에 적합한 지 확인하십시오. 만 사용하는 문자,숫자,밑줄 및 하이픈. 영어 문자 만 사용하려고합니다. 문자에서 다른 언어로 표시는 공백,퍼센트 기호를 업로드할 수 있습이 잘못되었거나 예기치 않은 동작을 일으킬에서 갤러리는 블로그 게시물이 있습니다.
예를 들어,Biltmore Santa Barbara 에서 방금 boho 결혼식을 한 경우 이미지,boho-wedding-biltmore-santa-barbara_0001 에 레이블을 붙이십시오.jpg 이 훨씬 더 SEO 친화적 인 것,귀하의 사이트에 대한 더 나은 순위를 제공 할 수 있습니다.,
이미지 최적화에 Lightroom
을 직면하자,그것의 많은 다른 설정을 선택하고 끝없는 숫자의 조합을 입력했습니다. 그러나 이미지 형식과 필요한 파일 이미지 치수를 이미 알고 있다면 훨씬 쉽습니다.
라이트 룸에서,당신이 얻을 수 있습니다 수출 대화 3 가지 방법으로.
강조하고 내보내기
단순히 강조 표시/에서 어떤 사진을 선택하 Lightroom 라이브러리에 마우스 오른쪽 버튼으로 클릭합니다. 팝업 메뉴에서 내보내기 옵션을 선택하십시오.,
파일 내보내기
두 번째 방법은 파일->내보내기
키보드를 사용하여 바로 가기
세 번째,그리고 가장 빠른 방법은 바로 가기 키를 사용하려면:
shift+명령+E(⇧option+cmd+E)
It doesn’t matter 어떻게 당신이 얻을 수 있습니다. 이들 중 어느 것이 든 작동 할 것이므로 기억할 수있는 가장 쉬운 것을 선택하십시오.,
Lightroom 수출 대화
이제는 당신이 알고를 내보내는 방법에 대한 이미지는 웹서 다룰 내용은 다음과 같습니다 4 섹션과 다양한 옵션을 선택 Lightroom 수출 대화할 수 있도록 내보내기를 할 수 있도록 최적화된 이미지를 웹.
1. 파일 이름 지정
각 내보내기에는 자체 이름 바꾸기 설정이 있습니다. 기본 옵션을 고수하면 이미지가 원본 파일과 동일한 이름을 가지며 JPEG 이미지로 저장됩니다., 그러나 우리는 당신이 체크”이름을 변경하는”박스를 선택 중 하나 많은 이름을 바꾸는 템플릿 라이트 룸을 제공하여 사용자 지정 수출된 이미지입니다. 에서 파일 이름 지정,우리는 이름이 바뀌는 이미지 파일 이름을”사용자 정의 이름을 순서”사용자 지정 텍스트를 밀접하게 연결하는 우리의 블로그 포스팅의 제목 또는 블로그 게시 키워드가 있습니다.
2. 파일 설정
에서 이미지 형식이 JPEG 로 설정되어 있는지 확인하십시오. 이것은 가장 웹 친화적 인 옵션입니다. 귀하의 품질은 65 보다 작아서는 안됩니다., 일반적으로 우리는 그것을 75 로 설정했습니다. 당신의 색 공간은 sRGB 일 필요가 있습니다. 이것은 웹에서 사용하는 색 공간이므로 최선을 렌더링합니다. “파일 크기 제한:”상자를 선택하지 마십시오. 해당 상자를 선택하면 파일 품질이 크게 떨어집니다.
요약하면 이미지를 저장할 때 이러한 설정을 사용하십시오.
- 75%품질
- .jpeg 형식(.로고 및 아이콘 png)
- sRGB 색상
3. 이미지 크기 조정
크기에 맞게 크기 조정 상자를 선택하고 너비&높이를 선택하십시오., 상자 W:H:w(너비(픽셀))를 필요한 값(블로그 게시물의 경우 1500px,슬라이드 쇼의 경우 2880)으로 지정하십시오. H(높이)값을 비워두면 자동 크기 조정으로 설정됩니다.
갤러리의 경우 w 를 비워두고 H(높이)를 1500px 로 설정할 수 있습니다.이 테마는 대부분의 테마에 최적이어야합니다.위의 크기는 이미 망막 장치에 최적화되어 있습니다.
4. 출력 선명
“Sharpen For”옆의 확인란을 선택하고”High”로 금액을 선택하십시오.
이제 이미지를 내보내고 이미지를 내보낼 때 언제든지이 프로세스를 수행 할 수 있습니다.,
이미지 품질을 설정
에서 사진 작가의 꿈의 세계,우리는 항상 이미지 내보내기에 최선을 다하고 있습니다. 실제로 우리는 최대 품질 수출이 필요하지 않다는 것을 알게됩니다. 웹에서 크기,품질에 차이가 자주 열심히 인식하고,그 수단을 줄일 수 있는 품질에 약간,파일 크기를 줄일 수 있게 된다.
만큼 이미지지 않은 연약하고,귀하의 클라이언트는 알 수 없습니다 사이의 차이는 무엇이 당신이 찍은 사진 및 이미지잖아에 표시되는 사이트입니다.이것은 이미지의 색상에도 적용됩니다., 모든 사람의 화면을 보정한 다르게,그래서 걱정하는 작은 색상의 변화 사이에서 이미지 브라우저에서 당신의 편집 도구의 선택은 시간을 낭비하지 않는 한,그 유적은 이미지 품질을 제공합니다.
품질 척도의 상단에는 감소하는 반환이 있습니다. 75%와 100%품질 설정 사이의 인식 된 품질의 차이는보기가 어렵지만 파일 크기가 크게 증가합니다.
주어진하고,상기 결과 선택의 수출 65-75 품질입니다., 그것은 품질과 최적의 이미지 파일 크기의 올바른 균형을 친다.
이제 그것은 당신의 차례의 이름을 변경하는 파일로 내보내는 웹 저장을위한 웹고 당신은 몇 가지 정말 잘 최적화에 대한 이미지는 웹.
보너스 단계:최적화 이미지를 업로드하기 전에 귀하의 사이트
하나 마지막 단계 당신을 도울 수 있는 과감하게 제거를 초과 데이터에서 당신의 이미지 파일 크기를 줄–우리는 이야기에 대해 같은 도구를 JPEGmini 또는 TinyJPG.
이러한 도구를 사용하면 이미지를 더욱 최적화 할 수 있습니다., 중 하나를 선택하고 실행하는 이미지 그것을 통해:
- JPEGmini–이 응용 프로그램은 당신이 이미지를 압축을 감소하는 파일의 크기가 없이 눈에 보이는 효과에 대한 품질의 이미지입니다. 이 있는 경우 프로 버전에,거기에 대한 확장 Lightroom 는 이것을 할 것이 자동으로 수출 적극 추천하는 도구에 대한 어떤 사진 작가입니다.
- TinyJPG 또는 TinyPNG-tinyJPG 또는 tinyPNG 를 통해 이미지를 실행하여 이미지를 더 압축 할 수 있습니다. 그래도 2 가지 제한이 있습니다., 이 도구의 무료 버전을 사용하면 한 번에 20 개의 이미지 만 압축 할 수 있으며 이미지 당 파일 크기는 5mb 미만이어야합니다.
이 최종 단계를 만드는 빠른 웹에 최적화된 이미지를 유지하는 귀하의 사이트에 빠른 속도,이미지는 좋은 찾고!
워드 프레스 사이트에 대한 이미지를 최적화하는 방법에 대한이 포괄적 인 가이드를 읽어 자세히 알아보십시오.
이미지 SEO
이제는 당신이 당신의 이미지 크기,최적화하고 업로드된 사이트–이제를 추가할 것입니다 ALT 태그! 이것은 SEO 목적으로 최적화 된 이미지를 만드는 마지막 단계입니다., ALT 태그는 검색 엔진이 이미지를 읽는 데 사용하는 것입니다. 그들없이,당신의 이미지는 웹에 거의 존재하지 않습니다.
고맙게도 WordPress 를 사용하면 업로드 후 미디어 라이브러리에 들어가서 각 이미지에 레이블을 지정할 수 있습니다., 중 하나는 좋은 플러그인은 당신이 이렇게 빠르게 WP 메타 SEO,추가했을 때 갈 수 있습 WP 메타 SEO>이미지가 정보와 이미지 추가 ALT 태그는 모든 이미지가 어디 그것은 존재하지 않고,한 번에 완료 플러그인이 될 수 있습 de-activated:
도 여러 가지가 있는 플러그인을 추가 alt 태그가 자동으로 합니다. 순위 수학은 좋은 플러그인에 대한 솔루션이,간단하게 설치하고 자동으로 추가 ALT 태그에 업로드 이미지에서 설명,또는 제목입니다.,
이 이미지 SEO 가이드를 읽으면 더 많은 팁과 트릭을 발견하고 검색 결과에서 이미지를 최대한 활용할 수 있습니다. 그래서 여러분입니다. 귀하의 웹 사이트에 최적화 된 이미지를 갖는 3 단계.
으로 시작을 알아내는 이미지 크기,그 다음 그들을 저장이 제대로 웹에 대한 추가 적당한 제목과 최적화의 크기입니다. 마지막으로,추가 alt 태그를 개선하 SEO 을 통해 워드 프레스(수 있어야한 추가 ALT 태그에서 모든 컨텐츠 관리 시스템의 설명서를 참조하십시오 방법을 알아보려면 또는 도 지원).,
을 찾는 최적화되지 않은 이미지
경우에 당신은 이미 이미지를 업로드하는 귀하의 사이트하는 방법을 알고 싶어하는 사람을 찾을 둔화되는 당신의 페이지,다음 동영상을 확인하세요. Gtmetrix 또는 Pingdom 과 같은 도구 또는 브라우저 콘솔을 사용하면 웹에 너무 큰 이미지를 쉽게 찾을 수 있습니다.
경우에 당신은 더 많은 것을 배우고 싶어에 대해 귀하의 사이트를 최적화를 위한 속도,이용 안내합니다.
Flothemes
당신에게 힘을 실어주는
Leave a Reply