빠른 이미지 전달 : 웹 및 CDN의 이미지를 최적화합니다

사이트의 성능을 높이고 싶습니까? 웹의 이미지를 최적화하십시오!

그게 무슨 뜻입니까? 그것은 사이트를 속도를 늦추지 않고 방문객들을 기쁘게하는 고품질 이미지를 제공하는 것을 의미합니다.

Etsy에있는 구매자의 90%가 이미지 품질이 구매 결정에 영향을 준다고 말한다는 것을 알고 있습니까? 마찬가지로 AirBnB는 전문 사진이있는 목록이없는 것보다 20% 더 많은 예약을 받는다는 것을 발견했습니다. 아름다운 이미지는 변환을 높이지만 캐치가 있습니다. 크고 최적화되지 않은 이미지는 사이트를 크게 느리게 할 수 있습니다.

우리는 당신의 등을 가지고 있습니다! 그것이 이미지 최적화가 시작되는 곳입니다.

이 안내서에서는 웹 및 CDN의 이미지를 최적화하여로드 시간과 성능 향상을 보장하는 최상의 기술을 배웁니다.

웹을위한 3 가지 필수 이미지 최적화 기술

웹의 이미지를 최적화하는 효과적인 방법은 웹을 올바른 형식으로 제공하고 품질을 잃지 않고 압축하는 것입니다. 최적화 여정을 시작하기 위해 세 가지 기본 기술을 살펴 보겠습니다.

1. 웹에 올바른 이미지 형식을 선택합니다

JPEG, PNG 및 GIF와 같은 오래된 형식은 웹에 잘 봉사했지만 Webp 및 AVIF와 같은 차세대 형식의 효율성이 부족합니다. 이 최신 형식은 우수한 압축과 동일한 품질을 제공하므로 이미지가 세부 사항을 희생하지 않고 더 빠르게로드합니다.

예와 모범 사례

• 더 작은 파일 크기와 더 나은 성능을 위해 항상 이미지를 Webp 또는 Avif로 변환하십시오.

Google의 Web.dev 연구에 따르면 Webp Images는 비슷한 JPEG보다 25-34% 작아서 더 빠른 웹 사이트를위한 현명한 선택입니다. 아래에서 JPEG 파일의 무게는 43.84KB이고 웹은 29.61KB에 불과하지만 품질은 동일하다는 것을 알 수 있습니다.

IMG

2. 올바른 치수에 대한 이미지 크기 조정

브라우저가 즉시로드하고 크기를 조정해야하기 때문에 네문 이상의 이미지를 사용하면 웹 사이트가 속도가 느려집니다. 이미지를 표시 할 정확한 크기로 확장하면 파일 크기를 줄이고로드 속도를 향상시킵니다.

예와 모범 사례

사이트의 실제 디스플레이 크기와 일치하도록 항상 이미지 크기를 조정하십시오.

• WordPress 블로그 게시물의 경우 800px 너비가 이상적입니다.

• WooCommerce 제품 이미지의 경우 최소 800px × 800px는 명확성을 보장합니다.

3. 품질 손실없이 이미지를 압축합니다

이미지 압축은 파일 크기를 줄이며, 이는 페이지 속도를 향상시키는 데 필수적인 HTTP 요청과 더 빠른로드 이미지를 의미합니다. 그러나 너무 많이 압축하면 흐릿한 사진이 생겨 웹 사이트의 신뢰성과 전환율에 영향을 줄 수 있습니다. 핵심은 올바른 균형을 찾는 것입니다. 눈에 띄는 품질 손실없이 파일 크기가 작습니다.

예와 모범 사례

이미지 품질을 변경하지 않지만 파일 크기를 가능한 한 많이 줄이는 압축 도구를 사용하십시오.

예를 들어이 두 이미지의 차이점을 발견 할 수 있습니까?

우리는 할 수 없습니다! 오른쪽에있는 것은 80%로 압축되지만 품질은 동일하게 유지됩니다.

세 가지 기본 전략을 알았으므로 고급 기술로 이미지 최적화 노력을 더욱 발전시키고 웹에 대한 이미지를 더욱 준비시킬 수 있습니다.

고급 웹 이미지 최적화 전략

이미지 최적화는 압축 및 차세대 형식을 넘어선 것입니다. 게으른 하중, 반응 형 이미지 및 Alt-Text 최적화와 같은 고급 기술을 고려하여 성능 및 SEO를 향상시킵니다.

1. 더 빠른 초기 페이지로드를 위해 게으른 하중 구현

