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

게시 됨: 2022-09-14

WordPress용 최고의 이미지 최적화 플러그인을 찾고 있습니까? 더 이상 멀리 보지 마십시오. 우리는 시장에서 사용 가능한 최고의 도구를 비교했습니다.

최적화되지 않은 이미지는 종종 웹사이트 속도를 저하시키는 원인이 됩니다. Lighthouse를 통해 성능 감사를 실행하는 경우 다음 이미지 관련 문제 중 하나가 발생할 수 있습니다.

웹사이트에 이미지를 최적화하기 위한 Google 권장 사항 - 출처: PageSpeed ​​Insights
웹사이트에 이미지를 최적화하기 위한 Google 권장 사항 – 출처: PageSpeed ​​Insights

그렇다면 이미지 최적화 플러그인이 필요할 것입니다!

다음 프로젝트에 가장 적합한 이미지 최적화 플러그인을 선택하는 데 도움이 되도록 필수 기능을 나열하고 성능 비교 테스트를 실행했습니다.

뛰어들자!

이미지 최적화가 성능에 미치는 영향

성능을 위해 이미지를 최적화한다는 것은 파일 크기를 가능한 한 작게 유지하면서 올바른 치수, 형식 및 해상도로 고품질 이미지를 제공하는 것을 의미합니다. 압축, 크기 조정, 캐싱, 차세대 형식으로의 변환 또는 지연 로딩과 같은 여러 메커니즘 덕분에 이미지를 최적화할 수 있습니다.

다음은 압축된 이미지의 예입니다. 크기는 작지만 사람의 눈에는 품질이 동일하게 보입니다. 이미지를 최적화할 때 품질을 손상시키지 않으면서 크기를 줄이기 때문입니다.

원본 JPG 압축 JPEG
813KB 309KB 품질에 미치는 영향: 없음

최적화되지 않은 이미지는 사이트를 느리게 만들고 핵심 성능 지표와 같은 주요 성능 지표에 영향을 줍니다. 이미지가 가장 큰 콘텐츠가 포함된 페인트 요소인 경우 해당 이미지를 효율적으로 최적화하는 것은 좋은 LCP 점수를 유지하는 데 중요합니다. 가장 큰 콘텐츠가 포함된 페인트는 전체 웹사이트의 인지된 속도를 측정하며, 방문자에게 좋은 인상을 주기를 원하는 것 같습니다. 최적화 여정에 도움이 되도록 항상 이미지 최적화 도구 WordPress 플러그인을 선택하세요.

올바른 이미지 최적화 플러그인을 선택하는 방법

WordPress 사이트의 모든 이미지를 따를 수 있는 이미지 최적화 체크리스트를 만들었습니다.

이미지 최적화 플러그인을 위한 14가지 필수 기능

이미지 최적화 플러그인을 선택할 때 검색해야 할 필수 기능에 대해 자세히 살펴보겠습니다.

  1. PNG, JPEG, GIF 또는 WebP 이미지와 같이 가장 널리 사용되는 이미지 파일 형식을 지원합니다.
  2. 이미지를 WebP로 변환할 수 있습니다. Google에서 개발한 이 차세대 형식은 품질에 영향을 주지 않으면서 이미지 파일 크기를 JPEG 및 PNG 이미지보다 35% 작게 줄일 수 있습니다.
  3. 스크롤 없이 볼 수 있는 콘텐츠만 먼저 로드되도록 이미지와 비디오에 지연 로드를 적용합니다.
  4. 최적화 후 너무 흐려지는 이미지에 플래그를 지정하는 스마트 압축 프로세스가 있습니다.
  5. Lighthouse에서 권장하는 대로 이미지를 효율적으로 최적화하여 페이지 속도와 전체 성능에 대한 결과를 확인할 수 있습니다.
  6. 여러 수준의 압축을 제공하여 파일 크기와 품질 사이의 완벽한 균형에 도달하는 데 도움을 줍니다. 플러그인에서 압축 수준을 확인하는 방법은 무엇입니까? "손실 또는 무손실" 기능이 있어야 합니다.
  7. 이미지 품질을 유지합니다. 압축이 흐린 이미지를 의미해서는 안 됩니다! 자동, 직관적, 스마트 압축 등 품질과 성능의 균형을 유지하는 플러그인을 선택하십시오.
  8. 즉석에서 이미지 크기 조정: 특정 높이와 너비를 제한하거나 WordPress 라이브러리에 업로드할 때 최소한 백분율을 제한할 수 있는지 확인하십시오.
  9. 여러 이미지를 압축하기 위한 대량 최적화를 제공합니다. 수천 장의 사진이 있는 전자 상거래 사이트가 있는 경우 모든 이미지를 손으로 압축하는 것이 번거롭습니다. 플러그인을 사용하여 한 번에 여러 이미지를 압축할 수 있는지 확인합니다.
  10. 서버의 이미지 최적화: 귀하가 아닌 서버를 사용하는 플러그인을 선택하십시오. 이렇게 하면 대역폭과 저장 공간이 절약됩니다.
  11. 직관적이고 빠른 인터페이스: 명확한 최적화 옵션을 제공하고 전체 프로세스를 즉시 수행하는 사용하기 쉬운 플러그인이 필요합니다.
  12. 불필요한 메타데이터(예: 존재할 수 있는 Exif 데이터)를 제거합니다.
  13. 원본 이미지 백업 유지 - 플러그인 비활성화 후 압축(및 원본) 이미지가 삭제되지 않도록 합니다.
  14. 모든 CDN과 호환되며 전 세계 사용자에게 더 빠르게 이미지를 배포할 수 있습니다.

