Image Compression Solutions for WordPress

워드프레스

WordPress를 위한 최고의 이미지 압축 도구 - 무손실, 손실, JPEG 및 PNG

로비 맥컬러프 - 2018년 3월 28일

오늘은 제가 가장 소중하게 생각하는 주제인 이미지 압축에 대해 이야기해보겠습니다! 반 농담이지만, 품질 저하 없이 이미지 파일 크기를 엄청난 비율로 줄이는 것에 대해 이상하게 만족스러운 점이 있습니다.

이 게시물의 영감은 Beaver Builders Facebook 그룹의 매우 인기 있는 게시물에서 비롯되었습니다. 방금 ImageOptim에서 Google의 새로운 Guetzli 알고리즘을 활성화하고 사용하는 방법에 대한 비디오 튜토리얼을 촬영했는데 이전에 익숙하지 않았던 다른 모든 옵션에 충격을 받았습니다. 이 글에서는 웹용 이미지 압축에 대한 몇 가지 팁과 도구에 대해 이야기하겠습니다.

초기 용어

더 자세히 알아보기 전에 몇 가지 공통 용어를 설정해 보겠습니다.

JPEG, PNG, SVG – 웹에서 가장 인기 있는 세 가지 이미지 파일 형식입니다. 이 튜토리얼에서는 주로 압축 및 최적화의 이점을 가장 많이 누리는 JPEG 및 PNG에 중점을 둘 것입니다.

JPEG 는 일반적으로 투명도가 없는 사진이나 웹 그래픽과 같은 고화질 이미지에 더 좋습니다.

PNG는 아이콘, 로고 또는 투명성이 필요한 모든 것에 적합합니다. PNG는 Photoshop이나 선택한 그래픽 편집 도구에서 나온 후에도 크게 최적화될 수 있습니다.

무손실 및 손실 – 압축 방법입니다. 무손실 압축은 이미지 품질이 저하되지 않음을 의미합니다. 말 그대로 전혀 없습니다. 여기에는 이미지에서 메타데이터를 제거하거나 품질에 영향을 주지 않는 모든 것을 제거하는 작업이 포함됩니다.

손실이 있다는 것은 압축 알고리즘이 이미지 품질을 저하시킨다는 것을 의미합니다. 더 나은 압축 결과를 얻을 수 있지만 이미지 품질은 저하됩니다. 대부분의 손실 압축 도구는 백분율 슬라이더를 제공하므로 파일 크기와 품질의 균형을 선택할 수 있습니다.

유용한 팁: 큰 이미지 배경의 경우 이미지를 약간 흐리게 하거나 사진 위에 불투명한 색상 레이어를 추가하는 경우가 많습니다. 디테일을 줄이거나 색상을 표준화하는 것은 파일 크기를 크게 줄이는 멋진 미적 스타일 선택입니다. 채용 페이지에서 실제로 이를 확인할 수 있습니다.

이미지를 얼마나 압축해야 합니까?

이미지 압축의 목표는 품질을 크게 저하시키지 않으면서 파일 크기를 최대한 줄이는 것입니다. 이는 과학이라기보다는 예술에 가깝고, "허용되는 품질"의 수준은 상황에 따라 달라집니다.

사진 스튜디오는 자신의 작업을 최고 품질로 강조하고 싶어하는 반면, 부동산 웹사이트는 페이지에 더 많은 이미지를 표시하는 대가로 품질을 기꺼이 희생할 수도 있습니다.

대부분의 이미지 편집 소프트웨어에서는 다양한 품질로 이미지를 내보낼 수 있습니다. 하지만 전용 이미지 압축 도구를 사용하는 경우에는 해당 소프트웨어에 가능한 최고 품질을 제공하고 거기에서 압축 알고리즘이 작동하도록 하는 것이 가장 좋습니다.

이미지 압축 도구 옵션

최근에 제가 발견한 바와 같이, 이미지 압축을 위한 도구와 서비스에는 옵션이 부족하지 않습니다.

이미지최적화

저는 ImageOptim으로 시작했고 여전히 선호합니다. ImageOptim은 OSX에서만 사용할 수 있지만 JPEG 및 PNG 파일 모두에 대해 손실 및 무손실 압축을 지원합니다. 또한 Google의 비교적 새로운 압축 알고리즘인 Guetzli를 사용하도록 구성할 수도 있습니다. Guetzli는 평균적으로 다른 알고리즘보다 파일 크기를 20-30% 더 줄일 수 있습니다.

