WordPress용 이미지를 개선하고 최적화하는 방법

이미지가 너무 커서 인터넷을 통해 로드할 수 없는 지 오래입니다. 오늘날 웹사이트는 웹사이트 없이 존재할 수 없습니다. 인터넷 속도가 수년에 걸쳐 극적으로 증가했지만 블로그에서 사진을 관리하는 것은 매우 중요합니다.

사이트에 이미지를 업로드하기 쉽다고 해서 아무런 준비 없이 업로드해야 하는 것은 아닙니다. 최적화되지 않은 이미지는 실제로 여러 면에서 사이트에 피해를 줄 수 있습니다. 방문자가 귀하를 생각하는 방식에 영향을 미치는 것부터 귀하의 웹사이트 속도 및 SEO 순위에 이르기까지. 아직 생각하지 못했다면 WordPress에서 이미지를 개선하는 몇 가지 방법을 보여 드리겠습니다.

사이트 속도를 높이고 SEO를 개선하기 위해 WordPress용 이미지를 최적화하는 방법

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

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

또한 이미지를 최적화할 수 있는 여러 단계가 있음을 알아야 합니다. 사진은 블로그에 올리기 전에도 관리할 수 있고, 업로드 후에 해도 됩니다.

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

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

우리는 사이트 로드 속도를 느리게 만드는 정확한 이미지를 보여주기도 하는 GTmetrix를 사용하고 싶습니다.

업로드하기 전에 WordPress용 이미지 최적화

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

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

이미지 크기 조정

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

이미지 크기 조정은 빠르고 쉽습니다. Microsoft 그림판과 같은 많은 무료 도구가 도움이 될 것입니다. Easy Resize와 같은 이미지 크기 조정을 위한 무료 온라인 도구도 찾을 수 있습니다.

이미지 크기는 테마마다 다릅니다. 어떤 것을 사용해야 할지 잘 모르겠다면 WordPress 테마를 자세히 살펴보고 사진을 검사하고 문서를 검색하거나 지원에 도움을 요청하세요.

품질 변경

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

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

여전히 사진 품질을 변경하는 소프트웨어를 사용하지 않는 경우 무료 온라인 Tiny PNG 도구를 사용해 볼 수 있습니다. 사진을 업로드하고 어떤 차이가 있는지 확인하십시오.

올바른 형식 선택

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

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

대부분의 경우 이미지를 다시 포맷해도 품질에는 큰 차이가 없지만 크기에는 차이가 있을 수 있습니다. 다음에 PNG 사진을 업로드하기 전에 한 번 촬영하고 JPEG로 저장하여 차이점을 확인하십시오. 자세한 설명은 PNG, JPEG, GIF, SVG의 차이점을 확인해주세요.

파일 이름 관리

파일 이름이 중요하지 않게 들릴 수 있지만 실제로는 매우 알고 있어야 합니다. 이미지 파일의 이름은 SEO에 중요한 정보를 담고 있습니다. 다른 사람들이 Google 및 기타 검색 엔진에서 귀하의 이미지를 찾을 수 있도록 하려면 적절한 이름을 지정해야 합니다.

공백을 사용하지 않고 이미지 이름을 지정하는 것이 좋습니다. 페이지와 이미지의 순위를 지정하려면 키워드를 포함하는 것을 잊지 마십시오. 예를 들어, 페라리 캘리포니아 사진을 업로드하는 경우 파일 이름은 "ferrari-california.jpg"여야 합니다. WordPress용 SEO 플러그인을 사용하는 경우 키워드에 대한 alt 태그를 확인한다는 것을 이미 알고 있습니다. 예, 적절한 이미지 이름을 갖는 것이 정말 중요합니다.

업로드 후 WordPress용 이미지 최적화

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

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

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

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

WordPress로 이미지 편집

사진에 여전히 추가 편집이 필요하다는 것을 알고 있다면 파일을 업로드한 후에도 WordPress에서 편집을 허용한다는 사실을 알아야 합니다. 이미 업로드한 사진의 회전, 자르기 및 크기 조정을 변경합니다 . 썸네일만 편집하거나 다른 모든 크기를 편집할 수도 있습니다. WordPress의 기본 편집기는 매우 간단하지만 때때로 저장할 수 있습니다.

모든 썸네일 재생성

