워드프레스 이미지 사이즈

앞 장에서 올린 이미지는 4개였는데, 사이트 루트 wp-content/uploads 디렉터리를 보면 다음 그림처럼 16개의 이미지가 존재하는 것을 확인할 수 있습니다. 올린 이미지마다 원본 이미지를 제외하고, 3개가 추가로 생성된 것입니다. 다만, 원본 이미지 사이즈가 ‘768×576’이므로 ‘1024×1024’로 설정된 이미지 사이즈의 이미지는 생성되지 않았습니다. 모두 워드프레스 설정에 따른 것으로 워드프레스 사용자라면 누구나 아는 내용입니다. 이어서 워드프레스 이미지 사이즈에 관하여 일반적인 내용을 살펴봅니다.

이미지 사이즈 기본

워드프레스에서 이미지를 올릴 때 추가 생성하는 이미지의 특징은 이미지 파일명에 실제 이미지의 사이즈^Size¹가 추가된다는 것인데, 추가되는 이미지 사이즈는 관리페이지 미디어 설정에서 지정한 값 기준입니다.

다음으로 확인할 내용은 이미지 크롭^Crop(자르기)인데, 앞의 그림 또는 uploads 디렉터리를 보면 ‘150×150’의 글자가 들어간 파일명을 볼 수 있습니다. 관리페이지 미디어 설정에서 다음의 옵션을 선택한 결과입니다.²

섬네일을 정확한 크기로 잘라냅니다. ( 일반적으로 섬네일은 원본에 비례해서 만들어집니다.)

주의할 내용은 가로(width)와 세로(height) 필드 모두에 값을 입력했다고, 그 사이즈의 이미지가 생성되는 것이 아니며, 크롭 옵션에 의해 지정한 사이즈의 이미지가 생성된다는 것 기억하세요. 우연으로 설정한 값과 같은 비율의 사이즈를 가진 이미지를 올리게 된다면, 그때는 말 그대로 우연입니다.

관리페이지 미디어 설정에서 확인할 또 하나의 내용은 ‘최대’라는 번역 단어입니다. 올리는 이미지의 특정 사이즈 이미지 생성 시 지정한 값을 초과하지 않는 가로와 세로 ‘비율’로 크롭한다는 것인데, 원본 이미지의 가로와 세로 비율에 따라 크롭하지만, 가로와 세로 어떤 축이든 지정한 값을 초과하지 않는다는 정도로 이해하면 됩니다.

이미지 사이즈 설정 값에서, 가로와 세로 모두 ‘0’이면 해당 이미지 사이즈는 생성되지 않으며, 가로 또는 세로 어느 한 축만 ‘0’이면 그 축은 제한하지 않는다는 뜻이 됨을 기억하세요.

워드프레스 기본 이미지 사이즈

관리페이지 미디어 설정에는 ‘작은 사진(섬네일)’, ‘중간크기’, ‘최대 크기’로 번역한 이미지 사이즈 명칭이 있습니다. 워드프레스의 기본 이미지 사이즈 종류를 번역한 것입니다. 그러나, 지금의 예제처럼 직접 템플릿 파일을 편집하여 워드프레스 사이트를 구성할 때, 워드프레스 사용 경험이 상대적으로 부족할 때는 프로그램적 이미지 사이즈 명칭을 파악하는 것이 좋습니다. 지금 예제 과정에서는 기본 이미지 사이즈 외에 추가한 어떤 이미지 사이즈도 없으므로 기본 이미지 사이즈의 프로그램적 명칭은 어떤 것이 있는지 알아봅니다.

우선, 앞 장에서 등록한 포스트와 이미지 파일을 모두 지웁니다. 다음 순서로 처리합니다.

관리페이지 글 메뉴 클릭한 후 나오는 포스트 목록의 글을 모두 선택한 후 ‘영구적으로 삭제하기’ 선택 옵션을 선택하여 모두 지웁니다.
관리페이지 미디어 메뉴를 클릭한 후 이미지 모두 선택 후 모두 삭제합니다.
관리페이지에서 페이지 메뉴를 클릭 후 목록에서 제목이 ‘타입 page의 포스트’인 포스트만 선택한 후 삭제합니다. 반드시 이 제목의 포스트만 지워야 하므로 주의하세요.
연습장 템플릿 파일에 앞 장에서 추가한 코드를 모두 지웁니다.

다시 연습장 파일에 다음 코드를 추가합니다.

// 연습장 템플릿 파일에 앞 장에서 추가한 코드를 모두 지우고 추가
echo '<pre>' . print_r( get_intermediate_image_sizes(), true ) . '</pre>';

사이트에서 연습장 페이지를 확인하면 다음의 데이터가 출력되는 것을 볼 수 있습니다.

Array
(
    [0] => thumbnail
    [1] => medium
    [2] => medium_large
    [3] => large
)

2번(배열의 키)을 제외하고, 관리페이지 미디어 설정의 번역 이미지 사이즈 이름이 프로그램적으로 어떤 명칭인지 쉽게 파악할 수 있습니다.

get_intermediate_image_sizes()
이 함수로 사용자의 워드프레스에 존재하는 이미지 사이즈 명칭을 확인할 수 있습니다.