웹을위한 이미지를 준비하는 최초의 고급 기술은 게으른 하중을 적용하는 것입니다. 외부 사진이 필요할 때까지 초기 페이지로드 시간을 줄이면 초기 페이지로드 시간을 줄입니다.

게으른로드를 구현함으로써 이미지가 사용자의 뷰포트에서 볼 때만로드되도록하여 페이지가 더 빠르게 느껴집니다.

예와 모범 사례

“태국에서 가장 좋은 10 개의 해변”이라는 제목의 WordPress 블로그 게시물을 읽고 있다고 상상해보십시오. 게으른 하중은 한 번에 10 개의 큰 이미지를 모두로드하는 대신 다음을 보장합니다.

• 첫 번째 해변 이미지는 페이지와 즉시로드됩니다.

• 나머지 이미지는 아래로 스크롤 할 때만로드되어 초기로드 시간이 줄어 듭니다.

당신이해야 할 일은 다음과 같습니다.

• 접이식 아래 이미지에 네이티브 하중 = "게으른"을 사용하십시오.

• 게으른 하중에서 영웅 이미지와 주요 시각적 요소를 제외하십시오.

2. 중요한 이미지를 먼저로드하고 우선 순위를 정하고 우선 순위를 정하고 우선 순위를 정합니다.

같은 라인을 따라 웹 이미지 최적화를위한 또 다른 고급 기술은 브라우저가 LCP (Later Contentful Paint) 요소와 같은 중요한 이미지를 우선시하는 것입니다.

LCP는 가장 큰 콘텐츠를 페이지에로드하는 데 걸리는 시간을 측정하는 핵심 웹 생명체 중 하나입니다 (일반적으로 이미지). LCP를 개선하려면 브라우저 에이 키 이미지를 최대한 빨리 렌더링하는 데 우선 순위를 정하기 위해 브라우저에 알려야합니다.

예 및 모범 사례

WooCommerce 제품 페이지의 LCP 요소 (대부분 주요 제품 이미지)를 상상해보십시오. 게으른 하중을 넘어서 더 빨리로드하기 위해 다음과 같은 것도 할 수 있습니다.

• LCP 이미지에서 FetchPriority = "High"를 사용하여 브라우저에 즉시로드하도록 지시하십시오.

• rel = "preload"를 사용하십시오. 이미지가 초기 HTML에 없으면 브라우저가 미리로드되도록합니다.

3. 다양한 화면 크기에 반응 형 이미지 사용

반응 형 이미지를 사용하면 브라우저가 사용자의 장치를 기반으로 가장 적절한 이미지 크기를로드하도록하여 페이지 속도가 향상됩니다. 이로 인해 대형 이미지가 더 큰 화면에서 고품질을 유지하면서 모바일 경험을 둔화시키는 것을 방지합니다.

예와 모범 사례

• <pirture> 요소 또는 SRCSET 속성을 사용하여 사용자의 장치를 기반으로 다른 이미지 크기를 제공하십시오.

• 모바일, 태블릿 및 데스크탑 디스플레이의 이미지를 별도로 최적화하십시오.

• 페이지 나 전체 웹 사이트를 구축 할 때 모바일 우선을 설계하십시오.

다음은 참조를위한 전 세계 최고의 화면 해상도입니다.

• 데스크탑 : 1920 × 1080, 1366 × 768, 1536 × 864, 1280 × 720

• 모바일 : 360 × 800, 390 × 844, 393 × 873, 412 × 915

• 태블릿 : 768 × 1024, 1280 × 800, 800 × 1280, 820 × 1180

4. SEO에 대한 Alt-Text 최적화

Alt-Text는 검색 엔진에 관련 컨텍스트를 제공하여 접근성을 향상시키고 이미지 SEO에 기여합니다. 그들은 이미지에 대한 텍스트 설명을 제공하고 Google 이미지의 주요 결과에 소개 될 가능성을 높일 수 있습니다.

예와 모범 사례

• 관련 키워드 만 자연스럽게 통합하여 간단하고 설명 적이지만 간결합니다.

• 키워드를 피하고 사용자 친화적이고 의미있는 설명에 더 집중하십시오.

예를 들어, WooCommerce 제품에 대한 좋은 대체 태그 예는 다음과 같습니다.

"버튼 업면과 두 개의 가슴 주머니가있는 여성의 대형 블루 진 재킷."

이 ALT 태그는 설명적이고 주요 세부 사항을 포함하며 SEO의 키워드를 자연스럽게 통합합니다.

