워드프레스 이미지 삽입 시 최대 크기로 자동 설정하기

워드프레스 블록 에디터에서 이미지를 삽입하면 보통 '최대 크기(Full Size)'가 아닌 '큰 크기(Large)'로 설정됩니다. 이 때문에 이미지 해상도가 조금 흐리게 나올 수 있습니다. 이미지가 원 이미지 크기대로 선명하게 표시되도록 이미지 삽입 시 최대 크기로 자동 설정하는 것이 가능합니다.

워드프레스 이미지 삽입 시 최대 크기로 자동으로 설정하는 방법

워드프레스에서 이미지를 업로드하여 삽입하면 '큰 크기(Large)'로 추가됩니다.

참고로 해상도 옵션에 '최대 크기'가 두 개가 있는데요. 이는 번역 과정에서 Large와 Full Size를 동일하게 번역하면서 한국어 버전에서 위의 그림과 같이 조금 황당하게 표시되는 문제가 나타나고 있습니다. 이 부분을 영어 버전을 살펴보면 쉽게 이해가 되실 것입니다.

위의 그림과 같이 4가지 해상도 옵션이 있습니다.

1. Thumbnail → 썸네일
2. Medium → 보통
3. Large → 최대 크기 (?)
4. Full Size → 최대 크기

Large를 '큰 크기' 등 다른 표현으로 번역을 바꾸어야 사용자들의 혼란이 줄어들 것으로 보입니다. 이 글에서는 혼동되지 않도록 '큰 크기(Large)', '최대 크기(Full Size)'와 같이 표기하도록 하겠습니다.

※ 몇 년 전에 워드프레스 번역이 전체적으로 이상하게 바뀌어서 문제가 된 적이 있습니다. 한 번역가가 맞춤법에 맞지 않은 단어(예: 패이지, 업대이트)로 바꾸거나 번역을 이상하게 변경하는 바람에 번역 오류를 수정하느라 꽤 시간이 걸렸습니다만, 아직도 이상한 번역이 남아 있습니다.😥

기본적으로 설정되는 Large 크기 설정 때문에 이미지가 흐리다면 이미지 업로드 시 강제로 '최대 크기(Full Size)'로 자동 설정하도록 하는 것을 고려할 수 있습니다.

여기에 대하여 워드프레스 개발자 포럼 글 "How to make image uploads default to full size?"에서 다음과 같은 코드를 제시하고 있습니다.

add_filter('pre_option_image_default_size', function($param) { return 'full'; });

상기 코드를 FTP/SFTP에 접속하여 차일드 테마의 함수 파일(functions.php)에 추가할 수 있습니다.

이제 신규로 업로드하는 이미지는 '최대 크기(Full Size)'로 삽입됩니다. (기존에 삽입한 이미지 해상도 설정은 체크해보니 기존 설정이 유지되네요.)

최대 크기(Full Size)로 이미지 해상도가 설정될 경우...

1. 이미지가 더 선명하게 표시되지만
2. 이미지 크기가 증가하면서 페이지 로드 속도에 영향을 미칠 수 있고 트래픽을 더 많이 소모할 수 있습니다.

이미지를 업로드하기 전에 WEBP 포맷으로 변환하고 이미지 압축 사이트에서 추가로 압축하면 이미지 크기를 크게 줄일 수 있습니다. 저는 이런 방식으로 하여 보통 이미지 크기가 50KB 내외이고, 큰 경우에도 100KB를 넘지 않고 있습니다.😄

• 무료 WebP 변환 프로그램 - 꿀뷰 이미지 뷰어

이미지 해상도 옵션에 '최대 크기'(Full Size)가 표시되지 않는 경우

이미지 해상도 옵션에 '최대 크기'(Large)까지 표시되고 '최대 크기'(Full Size)가 표시되지 않는 경우가 있습니다.

이는 해당 이미지의 크기가 '큰 크기'(Large) 이미지에 설정된 최대 너비/최대 높이보다 작기 때문입니다.