ImageOptim은 Mac의 Dock에 있는 프로그램으로, 이미지를 프로그램 아이콘으로 끌어다 놓으면 압축됩니다. 나는 한 번에 하나 또는 두 개의 이미지를 최적화하는 경향이 있으므로 이 솔루션은 나에게 매우 효과적입니다. 그러나 다수의 이미지나 파일 크기가 큰 이미지를 작업하는 경우 다른 옵션 중 일부가 대규모 작업에 더 적합할 수 있습니다.

WPMU Dev의 스머시

Smush는 WordPress 설치 및/또는 WordPress에 업로드할 때 기존 이미지를 최적화하도록 구성할 수 있는 WPMU Dev의 무료 WordPress 플러그인입니다. Smush는 WPMU Dev의 서버에서 무거운 작업을 수행하고 이미지를 최적화하고 크기를 조정하기 때문에 훌륭합니다.

클라이언트, 특히 디지털 카메라에서 바로 메가바이트 이미지를 업로드하려는 클라이언트를 위한 웹사이트를 구축하는 경우 Smush는 설정하고 잊어버릴 수 있는 훌륭한 옵션입니다.

작은PNG

TinyPNG는 웹 기반 이미지 압축기입니다. 이미지(최대 5bm)를 업로드하고 압축된 버전을 다운로드할 수 있습니다. 이렇게 하면 대역폭이 소모되므로 인터넷 연결이 느리거나 유료 인터넷 연결을 사용하는 경우 최선의 선택이 아닐 수 있습니다. JPEG 및 PNG 파일 형식을 지원합니다. 무료입니다. 압축 품질 수준에 대한 제어 기능을 제공하지 않는 것 같습니다.

TinyPNG를 사용해 본 후에는 여전히 ImageOptim을 선호한다고 생각하지만 Windows 사용자, 빠른 일회성 작업 또는 특별히 웹 기반 압축기를 찾는 사용자에게는 훌륭한 옵션이 될 것입니다. 또는 처리를 로컬 머신이 아닌 클라우드로 오프로드하려는 경우.

상상하다

Imagify는 이미지를 업로드할 때 또는 WordPress 관리 영역에서 직접 이미지를 최적화하고 크기를 조정할 수 있는 전용 WordPress 플러그인을 제공하는 또 다른 웹 기반 SASS 옵션입니다. Imagify WordPress 플러그인은 평균 4.5개의 인상적인 별 리뷰를 자랑하며 많은 리뷰에서 Imagify로 얻은 이미지 품질이 다른 플러그인보다 우수하다고 언급합니다.

Imagify에는 2MB 미만의 이미지를 업로드하고 최적화할 수 있는 무료 플랜이 있습니다. 최적화된 버전의 이미지는 24시간 동안 서버에서 다운로드할 수 있습니다.

JPEG미니

JPEGMini는 강력한 솔루션을 찾는 사람들에게 매력적인 SASS 서비스입니다. 전자상거래 상점을 위한 수만 개의 고해상도 제품 이미지를 최적화하는 임무를 맡고 있다고 상상해 보십시오. JPEGMini를 사용하면 모든 처리 작업을 빠르고 최적화된 클라우드 서버로 오프로드할 수 있습니다.

쇼트픽셀

ShortPixel은 또 다른 웹 기반 SASS입니다. 이미지 압축을 클라우드 서버로 오프로드하려는 경우 확인해 보는 것이 좋은 옵션입니다. 무료 플랜을 사용하면 한 달에 최대 100개의 이미지를 최적화할 수 있으며 그 이상은 월 5달러부터 시작하는 프리미엄 플랜도 있습니다. ShortPixel에는 WordPress 플러그인도 있으며 나머지 BB 팀에서 가장 선호하는 플러그인입니다.

상상하다

당신이 가장 좋아하는 것은 무엇입니까?

이 게시물에 영감을 준 원본 Facebook 스레드를 방문하면 여러 가지 다른 옵션과 다양한 이유로 둘 중 하나를 선호하는 사람들을 볼 수 있습니다. 우리가 가장 좋아하는 것을 놓치고 있습니까? 그것이 무엇인지, 왜 그것을 좋아하는지 댓글로 알려주세요.

