WordPress의 이미지를 최적화하는 방법 [궁극적인 가이드]

WordPress 사이트가 있다면 유지 관리의 어려움을 알고 있습니다. 때로는 달성하는 데 몇 분 밖에 걸리지 않는 일에 몇 시간을 보낼 수 있습니다. 너무 크거나 최적화되지 않은 이미지로 인해 사이트가 느리고 부풀려진 경우 발생할 수 있습니다.

또한, 검색 엔진 최적화 기술을 사용하면 방문자가 귀하를 찾고 귀하의 웹사이트에 유지하는 데 도움이 됩니다. 웹용으로 이미지를 최적화하는 것은 이러한 방법 중 하나입니다.

이미지를 디자인하거나 편집할 때마다 각 픽셀을 최적화 가능한 영역으로 고려하십시오. 픽셀을 개별 조각으로 간주하려면 시간과 노력이 필요하지만 노력할 가치가 있습니다.

그러나 WordPress에서 이미지를 최적화하는 방법에는 여러 가지가 있습니다. 목표는 이미지 품질을 손상시키지 않으면서 파일 크기를 줄이는 것입니다.

이 게시물은 WordPress 이미지를 최적화하고 다른 활동에 더 많은 시간을 할애하는 방법을 알려줍니다.

이미지 최적화란 무엇입니까?

품질에 영향을 주지 않고 이미지의 파일 크기를 줄이고 적절한 이미지 SEO 기술을 적용하는 프로세스입니다. 최적화된 이미지는 하드 드라이브에 저장하거나 인터넷에 업로드하기가 더 쉽습니다. 또한 느린 다운로드 속도로 인해 잠재적인 문제가 적습니다.

이미지의 크기는 웹사이트의 로딩 시간에 상당한 영향을 미칩니다. 일반적으로 이미지가 클수록 방문자의 브라우저가 로드되는 데 더 오래 걸립니다. 방문자에게 실망을 줄 수 있으며 웹사이트를 떠나게 만들 수 있습니다.

이미지가 성능에 최적화되도록 하려면 몇 가지 필수 최적화 팁을 따라야 합니다.

이미지 최적화의 이점

성공적인 웹마스터가 되려면 이미지가 웹사이트에서 어떻게 작동하는지 이해해야 합니다. 때때로 일부 이미지를 최적화해야 할 수도 있습니다.

이미지 최적화의 이점은 다음과 같습니다.

• 더 빠른 페이지 로드 시간: 최적화된 이미지가 빠르게 로드되어 더 빠르게 로드되는 사이트로 변환됩니다. 이것은 로드하는 데 너무 오래 걸리는 웹사이트를 포기할 가능성이 더 큰 모바일 사용자에게 특히 중요합니다.
• 향상된 SEO 순위: 최적화된 이미지는 사이트의 SEO 순위에도 도움이 됩니다. Google은 페이지 로드 속도를 순위 요소로 사용하므로 이미지를 최적화하면 검색 결과에서 순위를 높이는 데 도움이 됩니다.
• 대역폭 사용량 감소: 최적화된 이미지는 더 적은 대역폭을 사용하므로 호스팅 비용을 절약할 수 있습니다.
• 향상된 사용자 경험: 잘 최적화된 웹사이트는 더 빠른 페이지 로드와 더 나은 검색 엔진 성능으로 더 나은 사용자 경험을 제공합니다.
• 모바일 다운로드 시간 단축: 최적화된 이미지는 사이트를 모바일 친화적으로 만드는 데도 도움이 되며 모바일 검색에서 Google 순위에 결정적인 역할을 합니다.
• 고객 만족: 더 나은 사용자 경험은 고객 만족도를 높여 더 높은 매출과 더 많은 반복 고객으로 이어집니다.

웹용 이미지 최적화를 위한 14가지 필수 사항