이전 기술의 대부분은 아직 업로드하려는 새 이미지 파일에 도움이 됩니다. 하지만 이미 WordPress 사이트에 업로드된 파일이 수천 개는 아니더라도 수백 개라면 어떻게 될까요? 걱정하지 마세요. 여전히 해당 이미지를 최적화하고 크기를 변경할 수 있습니다.

빠른 수정을 위해 백만 명이 넘는 사용자가 사용한 무료 Regenerate Thumbnails 플러그인에 관심이 있을 수 있습니다. 이미지를 더 많이 제어하려면 이 기사의 다음 줄에서 보여줄 이미지 최적화를 위한 최고의 WordPress 플러그인을 확인해야 합니다.

WordPress 플러그인 사용

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

필요할 때 이미지를 지연 로드

때로는 사진의 품질이 크기보다 훨씬 더 중요합니다. 이것은 사진을 최고 수준으로 만들고 싶어하는 사진 작가에게 주로 해당됩니다. 그들은 파일의 크기나 품질을 줄이는 위험을 감수할 수 없습니다. 그렇다고 해서 최적화를 잊어버려야 하는 것은 아닙니다. 이 경우 WordPress에 대한 이미지를 최적화하려면 지연 로딩을 고려해야 합니다.

지연 로드는 사용자가 필요할 때만 이미지를 로드하는 기술입니다 (스크롤). 예를 들어, 한 기사에 20개의 고품질 사진을 업로드하면 사이트 속도가 엄청나게 느려집니다. 그러나 이미지를 지연 로드하면 기사가 번개처럼 빨라지고 필요할 때만 사용자가 사진을 보는 순간에만 사진이 로드됩니다.

반응형 이미지 보유

대부분의 WordPress 테마는 반응형이지만 이미지도 반응형이라는 의미는 아닙니다. 작은 화면에 큰 이미지가 로드되는 것을 원하지 않으므로 사이트에 대한 추가 이미지 크기를 등록해야 합니다. 테마에 반응형 이미지가 사용되지 않는 경우 해당 작업에 전문가를 고용하는 것이 좋습니다. 생각보다 쉽지 않습니다.

소셜 미디어용 이미지 최적화

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

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

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

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

WordPress 웹 사이트에 JPEG 이미지를 업로드하는 경우 원본 품질이 저하되는 것을 보았을 수 있습니다. WordPress에 책임이 있는지 궁금하다면 이제 답을 찾을 수 있을 것입니다. 예, 그렇습니다!

JPEG 형식으로 이미지를 업로드하면 WordPress는 자동으로 압축을 변경 하고 이미지의 품질 저하를 결정합니다. 더 구체적으로 말하면 WP는 JPGE에서 90% 압축을 사용합니다. 이미지가 게시물 썸네일로 사용되거나 게시물에 표시되는 용도로만 사용되는 경우에는 좋지만 사진을 업로드하는 경우에는 가능한 한 최고가 되기를 원합니다. 그렇죠?

운 좋게도 이것을 변경하려면 한 줄의 코드만 있으면 됩니다.

JPEG 이미지 압축 중지:

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

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

변경 사항을 저장하는 것을 잊지 마십시오. 그러면 새 이미지를 업로드할 준비가 된 것입니다.

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

JPEG 이미지를 훨씬 더 압축:

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

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

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

WordPress용으로 가장 많이 사용되는 이미지 최적화 플러그인

이 기사의 시작 부분에서 WordPress용 이미지를 최적화하여 사이트 속도를 높이고 SEO를 개선하는 방법에 대해 이야기했습니다. 보시다시피 사용할 수 있는 몇 가지 다른 방법이 있습니다. 블로그에 업로드하기 전에도 이미지를 관리하는 것이 중요합니다. 그러나 사진이 이미 사이트에 올라와 있으면 모든 이미지를 개별적으로 다시 최적화한 다음 다시 업로드하는 것이 불가능할 수 있습니다.

걱정하지 마세요. 아무도 당신이 처음부터 그렇게 할 것으로 기대하지 않습니다. WordPress용으로 가장 인기 있는 이미지 최적화 플러그인을 보여드릴 예정이니 잠시만 기다려 주십시오.

이미지를 최적화하려면 목록에서 플러그인을 선택하기만 하면 됩니다. 당신은 그것을 구성하고 플러그인이 당신을 위해 할 일을 선택해야 할 것입니다. 그런 다음 미디어 파일 구성을 시작하면서 긴장을 풀고 선택한 플러그인에 작업을 위임할 수 있습니다.

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

