이 문제는 왜 발생하는가 ?
워드프레스는 기본적으로 이미지를 업로드 할 때 3가지 이미지를 추가로 저장합니다.
- 실제로 이미지를 업로드를 하면 small, medium, large, full 이렇게 저장을 합니다.
- 워드프레스는 자동으로 화면의 해상도를 인식해서 이미지를 적당히 큰 이미지로 보여주도록 설계 되어 있습니다.
- 문제는 항상 큰 이미지로 보여주고 싶은 사용자들은 강제로 작은 이미지를 봐야 한다는 점 입니다. ( 여러분이 겪는 문제가 이 부분 입니다 )
- 아래 소스를 보면 실제 이미지 주소 외 여러장의 이미지가 지정되어 있음을 알 수 있습니다.
<img
src=”http://example.com/wp/wp-content/uploads/2017/03/photo-600×471.jpg”
srcset=”
http://example.com/wp/wp-content/uploads/2017/03/photo-600×471.jpg 600w,
http://example.com/wp/wp-content/uploads/2017/03/photo-1024×804.jpg 1024w,
http://example.com/wp/wp-content/uploads/2017/03/photo.jpg 1600w
”
/>
A. 해결방법 – webp 이미지 확장자로 업로드 하기.
- 이미지의 확장자를 webp 로 저장해서 업로드 하시면 문제가 해결됩니다.
- 이 현상은 크롬 ( 크로니움 기반 ) 브라우저에서만 발생하는 현상인데, 놀랍게도 webp 확장자에는 이 현상을 경험하지 않습니다.
B. 플러그인을 설치해서 반응형 이미지 기능 비활성화 하기.
- 여러분과 같은 문제를 경험하는 사용자가 많아서 어느 다정한 개발자가 올려준 플러그인 입니다.
- PHP 코드로 직접 작성해도 되겠지만, 플러그인으로 껐다 켰다 하는게 더 쉬운 선택이기 때문에 플러그인을 추천합니다.
- 플러그인을 활성화 하면 이제 반응형 이미지 기능이 비활성과 되고, 항상 원본 이미지가 보여집니다.