웹용으로 이미지를 최적화할 때 많은 요소를 고려하는 것이 가장 좋습니다. 다양한 파일 유형과 이를 최적화하는 여러 가지 방법이 있습니다. 다음은 웹용 이미지를 최적화할 때 고려해야 할 몇 가지 사항입니다.

품질 대 크기:

이미지의 품질은 항상 중요하지만 웹 사용에 최적화할 때는 파일 크기도 고려해야 합니다. 웹 페이지에서 로딩 시간을 단축하기 위해 품질을 희생하지 않고 이미지의 파일 크기를 가능한 작게 유지하는 것이 가장 좋습니다.

웹상의 이미지에 대한 표준 해상도는 72DPI(인치당 도트 수)입니다. 따라서 파일 형식이 작기 때문에 이미지를 PNG보다 JPG 로 저장하는 것이 좋습니다.

또한 이미지 품질을 손상시키지 않으면서 가능한 가장 낮은 색 농도를 사용하는 것이 가장 좋습니다. 표준 색상 깊이는 24비트 이며 파일 속성에서 변경할 수 있습니다.

이미지 파일 형식:

선택할 이미지 형식을 결정하려면 다양한 이미지와 그 목적을 이해해야 합니다. 파일을 JPG 로 저장해야 하지만 웹용 이미지를 최적화할 때는 PNG-8 또는 PNG-24를 선택하세요.

일반적으로 PNG 파일은 색상이 많고 배경이 투명한 이미지에 가장 적합하고 JPEG 파일은 디테일이 많은 이미지에 가장 적합합니다.

따라서 웹용으로 이미지 파일을 최적화하려면 배경이 투명한 이미지의 경우 PNG 형식을 사용하고 세부 정보가 포함된 이미지의 경우 JPEG를 사용해야 합니다.

파일 크기 및 크기:

웹용 이미지를 최적화할 때 고려해야 할 두 가지 주요 요소는 파일 크기와 크기입니다. 더 작은 파일 크기 또는 더 큰 이미지를 갖는 목표에 도움이 되는 요소를 확인할 수 있도록 다른 요소를 변경하기 전에 이러한 요소 중 하나를 실험하는 것이 좋습니다.

이미지 파일이 크면 웹사이트가 느리게 실행될 수 있으므로 이미지를 업로드하기 전에 크기를 조정해야 합니다. 웹 페이지의 이미지에 권장되는 크기는 너비가 600-800픽셀이고 높이가 500-600픽셀입니다.

이보다 더 중요하면 브라우저에서 이미지 크기를 조정하여 품질이 저하될 가능성이 높습니다.

Rank Math 는 이미지의 해상도를 자동으로 조정하는 데 적합합니다. 크기에 대해 걱정할 필요가 없도록 이미지 크기가 추가됩니다.

이미지 SEO 개선:

웹사이트에 업로드하는 모든 이미지는 검색 엔진의 정보 소스 역할을 해야 합니다. 더 자세한 이미지 파일은 검색 엔진 최적화에 더 좋습니다.

가장 매력적인 이미지 SEO 관행은 다음과 같습니다.

• 이미지 제목 텍스트 최적화: 이미지를 저장할 때 유익한 제목을 지정해야 합니다. 커서가 이미지 위에 있을 때 툴팁으로 나타납니다. 또한 검색 엔진이 이미지를 학습하는 데 유용합니다.
• Alt 태그 사용: 검색 엔진은 이미지를 인덱싱할 때도 Alt 태그를 사용합니다. Alt 태그 텍스트는 각 이미지에 맞게 조정되어야 하며 사진에 있는 내용을 가능한 한 정확하게 설명해야 합니다.
• 적절한 이미지 파일 이름 사용: 가능하면 이미지 파일 이름도 설명적이고 키워드를 포함해야 합니다. 이미지 편집 소프트웨어로 작업할 때 설명이 포함된 파일 이름으로 이미지를 저장합니다.

참고 - Rank Math WordPress 플러그인을 사용하면 이미지가 SEO에 최적화되고 이미지 파일 이름과 alt 태그에 키워드가 자동으로 포함됩니다.