이제 이미지 옵티마이저 플러그인이 갖추어야 할 최고의 기능을 알았으므로 시장에서 사용할 수 있는 최고의 플러그인을 살펴보겠습니다.

상위 5개 이미지 최적화 플러그인

우리가 비교하고 테스트할 최고의 5가지 이미지 최적화 플러그인은 다음과 같습니다.

  1. 상상하다
  2. 옵티몰
  3. ShortPixel 이미지 최적화 도구
  4. EWWW 이미지 최적화
  5. TinyPNG로 JPEG 및 PNG 이미지 압축

무엇에 대한 비교입니까?

아래에서 각 플러그인의 JPG 그림(502KB)을 최적화하고 저장한 KB를 확인합니다. 결국 모든 데이터를 요약한 테이블이 생성됩니다.

최적화되지 않은 JPG 이미지 – 출처: WordPress 라이브러리

1. Imagify: 스마트하고 직관적인 이미지 최적화 플러그인

600,000개 이상의 활성 설치로 시장에서 가장 인기 있는 이미지 최적화 플러그인 중 하나입니다!

주요 특징들:

  • Imagify가 다른 이미지 최적화 플러그인과 차별화되는 점은 바로 새로운 스마트 압축 기능입니다! 이미지를 최상의 상태로 최적화하므로 필요에 맞는 압축 수준에 대해 걱정할 필요가 없습니다.
새로운 스마트 압축 프로세스 – 출처: Imagify
  • WebP 변환 제공:
WebP 변환 기능 – 출처: Imagify

WordPress 라이브러리에서 WebP가 자동으로 생성된 것을 볼 수 있습니다.

WordPress 라이브러리 및 WebP 생성 – 출처: Imagify
  • 직관적이고 정확한 인터페이스: 설정이 간단하고 마지막으로 클릭할 버튼이 하나만 있으면 작업이 완료됩니다!
  • PNG, JPG, GIF, PDF 및 WebP와 같은 많은 이미지 형식을 지원 합니다.
  • 업로드 또는 선택한 기존 이미지에 최적화 및 크기 조정 이 자동으로 수행됩니다.
  • 스마트 압축으로 이미지 품질을 유지하십시오 .
  • 단일 및 대량 최적화 를 사용하여 여러 이미지를 한 번에 압축하거나 우선적으로 최적화가 필요한 이미지를 수동으로 선택할 수 있습니다.
  • 최적화할 썸네일 크기를 선택할 수 있습니다.
  • 필요한 경우 원본 이미지 를 백업 합니다(원본 파일은 삭제되지 않음).
  • 최적화는 귀하의 서버가 아닌 Imagify의 서버를 사용하여 수행됩니다 .
  • WordPress 사용자가 아닌 경우 웹 앱 사용 가능(무료 계정의 경우 파일 크기 업로드 제한이 2MB입니다.)

가격:

한 달에 20MB의 데이터를 무료로 사용할 수 있으며 500MB의 경우 $4.99/월 또는 무제한 최적화의 경우 $9.99/월부터 시작합니다. 여기에서 전체 가격을 확인하세요.

Imageify의 성능 결과:

Imageify는 내 이미지 파일 크기를 87.73% 줄이는 데 도움이 되었습니다. 품질 저하 없이 502KB에서 53.70KB로 늘어났습니다.

KB의 거의 90%를 절약하는 스마트 레벨 - 출처: Imagify
KB의 거의 90%를 절약하는 스마트 레벨 – 출처: Imagify

2. Optimole: 지연 로딩 및 CDN 배포

