콘텐츠로 이동

맥에서 WordPress용 이미지 최적화

업로드 전 맥에서 WordPress 이미지를 최적화하세요: 테마에 맞는 크기로 조정하고, JPEG, PNG, WebP 중 선택하며, 반응형 전송을 유지하고 라이브 페이지를 확인합니다.

WordPress 미디어 업로더는 6 MB 크기의 PNG hero 이미지를 받아들이지만, 테마가 src에서 리사이즈된 변형본이 아닌 원본 파일을 출력하기 때문에 홈페이지가 여전히 느리게 느껴집니다. WordPress용 이미지 최적화는 업로드 전에 시작됩니다. 픽셀 너비를 테마 콘텐츠 영역에 맞추고, JPEG 또는 WebP를 선택한 후 로컬에서 압축하여 라이브러리가 가벼운 원본을 저장하도록 합니다.

WordPress 업로드 제한의 실제 사례

호스팅 설정은 upload_max_filesize 및 post_max_size 값을 지정합니다. 단일 10 MB 사진은 통과할 수 있지만, 12장의 사진 일괄 업로드는 조용히 실패하거나 타임아웃될 수 있습니다.

제한 유형체감 효과
PHP 업로드 용량임계값 초과 시 단일 파일 거부
총 POST 크기일괄 업로드 중반에 실패
리사이즈 시 메모리서버 측 썸네일 생성 오류
CDN 할당량관리자 페이지 느려짐,엄격한 차단 아님

Media Library 가져오기 전에 맥에서 원본 파일을 수정하세요. 파일 크기가 작을수록 업로드 속도가 빨라지고 서버 측 썸네일 작업 부하가 줄어듭니다. 일반적인 리사이즈 및 형식 규칙은 맥에서 이미지 압축하기 를 참조하세요.

권장 형식 및 크기

WordPress 코어는 최신 설치 환경에서 JPEG, PNG, GIF, WebP를 지원합니다. 테마와 플러그인은 srcset 및 최신 형식을 출력하는 방식이 다를 수 있습니다.

자산 유형권장 접근 방식
대표 hero 이미지테마 콘텐츠 너비의 2배 크기로 JPEG 또는 WebP
본문 내 블로그 사진너비 1200~1600 px JPEG
투명도 있는 로고oxipng 처리 후 PNG, 또는 테마 지원 시 SVG
갤러리 일괄 파일세트 전체에 일관된 최대 너비 적용

모든 사진을 무손실 PNG로 저장하기 전에 무손실과 손실 압축 을 읽어보세요. 사진은 리사이즈 후 손실 JPEG 또는 WebP로 저장하는 것이 적합합니다.

테마에서 WebP 지원을 문서화했다면 hero 이미지를 로컬에서 변환하세요. 맥에서 PNG를 WebP로 변환하기 는 디자인 PNG 소스에서 내보내는 방법을 다룹니다.

업로드 전 이미지 준비

반복 가능한 맥 워크플로우입니다:

  1. 테마 content_width를 확인하거나 브라우저 개발자 도구에서 라이브 열 너비를 측정합니다.
  2. 아트보드 3x가 아닌, Retina 디스플레이를 위해 해당 너비의 2배 크기로 내보냅니다.
  3. 내보내기 크기가 초과된 경우 미리보기에서 리사이즈합니다(도구 → 크기 조정…).
  4. 품질 82~85로 JPEG를 내보내거나 cwebp를 통해 WebP를 생성합니다.
  5. 4000 px 마스터 파일이 아닌 최적화된 파일을 업로드합니다.

위치 정보가 공개되면 안 되는 이벤트 사진의 GPS EXIF 데이터를 제거하세요. 메타데이터 제거는 바이트 크기와는 별개이지만 공개 블로그에서 개인정보 보호에 중요합니다.

Windows 사용자들이 자산을 재사용하지 못할 수 있으므로 카메라 HEIC 파일을 업로드하지 마세요. 먼저 맥에서 JPEG로 변환합니다.

대표 이미지와 콘텐츠 너비

대표 이미지는 본문 내 이미지보다 넓게 표시되지만 전체 카메라 해상도보다는 작습니다.