적절한 압축:

이것은 이미지를 최적화할 때 고려해야 할 또 다른 핵심 요소입니다. 이미지를 서버에 업로드하기 전에 최대한 압축해야 합니다.

이 작업을 수행하려면 Photoshop 또는 GIMP와 같은 압축 도구를 사용해야 합니다. 또는 TinyJPG 및 ImageOptim 과 같은 무료 도구를 사용할 수 있습니다. 로딩 시간을 단축하려면 항상 웹사이트에 압축된 이미지를 사용하는 것이 좋습니다.

또는 ShortPixel 또는 WP-Optimize와 같은 플러그인을 사용하여 웹사이트에 업로드되는 이미지를 자동으로 압축할 수 있습니다. 이 플러그인은 웹사이트에서 이미지를 최적화하려는 모든 사람에게 권장됩니다.

이미지를 압축할 때 다음 사실을 염두에 두어야 합니다.

• 손실 : 손실 압축은 이미지에서 일부 데이터를 제거하여 파일을 더 작게 만드는 압축 유형입니다. 이러한 유형의 압축은 눈에 띄는 품질 손실이 없는 이미지에 자주 사용됩니다.
• 무손실 : 무손실 압축은 콘텐츠 품질을 저하시키지 않으면서 일부 중복 정보를 제거하는 압축 형식입니다. 이 압축 유형은 무손실 JPEG 이미지와 같이 압축 후 품질을 유지해야 하는 이미지에 자주 사용됩니다.

ShortPixel의 블로그에서 손실 광고 무손실 압축에 대한 자세한 내용을 알 수 있습니다.

차세대 형식으로 이미지 제공:

기본적으로 브라우저는 이미지가 저장된 것과 동일한 형식으로 이미지를 로드하려고 시도합니다. 예를 들어 URL에 .jpg가 포함되어 있으면 JPEG 이미지가 로드됩니다. 그러나 브라우저가 올바른 파일 확장자를 사용하여 다른 이미지 형식을 로드하도록 할 수 있습니다.

예를 들어 JPEG 이미지가 있는 경우 확장자를 .png로 변경하면 브라우저에서 해당 이미지를 로드합니다.

JPG to PNG WordPress 플러그인을 사용하여 이 작업을 수행할 수 있습니다. 이 플러그인을 사용하면 모든 JPG 이미지를 PNG 파일로 자동 변환합니다. WordPress에서 PNG 이미지를 JPG로 변환하는 방법에 대한 가이드를 따를 수 있습니다.

GtMatrix 또는 Google 페이지 속도 인사이트 도구를 사용하여 차세대 형식의 서브 이미지를 쉽게 찾을 수 있습니다.

참고- 일반적으로 다른 파일 확장자를 인식하는 브라우저에서 볼 수 있도록 이미지를 두 가지 유형의 파일로 저장하는 것이 좋습니다. 이렇게 하면 파일 로드에 실패할 경우 이미지를 다시 업로드하지 않고도 손상된 JPEG를 PNG로 교체할 수 있습니다.

CSS 스프라이트를 사용하여 이미지 결합:

이미지 조합은 전통적으로 이미지 편집 소프트웨어를 사용하여 수행되었습니다. 그러나 이제 CSS sprites 방법을 사용하여 이미지를 결합할 수 있음이 밝혀졌습니다.

이 프로세스에는 빈 이미지를 만들고 결합하려는 이미지를 다른 위치에 로드하는 작업이 포함됩니다. 그런 다음 CSS를 사용하여 이러한 개별 이미지 각각을 새 이미지의 동일한 영역에 배치할 수 있습니다.

따라서 브라우저는 여러 이미지가 아닌 단일 이미지 파일을 다운로드할 수 있습니다. 이것은 일반적으로 인터넷 연결이 느리기 때문에 모바일 장치에 특히 중요합니다. CSS 스프라이트 생성기로 이 작업을 수행할 수 있습니다.

이미지 핫링크 비활성화:

이미지를 핫링크하면 누구나 이미지를 가져와 자신의 웹사이트에 게시할 수 있습니다. 결과적으로 이미지가 서버에서 다른 서버로 다운로드될 때 성가신 대역폭 손실을 경험하게 됩니다. 이미지에 핫링크 보호를 사용하여 이를 방지할 수 있습니다.

cPanel 계정을 통해 이미지 핫링크 보호를 구성할 수 있습니다. 과정은 매우 간단합니다.

• 보안 탭 아래에 핫링크 보호라는 아이콘이 표시됩니다.
• 이 아이콘을 클릭하면 다음 창에 액세스할 수 있습니다.
• 이미지가 핫링크되는 것을 방지하려면 활성화 버튼을 클릭하십시오.

참고 - Cloudflare 사용자인 경우 " 핫링크 보호 " 옵션을 활성화하여 이미지가 핫링크되는 것을 방지할 수 있습니다.

캐시 이미지:

모든 웹사이트에서 이것은 필수적입니다. 사람들이 더 빨리 볼 수 있도록 이미지를 캐시해야 합니다. 대부분의 경우 기존 웹사이트 방문자는 브라우저에 이를 캐시하지만 호스팅에 문제가 있는 경우 별도로 설정하는 것이 좋습니다.

호스팅 서비스를 사용하여 WordPress를 설치할 때마다 호스팅 공급자가 모든 캐싱을 처리합니다. 캐싱 플러그인을 설치할 수도 있습니다.

WP Rocket은 사용 및 설치가 간단하기 때문에 이미지 캐싱에 이상적인 플러그인입니다. 설치하고 활성화하기만 하면 됩니다. 물론 다른 캐싱 플러그인도 있지만 WP Rocket이 이 목적을 위한 최고의 선택입니다.

캐시 그라바타:

그라바타는 웹에서 귀하의 이메일 주소를 따라가는 작은 아이콘입니다. 예를 들어, 다른 WordPress 블로그에 댓글을 남기면 그 옆에 Gravatar가 표시됩니다.

Gravatar 서비스는 Gravatar를 생성하여 서버에 캐시합니다. 따라서 많은 수의 블로그 또는 트래픽이 많은 블로그에 댓글을 달면 Gravatar가 Gravatar의 서버에 캐시됩니다.

결과적으로 Gravatar는 모든 블로그에 빠르게 로드됩니다. 그러나 다른 한편으로는 Gravatar 서비스를 사용할 수 없거나 댓글을 단 블로그 중 하나에서 Gravatar가 제거되면 해당 블로그에서 Gravatar가 사라지기 때문에 단점이 될 수도 있습니다.

포괄적인 그림으로 Gravatar를 사용자 지정하는 것은 매우 매력적이지 않습니다. 이는 사용자 정의 Gravatar가 해당 블로그에 표시되지 않으면 기본 그라바타가 대신 사용되어 적절하지 않을 수 있기 때문입니다.

이 문제에 대한 두 가지 가능한 솔루션이 있습니다.

• Gravatar를 가능한 한 작게 만드십시오. 작은 이미지는 큰 이미지보다 더 빠르게 로드되고 더 적은 대역폭을 사용합니다.
• 귀하가 제어하는 ​​도메인에서 자체 버전의 Gravatar 서비스를 호스팅해야 합니다. 이를 위해서는 Gravatar 서버에 Gravatar를 캐싱하는 대신 로컬에 Gravatar를 저장하기 위해 Apache 웹 서버, PHP 및 MySQL 데이터베이스가 필요합니다.

CDN에서 이미지 제공:

이미지가 콘텐츠 전송 네트워크(CDN)에서 제공되는 경우 캐싱을 활성화해야 합니다. 결과적으로 브라우저 및 기타 장치는 동일한 이미지를 여러 번 다운로드할 필요가 없습니다.