WP Smush 플러그인

가격: 무료

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 클래스를 사용하는 모든 이미지는 자동으로 최적화 되지만 다른 모든 이미지는 수동으로 작업할 수 있습니다. 최적화할 폴더를 선택할 수 있다는 점이 좋습니다. 이에 대한 자세한 내용과 클래스를 사용하는 플러그인은 WordPress 저장소에서 공식 EWWW Image Optimizer 페이지를 여십시오.

JPEG 및 PNG 이미지 플러그인 압축

가격: 무료

WordPress 로고를 들고 있는 귀여운 팬더가 이 플러그인에 대해 더 알고 싶지 않다면 어떻게 될지 모릅니다. 팬더가 친숙해 보인다면 TinyPNG 웹 사이트에서 이미지를 압축하는 데 도움이 되는 것과 동일하기 때문입니다. 예, 동물은 우리가 원래 생각했던 것보다 더 다재다능한 것 같습니다. 그러나 플러그인에 집중합시다.

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

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

플러그인의 가장 큰 장점은 모든 이미지에 대해 최대 너비와 높이 속성을 설정할 수 있다는 것입니다. 메타데이터가 무엇을 할지 걱정했다면 걱정하지 마세요. 팬더는 모든 정보를 그대로 유지합니다.

파일 크기 제한이 없으며 대시보드 위젯을 설정할 수 있으며 WordPress 모바일 앱에서도 작동합니다. 이 모든 이유로 Compress JPEG 및 PNG 이미지는 100,000개 이상의 활성 설치를 보유하고 있으며 WordPress용 최고의 이미지 최적화 플러그인 목록에 포함될 자격이 있습니다.

광기 플러그인

가격: 무료

이 플러그인의 표지 이미지가 당신을 놀라게 할 수 있지만 잠시 시간을 내어 Imsanity의 모든 기능을 살펴보십시오. 아, 플러그인 이름만 들어도 미친 것 같죠? 플러그인의 이름이 마음에 들면 제공할 것이 많다는 것을 알 수 있습니다.

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

이 무료 플러그인은 플러그인 설정으로 많은 어려움을 겪고 싶지 않다면 훌륭한 옵션입니다. 필요한 것은 Imsanity를 설치 및 활성화하고 몇 가지 옵션을 설정하기만 하면 됩니다. 이미지 최적화를 위한 자체 방법을 관리합니다.

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

ShortPixel 이미지 최적화 플러그인

가격: 무료

30,000개 이상의 활성 설치가 있는 ShortPixel Image는 여전히 WordPress용으로 가장 인기 있는 이미지 최적화 플러그인 중 하나입니다. 플러그인에는 다양한 기능이 포함되어 있으며 최적화할 이미지가 많은 사이트의 필수품이 될 것입니다.

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

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

Optimus – WordPress 이미지 최적화 도구

가격: 무료

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

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

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

웹 사이트에 많은 비디오 및 이미지 자료를 추가하기 시작하면 로딩 속도가 느려질 것이 분명합니다. 어디에서 왔는지에 관계없이 비디오와 큰 이미지는 사이트에서 무거운 역할을 하고 방문자가 모든 콘텐츠를 로드하는 데 필요한 것보다 훨씬 더 오래 기다리게 만듭니다. WordPress를 사용하면 큰 문제가 되지 않으며 다음은 상황을 쉽게 해결할 수 있는 방법입니다.

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

그렇지 않은 경우 다음 몇 줄에서 사이트 로드 속도를 높이는 가장 인기 있는 지연 로딩 플러그인을 언급할 것입니다. 플러그인을 설치하고 몇 가지 빠른 단계로 설정하는 것 외에는 많은 작업을 수행할 필요가 없습니다.

비디오에 대한 지연 로드

가격: 무료

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

WP 유튜브 라이트

가격: 무료

이 플러그인은 빠르고 쉬운 방법으로 작업을 수행합니다. 설치 후 Youtube 비디오에 대한 링크를 추가하거나 단축 코드를 사용하여 추가하십시오. 일반 비디오, 재생 목록 또는 선택한 비디오의 오디오만 추가 중에서 선택할 수 있습니다. 그런 다음 Youtube 비디오에 이미지가 표시되어 지연 로딩이 가능합니다. 이미지를 클릭하기만 하면 비디오 또는 오디오가 시작됩니다.
개발자 사이트에서 데모를 참조하세요.

