WordPress에서 이미지를 개선하는 방법

WordPress에서 이미지를 개선하는 방법


인터넷을 통해 이미지를로드하기에는 너무 큰 시간이 지났습니다. 오늘날 웹 사이트는 웹 사이트 없이는 존재할 수 없습니다. 몇 년 동안 인터넷 속도가 급격히 증가했지만 블로그에서 사진을 관리하는 것이 중요합니다..

사이트에 이미지를 쉽게 업로드 할 수 있다고해서 준비하지 않고 이미지를 업로드해야한다는 의미는 아닙니다. 실제로 최적화되지 않은 이미지는 여러 가지 방법으로 사이트를 손상시킬 수 있습니다. 방문자가 귀하를 생각하는 방식에 귀하의 웹 사이트 속도 및 SEO 순위에 영향을 미칩니다. 그래도 생각이 들지 않으면 WordPress에서 이미지를 개선하는 몇 가지 방법을 보여 드리겠습니다..

이 안내서에서는 다음과 같은 내용을 보여 드리겠습니다.

  • 사이트 속도를 높이고 SEO를 개선하기 위해 WordPress 용 이미지를 최적화하는 방법
  • WordPress에서 JPEG 이미지를 압축하는 방식 변경
  • WordPress 용 가장 인기있는 이미지 최적화 플러그인
  • 비디오 및 이미지에 지연 로딩 추가
  • 매력적인 이미지로 전후 이미지 표시
  • 대화 형 이미지를 만드는 방법 – 설명 및 링크 추가, 추가
  • 추가 이미지 크기를 재생성하는 방법
  • jQuery로 너비 및 높이 이미지 속성 제거
  • Media Uploader에서 사용자 지정 이미지 크기를 만드는 방법
  • 모든 웹 사이트의 자동 스크린 샷을 생성하고 게시물에 이미지로 게시하십시오.

Contents

사이트 속도를 높이고 SEO를 개선 할 수 있도록 WordPress 용 이미지를 최적화하는 방법

왜 WordPress 용 이미지를 최적화해야합니까? 노력하면 다음을 기대할 수 있습니다.

  • 더 빠른 사이트
  • 더 나은 SEO
  • 작은 백업
  • 적은 대역폭 사용
  • 더 행복한 사용자

또한 이미지를 최적화 할 수있는 다른 단계가 있음을 알아야합니다. 블로그에 업로드하기 전에도 사진을 관리하거나 업로드 후 사진을 관리 할 수 ​​있습니다.

사이트에서 이미지를 빠르게 테스트

최적화 작업을 시작하기 전에 사이트의 속도와 성능을 신속하게 확인할 수 있습니다. 목록의 도구 중 하나를 사용하면 사이트의 이미지가 어떤 모양인지 빠르게 알 수 있습니다..

사용하고 싶다 GTmetrix 사이트가 느리게로드되는 정확한 이미지를 보여줍니다..

업로드하기 전에 워드 프레스 용 이미지 최적화

블로깅을하는 동안 대부분의 사람들은 이미지를 최적화하기 위해 필요한 모든 단계를 수행하지 않습니다. 일반적으로 사람들은 카메라 나 스마트 폰에서 사진을 찍거나 인터넷에서 사진을 다운로드하거나 컴퓨터 소프트웨어를 사용하여 사진을 만듭니다..

그들은 형식, 이미지 크기 또는 파일 이름을 생각하지 않습니다. 사진이 좋아 보인다면 그들은 인터넷에 대한 준비가되어 있다고 가정합니다. 이미지를 확인하지 않으면 재난을 겪고있는 것입니다.

이미지 크기 조정

이미지 크기 조정

각 사진의 너비와 높이를 확인하기 전에 WordPress 웹 사이트에 이미지를 업로드하지 마십시오. 예를 들어 이미지를 최대 700px로 표시하면 더 넓은 사진을 업로드 할 필요가 없습니다. 그렇게하면 파일 크기가 커져 사이트 속도가 느려지고 출력은 동일합니다. 워드 프레스는 추가 크기를 만들지 만 업로드하기 전에 이미지를 준비하지 않는 것은 아닙니다..

이미지 크기 조정이 빠르고 쉽습니다. Microsoft Paint와 같은 무료 도구가 많이 있습니다. 이미지 크기 조정을위한 무료 온라인 도구를 찾을 수도 있습니다. 쉬운 크기 조정.

이미지 크기는 테마마다 다릅니다. 어떤 것을 사용해야할지 확실하지 않은 경우 WordPress 테마를 자세히 살펴보고 사진을 검사하고 문서를 검색하거나 지원을 요청하십시오..

품질 변경

치수를 변경 한 후에는 이미지 품질 변경을 고려해야합니다. 소프트웨어에 따라 사진 품질을 수정하는 다른 방법이 있습니다. 예를 들어 항상 인기있는 Photoshop을 사용하면 웹용 이미지를 저장할 수 있습니다. 이 옵션을 사용하면 이미지를 낮은 품질로 저장할 수 있지만 사이트에 맞게 최적화됩니다.

또한 사진을 JPEG로 저장하도록 선택하면 Photoshop에서 품질 수준을 선택하라는 메시지가 표시됩니다. 이 경우 품질을 12에서 8로 낮추면 이미지 크기가 크게 줄어드는 반면 품질 차이는 그리 크지 않습니다..

그래도 소프트웨어를 사용하여 사진의 품질을 변경하지 않는 경우 온라인으로 무료로 시도 할 수 있습니다 작은 PNG 수단. 사진을 업로드하고 차이점이 무엇인지 확인하십시오..

올바른 형식을 선택하십시오

크기와 품질이 변경된 후에도 형식 변경을 고려해야합니다. 우선 올바른 형식을 선택하기 만하면 이미지에서 몇 킬로바이트를 제거 할 수 있습니다..

이미지 형식

