ShortPixel 검토: 이미지 압축을 통해 웹사이트 성능을 최적화하는 방법

2014년부터 50만 명 이상의 사용자 가 이미 ShortPixel의 뛰어난 이미지 최적화를 사용해 보았습니다. 웹 속도 최적화가 미래에 얼마나 중요한지 예견한 루마니아에 기반을 둔 이 회사는 GTmetrix 또는 Google PageSpeed ​​Insights가 보고하는 이미지와 관련된 모든 경고를 몇 번의 클릭으로 해결하는 매우 사용하기 쉬운 플러그인인 ShortPixel Adaptive Images를 출시했습니다. 이렇게 하면 SEO와 웹사이트 로딩 속도가 향상됩니다.

그러나 플러그인은 어떻게 이 모든 작업을 수행합니까? Shortpixel 적응 이미지( 줄여서 SPAI)에 대한 자세한 검토에서 알아보겠습니다.

ShortPixel 적응형 이미지의 기능은 무엇입니까?

ShortPixel이 하는 4가지 주요 작업은 다음과 같습니다.

• CDN에서 이미지 제공 : ShortPixel Adaptive Images는 웹사이트 방문자가 본 모든 이미지를 ShortPixel의 CDN에서 제공합니다. CDN이란 무엇입니까? 콘텐츠 유통망입니다. 간단히 말해서 특정 웹사이트의 복사본을 포함하는 전 세계에 분산된 서버 그룹입니다. 따라서 사용자가 위치한 국가 또는 지역에 관계없이 모든 사용자는 좋은 로딩 시간을 가질 수 있습니다. ShortPixel의 CDN에서 이미지를 로드하여 페이지의 로딩 속도를 높이는 것입니다. 평균 호스팅 제공업체, 전 세계에 서버 보유) 및 서버에서 일부 리소스 저장
• 이미지를 압축합니다 . ShortPixel CDN에서 제공되는 이미지는 손실, 광택 및 무손실의 3가지 최적화 수준을 제공하는 ShortPixel의 강력한 최적화 알고리즘을 사용하여 최적화됩니다. 나중에 더 자세히 설명합니다.
• 적응형 이미지를 제공합니다 . 플러그인 이름이 여기에서 유래했습니다. 이미지를 업로드하고 전체 크기 버전으로 페이지에 추가한다고 가정해 보겠습니다. 스마트폰에서 페이지를 방문하는 사용자는 노트북을 사용하는 사용자와 같은 크기로 이미지를 볼 필요가 없습니다. 플러그인이 이를 처리하여 장치가 요청하는 정확한 크기의 이미지를 제공합니다. GTmetrix를 사용하고 "적절한 크기의 이미지" 오류가 발생한 적이 있습니까? 이에 대해 정확히 불만을 토로하고 있다. ShortPixel Adaptive Images는 몇 번의 클릭으로 해당 메시지를 제거합니다!

• 필요한 모든 이미지 관련 문제를 해결합니다. 이미지를 압축하고 올바른 크기로 제공하는 것 외에도 여러 가지 방법으로 이미지를 더욱 개선할 수 있습니다. ShortPixel Adaptive Images도 이를 처리하며 몇 번의 클릭으로 다음을 수행할 수 있습니다.
  • EXIF 정보 제거
  • WebP 형식으로 이미지 제공
  • 지연 로드 이미지
  • 스마트하게 이미지 자르기
  • 지연 로딩에서 이미지 제외(이미지를 미리 로드하는 데 유용)

ShortPixel 적응형 이미지는 어떻게 작동합니까?

설명했듯이 웹사이트의 페이지 중 하나를 방문할 때마다 SPAI(ShortPixel Adaptive Images)는 코드를 분석하고 최적화되지 않은 원본 이미지를 적절한 크기의 최적화된 이미지로 교체합니다. 교체된 각 이미지는 ShortPixel CDN에서 제공됩니다.