a3 지연 로드

가격: 무료

이것은 귀하의 모바일 사이트 전용입니다. 모바일 기기에서 방문자에게 보여주고 싶은 이미지 및/또는 동영상이 많다면 3 Lazy Load를 살펴봐야 합니다. 이미지와 비디오에 지연 로딩을 추가할 수 있으며 플러그인을 통해 사용자가 로딩 중인 콘텐츠를 스크롤하는 동안 표시될 전환 효과를 선택할 수도 있습니다.

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

BJ 게으른 로드

가격: 무료

비디오에 대한 지원이 필요하지 않고 이미지가 지연 로드되기만 하려면 이 WP 플러그인을 확인해야 합니다. 설치 및 설정이 완료되면 이미지, 썸네일, Gravatar 사진 및 iframe도 자리 표시자로 대체됩니다. 이전에 언급한 플러그인과 유사하게 사용자가 방문하면 콘텐츠를 로드합니다.

지연 로드를 원하는 이미지든 동영상이든, 위에서 언급한 플러그인 중 하나가 순식간에 도움이 될 것입니다. 모두 무료이므로 플러그인 중 적어도 하나를 시도하지 않고 어깨의 무게가 얼마나되는지 확인하지 않는 것에 대한 변명의 여지가 없습니다. 물론 동일한 기능을 가진 다른 많은 플러그인이 있으며 모두 자유롭게 탐색하고 사용해 볼 수 있습니다.

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

우리는 당신이 이미 많은 전/후 이미지의 예를 보았을 것이라고 확신합니다. 당신에 대해 모르지만 "비포 앤 애프터"라는 문구를 볼 때 가장 먼저 생각나는 것은 사람들이 운동 프로그램 전후에 자신의 몸을 보여주는 피트니스 트레이닝 프로그램입니다.

생각해 보면 대부분의 웹 사이트는 차이점을 보여주기 위해 간단한 접근 방식을 사용합니다. 두 이미지를 모두 가져와서 나란히 배치하거나 심지어는 위에 배치합니다. 같은 결과를 원한다면 이미 그 방법을 알고 있기 때문에 이 기사를 읽지 않을 것입니다.

문제 전/후 문제를 시각적으로 훌륭하게 해결할 수 있는 방법이 있고 손에 닿기만 하면 어떻게 될까요? 음, 거기에 있고 설정 후에 최종 결과가 정말 멋지기 때문에 개발자를 칭찬하게 될 것입니다.

스물 스물

가격: 무료

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

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

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

1. 새 게시물을 만들거나 기존 게시물을 엽니다.
2. 게시물에 두 개의 이미지를 삽입합니다. Visual Editor에서 작업하는 경우 다른 이미지 위에 하나의 이미지가 표시되어야 합니다. 텍스트 편집기에서 작업하는 경우 다음과 유사한 코드가 표시되어야 합니다.

 <a href="image1.jpg"><img src=
"http://www.loactionofimage.com"width="700" 
높이="200" /></a>

<a href="image2.jpg"><img src=
"http://www.loactionofimage.com"width="700" 
높이="200" /></a>

3. 첫 번째 이미지 앞에 [twentytwenty] 태그를 입력하세요.
4. 두 번째 입력 후 [/twentytwenty] 태그

텍스트 편집기에서 다음과 같이 끝나야 합니다.

5. 최상의 결과를 얻으려면 사진의 크기가 동일한지 확인하십시오.
6. 게시물을 미리 보거나 게시하고 시각적으로 멋진 전후 사진을 즐기십시오.

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

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

귀하의 사이트에서 이미지를 관리하도록 귀하를 설득할 필요가 없기를 바랍니다. 기사에 이미지를 사용하지 않아도(그래야 함) 추천 이미지를 사용하는 것 맞죠? WordPress 사이트에서 이미지를 관리하는 데 도움이 되는 갤러리 플러그인이 상당히 많이 있으며, 사진 관련 테마를 가질 수 있고 Instagram을 WordPress 사이트에 연결하는 등 많은 작업을 수행할 수 있습니다. 하지만 더 인터랙티브한 콘텐츠를 만들고 싶다면 어떻게 해야 할까요?

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

관심을 끌기

가격: 무료

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

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

특징

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

