WordPress용 이미지 최적화에 대한 궁극적인 가이드

게시 됨: 2017-06-14

1 … 2 … 3 … – 귀하의 잠재 고객이 귀하의 사이트가 아직 로드 중이기 때문에 귀하의 사이트를 닫았습니다. 익숙한 소리? 나는 당신이 그 참을성이 없고 실망스러운 방문자가 여러 번이라고 생각합니다. 나는 알고있다. 그래서 이미지 최적화에 대해 알아야 할 궁극적인 목록을 작성했습니다. 길지만 읽어보시면 좋을 것 같아요.

목차

  • 3분 비디오의 이 기사 내용
  • 이미지 최적화 이점
  • 이미지 형식
  • 업로드하기 전에 이미지 크기 조정
    • 이미지 자동 크기 조정을 위한 Imsanity WordPress 플러그인
  • 이미지 압축
    • 이미지 압축을 위한 최고의 온라인 도구
      • 작은PNG
      • 옵티미질라
      • 압축기
      • 이미지최적화
      • 이미지작게
      • 크라켄
      • JPEG.io
      • PageSpeed ​​인사이트
      • 최고의 온라인 압축 도구에 대한 결과
      • JPEG를 위한 최고의 온라인 압축 도구
      • PNG용 최고의 온라인 압축 도구
      • 전반적으로 최고의 온라인 이미지 압축 도구
    • 이미지 압축을 위한 최고의 WordPress 플러그인
      • WP Smush (무료 버전)
      • TinyPNG로 JPEG 및 PNG 이미지 압축
      • 짧은 픽셀
      • 상상하다
      • EWWW 이미지 최적화(무료 버전)
      • 이미지 압축을 위한 최고의 WordPress 플러그인 결과
      • JPEG 압축을 위한 최고의 WordPress 플러그인
      • PNG 압축을 위한 최고의 WordPress 플러그인
      • 전체 이미지 압축을 위한 최고의 WordPress 플러그인
  • 결론

3분 비디오의 이 기사 내용

다음은 이 기사에 대한 매우 빠른 비디오 개요입니다. 나는 여전히 읽기를 권장하지만 충분히 당신을 괴롭히기 위해 여기에 우리가 있습니다.

이미지 최적화 이점

아직도 모든 이미지 최적화에 대해 판매하지 않습니까? 이 작고 사소한 문제만 해결하면 얻을 수 있는 모든 이점을 살펴보겠습니다.

  • 귀하의 사이트는 더 빨라질 것입니다
  • Google PageSpeed ​​점수가 더 높아집니다.
  • Google은 당신을 더 좋아할 것이고 당신의 검색 엔진 순위는 향상될 것입니다
  • 이탈률이 줄어들고 더 많은 방문자가 귀하의 페이지를 보게 됩니다.
  • 서버에 더 적은 스토리지가 필요하고 서버에 더 적은 리소스를 사용하므로 비용이 절감됩니다.
  • 귀하와 귀하의 방문자를 위해 모바일 데이터 요금제 비용을 절약할 수 있습니다.

나는 지금 당신의 관심을 가지고, 그렇지? 이제 실제 작업을 시작할 수 있습니다.

이미지 형식

이미지 최적화는 이미지 형식에 대한 몇 가지 기본 지식으로 시작됩니다. 인터넷에서 가장 일반적인 두 가지 형식은 확장자가 .png 인 PNG 와 확장자가 .jpg 인 JPEG 입니다. 나는 사진, 그라디언트가 있는 이미지 및 수백만 가지 색상이 있는 이미지에 가장 적합한 형식이기 때문에 대부분의 경우 JPEG를 사용합니다. 반면에 PNG는 로고와 같은 제한된 색상 이미지와 투명도가 있는 이미지에서 더 좋습니다.

다음 예에서는 최상의 이미지 최적화를 위해 올바른 이미지 형식을 선택하는 것이 얼마나 중요한지 보여줍니다.

자식 - 이미지 압축