SPAI는 서버의 어떤 파일도 건드리지 않습니다. SPAI는 즉석에서 이미지를 최적화합니다. 즉, 원래 이미지로 돌아가려면 단순히 이미지를 비활성화하면 됩니다. 이것은 모든 사용자에게 완전히 투명한 세부 프로세스입니다.

1. 사용자가 이미지가 포함된 페이지를 방문합니다.

2. 페이지가 로드되는 동안 SPAI는 코드에서 이미지 URL을 찾습니다. 예를 들면 다음과 같습니다.

3. 이미지 URL을 감지한 후 해당 이미지를 ShortPixel의 서버로 보내고 최적화하고 ShortPixel의 CDN에 저장합니다. 이 단계는 특정 이미지 크기가 처음으로 요청될 때만 수행됩니다.

4. 그런 다음 SPAI는 최적화되고 적절한 크기의 이미지가 포함된 CDN을 가리키는 새 URL로 URL을 대체합니다.

5. 페이지 로드가 완료되고 이미지가 ShortPixel의 빠른 CDN에서 제공되었습니다!

ShortPixel 적응형 이미지 설치 및 설정

설치

이것은 가장 쉬운 단계이며 다른 플러그인과 마찬가지로 설치됩니다. 이것은 당신이 찾아야 할 페이지입니다: ShortPixel 적응형 이미지 – WordPress.org

설정

온보딩 마법사

ShortPixel 적응형 이미지를 처음 사용하는 경우 이제 온보딩 마법사로 리디렉션됩니다.

이 4단계 마법사는 모든 이미지가 최적화된 CDN에서 제공되도록 SPAI를 올바르게 구성하는 데 도움이 됩니다.

예를 들어 이미 SPAI를 사용 중이고 새 버전으로 업데이트한 경우 설정 > ShortPixel AI로 이동하고 오른쪽 상단 도움말 메뉴에 있는 "설정 마법사" 버튼을 클릭하여 마법사를 다시 시작할 수 있습니다.

ShortPixel 적응형 이미지는 작동을 시작하기 위해 API 키 가 필요하지 않습니다 (ShortPixel Image Optimizer와 반대). 귀하의 웹사이트/도메인을 계정에 연결하기만 하면 ShortPixel 크레딧이 사용되고 온보딩 마법사에서 자동으로 수행됩니다.

온보딩 마법사를 완료한 후 최적화된 이미지가 표시되도록 사이트의 캐시를 지워야 합니다!

설정

ShortPixel 적응형 이미지는 온보딩 마법사를 사용하여 활성화하고 설정한 직후 마법을 시작하므로 사용하기가 매우 쉽습니다. ON 버튼이나 이와 유사한 것을 클릭할 필요가 없습니다. 그러나 SPAI는 이미지 최적화를 조정하기 위한 몇 가지 설정도 제공합니다. 액세스하려면 WordPress 관리 영역에 로그인하고 설정 > ShortPixel AI로 이동하십시오. 가장 중요한 설정을 살펴보고 압축 탭부터 시작하겠습니다.

• 압축 수준 : 여기에서 이미지에 원하는 압축 수준을 선택할 수 있습니다.
  • Lossy는 대부분의 사용자에게 최상의 옵션입니다. Lossy 알고리즘으로 처리된 이미지는 얻을 수 있는 가장 작은 최적화된 이미지입니다. 따라서 사이트 속도가 가장 중요하고 최적화와 화질 간의 최상의 균형을 원한다면 손실 최적화를 사용하는 것이 좋습니다.
  • 여전히 GTmetrix 또는 Google PageSpeed ​​Insights에 관심이 있지만 페이지 속도의 약간의 손실이 최고 수준의 이미지 품질에 대한 수용 가능한 타협이라고 생각하는 경우 광택이 최선의 선택입니다.
  • 무손실을 사용하면 이미지가 원본과 픽셀 단위로 동일하지만 손실 또는 광택 처리 파일에 비해 크기가 더 작아집니다. 이미지를 그대로 유지하려면 이 옵션을 선택하십시오.
