온라인에서 이미지를 가장 잘 표현하는 방법

웹사이트의 종류가 무엇이든 콘텐츠는 텍스트와 이미지가 혼합되어 있을 수 있습니다. 사진가, 아티스트 및 기타 크리에이티브의 경우 웹사이트의 이미지가 콘텐츠에서 가장 중요한 부분을 차지할 수 있으므로 이미지를 올바르게 표시하는 방법을 아는 것이 중요합니다.

물론 더 이상 생각할 필요 없이 WordPress 대시보드를 통해 사진과 그래픽을 업로드할 수 있지만 웹사이트가 빠르게 로드되고 읽기 쉽고 검색 엔진에 최적화되어 있는지 확인하려면 이 글을 읽는 것이 좋습니다. 웹사이트에서 이미지를 사용할 때 모범 사례에 대한 짧은 가이드입니다.

이미지 저장 및 업로드

WordPress를 사용하면 컴퓨터에서 직접 거대한 이미지를 업로드하고 블로그 너비에 맞게 자동으로 표시할 수 있지만 처리되지 않은 이미지는 업로드하지 않는 것이 좋습니다.

모든 웹 브라우저는 코드에서 지시하는 경우 실제보다 작은 크기로 이미지를 표시할 수 있지만 그렇게 해도 실제 파일 크기가 줄어들지는 않습니다. 전체 너비와 높이의 50%로 표시된 500kb 이미지는 여전히 500kb입니다. HTML과 WordPress에 익숙하지 않은 블로거는 이미지가 화면에 크게 나타나지 않기 때문에 다운로드가 빠를 것이라고 생각할 수 있지만 항상 그런 것은 아닙니다.

이미지 크기를 확인하려면 블로그에서 이미지를 마우스 오른쪽 버튼으로 클릭하거나 Control-클릭하고 메뉴에서 이미지 보기/열기를 선택합니다(사용하는 브라우저에 따라 문구가 약간 다름). 열리는 이미지가 블로그에서 보는 것보다 훨씬 크다면 이미지 크기가 적절하지 않다는 의미입니다.

이미지가 많은 블로그가 있고 이미지를 업로드하기 전에 크기를 조정하지 않으면 웹 페이지의 전체 크기가 불필요하게 커질 수 있습니다.

업로드하기 전에 이미지의 크기를 조정하고 압축하는 데 몇 분 정도 더 시간을 할애하는 것이 좋습니다. 이것은 Photoshop 또는 사용하는 다른 이미지 편집 소프트웨어에서 쉽게 수행할 수 있습니다. PicMonkey 및 Dynamic Drive의 Image Optimizer와 같은 무료 온라인 도구를 사용할 수도 있습니다.

이미지 크기를 수동으로 조정하면 압축을 완전히 제어할 수 있고 업로드 시간을 크게 줄일 수 있지만 원하는 경우 WordPress가 업로드할 때마다 자동으로 생성하는 크기 조정된 이미지를 사용하도록 선택할 수도 있습니다. 게시물에 사진을 삽입할 때 전체 크기, 대형, 중간 또는 축소판 크기의 이미지를 삽입할 수 있는 옵션이 있습니다. 설정 > 미디어 에서 블로그 디자인에 맞게 이 크기를 편집할 수 있습니다. 이 방법을 선택하면 원본 원본 크기 이미지를 누구나 웹사이트에서 무료로 다운로드할 수 있습니다. 사진가와 일러스트레이터에게는 최상의 선택이 아닙니다 !

이미지 최적화 및 사용성

이미지의 크기가 적절하고 페이지 로드 시간에 최적화되었는지 확인하는 것 외에도 SEO(검색 엔진 최적화)에 맞게 적절하게 마크업되었는지 확인해야 합니다. SEO를 사용하면 검색 엔진이 귀하의 사이트를 더 쉽게 찾고 색인을 생성할 수 있으며, 우수한 SEO 기술을 사용하는 사이트는 최적화되지 않은 사이트와 비교할 때 검색 엔진 결과 페이지에서 더 높게 나타날 가능성이 높습니다.

SEO에 대한 전체 토론은 이 기사의 범위를 벗어납니다(많은 WordPress 테마는 기본적으로 SEO 친화적임). 그러나 이미지 메타 정보를 최적화하는 것은 사이트 SEO에 약간의 부스트와 사람들이 Google 이미지 검색 및 기타 이미지 기반 검색 엔진을 통해 귀하의 사이트를 찾는 데 도움을 줄 수 있습니다.

특히 이미지가 중요한 정보를 나타내는 경우 이미지를 적절하게 마크업하는 것도 유용성을 위해 중요합니다. 이미지가 로드되지 않거나 볼 수 없는 경우(느린 인터넷 연결, 이미지가 꺼져 있거나 시각 장애가 있는 사용자의 경우) 대체 텍스트 설명을 제공해야 합니다.

1. 파일명

첫째, 이미지를 저장할 때 설명이 포함된 파일 이름이 있는지 확인하십시오. IMG_013445.jpg라는 이름의 이미지를 남겨두거나 카메라에서 나왔을 때 이미지가 무엇이든 간에 검색 엔진에 이미지가 무엇을 묘사하고 있는지에 대한 단서가 제공되지 않습니다. 하이픈으로 구분된 적절한 설명 키워드를 사용하십시오(예: children-playing-ocean.jpg).

2. 대체 텍스트

미디어 업로더를 통해 이미지를 업로드할 때 WordPress는 파일 설명을 위한 여러 필드를 제공합니다. 이것들을 비워둘 수 있지만(많은 블로거들이 시간을 절약하기 위해 그렇게 함), 더 많은 필드를 채울수록 SEO와 사용성이 더 좋습니다. 이 중 가장 중요한 것은 "대체 텍스트"의 줄임말인 대체 텍스트입니다.