Optimole은 클라우드 기반 시스템을 통해 완전 자동화 및 다양한 최적화 기능을 제공합니다. 모든 유형의 장치에서 품질 저하 없이 더 작은 크기로 이미지를 제공합니다.

주요 특징들:

  • 대시보드와 설정 이라는 두 개의 탭이 있는 미니멀하고 명확한 인터페이스 .
WordPress 대시보드 탭 – 출처: Optimole
  • 일반 설정 및 고급 설정:
WordPress 설정 탭 – 출처: Optimole
  • WebP 및 AVIF 변환 : 기본적으로 Optimole은 이 형식을 지원하는 모든 방문자에게 WebP 형식의 이미지를 제공합니다.
  • 지연 로딩: Optimole 은 선택한 이미지에 <link rel=”preload”> 속성을 ​​사용하여 지연 로딩을 적용합니다.  
  • 기계 학습 압축 : 알고리즘은 가장 작은 크기에서 가장 잘 보이는 이미지를 위해 손실 또는 무손실 최적화를 제공합니다.
  • 반응형 설정: 방문자의 브라우저와 뷰포트에 적합한 이미지 크기를 선택할 수 있습니다.
  • 클라우드 라이브러리 지원: 웹사이트 이미지를 Optimole Cloud로 직접 오프로드(서버의 저장 공간 절약)
  • 워터마크: Optimole은 비즈니스에 필요한 경우 모든 사진에 워터마크를 적용합니다.
  • CDN 배포: 글로벌 CDN의 이미지를 무료로 제공

가격:

기본 플랜을 사용하면 최대 5K 월간 방문에 대해 무제한 이미지 수를 최적화할 수 있으며 다음 요금제에 따라 업그레이드해야 합니다.

기본 플랜을 사용하면 최대 5K 월간 방문에 대해 무제한 이미지 수를 최적화할 수 있으며 다음 요금제에 따라 업그레이드해야 합니다.

Optimole의 성능 결과:

Optimole은 내 이미지 파일 크기를 67% 줄였습니다. 502KB에서 164KB로 늘어났습니다. 클라우드에서 만들어지기 때문에 WordPress 라이브러리에서 최적화를 볼 수 없습니다. Optimole은 최적화된 이미지를 프런트 엔드에서 방문자에게 직접 제공합니다.

Optimole로 새 이미지 크기 확인(164KB) - Source: Google Chrome Tools
Optimole로 새 이미지 크기 확인(164KB) – 출처: Google Chrome 도구

3. ShortPixel - 세련된 인터페이스

ShortPixel은 한 번의 클릭으로 모든 이미지와 PDF 문서를 압축할 수 있는 사용하기 쉬운 이미지 최적화 플러그인입니다.

주요 특징들:

  • 압축 유형, 백업 및 큰 이미지 크기 조정을 결정하는 빠른 버튼을 제공하는 간단한 인터페이스 입니다.
일반 설정 – 출처: Shortpixel WordPress 대시보드

"고급" 탭은 이미지를 WebP 또는 AVIF로 변환하는 데 필요한 모든 차세대 설정을 제공합니다.

고급 설정 – 출처: Shortpixel WordPress 대시보드
  • 4단계의 매우 편리한 마법사로 대량 압축 . '대량'은 미디어 라이브러리 및 NextGen 갤러리와 같은 타사 플러그인의 모든 기존 이미지를 최적화합니다 .
  • 모든 유형의 이미지(PNG, JPEG 등)를 지원 합니다.
  • 업로드 시 이미지 자동 최적화를 비활성화하는 옵션입니다.
  • 5% 미만 으로 최적화된 이미지에는 크레딧 이 사용되지 않습니다.
  • 큰 이미지에 편리한 2가지 옵션으로 이미지를 축소하는 옵션입니다.
  • Cloudflare 통합 을 통해 전 세계적으로 이미지를 더 빠르게 배포할 수 있습니다(CDN이 있어야 함).

가격:
ShortPixel은 매달 100개의 무료 이미지 크레딧을 제공합니다. 귀하에게 가장 적합한 항목에 따라 월간 요금제 또는 현금 크레딧을 사용할 수 있습니다. 첫 번째 계획은 7,000개의 이미지 크레딧에 대해 $3.99부터 시작합니다.

ShortPixel의 성능 결과:

Shortpixel은 내 이미지 파일 크기를 66.95% 줄이고 WebP로 변환했습니다. 502KB에서 165KB로 늘어났습니다.