최적화되지 않은 child.jpg 이미지를 .jpg 및 .png 형식으로 저장하겠습니다. 우리는 이미지 child-saved-as-jpeg.jpg 가 3.1MB이고 이미지 child-saved-as-png.png 가 4.5MB임을 알 수 있습니다. 이 경우 PNG 사진은 JPEG 이미지보다 45% 더 커 졌습니다. 이는 단순히 특정 이미지 형식을 선택하는 데서 비롯된 차이입니다. 적은 노력으로 많은 공간을 절약할 수 있는 더 쉬운 방법은 없습니다. 글쎄요, 아마도 있습니다. 다음 단계를 살펴보겠습니다.

업로드하기 전에 이미지 크기 조정

이전 예에서 올바른 이미지 형식을 선택하여 약간의 공간을 절약했지만 업로드하기 전에 이미지의 크기를 조정 하면 더 많은 공간을 절약 할 수 있습니다. 그러나 얼마나 크기를 조정해야 합니까? 그것은 실제로 웹 사이트의 너비와 컨테이너에 따라 다릅니다.

ProteusThemes 사이트에서 이미지의 최대 너비는 1110픽셀이므로 너비가 1800픽셀인 현재 이미지 child.jpg 의 너비를 1110픽셀로 조정합니다. 이 경우 우리는 크기가 3.1MB에서 1.1MB로 늘어났습니다. 이는 절약되고 감소된 공간 의 또 다른 65%입니다 .

힌트: WordPress 미디어 라이브러리에서 직접 이미지 크기를 조정할 수 있습니다. 미디어 -> 이미지 선택 -> 이미지 편집을 클릭하고 이미지 의 새 크기를 선택합니다.

더 나은 이미지 최적화를 위해 이미지 크기 편집

이미지 자동 크기 조정을 위한 Imsanity WordPress 플러그인

이미지 크기 조정에 대해 생각하고 싶지 않거나 여러 사용자가 웹사이트에 이미지를 업로드하는 경우 Imsanity 플러그인이 완벽하게 작동합니다. 플러그인 설정에서 이미지의 최대 너비 또는 높이를 선택할 수 있으며 플러그인은 모든 더 큰 이미지의 크기를 해당 크기로 조정합니다. 또한 대량 크기 조정 기능을 선택하여 기존 이미지의 크기를 모두 조정할 수도 있습니다. 업로드하기 전에 각 이미지의 크기를 개별적으로 조정하는 데 문제가 있는 모든 사람에게 이 플러그인을 강력히 추천합니다. Imsanity 플러그인을 무료로 다운로드할 수 있습니다.

이미지 압축

이제 이미지 최적화의 기본 사항을 배웠으므로 게임을 향상시킬 수 있는 방법을 살펴보겠습니다. 인터넷에서 수많은 이미지 압축 온라인 도구 와 이미지 크기를 줄이는 WordPress 플러그인 을 찾을 수 있습니다. 그러나 우리는 여기서 주의해야 합니다. 일부 도구는 거의 차이가 없고 일부 설정은 이미지를 손상시켜 쓸모없게 만들 것입니다. 그렇다면 완벽한 균형을 찾는 방법은 무엇일까요? 걱정하지 마세요. 작성 당시(2017년 6월, 2018년 업데이트) 이미지 최적화를 위해 가장 인기 있는 모든 온라인 도구/서비스 및 WordPress 플러그인을 테스트했으며 최고의 도구를 선택했습니다.

3개의 다른 JPEG 이미지와 1개의 PNG 이미지를 사용하여 테스트를 수행했습니다.

3개의 JPEG 이미지는 모두 Mi Pham, Breather, Denise Chan 및 Niko Virtanen의 Unsplash에서 가져온 것입니다. 테스트 목적으로 자르고 1110 x 624픽셀로 크기를 조정했습니다.