이미지가 꺼져 있거나 다른 이유로 표시되지 않을 때 표시되는 텍스트이므로 이미지가 무엇인지 설명하는 역할을 해야 합니다. 검색 엔진은 또한 이 텍스트를 읽고 페이지의 내용과 목록에서 사이트를 배치할 위치를 결정하는 데 사용합니다. 예를 들어 텍사스에 거주하는 웨딩 사진작가인 경우 모든 블로그 이미지의 대체 텍스트에 "웨딩 사진사" 및 "텍사스 웨딩 사진"과 같은 키워드를 비롯한 많은 설명 텍스트가 포함되어 있는지 확인하고 싶을 것입니다. 블로그 텍스트와 마찬가지로 이미지 설명에 키워드를 너무 많이 넣지 않는 것이 중요합니다.

시간을 절약하기 위해 모든 이미지에 동일한 대체 텍스트를 복사하여 붙여넣고 싶을 수 있지만 이상적으로는 각 이미지에 이를 적절하게 설명하는 고유한 대체 텍스트가 있어야 합니다.

3. 이미지 제목

이미지 제목은 대체 텍스트와 유사하지만 목적이 약간 다릅니다. 제목은 이미지에 대체 정보를 제공하기 보다는 추가 정보를 제공해야 합니다. 이미지 제목은 이미지 위로 마우스를 가져가면 팝업 상자에 나타나는 "도구 설명" 텍스트입니다. 이 텍스트는 유용성과 SEO 모두에 중요하며 이미지 또는 링크되는 위치에 대한 빠르고 관련성 높은 정보를 제공해야 합니다.

이미지 제목은 대체 텍스트와 약간 달라야 하며 모든 이미지에 대해 고유해야 합니다.

4. 이미지 캡션

캡션은 일반적으로 이미지 아래에 표시되는 텍스트이며 추가 설명이나 지원 텍스트를 제공합니다. 캡션 사용은 선택 사항이지만 이미지에 대한 추가 정보를 제공하거나 다른 사이트의 이미지를 사용하는 경우 출처를 인용하는 데 유용할 수 있습니다. 캡션을 미술관 전시회의 정보 라벨과 같다고 생각하십시오.

이미지 링크

기본적으로 페이지나 게시물에 이미지를 삽입하면 WordPress는 이미지만 있는 새 페이지로 링크합니다. 이에 대한 실제 이유는 없으며 SEO 측면에서 사이트에 피해를 줄 수도 있습니다.

그것은 또한 큰 사용성 문제가 될 수 있습니다. 사용자가 이미지 위로 마우스를 가져갔을 때 그것이 링크임을 알게 되면 유용한 정보가 있는 페이지로 연결되는 것으로 생각할 수 있습니다. 이러한 이미지 전용 페이지를 클릭하는 것은 방문자에게 시간 낭비이며 방문자를 잃을 수도 있습니다.

이 문제를 해결하려면 WordPress에 사진을 업로드할 때 "링크 URL" 필드로 "없음"을 선택하면 됩니다. 이렇게 하는 경우 이미지 제목이나 캡션을 사용하여 이미지가 링크되는 위치를 표시해야 합니다.

이미지 배치

이미지가 SEO에 최적화되고 사용자 친화적인지 확인하는 것 외에도 미적 및 가독성을 위해 이미지가 텍스트에 어떻게 맞는지 생각하는 것도 중요합니다.

인라인 이미지(기본 열보다 작아서 텍스트가 이미지를 감싸도록 함), 전체 너비 이미지 또는 이 둘의 조합을 선호할 수 있습니다. 피해야 할 것은 전체 너비가 아닌 독립 실행형 이미지 또는 너비가 다양한 일련의 이미지를 사용하는 것입니다.

이를 수행하려면 세로 이미지가 가로 이미지와 너비가 같아야 합니다. 이미지 높이를 주시하세요. 이미지가 너무 높으면 더 작은 해상도 화면에서 오버플로가 발생할 수 있습니다. 이로 인해 사용자는 전체 이미지를 보기 위해 스크롤해야 하므로 피해야 합니다. 이미지가 너무 커서 세로 형식으로 전체 너비로 표시할 수 없는 경우 두 개 이상의 세로 이미지를 나란히 콜라주할 수 있습니다.

인라인 이미지는 콘텐츠에 약간의 다양성을 제공하고 텍스트의 큰 벽을 부수는 데 도움이 될 수 있습니다. 또한 전체 너비로 표시하기에 적합하지 않은 작거나 좁은 이미지에 좋은 옵션입니다.

인라인 이미지를 사용할 때는 시각적 일관성을 위해 너비를 설정하는 것이 가장 좋습니다. 이보다 넓은 이미지는 텍스트를 너무 많이 압축하여 읽기 어렵게 만들기 때문에 이 너비는 텍스트 열 너비의 절반을 넘지 않아야 합니다.

인라인 이미지는 왼쪽 여백이 깨지고 가독성이 떨어지지 않도록 항상 텍스트의 왼쪽이 아닌 오른쪽에 정렬해야 합니다.

이미지로 블로그 꾸미기

이미지를 사용하는 것은 흥미롭고 시각적으로 매력적인 블로그를 만드는 데 중요하며 창의적인 비즈니스를 마케팅할 때 더욱 중요합니다.

잘 최적화되고 잘 표현된 이미지를 위해 이 기사에서 다룬 팁을 따르십시오. 그러면 웹 사이트가 아름답게 보일 뿐만 아니라 빠르게 로드 되고 , 읽는 것이 즐겁고 검색 엔진에 더 매력적으로 보일 것입니다. 행복한 출판!