다른 한편으로, 그것은 나쁜 예일 것입니다 (키워드 스터핑) :“Blue Jean Jacket Denim 대형 여성의 블루 재킷 트렌디 한 패션 재킷 숙녀.”

5. 더 빠른 이미지 전달을 위해 CDN을 활용합니다

CDN (Content Delivery Networks)은 웹을위한 이미지를 준비하고 페이지 속도를 향상시키는 또 다른 효율적인 기술입니다.

CDNS는 캐싱 및 온실 크기 조정을 사용하여 이미지 로딩 속도를 향상시켜 이미지가 사용자 장치의 올바른 크기로 전달되도록합니다.

캐싱 덕분에 이미지가 최적화되면 CDN은 새 장치가 요청할 때마다 다시 최적화 할 필요가 없습니다. 또한 이미지는 서버에서 사용자와 가장 가까운 서버에서 제공되어 이미지 전달 속도를 높입니다.

예

Origin Server는 런던에 있지만 시드니의 고객은 제품 이미지로 채워진 WooCommerce 사이트에 액세스하려고합니다. CDN이 없으면 요청은 런던으로 이동 한 다음 시드니로 돌아갑니다. 그러나 CDN을 사용하면 호주의 로컬 서버에서 요청을 처리하고 이미지가 훨씬 빠르게로드됩니다.

CDN으로 이미지를 최적화하기위한 모범 사례

• 이미지 CDN이 URL에 의존하여 크기, 형식 및 품질과 같은 매개 변수를 사용하는 이미지를 결정하기 때문에 URL을 확인하십시오.

• 앞에서 언급했듯이 이러한 차세대 형식은 이미지 압축과 품질을 향상시키기 때문에 CDN이 AVIF 및 웹을 지원하십시오.

• 이미지 CDN을 사용하기 전에 이미지 (예 : 압축으로)를 최적화하여 다른 최적화 계층을 추가 할 수 있습니다.
  

웹 이미지 최적화를위한 최고의 도구 및 플러그인

웹의 이미지를 최적화하는 가장 좋은 방법은 WP Rocket, Imagify 및 RocketCDN과 같은 성능 최적화 플러그인을 사용하는 것입니다. 또한 Sketch 또는 Photoshop과 같은 디자인 도구를 사용하면 웹 사용을 위해 이미지를 정확하게 조정하는 데 도움이됩니다. 또 다른 경험 법칙은 완전히 반응이 좋은 WordPress 테마와 모바일 친화적 인 플러그인을 사용하여 이미지가 다른 장치에 올바르게 적용되도록하는 것입니다. 이러한 각 도구를 살펴 보겠습니다.

1. Imagify - 가장 쉬운 이미지 최적화 플러그인

Imagify는 고품질을 유지하면서 이미지를 대량으로 자동 압축하는 가장 쉬운 이미지 최적화 플러그인입니다. Imagify는 앞에서 언급 한 세 가지 기본 이미지 최적화 기술을 적용하는 데 도움이됩니다 : 압축, 차세대 변환 및 더 큰 이미지의 크기 조정-모든 것을 쉽게 쉽게.

웹 최적화에 유리한 주요 기능

웹의 이미지를 준비하는 데 도움이되는이 세 가지 기능을 살펴 보겠습니다.

• 스마트 압축 모드는 파일 크기 감소와 시각적 품질 사이의 최상의 균형을 자동으로 제공합니다. 모든 이미지를 한 번에 누르고 최적화 할 수있는 벌크 압축 버튼이 있습니다.

궁금한 점이 있으면 품질이 원본 이미지 (왼쪽)에서 동일하다는 것을 알 수 있습니다 (오른쪽).

• 플러그인은 웹 성능을 향상시키기 위해 이미지를 웹p로 자동 변환합니다. AVIF로 변환 할 수있는 옵션도 있습니다.

• 성능 문제를 피하기 위해 업로드시 더 큰 이미지를 조정하는 옵션도 있습니다.

플러그인은 실제로 초보자 친화적이며 프로 디자이너 일 필요는 없습니다. 귀하를 대신하여 웹의 이미지를 최적화하십시오! 한 달에 약 200 개의 이미지에 대한 무료 계획이 있으므로 직접 결과를 볼 수 있습니다.

2. Photoshop

이것은 이미지 편집 및 최적화를위한 강력한 도구입니다.

• 웹 변환은 파일 > 저장 > Webp 에서 사용할 수 있습니다.