일반적인 규칙은 매우 간단합니다. 사진이 있으면 JPEG로 만드십시오. 로고, 벡터 이미지 또는 매우 간단한 컴퓨터 생성 그래픽이 있으면 PNG와 함께하십시오. 그래디언트가없는 이미지가 너무 작거나 위에 표시된 것과 같은 간단한 애니메이션을 표시하려는 경우 GIF를 사용할 수 있습니다. 일반적으로 PNG 이미지는 JPEG 이미지보다 훨씬 크기 때문에 형식을 변경하면 이점이 있습니다..

대부분의 경우 이미지를 재구성해도 품질 차이가 크지 않지만 크기 차이는 예상 할 수 있습니다. 다음에 PNG 사진을 업로드하기 전에 사진을 찍고 JPEG로 저장하여 차이를 확인하십시오. 자세한 설명은 PNG, JPEG, GIF 및 SVG의 차이점.

파일 이름 관리

파일 이름이 중요하지 않은 것처럼 들릴 수도 있지만 실제로 잘 알고 있어야합니다. 이미지 파일 이름에는 SEO에 대한 유용한 정보가 들어 있습니다. 다른 사용자가 Google 및 기타 검색 엔진에서 이미지를 찾을 수있게하려면 적절한 이름을 지정해야합니다.

공백을 사용하지 않고 이미지 이름을 지정하는 것이 좋습니다. 페이지와 이미지의 순위를 지정하려면 키워드를 반드시 포함하십시오. 예를 들어, Ferrari California 사진을 업로드하는 경우 파일 이름은 “ferrari-california.jpg”여야합니다. WordPress에 SEO 플러그인을 사용하는 경우 키워드에 대한 alt 태그를 확인한다는 것을 이미 알고 있습니다. 예, 실제로 올바른 이미지 이름을 갖는 것이 중요합니다.

업로드 후 워드 프레스 용 이미지 최적화

컴퓨터에서 이미지를 준비한 후 업로드를 진행할 수 있습니다. 바라건대, 이미지는 올바른 크기와 품질입니다. 형식과 파일 이름이 올바른지 확인했습니다. 업로드 후 WordPress에서 추가 정보를 요청합니다. 메타 정보를 건너 뛰지 마십시오. 쉽게 이미지를 정리하고 SEO 준비를 할 수 있도록 이미지에 대한 세부 정보를 작성하십시오.

제목, 설명, 대체 텍스트 및 캡션

기술을 관리하면서 SEO에 대해 잊지 마십시오. 미디어에 제목과 설명을 항상 추가하십시오. 이것은 Press WordPress 미디어 관리에 도움이되며 더 나은 SEO를 위해 노력할 것입니다. 또한 이미지를 제대로 볼 수없는 방문자에게 표시되는 alt 태그를 잊지 마십시오. 이는 사용자에게 도움이 될뿐만 아니라 SEO에 도움이됩니다. 페이지 순위가 높아지고 사용자가 새 이미지를 더 쉽게 찾을 수 있습니다..

항상 캡션이 필요하지는 않지만 추가 설명이 필요한 이미지 (예 : 스크린 샷)에 캡션을 추가해야합니다..

워드 프레스로 이미지 편집

사진을 계속 편집해야한다는 것을 알고 있다면 파일을 업로드 한 후에도 WordPress에서 편집 할 수 있다는 것을 알아야합니다.. 회전, 자르기 및 크기 조정 사진 변경 이미 업로드했습니다. 축소판이나 다른 모든 크기 만 편집 할 수도 있습니다. 워드 프레스의 기본 편집기는 매우 간단하지만 때때로 절약 할 수 있습니다.

모든 섬네일 재생성

이전 기술의 대부분은 여전히 ​​업로드하려고하는 새 이미지 파일에 도움이됩니다. 그러나 수천 개의 파일이 WordPress 사이트에 이미 업로드되어 있지 않은 경우 수백 개가 있다면 어떻게해야합니까? 걱정하지 마십시오. 여전히 이미지를 최적화하고 크기를 변경할 수 있습니다.

빠른 수정을 위해 백만 명이 넘는 사용자가 사용하는 “무료 재생 섬네일 플러그인”에 관심이있을 수 있습니다. 이미지를보다 세밀하게 제어하려면이 기사의 다음 줄에서 보여줄 이미지 최적화를위한 최고의 WordPress 플러그인을 확인해야합니다..

추가 이미지 크기를 재생성하는 방법

워드 프레스 플러그인 사용

물론, 사이트에서 이미지를 최적화하는 데 도움이되는 수십 개의 WordPress 플러그인이 있습니다. 이미지를 최적화하기위한 최고의 WordPress 플러그인을 보려면 아래로 스크롤하십시오..

필요할 때 지연로드 이미지

때로는 사진의 품질이 크기보다 훨씬 중요합니다. 이는 사진을 최고 수준으로 유지하려는 사진 작가에게 해당됩니다. 파일 크기 나 품질을 저하시킬 위험이 없습니다. 그렇다고해서 최적화를 잊어야한다는 의미는 아닙니다. 이 경우 WordPress의 이미지를 최적화하려면 지연 로딩을 고려해야합니다.

지연로드는 사용자가 필요할 때만 이미지를로드하는 기술입니다. (그들에게 스크롤). 예를 들어 한 기사에 고품질의 사진 20 장을 업로드하면 사이트 속도가 크게 느려집니다. 그러나 이미지가 느리게로드되면 기사가 빠르게 빛나고 필요할 때만 사용자가 이미지를로드하는 순간 사진이로드됩니다..

반응 형 이미지

WordPress 테마의 대부분이 반응 형이지만 이미지가 반응 형인 것은 아닙니다. 큰 이미지를 작은 화면에로드하지 않으려면 사이트에 “추가 이미지 크기를 등록”해야합니다. 테마가 반응 형 이미지를 사용하지 않는 경우 전문가를 고용하여 작업하는 것이 좋습니다..

