워드프레스 이미지 설정 최적화 방법

오늘 사이트의 속도를 더 빠르게 만들기 위한 이미지 설정에는 무엇이 있을까요? 워드프레스 이미지 설정 최적화 방법에 대해 그동안 배워, 적용했던 것들을 정리해 봤습니다.

이러한 상당히 재미없는 작업을 한 이유는 최근 서버를 Vultr 도쿄에서 Vultr 서울 리젼으로 옮기면서 속도가 많이 좋아지는 했지만 여전히 이미지 압축등에서는 만족스럽지 않았기 때문입니다.

주로 이미지 압축이 충분히 되이 았았는 점과 썸네일 이미지에 Progressive 모드가 적용이 안되는 것을 발견했기 때문이기도 했습니다. 때로 사소한 것이라도 알게되면 해결해야 직성이 풀리는 성겨 덕분에 이것 저것 살펴 보았습니다.

그동안 서버 및 워드프레스에서 이미지 최적화 관련해서는 여러가지 글을 통해서 공유했습니다. 아래 글들을 참조해 보면 좋을 듯 합니다.

무료로 구축하는 이미지 최적화 자동화 시스템

서버에서 JPEG 이미지 최적화로 사이트 속도 개선 방법

서버에서 PNG 이미지 최적화로 사이트 속도 개선 방법

NGINX에서 최고의 이미지 압축 포맷 WebP 적용 방법

Imagemagick 이용, 이미지 사이즈 일괄 변경 방법

새로운 이미지 사이즈 추가

현재 워드프레스 5.4의 경우 이이미를 업로드하면 작은 사진(썸네일), 중간크기, 최대크기를 성정하도록 되어 있습니다.

일반적으로 작은 사진(썸네일)은 폭 150px, 높이 150px 크기(물론 이 크기는 변경 가능합니다)로 만들어지도록 hard crop토록 되어 있습니다.

그리고 중간 크기는 최대폭 300px나 최대 높이 300px로 soft crop토록 되어 있습니다.

일반적으로 작은 사진(썸네일)은 폭 150px, 높이 150px 크기(물론 이 크기는 변경 가능합니다)로 만들어지도록 hard crop토록 되어 있습니다.

그리고 중간 크기는 최대 폭 300px나 최대 높이 300px로 soft crop토록 되어 있습니다. soft crop이란 폭이나 높이 하나만 맞춘다는 것입니다.

예전에는 가능하면 작은 이미지를 사용하려고 했기 때문에 작은 사진(썸네일)이 널리 사용되었습니다.

그러나 요즘에는 인터넷 속도도 빨라졌고, 보다 이미지를 중시하게 때문에 중간크기 이상을 썸네일 대신 사용하는 경우도 많습니다. 저의 경우는 여러가지 케이스를 고려해 폭 600px과 높이 250px를 기본 썸네일로 사용하고 있습니다.

이런 경우는 이미지 사이즈를 추가해 제대로 워드프레스 시스템과 서버에서 관리토록 하는 것이 좋습니다. 이미지를 사용하는 플러그에서 자체적으로 crop하는 경우 이미지 최적화가 안될 가능성이 크죠.

워드프레스에서 추가 이미지 사이즈를 추가는 functions.php에서 다음과 같은 명령을 추가합니다. 폭 600px, 높이 250px의 고정된 크기의 이미지를 만들라는 명령입니다.

• 폭과 높이가 고정되는 hard crop을 원할 경우 마지막에 true 옵션을 적어 줍니다.
• 아무런 옵션이 없는 경우 디폴트인 false가 적용되면서 soft crop이 실시됩니다

// 600 pixels wide by 250 pixels tall, hard crop mode
add_image_size( '새로 만들 이미지 크기 이름', 600, 250, true ); Code language: PHP (php)

• 중간크기 이미지 등은 crop이기 보다는 전체 이미지를 리사이즈하고 그 일부를 잘라냅니다.
• 리사이즈말고 어느 한방향에서 그대로 잘라내기를 원하는 경우 시작점을 표시해 줍니다. 예를 들어 왼쪽 위부터 잘라내라고 명령하는 경우

add_image_size( '새로 만들 이미지 크기 이름tom-size', 220, 220, array( 'left', 'top' ) );Code language: PHP (php)

기존 중간크기 이미지를 대체하는 경우

중간 크기 썸네일을 주로 새로 만든 사이즈를 이용한다면, 실상 워드프레스에서 기본으로 만드는 중간크기 이미지는 별 필요가 없게 됩니다.

그럴경우 중간크기 이미지를 없애고 대신 새로 만든 사이즈(600×250)로 대체하고 싶은 경우도 있습니다. 중간크기를 새로 만든 사이즈로 변경하여면 아래와 같은 명령어를 사용합니다.

• 먼저 기존 중간크기 이미지를 삭제(remove)
• 새로 만든 이미지 크기 추가(add_image_size)

/**
 * 기본으로 설정된 중간크기 이미지를 다른 크기로 변경
 */
add_action( 'init', 'wpdocs_change_medium_image_size' );
function wpdocs_change_medium_image_size() {
    remove_image_size( 'medium' );
    add_image_size( 'medium', 600, 250, true );
}
Code language: PHP (php)

이를 응용하면 기존에 설정한 이미지 크기를 삭제하고 새로운 크기의 이미지를 추가할 수 있을 것입니다.

/**
 * 기존 설정 이미지 크기를 삭제하고 새로운 이미지 크기를 추가
 */
function wpdocs_remove_then_add_image_sizes() {
    remove_image_size( 'image-name' );
    add_image_size( 'image-name', 200, 200, true );
}
add_action('init', 'wpdocs_remove_then_add_image_sizes');Code language: PHP (php)

워드프레스 이미지 최대값 관리

워드프레스 5.3부터는 워드프레스에 업로드된 이미지의 최대 크기를 제한한다고 합니다. 즉 2560px 이상의 이미지는 자동으로 2560px로 줄여준다고 해요. 쓸데없이 큰 이미지를 사용할 필요가 없기 때문에 이런 제한 조치를 둔 것인데요.

필요 시 이런 제한 조치를 없애거나 제한 이미지 크기를 변경할 수 있습니다. 이 내용은 워드님의 글 “워드프레스 이미지 업로드 시 크기가 줄어드는 문제”를 참조했습니다.

워드프레스에서 이미지 크기 제한을 없애는 방법은 아래와 같은 코드를 functions.php에 추가해 줍니다.

add_filter( 'big_image_size_threshold', '__return_false' );Code language: PHP (php)

아니면 임지 크기 제한을 높일 수 있습니다. 2560px를 두배인 5120px로 변경할 수 있겟습니다. 이 정도 크기의 이미지는 거의 원본에 가까울 것 같은데요.

아무튼 이런 옵션이 필요한 사람이 분명이 있겠죠.

function mynamespace_big_image_size_threshold( $threshold ) {
    return 5120; 
}
add_filter('big_image_size_threshold', 'mynamespace_big_image_size_threshold', 999, 1);Code language: PHP (php)