워드프레스 이미지 최적화 플러그인이 제공하는 주요 기능들

워드프레스 이미지 최적화 플러그인이 제공하는 주요 기능들

사이트가 커질수록 이미지 용량과 개수가 급증하여 서버 부담이 증가합니다. 페이지 로딩 속도 저하 및 SEO가 하락할수있습니다.

Lazy Load (지연 로딩)

사용자가 페이지를 스크롤할 때 해당 이미지를 불러오는 기능으로 초기 페이지 로딩 속도를 개선할수있습니다.페이지 처음 로딩 시 화면 밖의 이미지들은 로딩하지 않고 사용자가 실제로 보는 이미지에만 리소스를 사용
워드프레스 5.5 이상부터 기본 적용되지만 고급 기능(프로그레시브 로딩, placeholder, 동영상 lazy load, iframe lazy load 등)은 플러그인에서 사용가능합니다(Smush, Optimole, Lazy Load by WP Rocket)

리사이즈 (Resize / Scale to Fit)

불필요하게 높은 해상도의 이미지를 브라우저 화면에 맞게 표시하도록 설정하여 이미지를 저장 및 표시할수있습니다. 예를들어 원본 이미지의 해상도가 3000px이고 사이트에서 최대 1200px만 필요한경우 1200px로 축소 저장, 품질을 유지하면서 용량을 대폭 감소할수있습니다

 

워드프레스는 미디어를 업로드할때 기본적으로 다음과 같이 자동으로 여러 해상도의 썸네일 이미지를 자동 생성합니다:
thumbnail - 150x150
medium - 300x300
large - 1024x1024
full - 원본 해상도
사용자가 테마 또는 에디터에서 "medium", "large" 등의 크기를 설정하면 워드프레스는 게시물 또는 페이지에서 해당하는 썸네일 이미지를 사용합니다. 

 

플러그인을 사용하여 추가적인 리사이즈 및 이미지최적화 작업을 수행할수있습니다.

실시간 최적화 방법
페이지 로딩 시 자동으로 화면 크기에 맞는 사이즈로 전송됨(실시간 최적화, Optimole) 이미 업로드한 이미지의 리사이즈 작업없이 로딩 성능을 개선하고 싶은 경우

정적 최적화 방법

이미지를 실제로 줄여서 저장하는 방식으로 이미지 리사이즈 작업(Bulk Resize)이 필요합니다. 초기 업로드 시 최적화를 하지 않은 이미지가 많은경우 ShortPixel, Imagify
서버 저장 공간 감소

WebP 자동 변환

WebP (웹피)는 JPG/PNG이 비해서 데이터 크기는 더 작지만 품질을 유지할수있는 이미지 포맷으로 속도 향상, SEO 최적화, 모바일 UX 개선등에 유용합니다. 크롬, 사파리, 엣지, 파이어폭스 등 대부분의 브라우저에서 지원하며 브라우저가 지원하지 않으면 JPG/PNG로 fallback합니다.
이미지 업로드 시 변환 방식 (정적 변환)과 페이지 로딩 시 실시간 전환 방식(동적 변환)이 있습니다.

대용량 이미지 처리 기능

이미 미디어 라이브러리에 업로드된 수백장의 이미지에 대해 한번에 최적화 작업(압축, 리사이즈, WebP 변환 등)을 빠르게 수행 및 처리하는 기능입니다.

 

CDN (Content Delivery Network)

방문자에게 가장 가까운 서버(서울, 도쿄, 프랑크푸르트)에서 콘텐츠를 제공하여 전 세계 어디서든 빠르게 로딩하게 해주는 기술입니다. 원본 서버(호스팅)에 직접 요청하지 않으니 속도 향상되고 서버 부하가 감소합니다.
로딩 속도 단축 (특히 해외 방문자에게 효과적), 서버 부하 감소 (본 서버 부담 줄임), 트래픽 비용 절감 (호스팅 요금 절감 가능)

원본 백업 기능

압축 전 원본 이미지를 안전하게 저장해서 언제든 복원 가능할수있도록 하여  안전성을 확보합니다.

 

이미지 최적화 플러그인 종류
Smush, Imagify, EWWW Image Optimizer, ShortPixel, Optimole, reSmush.it 등

 

 

 

Smush 플러그인이 제공하는 이미지 최적화 기능들

Automatic Compression
When you upload images to your site, Smush can automatically optimize and compress them for you saving you having to do this manually.

Super Smush
Optimize images up to 2x more than regular smush with our multi-pass lossy compression.

EXIF Metadata
Photos often store camera settings in the file, i.e., focal length, date, time and location. Removing EXIF data reduces the file size. Note: it does not strip SEO metadata.

Full Size Images
You can also have Smush compress your original images - this is helpful if your theme serves full size images.

Lazy Load
This feature stops offscreen images from loading until a visitor scrolls to them. Make your page load faster, use less bandwidth and fix the “defer offscreen images” recommendation from a Google PageSpeed test.

 

기타

이미지 품질과 용량을 균형 있게 줄이기, 효율적인 압축 (Lossy / Lossless / Glossy)