소셜 미디어를위한 이미지 최적화

소셜 미디어에서 이미지가 잘 보이도록하려면 추가 단계를 수행하고 메타 태그 및 스키마 마크 업을 최적화해야합니다..

Yoast와 같은 SEO 플러그인을 사용하는 경우 설정을 확인하는 것을 잊지 마십시오. 예를 들어 Yoast를 사용하면 소셜 미디어와 관련된 몇 가지 사항을 설정할 수 있습니다. 따라서 SEO-> Social으로 이동하여 Facebook, Twitter, Google+ 및 Pinterest에 정보를 입력하십시오..

더 많은 것을 원하고 추가 소셜 미디어 웹 사이트의 이미지를 최적화하려면 체크 아웃하십시오 WPSSO – 소셜 공유 최적화 및 SEO 플러그인을위한 정확한 메타 태그 + 스키마 마크 업.

WordPress에서 JPEG 이미지를 압축하는 방식 변경

WordPress 웹 사이트에 JPEG 이미지 묶음을 업로드하는 경우 원래 품질이 떨어지는 것을 알 수 있습니다. 워드 프레스가 책임이 있는지 궁금하다면 지금 답을 얻으십시오 – 그렇습니다.!

JPEG 형식으로 이미지를 업로드하면, 워드 프레스는 자동으로 압축을 변경합니다 이미지 품질이 떨어지길 원합니다. 보다 구체적으로, WP는 JPGE에서 90 % 압축을 사용합니다. 이미지가 게시물 미리보기 이미지로만 사용되거나 게시물에 표시되는 경우에는 좋지만 사진을 업로드하는 경우 가능한 한 최상의 이미지를 원합니다.?

운 좋게도 이것을 변경하려면 한 줄의 코드 만 필요합니다..

JPEG 이미지 압축 중지 :

JPEG 이미지를 압축하지 않으려면 다음 코드를 복사하여 functions.php 파일에 붙여 넣기 만하면됩니다.

add_filter ( 'jpeg_quality', function ($ arg) {return 100;});

변경 사항을 저장하고 새 이미지를 업로드 할 준비가 된 것을 잊지 마십시오.

반면 이미지는 그다지 큰 도움이되지 않을 수 있습니다. 따라서 더 압축되어 사이트로드 시간을 절약 할 수 있습니다. 해당 코드 줄의 마지막 숫자를 변경하면 새로 업로드 한 이미지의 품질이 변경됩니다.

JPEG 이미지를 더욱 압축하십시오 :

숫자가 낮을수록 더 많은 이미지가 압축됩니다. 예를 들어 JPEG를 더 압축하려면 다음 코드가 필요합니다.

add_filter ( 'jpeg_quality', function ($ arg) {return 80;});

잊지 마세요; 기본 압축 수준은 90입니다.

중대한: 이것은 functions.php에 코드를 붙여 넣은 후에 업로드 한 이미지에만 영향을 미칩니다. 라이브러리에 이미있는 이미지의 크기와 품질을 변경하려면 플러그인이 필요합니다. 추가 이미지 크기를 재생성하는 방법보기.

WordPress 용 가장 인기있는 이미지 최적화 플러그인

이 기사의 시작 부분에서, 우리는 귀하의 사이트 속도를 높이고 SEO를 향상시키기 위해 WordPress 용 이미지를 최적화하는 방법에 대해 이야기했습니다. 보시다시피, 사용할 수있는 몇 가지 방법이 있습니다. 블로그에 이미지를 업로드하기 전에도 이미지를 관리하는 것이 중요합니다. 그러나 사진이 이미 사이트에 있으면 각 이미지를 개별적으로 다시 최적화 한 다음 다시 업로드하지 못할 수 있습니다..

걱정하지 마십시오. 아무도 당신이 처음에 그렇게 기대하지 않습니다. 워드 프레스에서 가장 많이 사용되는 이미지 최적화 플러그인을 보여 드리기 위해 다음 몇 분 동안 함께 해주세요..

이미지를 최적화하려면 목록에서 플러그인을 선택하면됩니다. 이를 구성하고 플러그인이 수행 할 작업을 선택해야합니다. 그 후에는 미디어 파일 구성을 시작할 수있는 동안 원하는 플러그인으로 작업을 완화하고 위임 할 수 있습니다..

다음 플러그인은 WordPress 사이트의 이미지를 압축하는 데 도움이됩니다. 사이트로드 속도를 높이고 궁극적으로 SEO 개선에 도움이됩니다..

WP 스 머시

가격 : 무료

700,000 개가 넘는 활성 설치로 WP Smush는 WordPress를위한 최고의 이미지 최적화 플러그인 중 하나 여야합니다. 다른 압축 기술을 사용하여 이미지를 빠르게 최적화 할 수 있습니다. WP Smush로 이미지를 압축 할 때 좋은 점은 이미지 품질이 떨어지지 않는다는 것입니다. 우리를 믿지 않습니까? 플러그인 테스트.

WordPress 용 그림 준비에 대해 이야기 할 때 크기 조정이 최적화 프로세스의 중요한 부분이라고 언급했습니다. 이 플러그인을 사용하면 WP Smush에서 최대 크기를 설정할 수 있으므로 걱정할 필요가 없습니다. 이렇게하면 라이브러리에 추가하기 전에 더 큰 모든 이미지가 자동으로 축소됩니다.

이 환상적인 플러그인은 JPEG, GIF 및 PNG 파일과 함께 사용할 수 있습니다. 모든 디렉토리에서 작동하며 첨부 파일을 자동으로 관리하며 다중 사이트에서도 작동합니다. 각 이미지를 수동으로 조작하거나 50 개의 이미지를 대량으로 편집 할 수 있습니다. 더 나은 결과와 더 많은 옵션을 원한다면 WP Smush PRO를 확인하십시오..

EWWW 이미지 최적화

가격 : 무료