WordPress는 버전 4.4부터 반응형 srcset 및 sizes 마크업을 생성해 왔습니다. 반응형 이미지 문서 는 중간 크기가 브라우저가 적합한 후보를 선택할 수 있도록 하는 방법을 설명합니다. 테마가 모든 Media Library 이미지를 반응형으로 제공한다고 가정하지 않고, 대표 이미지, 카드, 사용자 정의 블록에 이 마크업을 사용하는지 확인하세요.

테마 레이아웃내보내기 힌트
800 px 콘텐츠 열1600 px 대표 이미지 너비
전체 너비 블록 테마아트보드 요구사항이 없다면 최대 1920~2400 px
카드 그리드카드 CSS 너비의 2배에 맞춤

라이브러리에서 원본 파일을 교체한 후에만 썸네일을 재생성하세요. WordPress는 플러그인이 다시 빌드할 때까지 이전 크기를 유지합니다. oversized -scaled 중간 파일을 제공하지 않도록 올바른 크기를 먼저 업로드하세요.

동일한 자산을 WordPress 외부 정적 랜딩 페이지에도 제공하는 경우 맥에서 웹용 이미지 최적화하기 와 함께 사용하세요.

미디어 라이브러리 일괄 처리

블로그 마이그레이션과 사진 에세이는 한 세션에 수십 개의 파일을 의미합니다.

mkdir wp-upload
for f in *.jpg; do sips -Z 1920 -s formatOptions 85 "$f" --out "wp-upload/$f"; done

originals/ 및 wp-upload/를 별도로 정리합니다. 게시물이 라이브 상태이고 검증될 때까지 마스터 파일을 삭제하지 마세요.

온라인 WordPress 이미지 최적화기는 파일을 서드 파티로 전송합니다. 초안 게시물, 공개 전 스크린샷, 클라이언트 작업 중인 파일의 경우 로컬에서 압축하세요. 업로드의 실제 의미를 알아보려면 온라인 파일 압축기는 안전한가요 를 참조하세요.

편집 체크리스트에 최대 너비를 문서화하여 기여자들이 휴대폰 사진을 전체 해상도로 업로드하는 것을 방지하세요.

압축 후 업로드 시 alt 텍스트를 추가하세요. alt 텍스트는 바이트 크기에 영향을 주지 않지만, 최적화된 파일과 설명적인 alt 텍스트를 결합하면 접근성 감사와 파일 크기 감사를 분리할 수 있습니다.

플러그인이 서버에서 WebP를 생성하더라도 로컬 WebP 사전 준비는 일괄 가져오기 중 업로드 시간과 관리자 측 처리 부하를 줄여줍니다.

GetCompress 사용법

GetCompress는 업로드 없이 맥에서 혼합된 이미지 폴더를 처리합니다. 편집자가 오프라인에서 한 달 치 게시물을 준비할 때 유용합니다.

  • 그림 폴더를 드래그 앤 드롭하고, 최대 너비와 WordPress 가져오기를 위한 JPEG 또는 WebP 출력을 설정합니다.
  • 테마 측정값에 맞는 프리셋(예: “WP featured 1920 JPEG q85”)을 저장합니다.
  • 일괄 내보내기 전에 텍스트가 많은 스크린샷을 미리보기합니다.
  • 사진 에세이가 기사당 10장 이상일 때 맥에서 WordPress용 이미지 최적화 일괄 처리를 진행합니다.
  • 작성자가 관리자 업로더를 열기 전에 HEIC 아이폰 사진을 JPEG로 한 번에 변환합니다.

GetCompress와 프론트엔드 마크업을 재작성하는 WordPress 플러그인의 역할은 다릅니다. 플러그인과 CDN이 나중에 최적화해야 할 내용을 줄이기 위해 원본을 준비합니다. 폴더 모니터링은 to-upload/ 디렉토리를 감시하여 디자인 팀이 블로그 자산을 매주 인계할 때 새 내보내기 파일을 압축할 수 있습니다.

업로드 후 모바일에서 대표 이미지 하나를 스팟 체크하세요. 플러그인 지연 로드 설정을 조정하기 전에 너비를 수정합니다.

관련 게시물