설정 » 미디어에서 이미지 썸네일 크기를 설정할 수 있습니다. 큰 크기(Large)의 최대 너비와 최대 높이가 각각 1030px인 경우, 업로드된 이미지의 크기가 '중간 크기'(Medium)보다는 크고 '큰 크기'(Large)보다는 작다면 '최대 크기'(Full Size) 옵션은 표시되지 않게 됩니다.

마찬가지로 업로드된 이미지가 '썸네일 크기'와 '중간 크기' 사이라면 업로드 시 해상도 옵션에는 '썸네일'과 '보통'만 표시될 것입니다.

※ 참고로 미디어 설정 페이지에도 번역 오류가 눈에 띄네요. '최대 넓이'는 '최대 너비'가 되어야 합니다. 또한, '썸네일'이 '썸내일'로 번역된 것도 눈에 거슬리네요. 그리고 '월과 해 기반'은 오역은 아니지만 '월과 연도 기반'으로 바꾸면 조금 더 자연스럽지 않을까 생각됩니다.

마치며

이상으로 워드프레스에서 이미지를 업로드할 때 해상도를 자동으로 '최대 크기'로 설정하는 방법에 대하여 살펴보았습니다. 이 방법을 이용하면 추후 업로드되는 이미지에 자동으로 적용되면, 기존에 업로드한 이미지의 해상도 설정은 유지됩니다.

기존에 업로드한 이미지의 해상도 옵션도 '최대 크기(Full Size)'로 일괄적으로 설정하려는 경우 자바스크립트 코드나 PHP 코드를 사용하여 강제로 설정하는 것을 고려할 수 있습니다.

예시 JavaScript 코드:

<script>
document.addEventListener('DOMContentLoaded', function () {
	// 본문 영역 선택자: 사이트에 맞게 조정(ex. .entry-content, .post-content 등)
	const imgs = document.querySelectorAll('.entry-content img');

	imgs.forEach(function (img) {
		// data-src(lazyload) 대응
		const getCurrentSrc = () => img.getAttribute('data-src') || img.currentSrc || img.src || '';
		let src = getCurrentSrc();
		if (!src) return;

		// -123x456 패턴을 확실히 끝부분 확장자 앞에서만 제거
		const re = /-\d+x\d+(?=\.(?:jpe?g|png|gif|webp|avif)(?:[\?#]|$))/i;
		if (!re.test(src)) return;

		const candidate = src.replace(re, '');

		// 원본 파일이 실제로 존재하는지 사전 로드로 확인 후 교체
		const test = new Image();
		test.onload = function () {
			// lazyload 속성 처리
			if (img.hasAttribute('data-src')) {
				img.setAttribute('data-src', candidate);
				// 일부 lazylib는 data-srcset도 갖고 있음
				if (img.hasAttribute('data-srcset')) {
					img.removeAttribute('data-srcset');
				}
				// 이미 로드된 경우 src도 동기화
				img.src = candidate;
			} else {
				img.src = candidate;
			}

			// 브라우저가 작은 이미지로 대체 선택하지 않도록 srcset/sizes 제거
			img.removeAttribute('srcset');
			img.removeAttribute('sizes');

			// 스타일 충돌 방지(테마가 width 지정했을 때)
			img.style.maxWidth = '100%';
			img.style.height = 'auto';
		};
		test.onerror = function () {
			// 원본이 없으면 그대로 둠
		};
		test.src = candidate;
	});
});
</script>

상기 코드는 모든 환경에서 제대로 작동하는지 충분한 테스트를 거치지 않았습니다. 필요한 위의 코드를 참고하여 상황에 맞게 변경하여 이용하시기 바랍니다.

참고

• 우커머스 상품 이미지 확대 라이트박스 기능을 비활성화하는 방법
• 워드프레스닷컴 개인/프리미엄 요금제에 플러그인 설치 허용 & 애드센스 광고 표시 가능