재미있는 이름 뒤에는 WordPress에 가장 널리 사용되는 이미지 최적화 플러그인 중 하나가 있습니다. 앞에서 언급 한 것과 마찬가지로 EWWW Image Optimizer는 품질에 영향을주지 않고 이미지를 압축 할 수 있습니다. 플러그인이 몇 초만에 사이트 속도를 높일 수 있다고 생각하면 이미 다운로드하는 중입니다. 그렇게하면 이미지를 대량으로 최적화 할 수 있으며 GRAND FlaGallery, NextCellent 및 NextGEN과 같은 갤러리에서도 자체 대량 최적화 페이지를 얻을 수 있습니다.

WordPress에서 WP_Image_Editor 클래스를 사용하는 모든 이미지는 자동 최적화, 다른 모든 것들에 대해 수동으로 마법을 사용할 수 있습니다. 최적화하려는 폴더를 선택하는 것이 좋습니다. 이것과 클래스를 사용하는 플러그인에 대한 자세한 내용은 공식을여십시오. EWWW 이미지 최적화 페이지 WordPress 리포지토리.

JPEG 및 PNG 이미지 압축

가격 : 무료

작은 압축 이미지

워드 프레스 로고가있는 귀여운 팬더가이 플러그인에 대해 더 배우고 싶지 않다면, 우리는 무엇을할지 모릅니다. 팬더가 익숙해 보인다면 TinyPNG 웹 사이트에서 이미지를 압축하는 데 도움이되는 것과 동일하기 때문입니다. 예, 동물이 원래 생각했던 것보다 더 다재다능한 것 같습니다. 하지만 플러그인에 집중하자.

이 플러그인을 사용하면 Panda가 자동으로 이미지를 최적화합니다. 새 플러그인을 업로드 할 때마다 플러그인이 대신 작업을 수행합니다. 그래도 미디어 라이브러리로 이동하여 개별 사진을 최적화하거나 대량으로 수행 할 수 있습니다..

JPEG 및 PNG 이미지 압축은 애니메이션 PNG도 지원하고 멀티 사이트에서 완벽하게 작동하며 WooComerce와 호환되며 WP Offload S3에 문제가 없습니다..

플러그인의 가장 큰 장점은 모든 이미지의 최대 너비 및 높이 속성을 설정할 수 있다는 것입니다. 메타 데이터의 기능에 대해 걱정하고 있다면 걱정하지 마십시오. 팬더는 모든 정보를 그대로 유지합니다.

파일 크기 제한이 없으며 대시 보드 위젯을 설정할 수 있으며 WordPress 모바일 앱에서도 작동합니다. JPEG 및 PNG 이미지 압축은 100,000 개가 넘는 활성 설치를 가지고 있으며 WordPress에 가장 적합한 이미지 최적화 플러그인 목록을 제공합니다..

광기

가격 : 무료

광기

이 플러그인의 표지 이미지가 당신을 놀라게 할 수도 있지만 잠시 시간을내어 Imsanity의 모든 기능을 살펴보십시오. 아, 플러그인 이름조차 미치겠어요? 플러그인 이름에 문제가 없으면 제공 할 것이 많음을 알 수 있습니다.

Imsanity는 이미지의 크기를 자동으로 조정하고 최대 크기를 설정할 수 있으며 대량 크기 조정 옵션도 제공합니다. 이미 블로그에 최적화가 필요한 수백 장의 사진이있는 경우 중요합니다.

이 무료 플러그인은 플러그인 설정에 많은 어려움을 겪고 싶지 않은 경우 훌륭한 옵션입니다. Imsanity를 설치 및 활성화하고 몇 가지 옵션을 설정하기 만하면 잊을 수 있습니다. 이미지 최적화를위한 자체 방식을 관리합니다.

BMP 이미지를 JPG로 변환 할 수있는 옵션이 마음에 들었습니다. 얼마 전에 실수로 업로드 한 BMP 파일이 많은 경우에 대비해 생명을 구할 수 있습니다..

ShortPixel 이미지 옵티 마이저

가격 : 무료

ShortPixel 이미지 옵티 마이저

30,000 개가 넘는 활성 설치를 가진 ShortPixel Image는 여전히 WordPress에서 가장 널리 사용되는 이미지 최적화 플러그인 중 하나입니다. 플러그인에는 기능이 포함되어 있으며 최적화 할 이미지가 많은 사이트의 필수 아이템입니다..

ShortPixel Image Optimizer는 JPG, PNG, GIF 및 PDF 문서를 최적화 할뿐만 아니라 사용자를 위해 JPEG, PNG 또는 GIF 이미지를 WebP로 변환. 플러그인은 다른 갤러리 플러그인과 잘 작동하며 사이트에서 HTTP 또는 HTTPS를 사용하는지 상관하지 않습니다. 이미지에서 EXIF ​​데이터를 제거 할 수 있습니다 (사진 작가가 좋아하는 것).

플러그인은 이미 최적화 된 이미지를 인식하므로 필요할 때 이미지를 건너 뜁니다. 자동 최적화를 허용하거나 허용하지 않으며이 환상적인 플러그인으로 훨씬 더 많은 일을 할 수 있습니다. 모든 기능을 보려면 저장소의 공식 페이지를 확인하십시오..

옵티머스 – 워드 프레스 이미지 옵티 마이저

가격 : 무료

옵티머스

앞에서 언급 한 플러그인과 마찬가지로 Optimus는 WordPress에 맞게 이미지를 최적화하며 사진의 품질에 영향을 미치지 않으면 서이를 수행합니다. 플러그인이 자동으로 작업하도록하거나 옵션을 끄고 필요할 때만 이미지를 최적화 할 수 있습니다.

