WordPress에서 이미지 최적화 마스터 링-Word누르다-php.cn

WordPress에서 이미지 최적화 마스터 링 WordPress 웹 사이트를 구축하고 유지 관리 할 때 사이트 성능을 향상시키고 페이지로드 시간을 줄이는 방법을 찾는 것이 중요합니다. 이를 통해 이탈률을 낮추고 검색 엔진의 순위를 높이는 데 도움이됩니다.

WordPress 사이트의 테마 및 플러그인 코드 (예 : JavaScript, CSS 및 Images)를 통해 성능을 달성하는 방법에는 여러 가지가 있습니다. 예를 들어 캐싱 활성화 또는 WordPress 플러그인을 사용하여 정적 컨텐츠를 캐시하는 데 서버 기반 구성 옵션도 있습니다. 그러나 그러나 고객이 WordPress 웹 사이트에 추가 할 컨텐츠, 특히 이미지를 제어 할 수 없습니다. 이미지가 원래 형태로 업로드되어 사이트 성능 문제가 발생하고 페이지로드 시간이 증가 할 수 있습니다. 이 기사에서는 고객과 사이트 소유자가 WordPress에 업로드하는 JPEG 및 PNG 이미지를 최적화하는 다양한 방법을 모색합니다. 키 테이크 아웃