또한, 당신이 먹고 자고 호흡하는 퍼포먼스를 즐기는 타입이라면 현대 퍼포먼스 모범 사례에 대한 Jon Brown과의 인터뷰가 흥미로울 것입니다.

댓글 26개

Raygun 디자인 2018년 3월 28일 오후 1시 31분
우리의 투표는 Tinypng에 대한 것입니다. 우리는 귀하의 사이트에 업로드할 때 최적화할 수 있는 플러그인을 좋아합니다. 우리는 Panda도 좋아합니다! Mac을 사용하면서 ImageOptim도 살펴보겠습니다. 훌륭한 목록입니다.
- Robby McCullough 2018년 4월 30일 오전 11시 35분
  하하. 네, 동물 마스코트를 가지고 있는 대부분의 회사는 꽤 견고합니다.
Paul Steele 2018년 3월 28일 오후 4:30
Tinypng에는 Wordpress 플러그인(https://wordpress.org/plugins/tiny-compress-images/)도 있으며 해당 API는 서버측에서 무언가를 설정해야 하는 경우에 사용하기에 좋습니다.
Toby 2018년 3월 28일 오후 8:45
멋진. 방금 ShortPixel을 사용하기 시작했습니다. 잘 설계되어 있고 플러그인 친화적이며(미디어 교체 활성화) 비용 효율적입니다.
S3 Offload를 Beaver와 통합하는 기사를 정말 보고 싶습니다. bb-플러그인 캐싱으로 인해 이 작업이 특히 어렵습니다.
Chris 2018년 3월 29일 오전 9:02
저는 EWWW를 사용합니다. 이미지가 많은 사이트의 경우 CDN을 사용하면 무제한으로 라이선스를 받을 수 있습니다. 한 번에 10개의 경우 https://ewww.io/online-image-optimizer/를 사용하세요.
미하이 2018년 3월 29일 오전 10시 51분
저는 20개 이상의 WordPress 사이트에 대해 모든 WordPress 이미지 압축/최적화 플러그인을 테스트했습니다. 그 중 일부에는 사용자 생성 콘텐츠(예: 대규모 이미지)가 포함되어 있으며 저에게 가장 좋은 옵션은 ShortPixel입니다. 나는 압축이 동급 최고의 품질/크기 비율을 가지며 가격 모델이 공정하다는 것을 알았습니다. 게다가 – 파일 크기에 제한이 없으며 무료 요금제를 사용하는 경우에도 완벽하게 최적화됩니다.
Dhiraj Das 2018년 3월 31일 오후 11:05
나는 그동안 TinyPNG를 사용해왔는데, 업로드한 후 이미지를 부풀리고 압축하는 것 같습니다(틀렸을 수도 있지만 업로드한 후의 이미지 크기가 실제 크기보다 더 무거워 보입니다). ImageOptim에 대해 전혀 몰랐습니다. 매우 편리한 것 같습니다 도구.
루카스 2018년 4월 4일 오전 5:58
좋은 리뷰입니다. 업로드하기 전에 TinyPNG 대신 webresizer.com을 사용합니다. 이를 통해 최종 제품을 효과적으로 제어할 수 있습니다. 대량 크기 조정기/압축기가 있지만 모두 동일한 크기여야 하는 여러 이미지와 함께 사용하는 것이 가장 좋습니다.
우리 사이트에서는 Imagify가 잘 작동하는 것을 발견했습니다.
a305587 2018년 4월 10일 오전 10시 17분
이 서비스는 훌륭합니다. 이 목록을 작성해 주셔서 감사합니다.
이미 Photoshop을 사용하고 있다면 Photoshop을 통해서도 이 작업을 수행할 수 있다는 점을 지적하고 싶습니다. "다른 이름으로 저장..." 대신 다음으로 이동하세요.
파일 –> 내보내기 –> 웹용으로 저장(레거시)
그런 다음 사전 설정에서 JPEG High, JPEG Medium 또는 JPEG Low 압축으로 변경합니다. 그런 다음 "저장"을 클릭하세요. 이는 위의 서비스와 동일한 결과를 얻습니다.
- Robby McCullough 2018년 4월 10일 오후 3시 11분
  놀랍게도 이러한 도구와 서비스 중 다수는 Photoshop보다 파일 크기를 줄이는 데 더 좋습니다.
- Tom Nguyen 2018년 5월 2일 오전 3:07
  Photoshop에서도 동일한 작업을 수행하지만 ImageOptim과 Smush가 눈에 띄는 품질 저하 없이 파일 크기를 더욱 줄일 것이라고 믿습니다.
Jake Hawkes 2018년 4월 11일 오전 7시 56분
사람들은 IMGIX나 Cloudinary와 같은 콘텐츠 최적화 도구를 훨씬 더 진지하게 살펴봐야 한다고 생각합니다.
Ann Iashin 2018년 4월 15일 오전 8:56
압축맨을 사용하는 것이 좋습니다! 인터넷을 사용하지 않고 웹사이트에서만 사용됩니다.
dmergus 2018년 4월 19일 오전 6:52
우리는 고객을 위해 Smush와 Short Pixel을 사용하는 경향이 있습니다. 짧은 픽셀은 더 나은 압축을 제공하지만 Smush도 좋습니다. 설정하고 잊어 버리십시오.
그렉 하얏트 2018년 4월 23일 오전 7시 25분
저는 OSX에서 ImageOptim을 사용하는 것을 매우 좋아합니다! 나는 그것이 어떤 플랫폼에 표시되는지에 관계없이 웹으로 보내는 모든 이미지에 그것을 사용합니다!
Sridhar Katakam 2018년 4월 26일 오후 7:10
ImageOptim의 설정 변경과 관련하여 최적화 수준을 기본값인 Extra로 유지하시겠습니까?
- Robby McCullough 2018년 4월 30일 오전 11시 34분
  대부분의 경우 그렇습니다.
오메르 2018년 4월 26일 오후 9:56
아무도 Kraken.io(https://kraken.io/)를 언급하지 않았다는 사실에 놀랐습니다. 웹 인터페이스나 WordPress 플러그인으로 사용할 수 있습니다.
- 로버트 러틀리지(Robert Rutledge) 2018년 5월 3일 오전 10:07
  저는 좋은 대안으로 보이는 Chromebook을 사용하고 있습니다. 나는 http://guetzliconverter.linuxadm.hu/를 사용하고 있습니다.
gelform 2018년 4월 29일 오전 6:06
내가 찾은 PNG용 최고의 라이브러리는 PNGQuant이지만 로컬에서 작동하도록 하는 데 어려움을 겪었습니다. 이제 PNGQuant를 사용하는 http://compresspng.com/을 통해 모든 이미지를 실행합니다. ImageOptim에 비해 크게 개선되었습니다.
Tom Nguyen 2018년 5월 2일 오전 3:05
저는 ImageOptim과 Smush 무료 버전을 사용했습니다. 특히 스머쉬를 좋아해요. 한 번에 더 많은 이미지를 최적화할 수 있는 것 외에 유료 버전으로 업그레이드하면 다른 이점이 있습니까?
- Robert Rutledge 2018년 5월 3일 오전 10:04
  제 생각에는 이것이 Smush보다 훨씬 더 잘 최적화됩니다.
BuildupYouth 2018년 10월 26일 오전 2:07
목록을 제공해 주셔서 감사합니다. 현재 WPMU Dev의 Smush를 사용하고 있으며 완벽하게 작동합니다..
Ronald E Ford 2018년 11월 21일 오후 8:01
나는 이것이 아마도 구식이라는 것을 알고 있지만 Fireworks를 사용하면 이미지 압축을 훌륭하게 제어할 수 있습니다. 내 생각에는 최고의 래스터/벡터 프로그램입니다.
Jake Hawkes 2018년 11월 22일 오후 1:09
불꽃놀이는 훌륭한 프로그램이었으며 지금도 그렇습니다. 나는 몇 년 동안 그것을 사용하지 않았지만, 내가 얼마나 그리워하는지 확인하기 위해 다시 열어야 할 때가 될 것입니다.
Himani Bhardwaj 2018년 12월 18일 오후 10:46
이 좋은 기사에 감사드립니다! 내 사이트에 Image Optimizer 플러그인을 사용하고 있습니다.