WebP
Blogging Tips

사진 올릴수록 사이트 느려지는 이유, 원본 그대로 쓰고 있나요

사진을 새로 올릴 때마다 화질만 신경 쓰면 된다고 생각하기 쉽습니다.⠀

저도 사이트에 사진을 많이 올린 날이면 다음 날 로딩이 눈에 띄게 느려지는 걸 몇 번 겪었습니다.⠀

새로고침을 반복해도 그대로라면 서버가 아니라 업로드한 이미지 파일부터 열어 볼 차례입니다.⠀

⠀

워드프레스 관리자 화면에서 느려진 페이지를 열어 로딩을 지켜보는 모습

⠀⠀⠀

새로고침만 반복하다 놓친 것⠀

⠀⠀⠀

사이트가 느려지면 인터넷 문제인가 싶어서 새로고침을 몇 번 해보게 되는데요, 다른 사이트는 잘 열리고 내 사이트만 느리다면 서버 쪽 문제라기보다 페이지 안에 있는 파일 자체를 봐야 합니다.⠀

특히 사진을 자주 올리는 게시물일수록 이 증상이 두드러집니다.⠀

페이지를 열 때 브라우저는 그 안에 걸린 이미지를 전부 내려받은 뒤에야 화면을 완성하기 때문입니다.⠀

사진 한 장의 용량이 크면 그만큼 내려받는 시간이 늘어나고, 이 시간이 쌓이면 전체 로딩이 눈에 띄게 늦어질 수 있습니다.⠀

서버를 의심하기 전에 이미지부터 확인해야 하는 이유가 여기에 있습니다.⠀

⠀

새 글에 넣은 사진이 로딩되는 동안 빈 화면으로 남아 있는 모습

⠀⠀⠀

미디어 라이브러리 파일명 끝을 봅니다⠀

⠀⠀⠀

워드프레스 관리자 화면에서 미디어 라이브러리로 들어가면 업로드한 파일 목록이 뜹니다.⠀

파일명 끝이 jpg나 png로 표시된다면 원본 이미지를 그대로 올린 상태입니다.⠀

스마트폰이나 카메라로 찍은 사진은 대체로 이 확장자로 저장되고, 파일 크기도 수 메가바이트 단위로 큰 경우가 많습니다.⠀

목록에서 파일을 하나씩 눌러 보면 오른쪽에 용량이 함께 표시되는데, 이 숫자가 크게 찍힌 파일부터 눈여겨보면 됩니다.⠀

결국 로딩이 느려지는 원인을 눈으로 확인하는 첫 단계가 바로 이 용량 숫자를 훑어보는 일입니다.⠀

⠀

미디어 라이브러리에서 파일 확장자가 jpg로 표시된 목록 화면

⠀⠀⠀

확장자 하나 바꾸면 용량이 줄어듭니다⠀

⠀⠀⠀

같은 사진이라도 WebP 형식으로 바꾸면 JPEG보다 파일 크기가 약 25~35% 작아진다는 결과가 있습니다.⠀

2026년 기준 전 세계 브라우저 지원율이 96%를 넘는다는 점도 함께 나온 수치입니다.⠀

예전에는 일부 브라우저에서 WebP가 안 열릴까 봐 원본 JPEG를 고집하는 경우가 있었는데, 이제는 그 걱정 때문에 원본을 그대로 쓸 이유가 사실상 남아 있지 않은 셈입니다.⠀

브라우저 지원율이 이만큼 올라온 지금은, 확장자만 바꿔도 화면이 안 열릴 위험 없이 용량을 줄일 수 있는 상황인 셈입니다.⠀

WebP는 구글이 개발한 이미지 형식이고, 워드프레스 관리자 화면의 미디어 설정에서 변환 여부를 확인할 수 있습니다.⠀

⠀

WebP로 변환된 이미지와 원본 JPEG의 파일 용량을 나란히 비교한 화면

⠀⠀⠀

압축 도구 하나 켜고 결과부터 봅니다⠀

⠀⠀⠀

용량을 줄여주는 압축 플러그인은 여러 개가 있고, 그중 ShortPixel은 2026년 벤치마크 테스트에서 JPEG 파일을 최대 82%까지 줄인 결과를 낸 적이 있습니다.⠀

앞서 본 WebP의 25~35% 감소보다 훨씬 큰 폭인데, 이는 압축 방식이 확장자 변경과는 별개로 작동한다는 뜻이기도 합니다.⠀

같은 테스트에서 5개 주요 플러그인 가운데 모바일 PageSpeed 점수 1위를 기록했다는 결과도 함께 나왔습니다.⠀

이 수치는 압축 도구가 낼 수 있는 효과의 상한선을 가늠하는 참고값으로 보면 됩니다.⠀

실제로 내 사이트에서 이 정도까지 줄어드는지는 사진마다 다를 수 있어 직접 재보는 과정이 필요합니다.⠀

플러그인을 설치하기 전에 백업해 둔 뒤, 원본 사진 한 장을 골라 압축 전후 용량을 미디어 라이브러리에서 직접 비교해 보는 편이 나중에 문제가 생겼을 때 원인을 가리기 쉽습니다.⠀

개인적으로는 압축 도구를 켤 때 용량이 큰 사진 한 장만 먼저 돌려서 결과를 확인하는 쪽이, 전체 라이브러리를 한 번에 돌리는 것보다 안전하다고 봅니다.⠀

한 장씩 확인하면서 넘어가야 82%라는 최대치와 내 사진의 실제 결과 사이의 차이도 눈으로 알 수 있습니다.⠀

⠀

압축 플러그인 설정 화면에서 손실 압축 옵션을 켜는 모습

⠀⠀⠀

PageSpeed 점수로 숫자를 남깁니다⠀

⠀⠀⠀

구글 PageSpeed Insights는 페이지 속도를 점수로 보여주는 무료 도구이고, 이미지 최적화 전후 점수를 이 화면에서 비교하면 됩니다.⠀

압축 전 점수를 먼저 적어 두고, 사진 하나를 바꾼 뒤 다시 측정해 두 숫자를 나란히 기록해 둡니다.⠀

같은 페이지를 대상으로 측정해야 점수 변화가 이미지 때문인지 다른 요인 때문인지 가려낼 수 있습니다.⠀

이렇게 전후 점수를 나란히 남겨 두면, 앞서 확장자와 압축 도구로 줄인 용량이 실제 로딩 체감으로 이어졌는지 확인할 수 있습니다.⠀

⠀

PageSpeed Insights에서 모바일 점수와 LCP 항목이 표시된 결과 화면

⠀⠀⠀

다음 사진을 올리기 전에 미디어 라이브러리에서 그 파일의 확장자부터 한 번 확인해 두면 됩니다.⠀

Leave a Reply

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다