WordPress에서 이미지를 최적화하는 방법?

이미지는 모든 웹사이트에서 중요한 부분입니다. 분위기를 조성하거나 제품을 선보이거나 페이지에 시각적인 흥미를 더하는 데 사용할 수 있습니다. 그러나 때로는 사이트에 가장 잘 어울리는 이미지가 없을 수 있습니다.

운 좋게도 WordPress에는 이미지를 최적화하는 데 도움이 되는 몇 가지 기능이 내장되어 있어 품질 저하 없이 더 빠르게 로드하고 사이트 공간을 덜 차지합니다!

GTmetrix + PSI에서 최적화되지 않은 이미지 찾기

사이트에서 최적화가 필요한 이미지를 찾는 가장 좋은 방법은 GTmetrix 또는 PSI와 같은 무료 온라인 도구를 사용하는 것입니다. 이 두 도구는 모두 웹사이트의 파일을 크롤링하고 더 빠르게 로드하기 위해 최적화해야 할 사항에 대한 이해하기 쉬운 보고서를 제공합니다.

WordPress 플러그인 + 서비스를 사용하여 이미지 최적화

EWWW Image Optimizer와 같은 꽤 많은 WordPress 이미지 최적화 플러그인(유료 및 무료)도 있습니다.

품질에 전혀 영향을 주지 않고 이미지를 압축하는 TinyPNG 및 Kraken Image Optimizer와 같이 이를 수행하는 서비스도 있습니다.

올바른 이미지 크기 사용

블로그를 업로드하기 전에 WordPress 편집기에서 블로그 너비에 맞게 그래픽, 비디오 및 기타 미디어의 크기를 조정해야 하는 것처럼 이미지 파일의 크기도 조정해야 합니다. 이렇게 하면 이미지가 생각보다 많은 공간을 차지하지 않게 됩니다!

캐시 이미지

이미지를 최적화하는 또 다른 방법은 이미지를 캐싱하는 것입니다. 이렇게 하면 캐시된 이미지가 있는 페이지를 방문하는 방문자가 파일이 다운로드될 때까지 기다릴 필요가 없으므로 여러 사람이 동시에 방문하더라도 사이트가 더 빨리 로드됩니다.

WP Smush 플러그인을 설치하고 활성화하면 실제로 자동으로 이 작업을 수행합니다(이 두 가지를 모두 수행해야 합니다!). 또한 코드를 캐시할 뿐만 아니라 축소하는 Autooptimize 또는 Wp Super Cache와 같은 플러그인을 사용할 수도 있습니다.

LazyLoad를 사용하여 오프스크린 이미지 연기

LazyLoad는 사용자가 사이트에서 해당 위치로 스크롤할 때까지 이미지 로드를 연기할 수 있는 WordPress의 덜 알려진 최신 기능입니다. 그렇게 하면 이 이미지는 페이지를 처음 가져올 때 로드되지 않았기 때문에 빠르게 로드됩니다!

이미지 압축 사용

LZW 또는 JPEG의 두 가지 다른 유형의 이미지 압축을 사용할 수 있습니다. 그들 사이의 차이점은 다른 어떤 것보다 어떤 유형의 그래픽 파일에 들어가는가와 더 관련이 있으므로 상황에 맞는 것을 선택하십시오!

이것이 작동하는 방식은 이미지에 사용되는 색상 수를 줄이는 것입니다. 즉, 검색하는 동안 서버 측에서 클라이언트 측으로 더 적은 데이터를 전송해야 합니다. 이렇게 하면 대역폭 사용량과 로드 시간이 줄어듭니다.

이미지 압축은 모든 사이트의 필수적인 부분이며 WordPress에는 성능 저하 없이 고품질 이미지로 사이트를 더 쉽게 만들 수 있도록 하는 여러 압축 플러그인이 있습니다!

차세대 형식으로 이미지 제공

세상에는 다양한 이미지 형식이 있으며 모든 형식이 귀하의 사이트에 적합하지 않다는 점을 이해하는 것이 중요합니다. 웹 사이트에서 성능을 향상시키려면 일반적으로 다른 유형보다 압축률이 더 좋은 WebP 또는 JPEG XR과 같은 차세대 형식을 사용해야 합니다.

이미지 크기 지정

이미지의 크기를 지정하면 WordPress에 이미지를 사이트에 배치할 때 사용할 공간을 알려줍니다. 이는 대역폭에 대한 부담을 줄여 페이지 로드 시간이 빨라지기 때문에 중요합니다!

CDN에서 이미지 제공