• 이미지 압축을 사용하려면 파일 > 내보내기 > 웹에 저장 으로 이동 한 다음 이미지 크기와 품질을 조정하십시오. 과도하게 압축하고 품질을 잃지 않도록주의하십시오.
  

3. 스케치

이것은 여러 장치의 이미지를 크기를 조정하고 준비하기위한 훌륭한 도구입니다.

• iPhone, Android 용 미리 제작 된 모형이 제공되며 더 많은 반응 형 디자인을 위해 이미지를 준비 할 수 있도록 제공됩니다.

• 또한 Webp 변환을 지원합니다 : 파일> 내보내기> Webp 사용.
  

4. CloudConvert 및 Optimizilla

이미지 압축 및 형식 변환을 위해 많은 온라인 도구가 존재하지만 둘 다하는 도구를 찾는 것은 드 rare니다. CloudConvert 및 Optimizilla와 같은 온라인 이미지를 최적화하려면 두 가지 도구가 필요할 수 있습니다.

아래 단계를 따라 함께 사용하십시오

1. CloudConvert를 사용하여 무거운 JPEG를 Webp로 변환하십시오. 이미지를 선택 파일 필드로 드래그 앤 드래그하십시오.

2. 전환 된 이미지를 다운로드하고 Optimizilla와 같은 온라인 이미지 압축기를 사용하여 압축하십시오.

5. WP 로켓

WP Rocket은 핵심 웹 생명을 향상시키면서 웹의 콘텐츠와 이미지를 최적화하는 가장 간단하고 강력한 성능 플러그인입니다. 또한 여러 PagesPeed Insights Audits를 쉽게 전달하는 데 도움이됩니다. 또한 성과 모범 사례의 80%가 즉시 적용되어 시간과 노력이 절약됩니다.

웹 최적화에 유리한 주요 기능

WP Rocket은 고급 이미지 최적화 기술 섹션의 거의 모든 팁을 해결하여 올인원 성능 솔루션을 제공합니다.

각 기능을 살펴 보겠습니다.

• 브라우저 및 페이지 캐싱 (모바일 캐싱 포함) 및 GZIP 압축으로 이미지 및 기타 자산이 더 빠르게로드되도록합니다.
• 중요 이미지 최적화 : 브라우저에서 더 빨리 렌더링 할 수 있도록 페이지의 위에 올랐던 이미지를 자동으로 최적화합니다. 예를 들어, LCP 이미지는 사전로드되어 사용자에게 우선 순위로 렌더링됩니다.
• 게으른로드 : 이미지가 필요할 때까지 로딩이 한 번에 대신 지연됩니다. 이를 통해 페이지가 더 빠르게로드하고 사용자가 스크롤 할 때 이미지 만 표시하여 데이터를 저장하는 데 도움이됩니다.

다양한 요구를위한 이미지 최적화 도구 비교

다음은 필요에 따라 도구를 요약하여 웹의 이미지를 최적화하기위한 가장 좋은 것을 선택할 수 있습니다.

WordPress에서 쉽고 효율적인 최적화를 위해

Imagify는 최고의 동맹국입니다. WordPress 대시 보드에서 직접 압축, 대형 이미지의 자동 상환 및 차세대 형식 변환 (Webp/Avif)을 처리합니다. 이미지를 개별적으로 또는 대량으로 최적화하여 기술적 복잡성을 다루지 않고도 시간과 노력을 절약 할 수 있습니다. 그리고 imagify는 스마트 압축 모드 덕분에 흐릿한 이미지를 제공하지 않도록하십시오!

WordPress의 고급 이미지 최적화

캐싱, 게으른로드, LCP 이미지를 사전로드하고 폴드 위의 이미지 최적화가 필요한 경우 WP 로켓이 해결책입니다. Imagify와 통합되고 몇 번의 클릭으로 로딩 속도를 높이기 위해 전체 성능 최적화 제품군을 제공합니다.

WordPress 외부의 기본 최적화를 위해

WordPress 플러그인을 사용하지 않으려면 CloudConvert 또는 Optimizilla는 대량 이미지 압축 및 형식 변환 (한 번에 최대 20 개의 이미지)을 지원하는 사용하기 쉬운 온라인 변환기입니다. 그러나 최적화 된 이미지를 WordPress에 수동으로 다시 업로드해야합니다.

이미지 크기를 완전히 제어하려면

스케치, Photoshop (고급), 김프 또는 미리보기 (Mac) 또는 사진 (Windows)과 같은 내장 도구와 같은 디자인 도구를 사용하십시오. 스케치는 다양한 장치의 여러 크기 변형을 쉽게 만들기 위해 이상적입니다. Photoshop도 훌륭하지만 실제로 가파른 학습 곡선입니다.