ShortPixel로 66.95% 절감 - 출처: ShortPixel WordPress 미디어 라이브러리
ShortPixel로 66.95% 절감 – 출처: ShortPixel WordPress 미디어 라이브러리

4. EWWW – 무료 WordPress Image Optimizer 및 파일 크기 제한 없음

EWWW IO를 사용하면 모든 플러그인에서 기존 이미지를 모두 최적화할 수 있습니다! EWWW IO는 새 이미지 업로드를 자동으로 처리합니다. 다른 작업을 수행할 필요가 없습니다.

주요 특징들:

  • 플러그인을 설정하고 웹사이트에 필요한 최적화 옵션을 선택하는 데 도움이 되는 직관적인 마법사 :
EWWW 마법사 - 출처: EWWW의 WordPress 대시보드
EWWW 마법사 – 출처: EWWW의 WordPress 대시보드
  • 이미지를 WebP로 변환 합니다.
  • 속도 제한이 없고 파일 크기에 제한이 없습니다.
  • 지연 로딩을 적용 하여 사이트 성능을 높이고 스크롤 없이 볼 수 있는 이미지를 우선적으로 로드합니다.
  • 큰 이미지가 WordPress 라이브러리 에 업로드되는 것을 방지하기 위해 업로드 시 자동 크기 조정 .
  • 누락된 치수(너비/높이)를 추가합니다.
  • 반응형 옵션: 반응형 마크업(srcset) 내에서 올바른 이미지 크기를 감지합니다.
EWWW 기본 옵션 - 출처: EWWW의 WordPress 대시보드
EWWW 기본 옵션 – 출처: EWWW의 WordPress 대시보드

가격:

핵심 플러그인은 무료이며 매우 우수한 압축 수준을 제공합니다. 그러나 유료 서비스에서는 압축이 더 잘됩니다. 가격은 사이트 1개당 월 7달러부터 시작합니다.

EWWW의 성능 결과:

내 이미지는 502KB에서 156.9KB로 늘어났습니다. 즉, 69%가 절약되었습니다.

EWWW가 포함된 더 밝은 이미지 - 출처: WordPress 라이브러리
EWWW가 포함된 더 밝은 이미지 – 출처: WordPress 라이브러리

5. TinyPNG – 최적화 및 기본 인터페이스

이 플러그인은 두 가지 인기 있는 이미지 압축 서비스인 TinyJPG 및 TinyPNG와 통합하여 이미지를 자동으로 최적화합니다.

주요 특징들:

  • 필수 설정이 포함된 기본 인터페이스 - 옵션이 많지는 않지만 플러그인은 기본에 충실하고 깨끗한 설정 페이지로 작업을 수행합니다. 내가 선택한 설정을 활성화하고 자동화된 최적화 프로세스를 실행하는 데 몇 초밖에 걸리지 않았습니다.
기본 옵션 페이지 - 출처: TinyPNG 대시보드
기본 옵션 페이지 – 출처: TinyPNG 대시보드
  • 백그라운드 및/또는 업로드 중 새 이미지에 대한 압축.
  • WordPress 라이브러리에서 이미지를 수동으로 선택할 것인지 결정하십시오.
  • 기존 미디어 라이브러리의 간편한 대량 최적화 .
  • WebP 최적화.
  • 압축할 이미지 크기를 선택합니다.
  • 업로드된 각 이미지의 최대 너비와 높이를 설정합니다.

가격:

표준 WordPress 설치를 사용하면 매월 약 500회의 압축을 무료로 수행할 수 있습니다. 더 많은 이미지를 최적화해야 하는 경우 업그레이드해야 합니다.

TinyPNG의 성능 결과:

내 이미지 파일 크기가 502KB에서 160KB로 변경되어 총 61%가 절약되었습니다.

TinyPNG의 성능 결과 – 출처: 워드프레스 라이브러리

최종 테스트

원본 사진보다 87.73% 절감된 리드를 상상해보세요 . 다른 네 가지 최적화 플러그인과 관련하여 경쟁이 치열합니다! 평균적으로 다른 옵티마이저 플러그인도 비슷한 절감 효과를 제공합니다(약 65%).

최적화 플러그인 원래 크기 최적화 후 파일 크기 최적화 비율 압축 유형
상상하다 502KB 53.70KB 87.73% 스마트(손실)
옵티몰 502KB 164KB 67% 손실
짧은 픽셀 502KB 165KB 66.95% 손실
EWWW 이미지 최적화 502KB 156.9KB 69% 손실
TinyPNG로 JPEG 및 PNG 이미지 압축 502KB 160.2KB 61% 손실

성능에 대한 Imageify의 영향