Optimus는 멀티 사이트에서 작동하며 WordPress 전자 상거래 사이트에 익숙하지 않으며 WordPress 모바일 앱 및 Windows Live Writer에 최적화되어 있습니다. 한 줄의 코드를 건드릴 필요없이 사이트 속도가 빨라집니다. 플러그인은 훨씬 더 많은 것을 제공하지만 프리미엄 버전을 선택해야합니다. 자세한 내용을 보려면 WordPress 플러그인 저장소의 공식 페이지로 이동하십시오.

WordPress에서 비디오 및 이미지에 대한 지연 로딩 추가

웹 사이트에 많은 비디오 및 이미지 자료를 추가하기 시작하면 느리게 로딩되기 시작합니다. 어디에서 왔든 비디오와 큰 이미지는 사이트에서 무거운 중량으로 작용하여 방문자가 모든 콘텐츠를로드하는 데 필요한 시간보다 훨씬 오래 기다릴 수 있습니다. WordPress를 사용하면 큰 문제가되어서는 안되며 상황을 쉽게 해결하는 방법은 다음과 같습니다.

PHP에 대해 잘 알고 있다면 이미지에 지연 로딩을 추가하고 동료가 작성한 무한 스크롤에 대한 훌륭한 기사가 있습니다. 우아한 테마.

그렇지 않다면, 다음 몇 줄에서 가장 인기있는 게으른 로딩 플러그인 중 일부를 언급 할 것입니다. 사이트를 더 빠르게로드. 플러그인을 설치하고 몇 가지 간단한 단계만으로 설정하면됩니다..

비디오 게으른로드

가격 : 무료

비디오 게으른로드

Youtube 및 Vimeo 비디오가 많은 경우이 플러그인 설치를 고려해야합니다. 일단 설정하면 플러그인이 비디오에 이미지를 배치하고 그로 인해 웹 사이트가 훨씬 빠르게로드됩니다. 방문자가 비디오를 스크롤하면이 이미지 위에 “재생”버튼이 표시됩니다. 클릭 후 비디오가로드되고 재생됩니다. 간단한 데모는 개발자 사이트에서 볼 수 있습니다.

WP YouTube Lyte

가격 : 무료

WP YouTube Lyte

이 플러그인은 빠르고 쉬운 방법으로 작업을 수행합니다. 설치 한 후 Youtube 비디오에 링크를 추가하거나 단축 코드를 사용하여 추가하십시오. 일반 비디오, 재생 목록 추가 또는 선택한 비디오의 오디오 만 추가 중에서 선택할 수 있습니다. 그 후에 유튜브 비디오가 이미지 위에 이미지를 가져 와서 게으른 로딩을 가능하게합니다. 비디오 나 오디오를 시작하려면 이미지를 클릭하십시오..
개발자 사이트에서 데모보기.

a3 게으른 짐

가격 : 무료
데모 1
데모 2

a3 게으른 짐

이것은 귀하의 모바일 사이트 전용입니다. 휴대 기기 방문자에게 보여줄 이미지 및 / 또는 비디오가 많으면 a3 지연로드를 살펴보십시오. 그것은 당신이 당신의 이미지와 비디오에 지연 로딩을 추가 할 수있게하고 플러그인은 당신이로드하는 내용을 스크롤하는 동안 사용자에게 나타날 전환 효과를 선택할 수 있습니다.

관리 영역에서 지연로드하려는 컨텐츠를 쉽게 켜고 끌 수 있습니다. 켜져있는 경우 방문자가 콘텐츠의 해당 부분으로 스크롤 할 때만 콘텐츠가로드됩니다..
1000 개의 이미지가있는 멋진 데모가 있습니다. 각각의 이미지는 스크롤 한 후에 만로드됩니다. 이 플러그인 게으른 비디오도로드하므로 위의 링크를 클릭하면 볼 수있는 비디오 데모가 있습니다.

BJ 게으른 짐

가격 : 무료

BJ 게으른 짐

비디오를 지원할 필요가없고 이미지 만 느리게로드하려면이 WP 플러그인을 확인하십시오. 설치 및 설정되면 이미지, 축소판 그림, Gravatar 사진 및 iframe을 자리 표시 자로 바꿉니다. 이전에 언급 한 플러그인과 유사하게 사용자가 방문한 후에 만 ​​콘텐츠를로드합니다..

게으른로드하려는 이미지 또는 비디오인지에 관계없이 위에서 언급 한 플러그인 중 하나가 두 번째로 도움이 될 것입니다. 그들 모두는 무료이므로 적어도 하나의 플러그인을 시도하지 않은 것에 대한 변명의 여지가 없으며 어깨의 무게가 얼마나되는지 볼 수 있습니다. 물론 동일한 기능을 가진 다른 많은 플러그인이 있으며 자유롭게 찾아보고 사용해보십시오..

매력적인 이미지로 전후 이미지 표시

이전 / 이후 이미지의 많은 예를 이미 보았습니다. 당신에 대해 모르지만 “전후”라는 문구를 볼 때 가장 먼저 염두에 두어야 할 것은 사람들이 운동 프로그램 전후에 몸을 보여주는 체력 단련 프로그램입니다.

생각해 보면 대부분의 웹 사이트는 간단한 접근 방식을 사용하여 차이점을 보여줍니다. 두 이미지를 모두 가져 와서 서로 옆이나 다른 곳에 배치합니다. 같은 결과를 원한다면이 기사를 읽지 않았을 것입니다..

문제 전 / 후 문제를 해결할 수있는 시각적으로 놀라운 방법이 있으며 손이 닿는 곳에있는 경우 어떻게해야합니까? 글쎄, a setup이 있고 최종 결과가 정말 훌륭하기 때문에 개발자를 칭찬 할 것입니다..

스물 스물 스물

가격 : 무료

스물 스물 스물

Twenty Twenty는 WordPress 플러그인 저장소에서 무료로 다운로드 할 수있는이 멋진 플러그인의 이름입니다.

플러그인을 사용하면 한 이미지를 다른 이미지 위에 놓고 슬라이더를 사용하여 이미지를 숨기거나 표시 할 수 있습니다. “데모”를 보시면 우리가 무슨 말을하는지 볼 수 있습니다.

