워드프레스에서 업로드한 이미지가 흐린 경우 - 기본 JPG 압축 변경 방법

워드프레스에서 업로드한 이미지가 흐린 경우가 있습니다. 이미지가 원본에 비해 많이 흐린 문제가 발생하는 경우 아래의 설명에 따라 워드프레스에서 이미지를 업로드할 때 이미지를 압축하는 기능을 비활성화하고 큰 이미지를 업로드할 때 이미지 크기가 축소되는 기능을 해제하여 문제 해결을 시도해볼 수 있습니다.

참고로 웹서버 용량과 트래픽을 줄이기 위해 이미지를 WebP 포맷으로 삽입하는 것을 고려할 수 있습니다. 저는 Snagit 프로그램을 사용하여 이미지 파일을 WEBP 형식으로 저장하여 업로드하고 있습니다.

[ 이 글은 2022년 12월 20일에 마지막으로 업데이트되었습니다. ]

이미지 최적화

워드프레스에서 이미지를 미디어 라이브러리에 업로드하면 원본 이미지는 그대로 두고 여러 가지 버전의 썸네일을 생성하게 됩니다. 알림판의 설정 > 미디어에서 기본적으로 생성되는 썸네일을 설정할 수 있습니다. 그리고 테마와 플러그인에서도 여러 가지 크기의 썸네일을 생성할 수 있습니다.

이미지를 업로드하기 전에 이미지를 웹용에 맞게 최적화하여 올리면 웹호스팅 공간도 줄이고 페이지 로딩 속도도 높여서 SEO(검색엔진최적화)에 긍정적인 영향을 미칩니다.

워드프레스에서는 EWWW Image Optimizer나 WP Smush 같은 플러그인을 사용하면 이미지를 업로드할 때 이미지 크기를 줄여줍니다.

저는 compressor.io라는 이미지 압축 서비스를 제공하는 사이트를 활용하여 이미지를 줄여서 올리고 있습니다. 포토샵을 열어서 이미지를 로드하여 웹용으로 저장하는 것이 귀찮아서 이 방법만을 이용하게 되네요.

워드프레스 이미지 압축 플러그인
워드프레스 이미지 압축 플러그인 WP Smush - 현재 100만 개가 넘는 사이트에 설치되어 사용되고 있다.

하지만 이런 플러그인을 사용하면 서버가 추가적인 작업을 해야 하므로 서버 자원을 소모하게 됩니다. 꼭 필요한 경우가 아니면 이런 플러그인을 사용하는 것보다 포토샵에서 이미지를 웹용으로 저장하는 것도 한 방법입니다. ("웹호스팅 용량 절약하기 - 이미지를 최적화하여 파일 크기를 줄여보자" 참고)

하지만 간혹 이미지를 올리면 원본에 비해 흐리게 표시되는 경우가 있습니다. 이런 경우 워드프레스의 기본 JPG 압축 기능 때문에 이런 현상이 나타날 수 있습니다.

워드프레스에서는 미디어 라이브러리에 올리는 이미지에 대하여 원본은 그대로 두고 썸네일을 만들 때 추가로 압축을 하게 됩니다. 이미 압축된 이미지를 올리게 되면 이중으로 압축되어 실제보다 흐리게 보일 수 있습니다.

워드프레스 4.5부터 워드프레스에서는 기본 압축 설정으로 82를 사용합니다. 이전 버전에서는 이 설정이 90이었습니다.

워드프레스 이미지가 흐린 경우 워드프레스 기본 JPG 압축 설정을 변경하는 방법

WP Smush 같은 이미지 압축 플러그인을 이미 사용하고 있는 경우 워드프레스 기본 압축 기능 때문에 이미지 품질이 떨어질 수 있습니다. 이 경우 기본 JPG 압축 설정을 적용하지 않도록 하는 것이 좋을 수 있습니다. 또는, 현재 올리는 이미지의 크기를 더 줄여서 웹호스팅 용량을 절약하고 싶을 수도 있습니다.

이러한 경우 테마의 함수 파일에 간단한 코드를 추가하여 워드프레스 기본 JPG 압축을 해제하거나 조정할 수 있습니다.

add_filter('jpeg_quality', function($arg){return 100;});

100은 이미지 품질이 가장 높음을 의미합니다. 즉, 이미지를 압축하지 않습니다.

압축률을 높이고 싶은 경우, 숫자를 조정해줍니다.

add_filter('jpeg_quality', function($arg){return 75;});

75로 설정하면 이미지가 기본 설정보다 더 압축되어 생성되는 썸네일 크기가 줄어들지만 그만큼 이미지 품질이 저하됩니다.