CDN은 지리적으로 더 가까운 서버에서 웹사이트의 이미지를 제공하는 빠르고 효율적인 방법입니다. 이는 대기 시간을 줄여 사용자에게 더 빠른 로드 시간을 의미합니다!

CSS 스프라이트를 사용하여 이미지 결합

CSS Sprite는 실제로 모든 작은 이미지를 하나의 큰 파일로 결합하는 이미지 유형입니다. 이것은 파일에 대한 요청 수를 줄여서 특히 모바일 장치에서 더 빠른 로드 시간을 의미하기 때문에 유용합니다! CSS 스프라이트 생성기를 사용하여 생성한 다음 CSS로 테마에 추가할 수 있습니다.

모바일용 적응형 이미지 사용

적응형 이미지는 다양한 장치의 사용자에게 다양한 이미지 크기를 제공하는 좋은 방법입니다. 이렇게 하면 대역폭 사용량과 로드 시간이 줄어듭니다! WordPress 플러그인을 사용하여 이 작업을 수행할 수 있지만 직접 무료로 수행할 수 있는 다른 방법도 많이 있습니다.

이미지 핫링크 비활성화

이미지를 핫링크하면 기본적으로 다른 사람의 서버에 있는 원본 파일에 연결하는 것입니다. 이것을 비활성화하면 사람들이 여러분의 대역폭을 훔치는 것을 막을 수 있으므로 여러분이 하고 싶을 것입니다.

WP Rocket과 같은 많은 WordPress 플러그인을 사용하여 이 작업을 수행할 수 있습니다. 일반적으로 호스트에게 이 작업을 수행하도록 요청할 수도 있습니다(좋은 호스트와 함께 있는 경우).

EXIF 데이터 제거

EXIF 데이터는 자신의 워드프레스 에디터에서는 볼 수 없지만 다른 사람은 볼 수 있는 숨겨진 정보입니다. 여기에는 날짜 및 시간 설정뿐만 아니라 카메라 제조업체 및 모델과 같은 정보가 포함됩니다. 이것을 제거하면 대역폭 사용량이 줄어듭니다!

이 프로세스에는 JPEGsnoop 또는 jhead와 같은 이미지 스크러버 도구를 사용하는 것이 포함됩니다. 이 도구를 사용하면 먼저 다운로드할 필요 없이 사이트의 이미지에서 모든 EXIF ​​데이터를 제거할 수 있습니다!

느린 연결에서 사용자에게 낮은 품질의 이미지 제공

이것은 이미지로 할 수 있는 일이지만 모든 테마에 이것을 숨길 수 있는 옵션이 있는 것은 아닙니다. 기본적으로 느린 연결(모바일 또는 기타)을 사용하는 사람들에게 낮은 품질의 이미지를 제공합니다. Optimole 플러그인으로 이 작업을 수행할 수 있습니다.

최적화된 이미지를 사용하는 것이 왜 중요한가요?

이미지는 사이트 성능의 큰 부분을 차지할 수 있으므로 이미지를 최적화하는 것이 중요합니다! 이렇게 하면 이미지가 최대한 빠르고 효율적으로 로드됩니다.

웹사이트 로드 속도가 빠를수록 사용자와 검색 엔진 모두에게 더 좋습니다! 로드 시간은 최근 Google 순위에서 더 많은 가중치를 부여했지만(그러나 약간만) 이것이 사실이 아니더라도 여전히 모든 것이 가능한 한 빨리 로드되고 있는지 확인하고 싶을 것입니다.

사람들은 사이트에서 기다리는 것을 싫어합니다. 특히 모바일 사용자는 이미지 최적화를 WordPress 사이트의 필수적인 부분으로 만듭니다. 또한 Google은 빠르게 로드되는 웹사이트를 좋아하기 때문에 SEO에도 도움이 됩니다.

결론

결론적으로 이미지는 모든 웹사이트에서 중요한 부분입니다. 분위기를 조성하거나 제품을 선보이거나 페이지에 시각적인 흥미를 더하는 데 사용할 수 있습니다.

그러나 때로는 원본 이미지가 충분히 최적화되지 않아 필요한 것보다 더 많은 공간을 차지할 수 있습니다. WordPress에는 이러한 파일을 최적화하여 품질 저하 없이 더 빠르게 로드할 수 있는 여러 기능이 있습니다! 가장 좋은 방법은 필요한 경우 이미지를 자동으로 압축하고 크기를 조정하는 LazyLoad 또는 PSI와 같은 이미지 압축 플러그인을 설치하는 것입니다. 크기를 지정하고 CSS 스프라이트를 사용하고 이미지 캐싱을 사용하여 이미지를 최적화할 수도 있습니다.