Imagify는 말 그대로 몇 번의 클릭으로 웹사이트 속도를 향상시킵니다. 새로운 스마트 압축 덕분에 품질 저하 없이 이미지의 파일 크기를 줄이는 최고의 이미지 압축 플러그인 중 하나입니다. 이전 감사에서 Imagify는 파일 크기를 87.73% 줄였습니다!

이미지 최적화가 성능을 향상시키고 Lighthouse의 감사를 개선하는 방법을 보여주는 사례 연구를 실행합니다. 최적화되지 않은 JPG 사진으로 웹 페이지를 구축하고 Imagify를 실행하기 전과 실행한 후의 결과를 비교했습니다.

최적화되지 않은 큰 사진이 있는 테스트 사이트

모바일로 결과를 공개합니다!

성능 테스트를 시작하기 전에 읽어야 할 메모: 이미지 최적화와 관련하여 Lighthouse에서 모니터링할 4가지 주요 KPI가 있습니다.

– 이미지를 효율적으로 인코딩(웹에 맞게 압축 및 최적화)
– 차세대 형식(예: AVIf 또는 WebP)의 이미지 제공
– 이미지를 효율적으로 인코딩(이미지를 웹용으로 준비(압축 및 최적화 포함)
– 이미지 크기를 적절하게 조정합니다(모바일 및 데스크톱용 이미지 최적화).

No Imagify – 성능 보고서 및 하이라이트:

Imagify가 없으면 Lighthouse는 여러 개선 영역을 통해 내 모든 이미지를 최적화되지 않은 것으로 표시합니다.

Imagify가 없는 기회/진단 섹션 - 출처: PageSpeed ​​Insights
Imagify가 없는 기회/진단 섹션 – 출처: PageSpeed ​​Insights

성능 자체도 그다지 좋지 않다. 대부분 이미지 최적화 부족으로 인해 74/100이 발생했습니다. 가장 큰 콘텐츠가 포함된 페인트 메트릭은 7.5초 점수로 빨간색으로 표시되고 첫 번째 콘텐츠가 포함된 페인트는 주황색입니다.

Imagify가 없는 성능 메트릭 - 출처: PageSpeed ​​Insights
Imagify가 없는 성능 지표 – 출처: PageSpeed ​​Insights

Imagify 사용 – 성능 보고서 및 하이라이트:

  • 성능 점수는 74/100에서 거의 90/100으로 올라갔습니다!
Imagify의 Smart Compression 수준으로 향상된 성능 측정항목 - 출처: PageSpeed ​​Insights
Imagify의 스마트 압축 수준으로 향상된 성능 측정항목 – 출처: PageSpeed ​​Insights
  • 내 FCP는 이제 녹색에 있고 내 LCP는 주황색과 녹색 사이의 가장자리에 있습니다.
  • Imagify는 또한 "차세대 형식의 이미지 제공-WebP", "적절한 이미지 크기" 및 "이미지를 효율적으로 인코딩"과 같은 몇 가지 PSI 경고를 수정했습니다.
  • 이제 내 모든 이미지가 최적화되었습니다!
Imagify로 감사 통과 - 출처: PageSpeed ​​Insights
Imagify로 감사 통과 – 출처: PageSpeed ​​Insights
전문가 팁 : Imagify는 PSI에서 표시한 모든 성능 문제를 해결할 수 없습니다. 또한 무엇보다도 사용하지 않는 JS 또는 CSS를 지연하고 제거하는 데 도움이 되는 최고의 캐싱 플러그인 중 하나인 WP Rocket이 필요할 수 있습니다.

마무리

성능 비교 감사에 따르면 Imagify는 WordPress 사이트에서 가장 똑똑하고 직관적인 최적화 플러그인입니다. 우리의 JPEG 이미지는 502KB에서 53KB로 늘어났습니다(거의 80% 절약).

새로운 Smart Compression 레벨 덕분에 Imagify는 성능 테스트 중에 Lighthouse에서 표시한 대부분의 이미지 관련 문제를 해결하는 데 도움이 되었습니다.

기회/경고 섹션 – No Imagify 감사 섹션 통과 – Imageify 사용

Imagify 이미지 최적화 플러그인은 품질 손실 없이 이미지 파일 크기를 줄이고 웹사이트 로드 속도를 높이고 SEO 순위를 높이고 대역폭을 절약합니다. Imagify를 사용해 보시지 않겠습니까? 한 달에 최대 200MB의 이미지를 무료로 사용할 수 있으며, 더 빠른 이미지를 제공하여 방문자를 기쁘게 하는 유일한 위험이 있습니다!