• 그리기 – 이미지를 업로드한 후, 그 위에 도형을 그릴 수 있는 기회가 주어집니다. 선택/클릭할 수 있는 이미지 부분을 선택하십시오.
• 색상 – 사이트 디자인에 맞게 핫스팟을 만들 수 있도록 색상 사용자 지정
• 강조 표시 - 사용자가 선택한 부분 위로 마우스를 가져가면 이미지의 다른 부분을 표시합니다.
• 추가 정보 표시 – 이미지의 선택한 부분에 대한 추가 정보 표시
• URL로 이동 – 선택 항목을 클릭하면 사용자를 임의의 URL로 리디렉션합니다.

예 – 하와이 대화형 지도

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

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

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

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

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

상호 작용하려는 각 섬에 대해 프로세스를 반복해야 합니다. 핫스팟이 준비되면 오른쪽에서 단축 코드를 복사하십시오. 게시물, 페이지, 위젯 또는 새 대화형 지도를 표시하려는 모든 위치에 단축 코드를 붙여넣으면 완료됩니다! 사용자가 선택 항목을 클릭한 후 다른 페이지로 리디렉션하려면 설명 대신 URL을 선택하기만 하면 됩니다. 그렇게 쉽게!

프로 버전

이미지가 하나만 필요한 경우 무료 버전이 완벽하지만 PRO 버전을 사용하면 사이트에 원하는 만큼 대화형 이미지를 가질 수 있습니다. 이것이 가장 중요하게 고려해야 할 사항이지만 PRO 버전은 여러 이미지 이상을 얻을 수 있습니다.

레이아웃 옵션 기능을 사용하면 그림의 선택한 부분에 대한 자세한 정보를 표시할 수 있습니다. 예를 들어 라이트박스나 사용자가 이미지의 선택된 부분 위로 마우스를 가져가면 팝업되는 간단한 도구 모음에 정보를 표시할 수 있습니다.

또한 20개의 미리 정의된 색상 팔레트가 있으므로 모든 색상을 수동으로 사용자 정의할 필요가 없습니다. PRO 버전은 단일 사이트 라이선스에 대해 74달러의 비용이 들지만, 대화형 이미지가 두 개 이상 필요한 경우에는 간단합니다.

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

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

우리가 보여준 기술 중 하나를 사용했다면 새로운 이미지를 위한 잔디를 준비한 것입니다. 게시물 썸네일에 새로 등록된 이미지 크기를 사용하든 작성자가 게시물에서 사용하도록 허용하든 새 규칙 은 functions.php 파일을 변경한 후에 업로드되는 이미지에만 적용됩니다 . 오래된 이미지를 변경하려면 Regenerate Thumbnails 플러그인을 사용하는 것이 좋습니다.

축소판 재생성:

가격: 무료

1. 플러그인 -> 새로 추가로 이동
2. "썸네일 재생성" 검색
3. 플러그인 설치 및 활성화
4. 도구->재생성.Thumbnails로 이동합니다.

모든 이미지의 크기를 조정하려면 "모든 축소판 이미지 재생성" 버튼을 클릭하고 플러그인이 작업을 완료할 때까지 기다리면 됩니다.

크기가 조정될 이미지를 보거나 일부 이미지의 크기만 조정하려는 경우 미디어 라이브러리로 이동하여 "대량 작업" 아래에 새 옵션이 있고 각 그림 옆에 있는 옵션이 있습니다. 갤러리.

플러그인의 좋은 점은 원본 이미지를 삭제하지 않는다는 것입니다. 테마에서 사용할 수 있는 새 이미지 크기만 생성하고 원본 이미지는 나중에 사용할 수 있도록 남겨두거나 필요하지 않다고 결정한 경우 수동으로 삭제할 수 있습니다.

그게 다야 새로운 썸네일을 즐기거나 동일한 작업을 수행할 수 있는 Simple Image Sizes 플러그인을 확인하십시오.

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

WordPress 게시물에 이미지를 추가할 때 시스템은 자동으로 높이와 너비 속성을 그림에 추가합니다. That's usually a good thing, but there are times when you won't like the fact that every image gets those attributes.

If you want to strip the attributes right at the point of upload, you can do that through a simple function which we showed you last time.

But if you read the article or tried the function yourself, you've noticed that it only affects images uploaded after the function was installed into your WP system. If you already have a database full of posts with inserted images, the aforementioned function won't help you much with your old image attributes.