자식 이미지 압축
테스트 이미지 child.jpg.
방 이미지 압축
테스트 이미지 room.jpg. 사진: Niko Virtanen(https://nikovirtanen.com/), 라이선스 Creative Commons BY
꽃 이미지 압축
테스트 이미지 꽃.jpg

PNG 이미지의 경우 ProteusThemes 로고와 그 뒤에 몇 가지 패턴이 있는 자체 이미지를 만들었습니다. JPEG 테스트 이미지와 마찬가지로 이 이미지도 1110 x 624픽셀로 크기가 조정됩니다.

PT 로고 이미지 압축
테스트 이미지 pt-logo.png

이제 압축을 위해 선택한 모든 도구와 플러그인을 통해 모든 이미지를 입력하고 어떤 것이 사용하기에 가장 적합한지 알아낼 것입니다. 온라인 도구부터 시작하겠습니다.

이미지 압축을 위한 최고의 온라인 도구

작성 당시(2017년 6월, 2018년 업데이트) 다음은 이미지 압축을 위한 가장 인기 있는 온라인 도구 및 서비스의 전체 목록입니다.

  • 작은PNG
  • 옵티미질라
  • 압축기
  • 이미지최적화
  • 이미지작게
  • 크라켄
  • JPEG.io
  • PageSpeed ​​인사이트

다른 도구가 해당 목록에 포함될 자격이 있다고 생각되는 경우 알려주시면 테스트하여 목록에 추가하겠습니다. 아래에서 각 도구에 대한 나의 리뷰와 최고의 도구에 대한 나의 평가를 찾을 수 있습니다. 각 개별 도구에 대해 읽고 싶지 않다면 여기를 클릭하십시오 – 우승자 표시!

작은PNG

TinyPNG 는 내가 사용한 최초의 이미지 압축 도구 중 하나였으며 지금도 가끔 사용합니다. 옵션이 없으며 이미지를 업로드하기만 하면 압축됩니다. 이 온라인 도구를 사용하면 5MB 크기의 이미지를 최대 20개까지 일괄 업로드할 수 있습니다.

TinyPNG - 온라인 이미지 압축 도구

옵티미질라

Optimizilla 는 간단하지만 강력한 또 다른 온라인 도구입니다. 무료로 사용할 수 있으며 최대 20개의 이미지를 일괄 업로드할 수 있는 옵션이 있습니다. 최상의 압축/품질 비율을 위해 기본적으로 품질 설정을 90으로 둡니다. 압축을 더 많이 수행하려면 이 설정을 변경하기만 하면 품질이 즉시 변경되는 것을 볼 수 있습니다.

Optimizilla - 온라인 이미지 압축 도구

압축기

압축기 는 이미지 압축을 위한 최고의 도구 중 하나가 될 가능성이 있지만 한 가지 큰 결점이 있습니다. 현재 일괄 업로드 옵션이 없습니다. 즉, 한 번에 1개의 이미지만 압축할 수 있습니다. 그 외에는 무료이며 사용하기 쉽고 두 가지 압축 옵션이 있습니다. 압축 후에도 이미지 품질이 동일하게 유지되기 때문에 테스트에서 손실 옵션을 사용합니다.

압축기 - 온라인 이미지 압축 도구

이미지최적화

ImageOptim 은 많은 설정이 있는 도구입니다. 3가지 품질 옵션과 3가지 색상 품질 옵션 중에서 선택할 수 있습니다. 우리는 최고의 압축/품질 결과가 기본 설정에서 나온다는 것을 알게 되었습니다. 품질을 중간으로 설정하고 색상 품질을 자동으로 설정합니다. ImageOptim 을 사용하면서 가장 신경이 쓰였던 점은 약간 구식 디자인 옆에, PNG를 업로드해도 JPEG를 내보내는 것입니다. . 나는 Kornel(ImageOptim의 제작자)에게 해당 문제에 대한 이메일을 보냈고 그는 이미 수정했습니다.

ImageOptim - 온라인 이미지 압축 도구

이미지작게

Compressor 와 마찬가지로 ImageSmaller 에도 동일한 결함이 있습니다. 일괄 업로드 옵션이 없습니다. 그러나 최대 업로드 제한 중 하나가 50MB입니다. 최적화할 더 큰 파일이 있는 경우 ImageSmaller가 적합한 도구가 될 수 있습니다.

ImageSmaller - 온라인 이미지 압축 도구

크라켄

Kraken 은 내가 테스트한 모든 도구 중에서 최고의 대시보드를 제공하는 프리미엄 이미지 압축 도구입니다. 이미지 업로드를 위한 멋진 웹 인터페이스와 최상의 결과를 위한 다양한 설정을 찾을 수 있습니다. 우리는 테스트에서 기본 손실 설정을 사용했습니다.

Kraken - 온라인 이미지 압축 도구

JPEG.io

JPEG.io 는 Kraken 과 동일한 도구의 무료 버전입니다. 압축 기능은 동일하지만 웹사이트의 URL에서 알 수 있듯이 JPEG 전용입니다.

JPEG.io - 온라인 이미지 압축 도구

PageSpeed ​​인사이트

여기에서 이것을 볼 줄은 몰랐습니다. 맞죠? PageSpeed ​​Insights 는 또한 우리가 사이트를 테스트할 때 압축 파일의 .zip을 제공합니다. 이것은 가장 사용자 친화적인 방법이 아닙니다. 이미 모든 이미지로 웹사이트를 온라인 상태로 만든 다음 새 압축 이미지로 교체해야 하기 때문입니다. 하지만 Google이 원하는 대로 이미지가 압축됩니다.

PageSpeed ​​- 온라인 이미지 압축 도구

최고의 온라인 압축 도구에 대한 결과

아래에서 모든 테스트 결과가 포함된 그래프를 찾을 수 있습니다. 자세한 내용은 자세한 스프레드시트를 확인할 수도 있습니다.

JPEG를 위한 최고의 온라인 압축 도구

JPEG를 위한 최고의 온라인 압축 도구 - Compressor & ImageOptim 대부분의 도구는 테스트 JPEG를 약 80% 압축했습니다. 우리 child.jpg 이미지를 살펴보겠습니다. 우리는 3.1MB 크기의 사진으로 시작했고 크기를 조정하고 압축한 후 이미지 크기는 165KB에 불과했습니다. 즉, 크기가 95% 작아졌습니다 . 이제 차이가 있습니다! Compressor 와 ImageOptim 을 사용하여 동일한 결과를 얻을 수 있었습니다. 그래서 여기에 두 명의 승자가 있는 것 같습니다.

PNG용 최고의 온라인 압축 도구

PNG용 최고의 온라인 압축 도구 - Optimzilla PNG 테스트의 경우 모든 도구에서 크기가 평균 50% 감소 했습니다. 그러나 Optimizilla 는 pt-logo.png 이미지의 크기 가 56% 감소하여 나머지 것들보다 조금 더 나았습니다.

전반적으로 최고의 온라인 이미지 압축 도구

전반적으로 최고의 온라인 이미지 압축 도구 - Optimizilla Optimizilla 가 JPEG에 대한 최고의 압축 도구가 아니더라도 현재 온라인에서 사용할 수 있는 최고의 압축 도구로 권장했을 것입니다. 79%로 압축된 JPEG는 여전히 훌륭하며 페이지에서 간단한 품질 설정으로 더 높은 수준으로 올릴 수 있습니다. 또한 PNG가 포함된 경우에도 모든 이미지를 JPEG로 내보내는 ImageOptim 보다 Compressor 가 없고 더 안정적인 업로드를 제공하는 일괄 업로드 옵션이 있습니다. 이 모든 것 때문에 Optimizilla 는 최고의 온라인 이미지 압축 도구라는 칭호를 받을 자격이 있다고 생각합니다.

다음으로 WordPress 플러그인이 온라인 이미지 압축 도구를 능가할 수 있는지 살펴보겠습니다.

이미지 압축을 위한 최고의 WordPress 플러그인

온라인 이미지 도구와 WordPress 플러그인의 차이점은 무엇입니까? 이미지 압축을 위해 온라인 이미지 도구를 사용하는 경우에도 해당 이미지를 WordPress 사이트에 업로드한 다음 사용해야 합니다. 모든 것을 한 곳에 두는 것을 선호한다면 이미지 압축용 WordPress 플러그인을 사용하는 것이 좋습니다. 대부분의 플러그인에는 업로드 시 이미지를 최적화하는 옵션도 있으므로 해당 설정을 켜고 추가 작업을 잊어버릴 수 있습니다.

플러그인마다 새로운 워드프레스 사이트를 만들고 매번 같은 4개의 이미지를 업로드했습니다. 플러그인마다 설정이 다르기 때문에 압축과 이미지 품질 간의 완벽한 균형을 찾고 있었습니다.

다음 플러그인을 테스트했습니다.

  • WP Smush(무료 버전)
  • TinyPNG로 JPEG 및 PNG 이미지 압축
  • 짧은 픽셀
  • 상상하다
  • EWWW 이미지 최적화 도구(무료 버전)

이전에 언급했듯이 테스트해야 하는 다른 플러그인이 있으면 알려주시면 목록에 추가하겠습니다. 이 플러그인에 대해 더 알고 싶지 않다면 여기를 클릭하십시오 – 수상자를 보여주세요!

WP Smush (무료 버전)

WP Smush 는 내가 아는 가장 오래된 이미지 압축 플러그인 중 하나입니다. 무료 버전을 사용하기 위해 등록할 필요가 없기 때문에 다른 모든 플러그인에 비해 한 가지 좋은 이점이 있습니다. 또한 새로 업로드된 이미지를 자동으로 압축하는 옵션이 있으므로 플러그인이 설정되면 플러그인을 잊어버리고 백그라운드에서 모든 작업을 수행합니다. 불행히도 압축 결과는 무료 버전에서 최악의 결과 중 하나였으므로 사용을 권장하지 않습니다. 그들은 사이트에서 프로 버전이 훨씬 더 잘 압축된다고 밝혔으므로 다음 기사 업데이트에서도 이 버전을 테스트할 것입니다.

WP Smush - 이미지 압축 WordPress 플러그인

TinyPNG로 JPEG 및 PNG 이미지 압축

TinyPNG 온라인 압축 도구와 마찬가지로 WordPress 플러그인도 매우 간단합니다. 등록을 마치면 최소한의 설정이 있으며 기본적으로 기본적으로 작동합니다. 새로 업로드된 모든 이미지도 자동으로 압축할 수 있으므로 플러그인을 활성화하고 잊어버릴 수 있습니다.

TinyPNG - 이미지 압축 WordPress 플러그인

짧은 픽셀

ShortPixel 은 개인적으로 가장 큰 놀라움 중 하나였습니다. 연구를 하기 전에는 들어본 적이 없고 정말 감명을 받았습니다. 기본 손실 권장 설정을 사용하면 WordPress 플러그인 간에 최상의 압축 결과를 얻을 수 있으며 광택 옵션도 있습니다. 이 옵션은 매우 높은 품질의 사진이 필요하고 품질 손실에 타협할 수 없는 사진가 또는 ​​기타 전문가를 위한 것입니다.

ShortPixel - 이미지 압축 WordPress 플러그인

상상하다

Imagify 는 유명한 WP Rocket 플러그인 작성자가 만든 플러그인입니다. 등록 후에 선택할 수 있는 몇 가지 명확한 옵션이 표시됩니다. 최고의 배급 압축 및 이미지 품질을 위해 적극적인 모드를 선택하십시오. 설정에서 한 가지 좋은 점은 압축에 문제가 있는 경우를 대비하여 원본 이미지를 위한 별도의 폴더를 가질 수 있는 옵션도 있다는 것입니다. 내가 완전히 이해하지 못한 유일한 것은 압축 결과를 보기 위해 미디어에서 목록 보기로 전환해야 하는 이유입니다. 그 외에 Imagify는 정말 훌륭하고 견고한 플러그인입니다.

Imageify - 이미지 압축 WordPress 플러그인

EWWW 이미지 최적화(무료 버전)

EWWW Image Optimizer 가 유일한 플러그인이었는데 약간의 오류가 있었습니다. 먼저 자체 호스팅에서 시도했는데 EWWW Image Optimizer에 exec() 또는 API 키가 필요하다는 오류가 발생했습니다. 다음에 로컬 개발 WordPress 사이트에서 플러그인을 시도했는데 pngout이 누락되었다는 오류가 발생했습니다. 설치 방법에 대한 지침을 따랐고 마침내 플러그인을 테스트할 준비가 되었습니다. 무료 버전을 테스트했기 때문에 무손실 옵션만 있었고 최상의 결과로 이어지지 않았습니다. WP Smush와 마찬가지로 다음 기사 업데이트에서 EWWW Image Optimizer pro 버전도 테스트할 것이며 더 나은 성능을 보일지 확인할 것입니다.

Ewww Image Optimizer - 이미지 압축 WordPress 플러그인

이미지 압축을 위한 최고의 WordPress 플러그인 결과

이전과 마찬가지로 아래의 모든 테스트 결과가 포함된 그래프를 찾을 수 있습니다. 자세한 내용은 자세한 스프레드시트를 확인할 수도 있습니다.

JPEG 압축을 위한 최고의 WordPress 플러그인

JPEG 압축을 위한 최고의 WordPress 플러그인 - ShortPixel ShortPixel 이 평균 84% 압축률 로 승자가 되었습니다. 최고의 온라인 압축 도구 카테고리에서 Compressor 및 ImageOptim 과 동일합니다. 두 번째로 좋은 플러그인은 평균 압축률이 70% 인 Imagify 였습니다. 저는 ShortPixel 이 현재 해당 카테고리의 절대 우승자임을 선언합니다.

PNG 압축을 위한 최고의 WordPress 플러그인

PNG 압축을 위한 최고의 WordPress 플러그인 - TinyPNG의 JPEG 및 PNG 이미지 압축 최고의 PNG 압축 플러그인은 압축률이 56% 인 TinyPNG 의 Compress JPEG & PNG 이미지 입니다. 흥미롭게도 최고의 결과는 최고의 온라인 압축 도구 범주와 동일합니다. 그러나 약 50% 의 압축률로 여기에서 조금 더 경쟁력 있는 다른 플러그인.

전체 이미지 압축을 위한 최고의 WordPress 플러그인

전체 이미지 압축을 위한 최고의 WordPress 플러그인 - ShortPixel 제 생각에는 사용자 경험, 다양한 설정 및 압축 간의 최상의 비율은 ShortPixel 플러그인에서 나온 것입니다. 전반적으로 많은 옵션이 있지만 이미 훌륭한 기본 설정이 있는 매우 견고한 플러그인입니다. 등록 직후 플러그인 사용을 시작할 수 있으며 가장 중요한 것은 압축이 훌륭합니다. 현재로서는 특히 대부분의 이미지가 JPEG인 경우 내 웹사이트용 ShortPixel 플러그인을 사용할 것입니다.

결론

긴 여행이었죠, 그쵸? 한편, 우리는 child.jpg 이미지를 최대 95%까지 압축할 수 있었습니다. 이 3가지 간단한 단계 만 따르면 웹사이트가 훨씬 빠르게 작동할 수 있습니다. 다시 반복해 보겠습니다.

  • 올바른 이미지 형식 선택
  • 업로드하기 전에 이미지 크기 조정
  • 온라인 도구 또는 WordPress 플러그인으로 이미지 압축

또 다른 중요한 점은 각 이미지에 대해 하나의 도구 또는 WordPress 플러그인만 사용한다는 것입니다. 대부분의 이미지에는 일종의 손실 압축이 있기 때문입니다. 즉, 추가 압축이 있을 때마다 이미지 품질이 나빠질 수 있으며 이는 우리가 하지 않는 일입니다. 원하지 않는다. 또한 품질 비교를 확인하거나 다른 도구 및 플러그인을 직접 테스트하려는 경우 GitHub에 모든 테스트 이미지를 추가했습니다.

이미지를 압축하지 않는 것에 대해 더 이상 변명의 여지가 없어야 합니다. 이를 수행하는 데에는 많은 도구와 다양한 방법이 있으며 우리는 그것이 결국 가치가 있다는 것을 증명했습니다. 온라인 압축 또는 WordPress 플러그인에 대한 개인 승자를 선택하고 최적화 전후에 웹사이트 Google PageSpeed ​​점수를 확인하십시오. 댓글 섹션에서 사이트 속도 및 점수 향상에 대한 정보를 공유하십시오. 또한 이 기사가 이미지 최적화에 도움이 되었는지, 이에 대한 귀하의 생각은 무엇인지 알고 싶습니다.