이미지 사이즈 명칭 ‘medium_large’는 워드프레스 4.4. 버전에서 추가한 것인데, 관리페이지에는 나오지 않고, 기본으로 가로 ‘768’, 세로 ‘0’ 값이 데이터베이스 ‘_options’ 테이블의 각각 다음 필드에 저장되어 있습니다.

// 데이터베이스 '_options' 테이블에 저장
medium_large_size_w, medium_large_size_h;

이번에는 이미지 사이즈 명칭마다 가로와 세로 값이 어떤지 살펴봅니다. 연습장 파일에 앞에서 추가한 코드를 지우고 다음 코드를 추가한 후 연습장 페이지를 확인하세요.

// https://codex.wordpress.org/Function_Reference/get_intermediate_image_sizes#Examples
function get_image_sizes() {
    global $_wp_additional_image_sizes;
    $sizes = array();
    foreach ( get_intermediate_image_sizes() as $_size ) {
        if ( in_array( $_size, array('thumbnail', 'medium', 'medium_large', 'large') ) ) {
            $sizes[ $_size ]['width']  = get_option( "{$_size}_size_w" );
            $sizes[ $_size ]['height'] = get_option( "{$_size}_size_h" );
            $sizes[ $_size ]['crop']   = (bool) get_option( "{$_size}_crop" );
        } elseif ( isset( $_wp_additional_image_sizes[ $_size ] ) ) {
            $sizes[ $_size ] = array(
                'width'  => $_wp_additional_image_sizes[ $_size ]['width'],
                'height' => $_wp_additional_image_sizes[ $_size ]['height'],
                'crop'   => $_wp_additional_image_sizes[ $_size ]['crop'],
            );
        }
    }
    return $sizes;
}

echo '<pre>' . print_r( get_image_sizes(), true ) . '</pre>';

연습장 페이지에는 다음의 결과가 나타날 것이며, 현재 설정 값과 같습니다.

Array
(
    [thumbnail] => Array
        (
            [width] => 150
            [height] => 150
            [crop] => 1
        )

    [medium] => Array
        (
            [width] => 300
            [height] => 300
            [crop] => 
        )

    [medium_large] => Array
        (
            [width] => 768
            [height] => 0
            [crop] => 
        )

    [large] => Array
        (
            [width] => 1024
            [height] => 1024
            [crop] => 
        )

)

이미지 사이즈 명칭에서 주의할 것은 명칭이 특정 기능을 내포하는 것이 아니며, 단지 명칭이라는 것입니다. ‘thumbnail’이라는 이미지 사이즈 명칭으로 이 이미지 사이즈만 포스트 섬네일에 사용되는 것이 아니라는 뜻입니다. 그래서 워드프레스에서는 사용자가 하나의 이미지가 가진 여러 생성 이미지 중의 하나를 포스트 섬네일로 사용할 수 있습니다. 보통 테마의 워드프레스 루프(The Loop)에서 다음처럼 사용합니다.

the_post_thumbnail(); // 특성 이미지에 등록한 이미지로 원본 이미지 출력
the_post_thumbnail( 'thumbnail' );
the_post_thumbnail( 'medium' );
the_post_thumbnail( 'medium_large' );
the_post_thumbnail( 'large' );
the_post_thumbnail( 'full' ); // 원본 이미지
the_post_thumbnail( array( 100, 100 ) ); // 이미지 사이즈를 지정하지 않고 직접 입력

특성 이미지(Post-thumbnails)의 사이즈

포스트 섬네일과 특성 이미지는 같은 뜻입니다. 따라서 위의 모든 코드를 사용하려면 특성 이미지를 등록해야 합니다. 위의 1번 줄처럼 함수에 파라미터^Parameter가 없으면 포스트 작성 시 ‘특성 이미지’에 등록한 원본 사이즈(Full) 이미지가 출력됩니다. 특성 이미지를 올릴 때도 설정에 의해 여러 파일이 생성되지만, 이미지 사이즈 선택 옵션이 나오지 않으므로 기본적으로 원하는 사이즈의 이미지를 올려야 합니다. 그러나, 매번 특정 크기의 특성 이미지 사이즈를 만들어 특성 이미지를 등록하는 것이 번거롭다면 다음 코드 중 선택하여 사용하면 됩니다.

// 특성 이미지에 등록한 이미지를 포스트 섬네일로 사용하고, 이미지 사이즈를 지정할 때
set_post_thumbnail_size( 100, 100 ); // 비율에 따른 가로, 세로 최대 값 기준 리사이즈(Resize)
set_post_thumbnail_size( 100, 100, true ); // 지정한 가로, 세로 값으로 크롭

포스트 콘텐츠 내 이미지와 특성 이미지를 등록하고, 특정 이미지 사이즈를 포스트에 출력하는 것은 꼭 필요하며 기초적인 내용입니다. 글에서 실제 예를 안내하지 않지만, 혹시 익숙하지 않다면 인터넷에 방대한 정보가 있으므로 참고하세요.

예제에서는 핵심 콘텐츠인 이미지를 포스트 섬네일이 아니라 ‘이미지 사이즈’ 관점에서 다룹니다. 다음 장에서 데이터베이스에 저장된 기존 이미지 사이즈의 값을 변경하고, 예제에서 사용할 추가 이미지 사이즈를 정의하며, 이미지와 관련한 함수 등을 정의합니다.