이미지 크기 및 압축 수준을 완전히 제어합니다

Photoshop을 사용하면 이미지를 내보내기 전에 압축 수준을 정확하게 제어 할 수 있습니다. 그러나 큰 힘으로 큰 책임이 있으며 사진을 과도하게 압축하지 않도록하십시오.

쉽게 설정 한 강력한 CDN 용

WordPress 통합이있는 저렴한 번거 로움이없는 CDN을 찾고 있다면 RocketCDN이 훌륭한 선택입니다. 전용 WordPress 플러그인과 함께 제공됩니다. 즉, 복잡한 기술 설정 (예 : CNAME 레코드)이 필요하지 않음을 의미합니다. 전 세계적으로 POR (Points of Presence)을 사용하여 전 세계적으로 빠른 이미지 제공을 보장하여 여러 지역의 방문자가있는 다국어 웹 사이트에 이상적입니다.

물론 다른 CDN은 이용 가능하고 잘 수행되지만 종종 더 높은 비용과 기술 설정이있어 초보자에게는 어려울 수 있습니다.

웹에 대한 이미지 최적화의 영향 측정 : 6 메트릭

이미지 최적화의 영향을 측정하기 위해 성능 도구, 반응 체커 도구, Google 웹 로그 분석과 같은 데이터 도구 및 주요 메트릭을 사용하여 최적화가 작동하는지 확인할 수 있습니다. 그들을 넘어 가자.

다음은 이미지 최적화 노력의 성공을 측정하기 위해 추적 할 수있는 메트릭 및 KPI 목록입니다.

1. 완전히로드 된 시간

페이지가 완전히로드하는 데 걸리는 시간이 측정됩니다. 최적화 된 이미지는이 시간을 줄여야합니다.

2. 가장 큰 콘텐츠 페인트

가장 큰 콘텐츠 페인트 (LCP)는 가장 큰 가시 컨텐츠 (종종 이미지 또는 큰 텍스트 블록)가 페이지에로드하는 데 걸리는 시간을 측정합니다. 이미지는 일반적으로로드 시간에 영향을 미치는 가장 큰 요소이므로 최적화하면 LCP가 직접 향상됩니다.

이미지 압축 및 크기 조정 후 LCP 점수가 향상되면 최적화가 작동한다는 것을 의미합니다!

3. 이미지 파일 크기

파일 크기가 작 으면 품질이 상실되지 않고 로딩 시간이 빠릅니다. 압축 및 차세대 형식 변환을 구현 한 후에는 이미지 파일 크기가 40%이상 훨씬 작음을 알 수 있습니다.

4. 페이지 중량

이미지를 포함한 페이지 자산의 총 크기입니다. 최적화 된 이미지를 사용하면 몇 kb를 절약해야합니다.

5. 모바일 사용자의 이탈률

높은 바운스 속도는 느린 로딩 또는 모바일 응답 성이 좋지 않음을 나타낼 수 있습니다. 적절한 크기의 이미지를 제공하여 모바일 사용자 경험을 향상 시키면 방문자는 콘텐츠에 더 기꺼이 참여하고 즉시 떠나지 않아야합니다.

6. 모바일 사용자의 평균 시간

사용자가 더 오래 머무르면 더 나은 경험을 제안하고 이미지가 잘 최적화되어 있습니다.

변경 전후에 GTMetrix 및 PagesPeed Insight의 감사 및 최고 문제 섹션을 확인하는 것이 유용합니다. 최적화가 제대로 작동하는 경우 "효율적으로 이미지를 인코딩", "오프 스크린 이미지 지연"또는 "적절한 크기 이미지"와 같은 개선 사항이 녹색으로 표시됩니다.

이미지 최적화가 작동하는지 확인하는 데 사용할 수있는 5 가지 도구

1. gtmetrix

Lighthouse에 의해 구동되는 GTMetrix는 웹 사이트 속도 및 성능을 분석합니다.

• 이미지 최적화를 위해 측정 된 KPI : 완전히로드 된 시간, 가장 큰 콘텐츠 페인트 (핵심 웹 생명), 페이지 무게.

• 이미지 최적화에 대한 감사 섹션 : 상위 이슈 섹션은 개선 영역을 강조합니다.

IMG

2. Pagespeed Insights

Google의 Lighthouse 구동 도구는 페이지 성능을 평가합니다.

