워드프레스 편집창에서는 이미지가 분명 잘 보이고 워드프레스 관리자 페이지에서 미디어 > 라이브러리 들어가서 해당 이미지를 확인해도 경로등에 문제가 없고 깨지지도 않는데, 편집창을 저장하고 보기창을 보면 이미지 깨지는 현상을 직면했습니다. elementor 플러그인에서 같은 문제가 발생하였습니다. 

제가 최근에 한 작업들(보안인증서 설치, php7.0 서버 버전업, elementor 플러그인)을 고려해 보았으나 원인을 찾을 수 없었습니다. 

그러던 중, 워드프레스 도메인 이전후 이미지가 깨질때 해결법 에서 힌트를 얻어 크롬 브라우저에서 깨진 이미지에 커서를 댄 이후  마우스 오른쪽 버튼을 누른후 “검사” 항목을 선택해보니

[워드프레스] 이미지 링크에 “i1.wp.com”가 추가되어 이미지가 깨지는 경우 에서 설명하는 것처럼 “이미지 URL이 http://www.example.com/wp-content/uploads/2016/05/example.jpg가 되어야 하지만 http://i1.wp.com/www.example.com/wp-content/uploads/2016/05/example.jpg처럼 “i1.wp.com”이 자동으로 추가되는 현상이 발생한 것”을 확인할 수 있었습니다. 

[워드프레스] 이미지 링크에 “i1.wp.com”가 추가되어 이미지가 깨지는 경우 는 “JetPack의 Photon 플러그인을 비활성화하면 문제가 해결됩니다. JetPack > Settings(설정)을 클릭하고 Photon 옆에 있는 Deactivate(비활성화)를 클릭하도록 합니다.”라고 설명해주었는데, 제가 18.10.11 현재 사용하고 있는 젯팩버전에서는 JetPack > 설정 > 성능 및 속도 > 당사 글로벌 CDN에서 이미지 제공 을 off로 변경하니 바로 해결되었습니다. 

젯팩의 당사 글로벌 CDN은 “젯팩의 글로벌 CDN(콘텐츠 제공 네트워크)은 이미지를 최적화하므로 방문자는 기기 또는 위치와 관계없이 가장 빠른 환경을 이용할 수 있습니다. 또한 이미지가 당사 서버에 저장되므로 호스팅 요금제에서 공간을 절약하는 데 도움이 됩니다.”라는 설명처럼 사이트의 속도를 올려주는 좋은 도구인데, 이처럼 이미지 깨짐의 원이 되기도 하네요.  

저와 같은 문제를 겪으시는 분들 참조하세요. 

참고자료 : 1. 워드프레스 도메인 이전후 이미지가 깨질때 해결법 

                 2. [워드프레스] 이미지 링크에 “i1.wp.com”가 추가되어 이미지가 깨지는 경우 에서