CDN을 설정할 때 이미지가 표시되는 방식을 고려하는 것이 가장 좋습니다. 또한 이미지에서 CDN 재작성을 활성화해야 합니다. Perfmatters 플러그인으로 이 작업을 수행할 수 있습니다.

이 플러그인을 사용하면 사이트를 CDN 네트워크에 쉽게 연결할 수 있습니다. 결과적으로 사이트에서 콘텐츠 전송 네트워크를 통해 콘텐츠를 제공할 수 있는 경우 이미지는 CDN 서버에서 수행됩니다.

다음 CDN 네트워크를 사용할 수 있습니다.

• 클라우드플레어
• 버니씨디엔

웹사이트에 이미지를 최적화할 때 하지 말아야 할 일

이미지 URL 리디렉션 피하기:

웹사이트에서 URL 리디렉션을 사용하면 이미지의 모양이 지연됩니다. 또한 이미지는 브라우저에서 캐시되지 않으므로 페이지 로드가 지연될 수 있습니다.

따라서 웹용 이미지를 최적화할 때 URL 리디렉션을 사용하지 않아야 합니다.

만료 헤더 피하기:

이미지에 만료 헤더를 사용하는 경우 브라우저가 이미지를 캐시하지 않을 수 있습니다. 또한 브라우저는 이미지가 페이지에 로드될 때마다 이미지를 다시 요청합니다.

최적화하려는 경우 웹사이트 이미지에 만료된 헤더를 설정하지 않아야 합니다.

이미지 삽입 방지:

웹용 이미지를 최적화할 때 페이지에 이미지를 포함하지 않는 것이 중요합니다. 이는 이미지를 포함할 때 브라우저가 이미지를 표시하기 전에 전체 이미지를 다운로드하기 때문입니다.

이로 인해 웹사이트가 느리게 로드되어 방문자가 불편해질 수 있습니다. 대신 <img> 태그 또는 <object> 태그를 사용하여 서버의 이미지에 대한 링크를 포함하십시오. 따라서 브라우저는 전체 페이지가 아닌 이미지 파일만 다운로드할 수 있습니다.

최고의 이미지 최적화 도구:

전문 블로그를 개발하려면 고품질 콘텐츠가 필수적입니다. 또한 블로그가 매력적으로 보이려면 고품질 이미지가 필요합니다. 그러나 해상도를 잃지 않고 아름답게 디자인된 이미지를 최적화할 수 있는 무료 도구를 찾기가 어렵습니다.

결과적으로 작업을 용이하게 하는 가장 효과적인 이미지 최적화 도구 목록을 작성했습니다.

• TinyJPG: TinyJPG는 JPEG 이미지를 압축하는 편리한 온라인 도구입니다. 이 도구의 압축률은 매우 높으며 이미지 품질은 여전히 ​​우수합니다.
• Toolur: Toolur는 웹용 이미지를 최적화하는 유용한 온라인 도구입니다. 이미지 품질에 영향을 주지 않으면서 파일 크기를 줄여 이미지를 최적화합니다.
• ImageOptim: ImageOptim은 최고의 이미지 최적화 도구 중 하나입니다. 이 도구는 웹 페이지의 이미지를 최적화하여 사이트 로드 속도를 개선하는 데 도움이 됩니다. 이미 압축된 이미지를 최적화할 수도 있습니다.
• 김프: 김프는 이미지의 품질을 유지하면서 이미지의 파일 크기를 줄일 수 있는 훌륭한 이미지 편집기입니다. Adobe Photoshop의 가치 있는 대안입니다.

WordPress를 위한 최고의 이미지 최적화 플러그인

WordPress에 사용할 수 있는 여러 가지 이미지 최적화 플러그인이 있습니다. 귀하의 필요에 가장 적합한 것을 선택하는 것은 어려울 수 있습니다. 다음은 상위 플러그인 목록입니다.

• EWWW 이미지 최적화
• Imageify by WP Rocket Team
• ShortPixel 이미지 최적화 도구
• WP 스무시
• reSmush.it