• WebP 지원 : WebP 형식은 Google에서 만든 이미지 형식으로 화질 손실이 거의 없이 우수한 압축 결과를 얻을 수 있습니다. WebP가 작동하는 방식에 대한 간단한 예: 인터넷에서 사진을 찍고 임의의 온라인 JPG를 WebP로 변환하는 변환기를 사용하여 1.05MiB에서 344KiB로 67.93% 감소했으며 이미지 품질은 거의 동일합니다! 따라서 "WebP 지원" 옵션을 선택하여 브라우저가 호환되는 한 ShortPixel의 CDN에서 제공되는 이미지가 .webp 형식이어야 한다고 SPAI에 알립니다.

• EXIF 제거 : 플러그인을 사용하면 위치, 작성자, 카메라 모델 등과 같이 이미지 자체에 포함된 "추가" 정보를 제거할 수 있습니다. 이 정보는 일반적으로 필요하지 않으며 제거하면 이미지의 무게를 줄이는 데 도움이 됩니다. 조금. 활성화하는 것이 좋습니다.

이제 동작 탭으로 이동합니다. 다른 많은 조정 중에서 다음을 찾을 수 있습니다.

• 스마트 자르기 : 플러그인은 모든 이미지가 표시되지 않는 경우를 식별하여 그에 따라 자릅니다.
• 로그인한 사용자 : 기본적으로 ShortPixel AI는 로그인한 경우에도 이미지를 제공하고 최적화합니다. 그러나 일부 CDN 트래픽과 크레딧을 저장하려면 이 옵션을 비활성화하면 SPAI가 로그인된 사용자에 대해서만 작동합니다. 아웃 사용자(방문자).
• LQ 이미지 자리 표시자 : LQIP는 저품질 이미지 자리 표시자를 나타냅니다. 그것들은 초기 페이지 로드와 함께 로드되는 매우 낮은 품질의 이미지(따라서 매우 가벼움)이며 페이지가 완전히 로드되면 전체 품질의 이미지로 교체됩니다. 이는 인지된 로드 시간을 늘리는 데 도움이 됩니다.

다음으로 Areas(영역) 탭에서 어떤 이미지를 구문 분석하고 최적화해야 하는지 SPAI에 알려주는 모든 종류의 설정을 찾습니다.

• SVG 이미지(최적화되지 않고 CDN에만 저장됨).
• CSS의 이미지 이 경우 CSS 파일 자체도 CDN에 저장됩니다.
• JS 블록의 이미지
• JSON 데이터의 이미지

마지막으로 제외 탭에서 최적화에서 이미지를 제외할 수 있는 몇 가지 필드를 찾습니다.

• 제외된 선택기 : 여기에서 SPAI가 최적화에서 제외할 CSS 선택기를 작성할 수 있습니다.
  • "지연 로드 안 함"으로 작성하면 이러한 선택기는 지연 로드되지 않지만 여전히 최적화되고 크기가 조정됩니다.
  • "크기 조정 안 함"으로 입력하면 SPAI는 이러한 이미지를 최적화하지만 크기를 조정하지는 않습니다.
  • "완전히 제외"에 작성하면 SPAI는 최적화나 크기 조정 없이 완전히 무시합니다.
• 제외된 URL : SPAI가 URL로 이미지 중 일부를 무시하도록 하려면 여기에서 정규 표현식(예: 모든 GIF 또는 모든 PNG 제외) 또는 경로(예: 단일 이미지 제외)를 사용하여 이미지를 제외합니다. . 플러그인에는 이 필드를 사용하는 방법에 대한 좋은 설명이 포함되어 있으므로 확인하십시오!

모든 설정이 끝나면 사이트의 모든 페이지에서 최적화된 이미지의 상태를 확인할 수 있는 간단한 도구인 새로운 이미지 검사기 도구를 확인하십시오 . 로그인한 상태에서 아무 페이지나 방문하세요. 툴바에서 유명한 ShortPixel 로봇을 볼 수 있습니다.

