완전한 안내서 인 WordPress 용 이미지를 최적화하는 방법

완전한 안내서 인 WordPress 용 이미지를 최적화하는 방법

웹 사용자는 데이터를 소비 할 시간이별로 없습니다. 후자가 너무 많아서 데이터가 너무 많아서 읽을 시간이 없습니다! 최신 웹의 컨텐츠 큐레이터로서 귀하의 작업은 처리량을 최대화하는 것입니다. 적은 단어로 더 많이 표현할수록 더 잘 일할 수 있습니다.


이미지가 매우 중요한 이유?

게시물과 기사에 이미지를 사용해야하는 이유는 여러 가지가 있습니다.

  • 이미지는 클릭 유도 문안 (CTA)에 대한 시각적 자극으로 사용됩니다. CTA는 방문자가 수행하려는 모든 작업이 될 수 있습니다. 일반적인 CTA에는 뉴스 레터 구독, 소셜 미디어를 통한 기사 공유 또는 제품 구매가 포함됩니다..
  • 이미지는 작가가 독자와 연결하려고하는 연결을 향상시킵니다..
  • 이미지는 더 적은 것을 통해 더 많이 전달.

따라서 독자의 마음에 표시를 남기기 위해 프레젠테이션 (블로그 게시물, 비공식 보고서, 실제 PowerPoint 프레젠테이션 등)에 올바른 이미지를 사용하는 것이 본질적으로 중요합니다.!

하지만 기다려! 문제가있다!

이미지는 최신 웹 사이트에서 사용하는 대역폭의 약 63 %를 차지하므로 속도에 맞게 적절히 최적화하는 것이 점점 중요 해지고 있습니다..

페이지로드 시간이 1 초 지연되면 전환율이 7 % 감소 할 수 있습니다

사람들의 관심이 짧은 것으로 나타났습니다 (현대 콘텐츠 제작 속도의 단점 중 하나). 올바른 이미지를 사용하더라도 허용 가능한 시간 내에로드되지 않으면 관심이 사라집니다..

가장 흔한 10 가지 이미지 최적화 오류

대부분의 사이트에는 문제가 있습니다. 우수한 이미지를 사용하지만 이미지가 방문자에게 제공되는 방식은 좋지 않습니다. 큰 크기, 열악한 최적화, 잘못된 형식, 불필요하게 큰 크기 (크기), 응답이없는 이미지 및 부주의 한 SEO 오류는 현대 웹이 직면하는 가장 일반적인 문제 중 일부입니다. 오늘의 기사에서는 이러한 문제를 다룰 것입니다.!

1. 큰 치수

“추가 감자 튀김”이 항상 좋은 것은 아닙니다

이것은 고전입니다. 사이트의 “팀”페이지에 150 × 150 픽셀 사진이 필요하다고 가정하십시오. 일반적으로 5MP 헤드 샷을 사용하고 약간 편집 한 후 마지막으로 업로드합니다..

문제를 발견 했습니까? 일부 사람들은 실제 5MP 이미지를 직접 업로드합니다! 워드 프레스 테마는 전체 5MP 이미지 (5 x 10 ^ 6 픽셀)를로드하고 브라우저에 150x150px의 필요한 크기로 축소하도록 요청합니다. 본질적으로 브라우저는 원본 이미지의 0.0045 % 만 표시합니다!

(스택 패스 CDN과 같은 콘텐츠 전송 네트워크를 통해 이미지를 제공하는 경우에도) 귀하와 방문자의 대역폭을 모두 낭비하여 하드 디스크 공간을 더 많이 사용하고로드 시간을 늘리십시오. 귀하의 사이트에서 원하는 기능이 없습니다.

이미지를 항상 필요한 크기로 크기를 조정 한 다음 크기를 조정 한 다음 업로드하십시오.!

ImageResize.org

이를 위해 멋진 소프트웨어가 필요하지 않습니다. 다음과 같은 무료 온라인 도구가 있습니다. ImageResize.org 이미지 크기를 빠르게 조정하고 최적화하는 데 사용할 수 있습니다. 사진 설정을 업로드하고 조정하면됩니다. 완료되면 사이트에서 사용할 최적화 된 이미지를 다운로드하십시오. 그들은 또한 빠른 제공 이미지 압축기 파일 크기를 줄이려면.

유용한 도구 :

  • IrfanView 최적화, 워터 마크 및 테두리와 같은 고급 옵션을 사용하여 이미지의 배치 크기를 조정할 수있는 뛰어난 프리웨어입니다.
  • ImageMagick 다양한 프로그래밍 언어 및 운영 체제에서 사용할 수있는 고급 오픈 소스 도구입니다. 당신은 당신의 자신의 응용 프로그램을 작성하거나 단순히 명령 줄을 통해 그것을 사용할 수 있습니다.
  • 이미지 최적화 (Mac)을 사용하면 전체 폴더를 드래그하고 여러 이미지를 빠르게 최적화 할 수 있습니다.
  • TinyPNG API가 포함 된 온라인 이미지 압축 도구입니다.

2. 잘못된 이미지 형식

shutterstock_108312266

이미지에 사용되는 형식은 중요한 역할을합니다. 경험상 일반적으로 PNG 클립 아트 등의 벡터 그래픽 및 컴퓨터 생성 이미지 용 JPEG 다양한 색상의 사진 또는 이미지 용. 자세한 설명은 이것을 확인하십시오 멋진 StackOverflow 답변.

3. 프로그레시브 JPEG를 사용하지 않음

베이스 라인 (일반) JPG 및 프로그레시브 JPG

베이스 라인 (일반) JPG 및 프로그레시브 JPG