자, 이제이 작은 플러그인에 푹 빠졌을 때이 놀라운 효과를 만드는 방법을 알아 보겠습니다. 데모 효과를 재현하는 것이 비교적 쉽지만 기본 HTML에 대한 방법을 알아야합니다. 가자:

  1. 새 게시물을 만들거나 기존 게시물을 엽니 다
  2. 게시물에 두 개의 이미지를 삽입하십시오. Visual Editor에서 작업하는 경우 이미지가 다른 이미지 위에 표시되어야합니다. 텍스트 편집기에서 작업하는 경우 다음과 유사한 코드가 표시됩니다.
  3. 
    
    
    
  4. 첫 번째 이미지 앞에 [twentyty] 태그를 입력하십시오
  5. 두 번째 후 [/ twenty] 태그를 입력하십시오
  6. 텍스트 편집기에서 다음과 같이 끝내야합니다.

    [이십]
    
    
    
    [/ 이십]
    
  7. 최상의 결과를 얻으려면 사진의 크기가 같아야합니다
  8. 게시물을 미리 보거나 게시하고 그림 전후에 시각적으로 놀라운 감상

대화 형 이미지를 만드는 방법 – 설명 및 링크 추가, 추가

오늘날 멀티미디어없이 웹 사이트를 운영하기는 어렵다. 이미지, 비디오 및 음악은 거의 모든 웹 사이트의 일부입니다. 일반적인 인터넷 사용자는 시각 자극에 크게 의존하므로 시각 및 사이트의 대화식 부분을 관리해야합니다. 이미지가있는 기사 수신 94 % 더 많은 조회 없는 사람보다. 또한 웹 사이트의 멀티미디어가 콘텐츠 마케팅 ROI를 향상시킬 수 있다는 것은 이미 알려진 사실입니다..

귀하의 사이트에서 이미지를 관리하도록 설득 할 필요가 없기를 바랍니다. 기사에 이미지를 사용하지 않아도 (필수) 추천 이미지를 사용합니까? 워드 프레스 사이트에서 이미지를 관리하고, 사진 관련 테마를 제공하고, 인스 타 그램을 워드 프레스 사이트에 연결하고, 훨씬 더 많은 작업을 수행 할 수있는 갤러리 플러그인이 많이 있습니다. 그러나 대화 형 콘텐츠를 더 만들고 싶다면 어떻게해야합니까??

우선, 사용자가 좋아할 전후 이미지 효과 추가에 관심이있을 수 있습니다. Automattic이 VR을 WordPress.com에 도입 한 후 점점 인기를 얻고있는 ‘WordPress의 가상 현실’을 잊지 마십시오. 여전히 빠진 것이 있습니다. 클릭 가능한 부품으로 대화 형 이미지를 만들 수 있습니까? 예, 가능합니다. 우리는 그것이 얼마나 재미 있고 쉬운 지 보여 드리려고합니다..

관심을 끌기

가격 : 무료
데모

이 플러그인의 첫 번째 특징은 완전히 무료라는 것입니다! WordPress 리포지토리의 다른 플러그인과 마찬가지로 몇 분 만에 다운로드, 설치 및 활성화 할 수 있습니다. 무료 버전을 사용하면 하나의 대화식 이미지로 작업 할 수 있습니다. 더 많은 것을 원한다면 PRO 버전을 선택해야하지만 나중에 이야기 할 것입니다..

플러그인은 반응이 좋으며 어떤 기기에서도 대화 형 이미지가 제대로 표시 될까 걱정할 필요가 없습니다. 이미지는 화면 크기에 따라 확장 될뿐만 아니라 대부분의 최신 브라우저 (데스크톱 및 모바일)에서 작동합니다. Draw Attention은 새 브라우저에 표시 될 때 캔버스 요소를 사용하지만 이전 맵에로드하면 이미지 맵으로 대체됩니다..

풍모

이 간단한 플러그인이 얼마나 강력한 지 보여주는 예제를보기 전에 Draw Attention에서 무엇을 기대해야하는지 살펴 보겠습니다.

  • 무승부 – 이미지를 업로드 한 후 이미지에 도형을 그릴 수 있습니다. 이미지에서 선택 가능 / 클릭 가능하게 될 부분을 선택하십시오
  • 그림 물감 – 사이트 디자인에 적합한 핫스팟을 만들 수 있도록 색상을 사용자 정의
  • 호버에 강조 – 사용자가 선택한 부분 위로 마우스를 가져 가면 이미지의 다른 부분 표시
  • 더 많은 정보 표시 – 이미지의 선택된 부분에 대한 자세한 정보를 표시합니다
  • URL로 이동 – 선택을 클릭하면 사용자를 URL로 리디렉션

주의 설정을 그립니다

예 – 하와이의 대화식지도

데모 사이트의 예제를 사용하여 Draw Attention으로 정확히 수행 할 수있는 작업을 보여줍니다. 플러그인으로 만들 때 하와이의 대화식지도가 어떻게 보이는지 봅시다..

가장 먼저해야 할 일은 하와이 섬의 이미지를 찾는 것입니다. 로 이동 한 후 주의를 끌기-> 이미지 편집, 오른쪽 사이드 바의 영역에 사진을 업로드해야합니다. 이미지가로드되면 재미를 시작할 수 있습니다.

여기에서 하이라이트 색상 (색상, 테두리, 불투명도 등)을 선택하고“추가 정보 상자”(이미지, 제목, 텍스트 색상 등)의 스타일을 지정합니다. 이미지의 색상을 모두 수동으로 선택하지 않으려면 오른쪽 사이드 바에서 색상 구성표를 빠르게 선택할 수 있습니다.

주의 그리기-WordPress에서 대화 형 이미지를 만드는 방법