사전 정의 된 이미지 크기 우선 순위 : WordPress의 내장 설정을 활용하여 이미지를 위해 썸네일, 중간 및 큰 크기를 정의하여 성능을 최적화하고 테마 내에서 다양한 컨텍스트에 대해 이미지 크기가 적절하게 크기를 조정하십시오. </pred>. <s> 추가 이미지 크기 구현 : 테마의 사용자 정의 이미지 크기에`add_image_size ()`사용하여 다양한 게시물 유형 및 페이지 레이아웃에서 유연성과 최적화가 더 높아질 수 있습니다. <com> 이미지 압축 최적화 : 손실 및 무손실 압축 기술을 모두 사용하여 이미지 파일 크기를 크게 줄이고, 자동 압축을위한 TinypNG와 같은 도구를 사용하여 이미지 파일 크기를 크게 줄입니다. <eg>> JPEG 품질 설정 조정 : 테마의`functions.php`를 통해 기본 JPEG 이미지 품질을 수정하여 WordPress 내에서 파일 크기 감소를 직접 관리하고 저장 및로드 시간을 최적화합니다. <cd>> CDN 서비스 활용 : Proton 또는 MaxCDN과 같은 컨텐츠 전달 네트워크 (CDN)를 통합하여 이미지를 지리적으로 배포하고 캐시하여 사용자의 위치에 따라 이미지 전달 속도를 높이고 사이트 성능을 향상시킵니다. <izes> 테마 이미지 크기 WordPress 사용자가 이미지를 업로드 할 때 WordPress는 원본 이미지의 사본을 특정 크기로 만들기 위해 사용할 수있는 두 가지 기능을 제공합니다. 이것은 테마 내에서 특정 크기로 이미지를 출력하려는 경우에 유용합니다. > 썸네일, 중간 크기 및 큰 크기 <press> WordPress 관리 내에서 설정> 미디어 아래에 미리 정의 된 이미지 크기의 세 가지 이미지 크기가 있습니다 : 썸네일, 중간 및 대형. 각각 고유 한 치수를 설정할 수 있습니다 <will> WordPress는 항상 이러한 크기로 이미지를 크기로 조정하기 때문에 (원래, 썸네일, 중간 크기의 원래 이미지 4 개의 이미지가 저장 될 수 있으므로) 가능한 경우 WordPress 테마 내에서 먼저 설정하고 사용하는 것이 좋습니다. </will></press>. <pred> WordPress 테마에서 사전 정의 된 이미지 크기를 사용하려면 다음을 사용하십시오.<pre class="brush:php;toolbar:false">while ( have_posts() ) { the_post(); the_post_thumbnail( 'thumbnail' ); // Or 'medium', or 'large' }

로그인 후 복사

set_post_thumbnail_size () 추가 이미지 크기가 필요한 경우 set_post_thumbnail_size () : 를 사용할 수 있습니다. 기본 기본 이미지 (이전의 포스트 썸네일) 치수를 설정하십시오 이것은 게시물, 페이지 및 사용자 정의 게시물 유형에 대한 특집 이미지의 너비와 높이를 정의 할 수 있습니다. 특집 이미지 크기를 정의하려면 다음 코드를 테마의 functions.php 파일에 추가하십시오. 이로 인해 특집 이미지가 500px 너비 x 500px 높이로 설정됩니다.

지정된 치수로 게시물의 특집 이미지를 출력하려면 WordPress 루프 내에서 the_post_thumbnail ()을 사용하십시오.

add_image_size () set_post_thumbnail_size ()가 유용하지만 WordPress 썸네일, 중간 및 큰 크기와 함께 하나의 이미지 크기 세트를 정의하기 위해 한 번만 호출 할 수 있습니다. 예를 들어 게시물의 500px x 500px 이미지와 페이지의 400px x 400px 이미지와 같은 추가 크기를 출력하려면 멈췄습니다. 고맙게도, WordPress는 또한 add_image_size () 함수를 제공합니다 는 새로운 이미지 크기를 등록합니다. 즉, WordPress는 새 이미지가 업로드 될 때 지정된 치수로 이미지 사본을 생성한다는 것을 의미합니다. 테마의 functions.php 파일 내 에서이 기능을 호출하여 테마가 요구하는만큼의 이미지 크기를 등록하기 위해 필요한만큼 여러 번 파일을 호출 할 수 있습니다. 게시물과 페이지에 대해 각각 두 가지 이미지 크기를 등록하겠습니다.

이제 the_post_thumbnail () 호출을 수정하여 출력 할 이미지 크기를 지정할 수 있습니다.

결과 테스트 JPEG 및 PNG 이미지를 사용하여 파일 크기 감소 및 성능 이득을 볼 수 있습니다. jpeg 이미지

원래 치수 - 파일 크기 : 504KB

500px x 500px - 파일 크기 : 29kb

400px x 400px - 파일 크기 : 21kb

png 이미지 원래 치수 - 파일 크기 : 697kb

500px x 500px - 파일 크기 : 354kb

<span>add_theme_support( 'post-thumbnails' );
</span><span>set_post_thumbnail_size( 500, 500, true );</span>

로그인 후 복사

400px x 400px - 파일 크기 : 236kb

이미지 압축

이미지 압축은 이미지 품질에 대한 희생 또는 전혀없는 중복 데이터를 제거하여 이미지 파일 크기를 더 줄이는 것을 목표로합니다.

이미지 압축에 대한 두 가지 주요 방법이 있습니다 : 손실과 무손실. LOSSY 이미지 압축

Lossy Compression은 부정확 한 근사치를 사용하여 이미지 데이터의 부분 금액을 폐기하여 원본 이미지를 최대한 유지하는 동안 파일 크기가 낮은 이미지를 생성합니다. 메타 데이터 (예 : exif 정보, 카메라 제조업, 모델 및 위치에 대해 알려주는)는 이미지 품질에 영향을 미치지 않으면 서 버릴 수 있습니다. 단점은 이미지 품질이 어려울 수 있다는 것입니다. 따라서 빠른 이미지 로딩 시간과 이미지 품질 사이의 올바른 균형을 찾는 것이 중요합니다. 손실 압축은 일반적으로 JPEG 이미지 및 사진에서 사용되며 이미지 파일 내에 이미지 출력을 렌더링하기 위해 많은 데이터가 있습니다. 테스트 이미지와 tinypng.com을 사용하여 JPEG 및 PNG 이미지에 대한 손실 압축 효과를 볼 수 있습니다. jpeg 이미지

원본 치수 - 원본 파일 크기 : 504KB, 손실 압축 파일 크기 : 367KB, 저장 : 27%

500px x 500px - 원본 파일 크기 : 29KB, 손실 압축 파일 크기 : 17.1KB, 저장 : 41%

400px x 400px - 원본 파일 크기 : 21KB, 손실 압축 파일 크기 : 12.5KB, 저장 : 39%

png 이미지 원래 치수 - 원본 파일 크기 : 697KB, LOSSY 압축 파일 크기 : 229.6KB, 저장 : 67%

500px x 500px - 원본 파일 크기 : 354KB, 손실 압축 파일 크기 : 94.3KB, 저장 : 73%

400px x 400px - 원본 파일 크기 : 236KB, 손실 압축 파일 크기 : 64.6KB, 저장 : 73%

손실없는 이미지 압축

손실없는 압축을 통해 이미지 품질이 손실되지 않고 이미지 데이터의 부분 폐기 및 압축이 가능합니다. '무손실'압축 된 이미지는 원본 이미지와 동일하게 렌더링됩니다.

단점은 일반적으로 사진과 같은보다 복잡한 이미지에서 파일 크기 개선을 제공하지 않는다는 것입니다. 이러한 이유로 PNG 및 GIF 이미지에 가장 적합한 것이 가장 좋습니다.

<: :> 이미지 압축 : WordPress 솔루션 WordPress는 Lossy 압축을 사용하여 이미지 품질을 조정하는 두 가지 방법을 제공합니다. 테마 functions.php 파일에 다음 코드를 추가하여 둘 다 사용할 수 있습니다.

wp_editor_set_quality는 WordPress의 이미지 편집기 내에서 편집 된 모든 이미지 (이 경우)의 품질을 정의합니다. JPEG 이미지의 경우 JPEG_QUALTY 필터를 지정했기 때문에이 필터가 무시됩니다. 이러한 변경 사항을 통해 테스트 이미지를 WordPress에 업로드하면 다음 결과가 발생합니다. jpeg 이미지

원본 치수 - 원본 파일 크기 : 504KB, 60% 품질 파일 크기 : 504KB, 저장 : 0%

500px x 500px - 원본 파일 크기 : 29KB, 60% 품질 파일 크기 : 14KB, 저축 : 51%

400px x 400px - 원본 파일 크기 : 21KB, 60% 품질 파일 크기 : 10KB, 절약 : 52%

png 이미지

원본 500px x 500px 400px x 400px 파일 크기 697KB 354KB 236KB 60% 품질 파일 크기 697KB 354KB 236KB 절약 0% 0% 0% 업로드 된 PNG 이미지가 변경되지 않았 음을 알 수 있습니다. JPEG_QUALTY 필터가 JPEG 이미지에만 영향을 미치고 WP_EDITOR_SET_QUALITY는 미디어 라이브러리를 통해 이미지를 편집하는 경우에만 사용되기 때문입니다. . > 원래 이미지가 변경되지 않았습니다. WordPress는 크기가 크기가 큰 이미지에 고품질 필터 만 적용하기 때문입니다. . <:> 이미지 압축 : 플러그인 솔루션 이미지 압축의 작동 방식을 살펴보고 온라인 도구를 사용하여 일부 테스트를 실행하는 동안 WordPress에서 이미지가 자동으로 압축되기를 원합니다. 즉, 우리는 WordPress에 이미지를 업로드하기 전에 타사 도구를 사용하는 것을 기억하기 위해 고객 (또는 우리 자신)에 의존하지 않고 프로세스를 단순화하고 있음을 의미합니다. 자동 이미지 압축을 제공하는 몇 가지 WordPress 플러그인이 있습니다. ewww 이미지 최적화기 ewww Image Optimizer는 다양한 JPEG, PNG 및 GIF 압축 라이브러리/서비스를 사용하여 무손실 압축을 제공합니다. 일부 공유 호스트는 가지고 있지 않을 수있는 exec () 액세스가 필요하지만 EWWW 이미지 최적화 클라우드를 제공합니다. 이는 서버에서 이미지를 처리하는 서비스 비용입니다. 다시, 손실 압축의 경우 API 키에 대한 비용을 지불해야하며 1,000 개의 이미지에 대해 1 달러로 시작합니다. ewww 이미지 최적화를 설정하려면 플러그인으로 탐색합니다> WordPress 관리 인터페이스에 새로 추가하고 "ewww image ortimizer"를 검색하십시오 : 지금 설치 버튼을 클릭하고 일단 설치되면 플러그인을 활성화합니다. 기본적으로 플러그인은 이미지에서 무손실 압축을 제공하며 추가 구성이 필요하지 않습니다. 새 게시물을 만들고 추천 이미지를 테스트 이미지로 설정하여 결과를 얻을 수 있습니다. jpeg 이미지

원본 치수 - 원본 파일 크기 : 504KB, 손실 압축 파일 크기 : 503KB, 저장 : 0.2%

500px x 500px - 원본 파일 크기 : 29KB, 손실 압축 파일 크기 : 28KB, 저장 : 3.5% WordPress에서 이미지 최적화 마스터 링

400px x 400px - 원본 파일 크기 : 21KB, 손실 압축 파일 크기 : 20KB, 저장 : 4.8% WordPress에서 이미지 최적화 마스터 링

png 이미지 원본 치수 - 원본 파일 크기 : 697KB, 손실 압축 파일 크기 : 669KB, 저장 : 4%

500px x 500px - 원본 파일 크기 : 354KB, 손실 압축 파일 크기 : 300KB, 저장 : 15.3%

400px x 400px - 원본 파일 크기 : 236kb, 손실 압축 파일 크기 : 200kb, 저장 : 15.3%

우리는 JPEG 이미지를 통해 PNG 이미지를 '무자비하게'압축 할 때 더 나은 성능을 얻을 수 있습니다. 그러나이 이미지는 여전히 상당히 큽니다. 대신 손실 압축을 제공하는 다른 플러그인을 사용해 보겠습니다.

압축 jpeg & png 이미지 WordPress에서 이미지 최적화 마스터 링 는 웹 기반 이미지 압축 서비스를 제공 할뿐만 아니라 JPEG 및 PNG 이미지에 손실 압축을 자동으로 제공하는 WordPress 플러그인을 제공합니다. 한 달에 처음 500 개의 이미지 압축은 무료입니다. 그 후 이미지 압축 당 $ 0.009입니다. WordPress에서 이미지 최적화 마스터 링 tinypng 플러그인을 설정하려면 플러그인으로 이동하십시오> WordPress 관리 인터페이스에 새로 추가하고 "압축 JPEG & PNG 이미지"를 검색하십시오 :