• 이미지 최적화를 위해 측정 된 KPI : 전체 성능 점수, 최대의 콘텐츠 페인트.

• 이미지 최적화에 대한 감사 섹션 : 진단 섹션은 해결해야 할 문제를 강조합니다.

IMG

3. Google 웹 로그 분석

웹 사이트 트래픽 및 사용자 행동을 추적하여 데이터 중심의 마케팅 결정을 내릴 수 있습니다.

• 이미지 최적화를 위해 KPI 측정 : 바운스 속도, 데스크탑 및 모바일 사용자의 페이지 평균 시간.

예를 들어, 해당 단계에 따라 모바일 사용자의 페이지의 평균 시간을 측정하십시오.

• Google Analytics> Engagement> 개요 (또는 특정 페이지) 로 이동하십시오.

• 데스크탑과 모바일 데이터를 비교하십시오

• 전후 최적화 날짜를 선택하십시오

4. cadenceseo.com

웹 사이트 대응 성과 모바일 친화 성을 확인하기위한 강력한 도구입니다.

• 확인 : 여러 장치 (태블릿, 모바일 및 데스크탑)에서 웹 사이트가 어떻게 보이는지 확인하고 개선이 필요한 개선 사항을 보여줍니다.

5. 이미지

WordPress 라이브러리에서 직접 이미지를 압축하고 파일 크기 절약을 추적합니다.

• 이미지 최적화를 위해 KPI 측정 : 이미지 파일 크기 감소.

웹 이미지 최적화에서 5 가지 일반적인 나쁜 관행

웹 디자인의 이미지를 최적화하기 전에 잠시 시간을 내어이 5 가지 표준 나쁜 관행을 검토하십시오. 이러한 함정을 피하면 성능뿐만 아니라 사용자 경험을 향상시키기위한 올바른 길을 가고 있습니다.

품질 손실로 이어지는 과잉 압축

이미지를 너무 많이 압축하면 품질이 좋지 않으며 사용자 경험이 부정적인 것으로 나타납니다. 항상 시각적 품질의 압축 균형 균형을 잡는 것을 목표로합니다.

모바일 특정 이미지 최적화를 무시합니다

다양한 디스플레이 크기 (모바일, 태블릿 및 데스크탑)의 이미지를 크기를 조정하지 않으면 주로 작은 컨테이너에서 큰 이미지를 사용하는 경우로드 시간과 불필요한 데이터 사용량이 느려질 수 있습니다. 컨텍스트에 따라 이미지 크기 조정은 최적화 된 성능에 필수적입니다.

GIF 또는 JPEG와 같은 "무거운"형식을 고수합니다

GIF 및 JPEG와 같은 오래된 형식에 의존하면 파일 크기가 커질 수 있습니다. 동일한 품질과 더 작은 파일 크기로 Webp 또는 AVIF와 같은 최신 형식을 사용하는 것을 고려하십시오.

접힘 위의 게으른 하중 이미지

게으른 하중은 화면 오프 스크린 이미지에 탁월하지만 접힘 위의 이미지와 같은 필수 이미지는 인식 된 로딩 시간을 개선하기 위해 우선 순위를 정해야합니다.

무손실 압축 만 사용합니다

안정적인 압축 도구를 사용하는 경우 항상 손실 압축을 선택해야합니다. 손실과 무손실 압축 사이의 시각적 차이는 눈치 채지 않아야합니다. 손실 모드는 파일 크기보다 파일 크기보다 훨씬 더 줄어 듭니다.

마무리

이제 기본에서 고급 기술에 이르기까지 웹의 이미지를 최적화 할 수 있도록 잘 갖추어져 있어야합니다! 올바른 도구를 사용하면 이미지를 완전히 최적화하고 CDN을 활용하여 페이지 속도를 높일 수 있습니다. 또한 주요 성능 메트릭 및 최고의 테스트 도구로 진행 상황을 추적하는 방법을 알고 있습니다.

위험없이 최적화 여정을 시작하려면 다음 두 가지 강력한 단계를 따르십시오.

• Imagify로 시작하십시오 - 무료로 설치하고 무료로 최대 200 개의 이미지를 최적화하십시오. 또한 필요한 경우 원래 이미지를 복원 할 수 있습니다.

• WP Rocket 설치 - 캐싱 및 중요한 이미지 최적화를 포함한 성능 모범 사례의 80%를 즉시 혜택을 받으십시오. 14 일 환불 보증이 있으므로 위험없이 시도 할 수 있습니다!