가장 마술적인 부분은 핫스팟 지역 설정 화면. 여기에서 이미지를 전체 크기로로드 할 수 있습니다. 이제 그림을 시작하고 새로운 핫스팟을 생성하기 만하면됩니다. 원하는만큼 많은 포인트를 추가 할 수 있으며 원하는만큼 포괄적 인 선택을 할 수 있습니다. 많은 핫스팟을 만들 수 있으며 각각 고유 한 설정을 가질 수 있습니다.

따라서이 예에서는 섬 중 하나를 선택해야합니다. 섬의 제목을 선택하고 사용자가 핫스팟을 가리면 표시되는 설명 및 추가 이미지를 추가하십시오 (위의 GIF 이미지의 오른쪽 부분)..

인터랙티브하고 싶은 각 섬에 대해이 과정을 반복해야합니다. 핫스팟이 준비되면 오른쪽에서 단축 코드를 복사하십시오. 게시물, 페이지, 위젯 또는 새로운 대화 형지도를 표시하려는 위치에 ‘짧은 코드’를 붙여 넣으십시오. 사용자가 선택을 클릭하면 다른 페이지로 사용자를 리디렉션하려면 설명 대신 URL을 선택하면됩니다. 그렇게 쉬운!

프로 버전

하나의 이미지 만 있으면 무료 버전이 완벽하지만 프로 버전 사이트에서 원하는만큼 대화 형 이미지를 가질 수 있습니다. 이것이 가장 중요한 고려 사항이지만 PRO 버전은 여러 이미지 이상을 제공합니다..

레이아웃 옵션 기능을 사용하면 사진의 선택한 부분에 대한 자세한 정보를 표시 할 수 있습니다. 예를 들어, 사용자가 이미지의 선택된 부분 위로 마우스를 가져간 후 표시되는 간단한 툴바 또는 간단한 툴바에 정보를 표시하게됩니다..

미리 정의 된 20 개의 색상 표도 있으므로 각 색상을 수동으로 사용자 지정할 필요가 없습니다. PRO 버전은 단일 사이트 라이센스에 대해 $ 74의 비용이 들지만, 대화식 이미지가 두 개 이상 필요한 경우, 이는 당연합니다.

추가 이미지 크기를 재생성하는 방법

WordPress 테마에서 “새 이미지 크기”를 등록하는 것이 상대적으로 쉽습니다. 시스템에 이미지의 크기를 말하고 이름을 지정하고 자르기 방법을 결정한 후에는 원하는 위치에 이미지를 자유롭게 배포 할 수 있습니다. 그러나 오래된 이미지는 어떻습니까??

우리가 보여준 기술 중 하나를 사용한 경우 새 이미지를 위해 잔디를 준비했습니다. 게시물 미리보기 이미지에 새로 등록한 이미지 크기를 사용하는지 또는 작성자가 게시물에서 이미지 크기를 사용할 수 있는지 여부, 새로운 규칙은 변경 후 업로드 된 이미지에만 적용됩니다 functions.php 파일에서. 이전 이미지를 변경하려면 썸네일 재생성 플러그인을 사용하는 것이 좋습니다..

썸네일 재생성 :

가격 : 무료
  1. 이동 플러그인-> 새로 추가
  2. “축소판 재생성”검색
  3. 플러그인 설치 및 활성화
  4. 로 이동 도구-> 재생. 축소판

모든 이미지의 크기를 조정하려면 “모든 섬네일 재생성”버튼을 클릭하고 플러그인이 열심히 일할 때까지 기다리십시오..

추가 이미지 크기를 재생성하는 방법

크기가 조정될 이미지를 보거나 이미지의 일부만 크기를 조정하려면 미디어 라이브러리로 이동하여 “대량 작업”에서 새 옵션을 찾은 다음 갤러리.

플러그인의 장점은 원본 이미지를 삭제하지 않는다는 것입니다. 테마에 사용할 수있는 새로운 이미지 크기 만 만들며, 나중에 사용하거나 필요하지 않은 경우 수동으로 삭제할 수 있도록 원본 이미지를 남겨 둡니다..

그게 다야 새로운 미리보기 이미지를 즐기거나 체크 아웃하십시오 간단한 이미지 크기 같은 일을 할 수있는 플러그인.

jQuery로 너비 및 높이 이미지 속성 제거

WordPress 게시물에 이미지를 추가 할 때 시스템은 자동으로 높이 및 너비 속성을 그림에 추가합니다. 일반적으로 좋은 일이지만 모든 이미지가 이러한 속성을 얻는다는 사실이 마음에 들지 않는 경우가 있습니다.

업로드 시점에서 속성을 바로 제거하려면 지난 번에 보여 드린 간단한 기능을 통해이를 수행 할 수 있습니다..

그러나 기사를 읽거나 직접 기능을 사용하면 기능이 WP 시스템에 설치된 후 업로드 된 이미지에만 영향을주는 것을 알 수 있습니다. 이미 삽입 된 이미지가 포함 된 게시물로 가득 찬 데이터베이스가있는 경우 위에서 언급 한 기능은 기존 이미지 속성에 큰 도움이되지 않습니다..

각 이미지를 수동으로 통과 할 수없고 너비와 높이를 하나씩 삭제할 수 없으므로 게시물에 포함 된 모든 기존 이미지의 속성을 제거하는 다른 기능이 필요할 수 있습니다. 이 경우 몇 줄의 jQuery 코드로 너비 및 높이 이미지 속성을 자동으로 제거하는 간단한 방법을 보여 드리기 위해 올바른 위치에 있습니다. 이전 문구에 겁내지 마십시오. jQuery가 무엇인지 알 필요가 없으며 다음 3 단계 만 따르면 순식간에 완료됩니다.

너비와 높이 이미지 속성을 제거하십시오.

  1. 테마 폴더에서 header.php 파일을여십시오
  2. 이 코드를 복사하여 붙여 넣기 과 태그 :
  3.  
  4. 변경 사항을 저장하다