해당 아이콘을 클릭하면 이미지 검사기가 켜집니다. 각 이미지에 대해 "CDN" 또는 "ORIGIN" 태그가 나타납니다. "CDN"은 이미지가 ShortPixel의 CDN에서 최적화되어 제공됨을 의미하고 "ORIGIN"은 서버에서 제공되거나 ShortPixel Adaptive Images에서 처리하지 않는다는 의미입니다.

또한 커서가 십자가(⌖)로 바뀌고 이미지를 클릭하면 추가 정보와 작업이 표시됩니다.

가격 및 계획

가격 책정에 대해 이야기하기 전에 SPAI가 즉석에서 작동한다는 것을 기억해야 합니다. 프런트 엔드에서 한 번 이상 본 경우에만 이미지를 처리합니다. 그 때까지 이미지는 처리되지 않은 상태로 남아 있으므로 크레딧을 사용하지 않습니다.

이미지 처리는 스마트 자르기(선택한 경우), 크기 조정 및 최적화를 의미합니다. 이미지가 처리되면 ShortPixel CDN 서버에 저장되며 구매한 CDN 트래픽 할당량을 사용하여 모든 사람에게 제공될 수 있습니다. 사용 가능한 CDN 트래픽 할당량이 충분하면 최적화된 이미지가 ShortPixel의 CDN에서 제공됩니다.

ShortPixel은 CDN 할당량으로 변환된 크레딧을 제공합니다. 규칙은 간단합니다. 5MB의 CDN 트래픽 = 1크레딧 . 일회성 및 월간 크레딧을 모두 사용하여 이미지를 처리할 수 있습니다.

월간 계획

• 무료 요금제 = 100크레딧 = 500MB 의 CDN 트래픽 = ~500회/월 방문
• $4.99 /월 플랜 = 5,000크레딧/월 = 25GB 의 CDN 트래픽 = ~25,000회/월 방문
• $9.99 /월 플랜 = 16,000크레딧/월 = 80GB 의 CDN 트래픽 = ~80,000회/월 방문
• $29.99 /월 플랜 = 55,000크레딧/월 = 275GB 의 CDN 트래픽 = ~275,000회/월 방문
• $99.99 /월 플랜 = 220,000크레딧/월 = 1TB 의 CDN 트래픽 = ~1,100,000회/월 방문

일회성 플랜

• $9.99 – 10,000크레딧 = 50GB = ~50,000회 방문
• $19.99 – 30,000크레딧 = 150GB = ~150,000회 방문
• $29.99 – 50,000크레딧 = 250GB = ~250,000회 방문
• $99 – 170,000크레딧 = 850GB = ~850,000회 방문
• $249 – 500,000크레딧 = 5TB = ~2,500,000회 방문

예: 한 달에 10,000번 방문하는 5000개 이상의 이미지가 있는 중간 규모 웹사이트를 소유하고 있다고 가정해 보겠습니다.

월 $4.99의 월간 요금제는 25GB의 CDN 트래픽을 허용하며, 이는 테스트에서 한 달에 약 25,000번의 방문으로 변환됩니다.

여기에서 요금제 및 가격에 대해 자세히 알아보십시오.

그만한 가치가 있습니까?

웹사이트에서 가장 무거운 부분이 항상 이미지라는 점과 웹사이트가 로드하는 데 1초가 추가될 때마다 사용자와 전환이 손실된다는 점을 고려하면 확실히 가치가 있습니다 . 설치 후 삭제 플러그인이며 원래 이미지로 돌아가고 싶은 경우 제거하기만 하면 됩니다.

또한 지원 팀은 훌륭하며 수십 명의 사용자가 wordpress.org에서 이를 보증할 수 있습니다.

웹사이트의 속도를 개선하고 Google에서의 위치를 ​​높이고 방문자 수를 늘리는 데 도움이 되는 적극 권장되는 플러그인입니다. 그리고 Cloudways와 같은 양질의 호스팅과 결합하면 결과가 훨씬 더 흥미로울 것입니다.

ShortPixel Adaptive Images에 대한 이 리뷰가 사이트를 초고속으로 만드는 데 도움이 되기를 바랍니다!