업로드 후 워드프레스 이미지가 흐릿하게 보이는 이유(와 해결법)

열에 아홉은 이미지 자체의 화질이 깨진 게 아닙니다 — 워드프레스가 업로드 시점에 이미지를 축소해 버리고, 지금 그 축소된 사본을 대신 내보내고 있는 것입니다. 워드프레스 5.3부터는 가로나 세로가 2560px를 넘는 이미지는 가장 긴 변을 기준으로 2560px로 제한된 -scaled 버전으로 소리 없이 교체되며, 테마가 히어로 영역이나 전체 너비 블록, 레티나 디스플레이를 채우려고 늘리는 대상이 바로 이 더 작은 파일입니다. 해결법은 실제로 그 일이 일어났음을 먼저 증명한 다음, 임계값을 올리거나 아니면 자리 잡을 박스보다 더 커야 하는 이미지를 업로드하는 일 자체를 그만두는 것입니다.

왜 이런 일이 일어나는가

사진을 업로드하면 워드프레스는 wp_create_image_subsizes()(wp-admin/includes/image.php 안에 있음)를 실행합니다. 가장 긴 변이 big_image_size_threshold(기본값 2560px)를 넘으면 _wp_image_meta_replace_original()을 호출해 your-photo-scaled.jpg를 생성하고, full 사이즈가 이제 축소된 사본을 가리키도록 첨부 파일 메타데이터를 다시 씁니다. 진짜 원본은 your-photo.jpg로 디스크에 그대로 보관되며 wp_get_original_image_path()로 참조되지만, 프런트엔드에서는 그 어떤 것도 이 원본을 내보내지 않습니다. 모든 중간 사이즈와 모든 srcset 후보는 업로드한 파일이 아니라 2560px 축소 파일로부터 생성됩니다.

여기서 화질 깨짐이 발생합니다. 전면 헤더용으로 선명한 4000px 이미지를 업로드합니다. 워드프레스는 이를 2560px로 제한합니다. 일반 디스플레이의 1600px 너비 컨테이너에서는 문제없습니다. 하지만 2배 레티나 화면에서는 브라우저가 그 컨테이너를 선명하게 채우려면 대략 3200개의 실제 픽셀이 필요한데, 2560개밖에 없으니 차이를 확대해서 메웁니다. 가장자리가 흐릿하게 뭉개지고 이미지 속 글자가 흐물흐물해지는, 딱 “업로드 후 흐릿하게” 나타나는 증상입니다.

같은 문제의 나머지 절반은 srcset이 너무 작은 사이즈를 골라 버리는 것입니다. 테마가 실제로 렌더링되는 박스와 맞지 않는 콘텐츠 너비를 보고하면, 워드프레스는 브라우저에 -1024x683이나 -1536x1024 중간 사이즈를 건네주고 이것이 확대되어 늘어납니다. 원인은 같고 — 사용 가능한 픽셀보다 표시 박스가 더 큰 것 — 방아쇠만 다릅니다.

워드프레스가 실제로 무엇을 내보냈는지 확인하기

추측하지 마세요. 흐릿한 이미지를 우클릭해서 새 탭에서 열고, URL의 파일명을 보세요. -scaled.jpg로 끝나거나 -1024x683.jpg 같은 치수 접미사가 붙어 있다면 확인된 것입니다. 브라우저는 당신이 업로드한 것이 아니라 축소된 파생본을 렌더링하고 있습니다. 요소 검사에서 currentSrc를 읽으면 브라우저가 정확히 어떤 후보를 골랐는지도 확인할 수 있습니다.

무언가를 다시 업로드하기 전에 전체 그림을 보려면, 이미지를 워드프레스 이미지 사이즈 도구에 넣어 보세요 — 워드프레스가 바로 그 파일로부터 생성할 모든 파생본을, -scaled 사본이 만들어지는지와 어떤 치수로 만들어지는지까지 보여 줍니다. 그래서 이미지를 배치할 자리에 비해 원본이 충분히 큰지를 미리 알 수 있습니다.

서버에서는 제한된 파일을 모두 나열할 수 있습니다:

