빠른 검토: 실시간 WordPress 이미지 최적화
게시 됨: 2022-02-14평균적으로 이미지는 평균 웹 페이지 파일 크기의 약 절반을 차지한다는 사실을 알고 계셨습니까?
즉, 최적화되지 않은 이미지를 사용하는 경우 해당 이미지가 웹사이트의 로드 시간에 막대한 부정적인 영향을 미칠 수 있습니다.
Quickq는 사이트 이미지를 실시간으로 완전히 최적화하고 Google Cloud 기반 콘텐츠 전송 네트워크(CDN)에서 제공할 수 있는 Afosto의 서비스입니다. 성능 외에도 이미지 자르기, 워터마크 추가 등과 같이 이미지를 쉽게 조작하는 데 사용할 수도 있습니다.
전용 통합 플러그인뿐만 아니라 Magento 및 PrestaShop과 같은 다른 플랫폼을 통해 WordPress와 함께 작동합니다.
실제 Quickq 리뷰에서는 Quicq가 작동하는 방식과 이를 사용하여 WordPress 사이트의 이미지를 최적화하는 방법을 보여줍니다.
파헤쳐보자…
Quick Review: 플러그인이 하는 일
높은 수준에서 Quickq는 WordPress 이미지 최적화를 위한 완벽한 솔루션을 제공하는 데 중점을 두고 있습니다. 기본적으로 모든 중요한 이미지 최적화 전술의 이점을 누릴 수 있는 플러그 앤 플레이 도구입니다. 자세한 내용은 아래에 있습니다.
대부분의 사람들이 이미지 최적화와 관련하여 생각하는 두 가지 "주요" 전술이 있습니다.
- 크기 조정 – 사이트에서 이미지를 사용하는 방식과 일치하도록 이미지의 실제 크기를 조정합니다. 치수가 작을수록 데이터가 적어지고 이미지 크기가 작아집니다.
- 압축 – 압축 알고리즘을 사용하여 크기를 변경하지 않고 이미지의 파일 크기를 축소합니다. 무손실 알고리즘( 품질 변경 없음 ) 또는 손실 알고리즘( 품질의 약간 감소 )을 통해.
Quiqq는 확실히 이러한 전술을 구현할 수 있지만 이미지 크기를 정적으로 조정하고 압축하는 것 이상의 새로운 유형의 이미지 최적화 플러그인이기도 합니다.
대신 Google Cloud 기반 CDN에서 이미지를 자동으로 제공한 다음 방문자를 위해 실시간으로 최적화합니다.
사이트에서 Quickq를 활성화하는 즉시 다음 최적화를 통해 모든 이미지가 자동으로 최적화됩니다.
- Google Cloud에서 제공하는 Quickq CDN을 통해 제공하세요. 이를 통해 방문자는 가장 가까운 CDN 위치에서 이미지를 다운로드할 수 있습니다.
- 각 방문자의 장치에 따라 최적의 크기로 크기를 조정합니다.
- 압축하여 파일 크기를 줄이십시오.
- JPEG 및 PNG보다 작은 크기를 제공하는 최적화된 이미지 형식으로 변환합니다. Quickq는 WebP보다 더 작은 파일 크기를 제공할 수 있는 최신 이미지 형식인 WebP와 AVIF를 모두 지원합니다. AVIF 지원은 모든 서비스가 아직 이 새로운 이미지 형식을 지원하는 것은 아니기 때문에 주목할 만합니다.
이러한 모든 변경으로 인해 이미지 로드 시간이 훨씬 빨라지고 결과적으로 웹 사이트 로드 시간도 단축됩니다.
동적 실시간 이미지 최적화를 사용하는 이유
위에서 언급했듯이 Quicq는 실시간으로 이미지를 최적화하는 동적 최적화 접근 방식을 사용합니다.
즉, 기존의 최적화 플러그인처럼 워드프레스 사이트 서버에서 이미지의 원본 버전을 최적화하는 대신 Quicq는 원본 이미지를 건드리지 않고 대신 "클라우드"에서 작업을 수행합니다.
이 동적 최적화 접근 방식에는 몇 가지 장점이 있습니다.
가장 큰 장점은 모든 방문자가 실제 장치 크기를 기반으로 최적화된 이미지를 볼 수 있다는 것입니다.
예를 들어 방문자가 저해상도 스마트폰 화면에서 탐색하는 경우 경험에 영향을 주지 않으면서 작은 크기의 이미지를 제공할 수 있습니다.
그러나 방문자가 거대한 4K 화면에서 탐색하는 경우 사이트에서 더 큰 버전의 이미지를 원활하게 제공하여 훌륭한 사용자 경험을 제공할 수 있습니다.
Quicq는 동적, 즉석 최적화 접근 방식을 사용하기 때문에 각 개별 사용자에게 최적의 이미지 크기와 형식을 제공할 수 있습니다.
이 동적 접근 방식은 원본 이미지 파일을 편집하거나 이미지의 새 버전을 업로드할 필요 없이 이미지를 변경할 수 있으므로 이미지를 조작하려는 경우에도 매우 유용합니다.
예를 들어 이미지의 URL을 조작하는 것만으로도 다음 조작을 수행할 수 있습니다.
- 다양한 방법으로 이미지를 자릅니다.
- 워터마크를 추가합니다.
- 이미지를 흐리게 합니다.
- 이미지 크기를 변경합니다.
- 화질을 조정합니다. 예를 들어, 일부 지점에서 고해상도의 압축되지 않은 이미지를 사용하고 싶을 수 있습니다. 당신은 쉽게 할 수 있습니다.
- 다른 이미지 형식을 사용하십시오. 예: WebP 또는 AVIF.
Quickq를 사용하면 원본 이미지를 한 번만 업로드하면 됩니다. 그런 다음 URL에 몇 가지 추가 쿼리 매개변수를 추가하여 이러한 모든 조작을 수행할 수 있습니다.
예를 들어 원본 이미지에 대한 링크는 다음과 같습니다.
https://cdn.quicq.io/wpmayor/2022/01/pexels-andrea-piacquadio-837358.jpg
다음은 이미지를 1,000×1,000 정사각형으로 자르는 링크입니다.
https://cdn.quicq.io/wpmayor/2022/01/pexels-andrea-piacquadio-837358.jpg?w=1000&h=1000&c=1
다음 섹션에서 몇 가지 실제 예를 보여 드리겠습니다.
Quickq 실습: WordPress 이미지를 최적화하는 방법
이제 Quiqq가 무엇을 하는지 알았으므로 실습을 진행하고 WordPress에서 작동하는 방법을 보여 드리겠습니다.
다시 말하지만, WordPress에 국한되지 않고 WordPress 사이트에서 매우 쉽게 사용할 수 있는 전용 WordPress 플러그인을 제공합니다.
1. 무료 Quickq 계정 등록
시작하려면 무료 Quickq/Afosto 계정에 등록해야 합니다. 다음에 가격 책정에 대해 이야기할 것이지만 관대한 영구 무료 계획이 있으며 14일 무제한 무료 평가판도 제공됩니다(신용 카드가 필요 없음).
계정에 등록한 후 Afosto 대시보드에서 Quicq 옆에 있는 무료 평가판 시작 버튼을 클릭하십시오.
2. 퀵 CDN 생성
다음으로, 본질적으로 사이트의 이미지를 제공하고 최적화하는 Quickq CDN을 만들어야 합니다.
Quicq 평가판을 시작하면 이를 수행하는 작업이 기본 Afosto 대시보드의 작업 목록에 자동으로 나타납니다. 표시되지 않으면 Quickq 옆에 있는 톱니바퀴 아이콘을 클릭하여 이 인터페이스에 액세스할 수도 있습니다.
먼저 Quickq CDN에 사용할 URL을 입력해야 합니다. 이미지는 이 URL에서 로드되므로 웹사이트와 관련되도록 만들고 싶을 것입니다.
예를 들어, WP Mayor용으로 생성하는 경우 URL을 wpmayor 로 만듭니다 .
그런 다음 사이트의 기존 이미지에 대한 직접 URL을 입력하고 웹사이트 확인을 클릭합니다.
그런 다음 Quickq는 WordPress를 사용하고 있음을 자동으로 감지하고 이미지 경로를 생성합니다. 이 경로는 wp-content 폴더 내의 업로드 폴더여야 합니다.
이미지의 캐시 동작을 제어할 수 있는 고급 설정 을 확장할 수도 있습니다. 기본값은 365일이며 괜찮습니다. 그러나 원하는 경우 이를 변경할 수 있습니다.
작업을 완료하려면 추가 버튼을 클릭하세요.
3. Quick Plugin 설치 및 URL 키 추가
계정을 만들고 CDN을 설정하고 나면 WordPress.org에서 사이트에 무료 Quicq 플러그인을 설치할 수 있습니다. 이렇게 하면 방금 만든 이미지 CDN과 WordPress 사이트를 통합할 수 있습니다.
플러그인을 활성화한 후 WordPress 대시보드의 새로운 Quickq 영역으로 이동하여 설정 프로세스에서 입력한 URL 키를 추가합니다. 즉, 사용자 정의할 수 있었던 CDN URL 부분입니다.
제 예에서는 wpmayor 입니다.
그런 다음 활성 Quickq 토글을 선택한 다음 변경 사항 저장 을 선택하여 라이브로 만듭니다.
그리고 그게 다야! 이제 WordPress 사이트에서 실시간 이미지 최적화가 포함된 Quicq CDN을 통해 이미지 로드를 시작해야 합니다.
여기서 주의할 사항은 Quicq 플러그인 영역이 WordPress 대시보드의 최상위 메뉴 영역이 되어야 한다고 생각하지 않는다는 것입니다. 일회성 설정에 불과하기 때문에 설정 → 퀵 과 같은 하위 메뉴로 이동하여 사용자가 보다 깔끔한 관리 영역을 가질 수 있도록 하는 것이 좋을 것 같습니다.
4. URL 매개변수로 이미지 조작(필요한 경우)
대부분의 WordPress 사이트의 경우 이미지를 최적화하기 위해 다른 작업을 수행할 필요가 없습니다. 이 시점에서 Quickq는 이미 다음 최적화를 자동으로 수행하고 있습니다.
- 각 사용자의 장치에 따라 최적의 방식으로 이미지를 압축/크기 조정합니다.
- 가장 잘 작동하는 것에 따라 이미지를 WebP 또는 AVIF 형식으로 변환합니다.
- Quickq의 Google Cloud CDN을 통해 이미지를 제공합니다.
그러나 앞서 언급했듯이 Quicq의 실시간 접근 방식의 멋진 점 중 하나는 URL에 일부 쿼리 매개변수를 추가하기만 하면 이미지를 조작할 수도 있다는 것입니다.
자세한 내용은 여기에서 문서 페이지를 확인하세요. 하지만 작동 방식에 대한 몇 가지 빠른 예를 살펴보겠습니다.
사이트의 한 부분에서 사용하는 와이드 이미지가 있다고 가정해 보겠습니다. 이제 동일한 이미지를 사용하고 싶지만 정사각형 이미지로 자릅니다.
Quickq가 없으면 좋아하는 이미지 편집 도구를 열고 이미지를 자른 다음 사용할 자른 이미지의 새 복사본을 업로드해야 합니다.
Quickq의 실시간 이미지 처리를 사용하면 URL 매개변수를 추가하기만 하면 원본 이미지에 영향을 주지 않고 자르기를 수행할 수 있습니다.
원본 이미지와 URL은 다음과 같습니다.
그리고 다음은 이 URL 매개변수를 추가하여 1000×1000픽셀 정사각형으로 자를 때 이미지가 어떻게 보이는지 보여줍니다. – ?w=1000&h=1000&c=1 :
여기 또 다른 예가 있습니다...
이미지를 정사각형으로 자르는 것 외에도 한 단계 더 나아가 이미지를 흐리게 하고 싶다고 가정해 보겠습니다.
흐림 매개변수를 추가하고 사용하려는 흐림 정도(0에서 3까지)를 설정하기만 하면 이미지가 흐려집니다.
퀵 가격
Quickq에는 꽤 관대한 영구 무료 계획이 있고 더 많은 기능이 필요한 사용자를 위한 유료 계획이 있습니다.
무료 플랜을 사용하면 매월 최대 100,000개의 이미지를 최적화할 수 있고 매월 25GB 의 CDN 대역폭을 영구적으로 제공할 수 있습니다. 이는 소규모 사이트에 충분합니다. 예를 들어, 기본 브로셔/포트폴리오 사이트나 소규모 블로그가 있다면 그 이상은 없을 것입니다.
*이미지 최적화는 기존 플러그인처럼 한 번이 아니라 동적으로 발생하므로 이미지가 로드될 때마다 한 번의 최적화로 계산됩니다.
유료 요금제가 필요한 경우 두 가지 측정항목에 따라 요금이 청구됩니다.
- 최적화 – 월별 이미지 최적화 수입니다.
- 데이터 전송 – CDN을 통해 제공될 때 이미지가 소비하는 대역폭의 양입니다.
이 청구 전략은 다른 실시간 이미지 최적화 플러그인보다 약간 더 복잡하며 일반적으로 사이트의 월간 방문 수를 기준으로 비용을 청구합니다.
그러나 실제로는 이 청구 모델이 더 마음에 듭니다. 왜냐하면 그것이 사용량을 추정하기가 조금 더 어렵더라도 더 공정한 청구 방법이라고 생각하기 때문입니다.
이 접근 방식을 사용하면 실제 사용량을 기준으로만 청구되므로 비용을 절약하는 데 도움이 될 것입니다.
지불할 금액을 알아보려면 가격 페이지에서 계산기를 사용할 수 있습니다.
사이트 사용량이 확실하지 않은 경우 프리 티어를 사용하여 시작 하거나 더 높은 사용량 계획의 14일 무료 평가판을 사용할 수도 있습니다. 그러면 사이트 사용량을 잘 이해할 수 있습니다.
프리미엄 플랜이 필요한 경우 독점 쿠폰 코드를 사용 하여 모든 패키지에 대해 첫 두 달 동안 20% 할인 을 받을 수 있습니다.
Quiq에 대한 최종 생각
전반적으로 많은 사이트가 이 실시간 이미지 최적화 접근 방식으로 이동하고 있다는 것을 알고 있습니다.
이 접근 방식은 이미지를 조작하고 각 방문자가 고유한 상황에 최적화된 이미지를 볼 수 있도록 하는 유연성 때문에 제공할 것이 많다고 생각합니다.
Quickq는 이것을 WordPress에 가져온 첫 번째 플러그인은 아니지만 몇 가지 기능이 있습니다.
- 그것은 매우 관대 한 무료 계층이 있습니다. 그것은 내가 본 것 중 가장 높은 무료 등급을 가지고 있습니다.
- 실제 사용량에 따라 비용을 지불하기 때문에 프리미엄 옵션에 대한 가격 책정 모델이 마음에 듭니다. 가격 책정을 조금 더 복잡하게 만들기는 하지만 청구하는 "공정한" 방법이라고 생각합니다. 또한 지불할 금액이 확실하지 않은 경우 언제든지 14일 무제한 평가판을 사용하여 사이트의 실제 사용량을 파악할 수 있습니다.
- 여전히 자르기, 흐림 등과 같은 다른 이미지 조작을 수행할 수 있습니다. 내가 알고 있는 대부분의 다른 WordPress 플러그인은 성능에만 초점을 맞추거나 워터마킹에 대한 액세스 권한만 부여하므로 Quicq가 그 이상을 제공한다는 것은 멋진 일입니다. 대부분의 일반 사용자는 이것을 사용하지 않을 것이지만 고급 사용자와 개발자에게는 좋습니다.
사용해 보고 싶으시다면, Quicq는 관대한 영구 무료 플랜과 사용량을 파악하는 데 도움이 되는 14일 무제한 무료 평가판을 제공합니다. 아래 버튼을 클릭하여 시작할 수 있습니다.