Since you probably can't go through each and every image manually and delete width and height one by one, you are probably in a need of another function which will strip those attributes for all existing images embedded in your posts. In that case, you're in the right spot 'cause we're about to show you a simple way of automatically removing width and height image attributes with few lines of jQuery code. Don't get scared with the previous phrase – you don't even have to know what jQuery is, just follow the next three steps and you'll be done in a jiffy.

Remove width and height image attributes:

1. Open header.php file from your theme folder
2. Copy and paste this code anywhere between <head> and </head> tags:

 <script src="http://code.jquery.com/jquery-latest.js">
</스크립트>
<스크립트>
jQuery.noConflict();
jQuery(document).ready(function($){
$('img').each(function(){
$(this).removeAttr('width')
$(this).removeAttr('height');
});
});
</스크립트>

3. 변경 사항을 저장하다

그리고 당신은 끝났습니다! The code will do its magic after you open a post which contains an image and will remove width and height tags from it.

How to create custom image sizes in Media Uploader

If you are using Media Uploader to deal with images in WordPress, you have probably seen numerous options for images. Between many, you are able to choose an image size which you can send to your article.

There are the thumbnail, medium, large and full-size options to choose from, but all those options have predefined values. So, if you're using a custom theme, more often than not you are stuck with changing width and height for each image over and over again.

Actually, you don't have to do that. There is a neat little function called add_image_size() which is a great tool for developers. And after this article, you will find it useful as well.

Let's say your theme has a custom width and you want to easily embed images to fit in there perfectly. Let's say that width is 666px (we won't go into why you have set the width to this number, it's your choice). To do that, you need to add an extra radio button to Media Uploader. With the code below, you'll be adding one more size which is the half size of the original one.

1. functions.php 파일을 엽니다.
2. Copy and paste this piece of code:

 function custom_image_sizes() {
add_image_size( 'one-size', 333, 333, true );
add_image_size( 'another-size', 666, 666, true );
}

add_action( 'init', 'custom_image_sizes' );

function show_image_sizes($sizes) {
$sizes['one-size'] = __( 'Custom Size 1', 'isitwp' );
$sizes['another-size'] = __( 'Custom Size 2', '
isitwp' );
return $sizes;
}

add_filter('image_size_names_choose', 
'show_image_sizes');

3. 변경 사항을 저장하다
4. Try adding an image from your Media Uploader where you should see your new size options under the “Attachment Display Settings”

Create automatic screenshot of any website and publish it as image in your post

If you want to display a thumbnail of a website, you would have to go to the website, print screen it or take a screenshot with a program or a browser add-on. Then you would need to modify the image, cut it to the right size and upload it to your WordPress so that you can use the screenshot in a post.

If you don't have to take that snapshot every now and then, it won't be a problem, but if you're using screenshots of different websites more often, you will be happy to hear that there is an awesome function which will save you time and your nerves.

In this part of the guide, we are about to show you the complete function which creates a shortcode that you can use for taking snapshots of any web page you want.

Create automatic screenshot:

1. 함수.php를 엽니다.
2. 다음 코드를 복사하여 붙여넣습니다.

 function wp_webscreen($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'http://www.firstsiteguide.com',
"alt" => 'wploop',
"w" => '600', // width
"h" => '450' // height
), $atts));

$img = '<img alt="' . $alt . '" src="' . $snap . 
'' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" />';
return $img;
}
add_shortcode("screen", "wp_webscreen");

3. Change default variables in the array
4. 변경 사항을 저장하다

This function creates a shortcode that you can easily use anywhere on your WordPress website. Whether you want to use the screenshot of a web page in a post, sidebar widget or your footer, for example, simply c/p the shortcode in the right spot:

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

What's great about this function is that it saves the image as dynamic URL which means that once you create a snapshot with the shortcode, it will automatically refresh itself in the future and always show the current looks of the website specified in the shortcode.

Note that you can change the parameters of the shortcode directly from it. You don't have to modify the code in the functions.php file if you want to take the snapshot of another URL or to take the snapshot in a different dimension.

예시:

Let's say that you want to take a screenshot of Google and make it 200×400 pixels big:

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

You can make everything even easier by saving the shortcode into a button so that you can insert it into a post with a single click of a button.

결론

You don't have to install all plugins and functions we mentioned in order to improve the images on your WordPress site. But we hope that you have found at least a few tips that will help you to optimize images or make them better in any way.