find wp-content/uploads -name '*-scaled.*'

해결하는 방법, 순서대로

1. 이미지가 정당하게 2560px보다 커야 한다면(큰 히어로, 레티나, 인쇄 품질 갤러리) 임계값을 올리세요:

// functions.php or a small mu-plugin
add_filter( 'big_image_size_threshold', function () {
    return 3840; // longest edge, in pixels
} );

또는 제한을 완전히 끄세요:

add_filter( 'big_image_size_threshold', '__return_false' );

2. 해당 이미지들을 다시 업로드하세요. 사람들이 건너뛰는 단계가 바로 이것입니다. 임계값 변경은 새로운 업로드에만 영향을 줍니다. 이미 라이브러리에 있는 이미지는 예전 메타데이터를 그대로 유지하며, 썸네일을 재생성해도 제한된 -scaled 파일로부터 중간 사이즈를 다시 만들 뿐 — 이미 버려진 해상도를 되살려 주지는 않습니다. 확실한 경로는 다음과 같습니다: 필터를 변경하고, 첨부 파일을 삭제한 뒤, 다시 업로드하기.

3. 원본이 이미 2560px 이하인데도 여전히 화질이 깨진다면, 임계값이 문제가 아닙니다 — 표시 박스가 이미지보다 큰 것입니다. 더 큰 원본을 업로드하거나 컨테이너를 줄이세요. 레티나 선명도를 위해서는 원본이 이미지가 채우는 박스의 CSS 픽셀 너비의 대략 두 배는 되어야 합니다.

4. 위 작업을 모두 마친 뒤에만 썸네일을 재생성하세요 중간 사이즈들이 일관되도록 말입니다 — 다만 이것은 치료가 아니라 뒷정리라는 점을 이해해야 합니다.

하지 말아야 할 것

JPEG 품질을 100으로 끌어올리지 마세요. 워드프레스는 wp_editor_set_quality를 통해 기본 품질 82로 압축하는데, 온라인 조언의 절반은 이것을 재정의하라고 말합니다:

add_filter( 'wp_editor_set_quality', function () { return 90; } );

압축 아티팩트를 줄이는 데는 괜찮지만, 늘어나서 확대된 이미지는 해상도 문제이지 압축 문제가 아닙니다. 82에서 100으로 올리면 파일만 부풀어 오르고, 지금 보고 있는 흐릿함에는 거의 아무 효과가 없습니다.

반사적으로 -scaled를 비활성화하지 마세요. 제한을 끄는 것은(이를 위한 도구가 있습니다) 2560px가 넘는 이미지를 내보내는 경우라면 올바른 선택입니다 — 하지만 진짜 문제가 너무 작은 중간 사이즈가 늘어나는 것이라면, 이를 비활성화해도 아무것도 바뀌지 않고 아무 이유 없이 대역폭 절감만 잃게 됩니다. 먼저 진단하세요.

캐시를 탓하거나 썸네일을 먼저 재생성하지 마세요. 재생성은 같은 제한된 원본에서 읽어 오므로 디테일을 복원할 수 없습니다. CDN이나 페이지 캐시를 지워도 애초에 디스크에서 작았던 파일에는 손대지 못합니다.

테마의 CSS나 object-fit에 손대지 마세요. 아무리 스타일을 입혀도 픽셀이 더해지지는 않습니다. 내보낸 파일이 -scaled나 치수 접미사로 끝난다면, 문제는 레이아웃이 아니라 파일입니다.

그래도 막혔다면?

내보낸 파일이 당신의 전체 해상도 업로드본임을 확인했는데도 — -scaled도 없고 치수 접미사도 없는데 — 여전히 흐릿하다면, 플러그인(최적화 도구, CDN 이미지 리사이저, 지연 로딩 라이브러리 등)이 src를 압축 프록시로 바꿔 쓰고 있는지 확인하세요. 이미지를 이미지 사이즈 도구에 넣어 워드프레스가 생성해야 할 것이 무엇인지 확인한 다음, 브라우저가 실제로 불러오는 것과 비교하세요. 둘이 어긋난다면, 워드프레스와 브라우저 사이의 무언가가 범인입니다.