일반적으로 JPEG는 Baseline과 Progressive의 두 가지 유형이 있습니다. 시각적으로 둘 다 동일합니다. 차이점은로드되는 방식에 있습니다.

  • Baseline JPEG에는 전체 이미지를 포함하는 하나의 레이어 만 있습니다. 요청하면 전체 이미지가 한 번에로드됩니다.
  • 프로그레시브 JPEG는 이미지를 여러 레이어로 구성합니다. 프로그레시브 JPEG 이미지는 레이어별로로드되므로 점차 품질이 향상되어 손실없이 볼 수 있습니다..
IrfanView, 프로그레시브 JPEG로 일괄 변환 지원

IrfanView, 프로그레시브 JPEG로 일괄 변환 지원

모든 주요 이미지 리사이 저를 사용하면 이미지를 프로그레시브 JPEG로 저장할 수 있습니다.

4. Lazy Load를 사용하지 않음

지연 로딩 우수하다 자원 절약 방문자가 이미지의보기 프레임으로 스크롤 할 때만 이미지가로드되는 기술입니다. “2014 년 가장 연료 효율이 높은 자동차 중 15 대”기사를 고려하십시오. 당연히이 기사에는 최소한 15 개의 이미지가 포함됩니다. 또한 디스플레이 장치 (모니터, 태블릿 또는 스마트 폰)의 높이에 관계없이 15 개 이미지를 모두보기 프레임에 맞출 수는 없습니다. 모든 이미지를 보려면 아래로 스크롤해야합니다.

지연 로딩을 활성화하면 방문자가 이미지 근처에있을 때만 이미지가로드됩니다. 다른 말로하면 이미지를 아래로 스크롤하면 이미지가로드되기 시작합니다. 그러나 처음 몇 개의 이미지는 이미 뷰 프레임에 있으므로 즉시로드됩니다. Lazy Loading은 양쪽 끝의 대역폭을 절약하고로드 시간을 향상시킵니다! WordPress에서 Lazy Loading을 사용할 수 있습니다. BJ 게으른로드 플러그인.

5. CDN을 사용하지 않음

cdn 네트워크

CDN (콘텐츠 전송 네트워크)을 사용하면 방문자의 위치와 물리적으로 가장 가까운 서버에서 이미지를 제공합니다. 인도 방문자가 이미지를 요청하고 CDN에 도쿄와 뉴욕에 POP (존재 지점 또는 서버)가있는 경우 이미지는 도쿄에있는 서버에서 제공됩니다..

트래픽이 많으면로드 시간을 줄이고 전체 성능을 얻으려면 WordPress로 CDN을 설정해야합니다. 여기 WPExplorer에서 권장합니다 구름 플레어. 새로 태어난 사이트의 경우 시도 할 수있는 무료 CDN 서비스 목록을 권장합니다..

6. ‘alt’속성을 선언하지 않음

‘alt’속성은 검색 엔진의 이미지를 나타냅니다. 이 필드에 입력 한 텍스트는 이미지를로드 할 수없는 경우 사용자에게 표시됩니다. 많은 사람들이이 필드를 비워 두는 경향이 있습니다. 이것은 SEO에 매우 해롭고 트래픽이 줄어 듭니다. 항상 사이트 키워드를 이미지의 alt 태그에 포함 시키십시오.

7. 이미지를 최적화하지 않음

연필 크레용 포인트

최적화 된 이미지는 일반 이미지보다 40 % 더 밝습니다. 이는로드 시간을 개선하고 대역폭을 절약합니다. Freddy의 Best WordPress 이미지 최적화 플러그인 목록에서 권장합니다 WPSmush.it 이미지를 최적화하기 위해. 크라켄 또한 이미지를 순식간에 압축하는 훌륭한 온라인 옵션입니다. 우리는 WPExplorer에서 항상 그것을 사용하여 주요 이미지를 게시물 및 테마 데모에 업로드하기 전에 최적화합니다..

8. 반응 형 이미지

반응 형 웹 디자인은 여기

반응 형 웹 디자인은 여기

사이트가 반응이 좋다고해서 이미지가 그런 것은 아닙니다. 즉, 22 인치 데스크탑 화면에 사용하는 헤더 이미지도 5 인치 iPhone에 제공됩니다. 이미지를 업로드 할 때 WordPress는 이미지를 축소판, 중간, 전체 크기 등 여러 버전으로 크기를 조정합니다. 이는 개발자가 변경할 수 있습니다. 잘 코딩 된 테마는 이미지의 “중간”크기 버전을 제공하여 대역폭을 절약합니다..

그만큼 Picturefill.WP 플러그인은 이미지 태그를 새로운 것으로 대체합니다 미디어 쿼리에 따라 다른 이미지를 제공하는 요소입니다. 상당히 실험적이며 (버그가 있음) 실제 사이트에서 사용해서는 안됩니다..

9. 이미지 캡션

튜토리얼의 스크린 샷과 같이 캡션이 필요한 경우도 있지만 캡션이 항상 필요한 것은 아닙니다. 캡션 이미지는 독자가 주제를 더 잘 이해하고 SEO를 향상시키는 데 도움이됩니다..

10. 이미지 파일 이름

검색 엔진의 관점에서 파일 이름을 생각하십시오. 이미지의 ‘제목’태그에서와 동일한 텍스트를 사용하십시오. 또한 귀하의 사이트와 가장 관련성이 높은 키워드를 포함 시키십시오.

결론

영웅 -11

Image SEO는 기존 웹 사이트 나 새로운 웹 사이트에 매우 중요합니다. 이미지 SEO를 구현하는 사람들 정확히 (때로는 평범 할 수 있음), 상당한 양의 유기 트래픽 (최고의 트래픽)을 얻습니다. 장기적으로.

멋진 최적화 기술이 있습니까? 발사!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map