위 목록에서 EWWW Image Optimizer , Imagify by WP Rocket Team 및 ShortPixel Image Optimizer 플러그인 을 사용할 수 있습니다.

최적의 결과를 얻으려면 이미지 최적화용 프리미엄 플러그인을 사용해야 합니다. 비용을 절약하려면 EWWW Image Optimizer 를 사용해 보십시오.

자주 묻는 질문

WordPress에서 WebP 이미지를 어떻게 생성합니까?

WP Rocket을 사용하여 사이트의 이미지를 최적화하면 자동으로 WebP로 저장됩니다. 반대로 JPG 또는 PNG 이미지를 WebP 이미지로 변환하려면 플러그인을 사용하면 됩니다.

이를 위해 다음 플러그인을 사용할 수 있습니다.

• 미디어용 WebP 변환기
• 웹피 익스프레스

WebP에 사용하는 훌륭한 플러그인은 WP Speed ​​Matters의 Flying Images입니다. 어떤 테마와도 작동하며 모든 것을 처리합니다. 또한 원하는 크기의 WebP 이미지를 생성할 수 있으며 무료 이미지 CDN 서비스를 제공한다는 점에서 상당한 이점이 있습니다.

오프스크린 이미지를 어떻게 연기합니까?

defer 속성은 JavaScript에서 오프스크린 이미지를 로드하는 데 사용할 수 있으므로 브라우저가 초기 페이지 로드를 보다 빠르게 렌더링할 수 있습니다. 시작 및 종료 태그가 필요합니다. 예를 들어:

<img src="image-source.png" alt="" width="100px" height="100px" title="일부 툴팁 텍스트" data-defer="offscreen-image.jpg" />

참고 - Defer는 XHTML이 아닌 HTML5에서만 지원됩니다.

Perfmatters와 같은 JavaScript 플러그인을 사용하여 이미지 로드를 연기할 수 있습니다. 결과적으로 img 태그를 div와 같이 원하는 요소로 변경할 수 있습니다.

<div data-defer="offscreen-image.jpg"></div>

Defer Offscreen 이미지를 수정하는 방법?

• 이미지를 지연 로드합니다.
• 지연 로드 배경 이미지.

스크롤 없이 볼 수 있는 부분의 이미지는 사용자가 빠르게 알아차릴 수 있도록 지연 로드에서 제외해야 합니다. 그러나 WordPress 사이트에서 지연된 오프스크린 또는 지연 로드 이미지를 해결하기 위해 Perfmatters 플러그인을 사용할 수 있습니다. 플러그인을 사용하면 오프스크린 이미지 로드를 지연하여 WordPress 사이트의 로드 속도를 향상시킬 수 있습니다.

참고 - WP Rocket 플러그인을 사용하여 이미지 지연 로딩 을 활성화할 수 있습니다. 그래서 당신은 그들 중 아무거나 사용할 수 있습니다.

결론적으로

WordPress는 자신의 웹사이트를 만들고 관리할 수 있는 강력한 콘텐츠 관리 시스템입니다. 그러나 적절한 도구 없이는 WordPress용 이미지를 최적화하기 어려울 수 있습니다.

WordPress에 대한 이미지 최적화의 문제는 사용할 수 있는 다양한 방법이 있다는 것입니다. 예를 들어 플러그인, 온라인 도구 또는 자체 소프트웨어를 사용할 수 있습니다.

WordPress용 이미지를 최적화하는 가장 효과적인 방법은 이러한 모든 기술을 결합하는 것입니다 . 또한 크기를 조정해야 하는 이미지를 식별하는 플러그인을 사용할 수 있으며 수동으로 크기를 조정할 수도 있습니다.

WordPress의 이미지 크기를 최적화하는 것 외에도 게시물당 파일 수를 최적화해야 합니다. 프리미엄 플러그인을 사용하여 이미지와 웹사이트 속도를 최적화하십시오. 결과적으로 사용자 친화적이고 빠르고 효율적인 웹 사이트를 개발할 수 있습니다.