이 코드를 넣으면 새로 업로드되는 이미지에 대하여 썸네일을 만들 때 적용됩니다. 이전에 만들어진 썸네일에는 적용되지 않습니다. 이전에 생성된 버전에 대해서도 적용하려면 Regenerate Thumbnails 같은 플러그인을 사용하여 썸네일을 다시 생성해주면 됩니다.

큰 이미지 파일 업로드 시 이미지 크기가 줄어드는 현상

워드프레스 5.3 이상 버전에서는 큰 이미지 파일을 업로드하면 이미지의 가로 또는 세로 크기의 최대값이 2560px로 줄어듭니다. 큰 이미지를 업로드할 때 원본 크기를 유지하고 싶은 경우 다음 글을 참고해보시기 바랍니다.

기타 고려 사항

이외에 썸네일이 흐린 경우에는 2배수로 썸네일 크기를 지정하고 CSS를 사용하여 썸네일 크기를 줄일 수 있습니다. Newspaper 테마에서는 이런 방법이 이용되고 있지만 뉴스페이퍼 테마를 만든 업체에서 만든 Newsmag에서는 썸네일이 흐리게 보이는 경우가 있습니다. 이런 경우에 이 방법을 시도해볼 수 있습니다. 다음 글을 참고해보세요:

또 다른 방법으로 FTP를 통해 미디어 파일을 업로드하고 URL로 이미지를 삽입하는 방법으로도 선명한 이미지를 표시할 수 있습니다.

마치며

이미지 해상도가 무조건 높다고 좋은 것은 아닙니다. 웹용에 맞게 이미지를 최적화하여 올리면 웹 공간도 절약하고 사이트 속도도 높일 수 있습니다.

또, 이미지를 업로드하면 설치된 테마와 플러그인에 따라 다양한 크기의 추가 이미지(썸네일)가 생성되어 의외로 많은 공간을 차지할 수 있습니다. 그러므로 저렴한 웹호스팅에 가입하면 금방 웹호스팅 디스크 공간이 소진됩니다. 이 때문에 "업로드된 파일이 wp-content/uploads/2018/10 로 옮겨질 수 없습니다“와 같은 오류가 발생할 수 있습니다.

이미지 업로드 오류는 권한 문제 등 여러 가지가 원인일 수 있지만, 최근에는 주로 웹호스팅 공간 부족인 경우가 많습니다. 더 큰 웹호스팅 공간이 필요한 경우 블루호스트나 사이트그라운드 같은 해외 호스팅을 이용해볼 수 있습니다.

참고:


17개 댓글

  1. 안녕하세요 선생님. 오래전부터 선생님의 블로그를 보며 혼자 공부했던 사람입니다.
    다름이 아니라, 최근 A블로그를 시작하게 되었는데, 사진을 업로드를 하려고 할 때 (캡쳐본이든 어떤 것이든), 사진이 굉장히 작게 나옵니다. 그래서 업로드 전에 그 사진의 크기를 늘리면 화질이 깨지곤 합니다. 하지만 B나 C 웹사이트는 이런 이슈가 발생하지 않았는데, 대체 왜 이런 문제가 생기는지 모르겠습니다.

    1. 안녕하세요, 태발이님. 아마 이미지를 삽입할 때 썸네일 크기로 삽입되는 것 같네요. 이미지를 추가할 때 이미지 블록 속성에서 이미지 크기최대 크기로 설정해보시겠어요?

      https://www.screencast.com/t/jD3Tr7JNT8

      보통 미디어 파일을 삽입하면 최대 크기로 추가될 것입니다. 계속하여 크기가 작게 삽입되고, 이미지를 삽입할 때마다 크기를 조정해 주어야 한다면 귀찮을 것입니다. 그런 경우 다음 코드를 테마 함수 파일에 추가해보시겠어요?

      function custom_image_size() {
      // Set default values for the upload media box
      update_option('image_default_align', 'center' );
      update_option('image_default_size', 'large' );
      }
      add_action('after_setup_theme', 'custom_image_size');

      코드를 추가하는 방법은 https://www.thewordcracker.com/basic/how-to-add-custom-codes-to-wordpress/ 글을 참고해보세요.

      위의 코드는 오래 되었기 때문에 고전 편집기에서는 잘 작동할 것 같지만, 구텐베르크 편집기(블록 에디터)에서는 잘 작동할지 여부는 확신할 수 없습니다.

      위의 방법으로 잘 되는지 확인해보시겠어요?

      1. 선생님 제가 이 분야에 대해서는 정말 자신이 없기 때문에 일을 그르칠까봐 두렵습니다. 혹시 이 부분을 선생님께 도움을 요청한다면 어떻게 진행이 될까요? 자세한 사항을 혹시 이메일로 보내주실 수 있으실까요? 저의 이메일은 ***************입니다. ###PRIVIATE INFORMATION REMOVED###

      2. 예 일단 해보도록 하겠습니다. 선생님 혹시 에디터는 어떤 것을 쓰실까요? 고전 편집기 비활성화하고 워드프레스 기본으로 했더니 문제가 해결된 듯 합니다. 하지만 저는... 아무래도 고전 편집기가 좀 더 편해서 ㅜㅜ

      3. 문제가 해결되어 다행이네요. 고전 편집기(Classic Editor)는 2022년까지 지원될 예정(필요하다면 연장)이므로 가급적 기본 편집기인 구텐베르크(Gutenberg)를 사용하는 것이 바람직할 것 같습니다. 구텐베르크가 처음 도입 시에 저항이 심해서 고전 편집기 플러그인이 제공되었지만, 이제는 기능이 향상되고 안정화되었으므로 익숙해지면 더 편리할 것입니다. 다음 글을 참고해보시기 바랍니다. 고전 편집기로 보다 빠르게 글을 작성할 수 있을 것입니다.

        https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EA%B5%AC%ED%85%90%EB%B2%A0%EB%A5%B4%ED%81%AC-%ED%82%A4%EB%B3%B4%EB%93%9C-%EB%8B%A8%EC%B6%95%ED%82%A4/

        꼭 고전 편집기를 고집한다면 비슷한 방법으로 이미지 크기를 '최대 크기'로 설정할 수 있습니다. 혹은 제시된 코드를 테마의 함수 파일에 넣으면 자동으로 '최대 크기'로 설정되지 않을까 생각됩니다. (이 부분은 테스트해보지 않았습니다.)

  2. 지금도 답변 해주실 지 잘 모르겠네요.
    add_filter('jpeg_quality', function($arg){return 100;});
    혹시 저 jpeg 자리에 png를 넣으면 png 이미지에도 적용될까요?
    슬라이더 레볼루션 쓰고 있는데 png 파일을 넣으면 프리뷰에서는 괜찮은데
    직접보면 이미지가 많이 흐려져 있습니다 ㅠㅠ

    1. 코드를 입력한 후에 이미지를 올려도 동일한 현상이 발생하나요?

      FTP를 통해 이미지를 직접 올린 후에 이미지 URL로 이미지를 넣어보시면 어떨까요?
      가령 /wp-content/uploads/ 폴더 아래에 images라는 폴더를 만들고 이미지를 올리면 도메인주소/wp-content/uploads/images/abc.png가 이미지 URL이 될 것입니다.

    1. 안녕하세요, Jason님.

      생각처럼 될지는 모르겠지만... ftp에 직접 파일을 업로드한 후에 이미지 파일 링크로 그림을 삽입하는 방법은 어떨가요?
      가령 /images 폴더 하나를 루트 디렉터리 아래에 만들고 이미지를 넣으면 사이트주소/images/example.jpg처럼 이미지를 삽입할 수 있을 것 같습니다.
      하지만 추후에 사이트를 이전하거나 백업할 때 이 폴더의 파일이 제외될 수 있으므로 /wp-content/ 폴더 아래에 images 폴더를 하나 만들어도 될 것 같습니다.

  3. 감사합니다! 근데 제 차일드 테마엔 function.php파일이 없고 style.css 파일만 있네요! 그래서 그냥 부모 테마 function파일에 붙여넣었어요 혹시 차일드 테마에 부모폴더에있는 function.php을 그대로 복붙으로 가져와서 추가해도되는부분인가요?

    1. 안녕하세요?

      차일드 테마 내에 functions.php 파일을 하나 만드시고 부모 폴더 내에 있는 함수 파일에 붙여넣었던 코드를 삭제하고 대신 차일드 테마 내의 함수 파일에 추가해보시기 바랍니다.

  4. 저는 Mac OS를 사용중인데
    ImageOptim 이라는 프로그램으로 이미지 압축을 하고 있습니다.
    제일 편하더라구요.
    윈도우에는 있는지 모르겠지만...

    1. 맥에서 사용할 수 있는 이미 압축 프로그램에 대한 정보를 알려주셔서 감사합니다.

      포토샵에서 이미지를 웹에 최적화하여 저장하는 기능을 제공합니다.

      맥을 사용해보고 싶지만, 활용성이 떨어질 것 같아서 선뜻 구입은는 못 하고 있습니다.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.