그리고 끝났어요! 코드는 이미지가 포함 된 게시물을 연 후 마술을 수행하고 너비 및 높이 태그를 제거합니다..

Media Uploader에서 사용자 정의 이미지 크기를 만드는 방법

미디어 업 로더를 사용하여 WordPress에서 이미지를 처리하는 경우 이미지에 대한 다양한 옵션이있을 수 있습니다. 많은 것 중에서 기사로 보낼 수있는 이미지 크기를 선택할 수 있습니다.

썸네일, 중형, 대형 및 전체 크기 옵션 중에서 선택할 수 있지만 모든 옵션에는 미리 정의 된 값이 있습니다. 따라서 맞춤 테마를 사용하는 경우 각 이미지의 너비와 높이가 계속해서 또 다시 바뀌는 경향이 있습니다..

실제로는 그렇게 할 필요가 없습니다. add_image_size ()라는 깔끔한 작은 함수가 있는데 이는 개발자에게 훌륭한 도구입니다. 그리고이 기사 후에도 유용 할 것입니다..

테마에 맞춤 너비가 있으며 이미지를 완벽하게 삽입하기 위해 이미지를 쉽게 포함하고 싶다고 가정 해 보겠습니다. 너비가 666 픽셀이라고 가정 해 봅시다. 너비를이 숫자로 설정 한 이유는 설명하지 않습니다. 그러려면 Media Uploader에 라디오 버튼을 추가해야합니다. 아래 코드를 사용하면 원래 크기의 절반 크기 인 크기를 하나 더 추가하게됩니다..

  1. functions.php 파일을여십시오
  2. 이 코드를 복사하여 붙여 넣으십시오.
  3. custom_image_sizes () 함수 {
    add_image_size ( 'one-size', 333, 333, true);
    add_image_size ( '다른 크기', 666, 666, true);
    }
    
    add_action ( 'init', 'custom_image_sizes');
    
    show_image_sizes ($ sizes) 함수 {
    $ sizes [ 'one-size'] = __ ( '사용자 정의 크기 1', 'isitwp');
    $ sizes [ 'another-size'] = __ ( '사용자 정의 크기 2', 'isitwp');
    $ sizes를 돌려줍니다;
    }
    
    add_filter ( 'image_size_names_choose', 'show_image_sizes');
  4. 변경 사항을 저장하다
  5. “첨부 파일 디스플레이 설정”아래에 새 크기 옵션이 표시되는 미디어 업 로더에서 이미지를 추가하십시오.

모든 웹 사이트의 자동 스크린 샷을 생성하고 게시물에 이미지로 게시하십시오.

웹 사이트의 썸네일을 표시하려면 웹 사이트로 이동하거나, 스크린을 인쇄하거나, 프로그램 또는 브라우저 애드온으로 스크린 샷을 작성해야합니다. 그런 다음 이미지를 수정하고 올바른 크기로 잘라내어 WordPress에 업로드하여 게시물에서 스크린 샷을 사용할 수 있도록해야합니다..

매번 스냅 샷을 찍을 필요가 없다면 문제가되지 않지만 다른 웹 사이트의 스크린 샷을 더 자주 사용한다면 멋진 기능이 있다는 것을 알게되어 기쁠 것입니다. 당신의 시간과 신경을 절약.

가이드의이 부분에서는 원하는 웹 페이지의 스냅 샷을 만드는 데 사용할 수있는 짧은 코드를 만드는 완전한 기능을 보여 드리겠습니다..

자동 스크린 샷 생성 :

  1. 함수 열기
  2. 다음 코드를 복사하여 붙여 넣습니다.
  3. 함수 wp_webscreen ($ atts, $ content = NULL) {
    추출 (shortcode_atts (배열 (
    "snap"=> 'http://s.wordpress.com/mshots/v1/',
    "url"=> 'http://www.firstsiteguide.com',
    "alt"=> 'wploop',
    "w"=> '600', // 너비
    "h"=> '450'// 높이
    ), $ atts));
    
    $ img = ''. $ alt. '';
    $ img를 반환;
    }
    add_shortcode ( "screen", "wp_webscreen");
  4. 배열에서 기본 변수 변경
  5. 변경 사항을 저장하다

이 기능은 워드 프레스 웹 사이트 어디서나 쉽게 사용할 수있는 단축 코드를 만듭니다. 예를 들어 게시물, 사이드 바 위젯 또는 바닥 글에서 웹 페이지의 스크린 샷을 사용하려는 경우 짧은 지점에서 바로 가기 코드를 c / p하면됩니다.

[screen url =”http://www.firstsiteguide.com”alt =”fsg”w =”600 ″ h =”450 ″]

이 기능의 가장 큰 장점은 이미지를 동적 URL로 저장한다는 것입니다. 즉, 짧은 코드로 스냅 샷을 생성하면 나중에 자동으로 새로 고쳐지고 항상 짧은 코드에 지정된 웹 사이트의 현재 모양을 보여줍니다..

단축 코드의 매개 변수를 직접 변경할 수 있습니다. 다른 URL의 스냅 샷을 만들거나 다른 차원에서 스냅 샷을 만들려면 functions.php 파일에서 코드를 수정할 필요가 없습니다..

예:

Google의 스크린 샷을 만들어 200 × 400 픽셀로 설정한다고 가정 해 보겠습니다.

[screen url =”http://www.google.com”alt =”Google”w =”200 ″ h =”400 ″]

짧은 코드를 단추에 저장하여 단추를 한 번 클릭하여 게시물에 삽입 할 수있어 모든 것을 훨씬 쉽게 만들 수 있습니다..

결론

WordPress 사이트의 이미지를 개선하기 위해 언급 한 모든 플러그인과 기능을 설치할 필요는 없습니다. 그러나 이미지를 최적화하거나 어떤 방식 으로든 이미지를 개선하는 데 도움이되는 몇 가지 팁을 찾아 보시기 바랍니다..

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