Base64 이미지 인코딩을 통한 워드프레스 사이트 속도 향상 방법

2019년 5월 4일

Base64 인코딩 (encoding, 암호화) 기법은 2진법을 텍스트로 전환시키는 것입니다. 웹 개발에서 base64 인코딩 기법은 종종 이미지를 HTML로 인라인 하는데 사용되는데요. 이를 통해 페이지를 렌더링 하는데 들어가는 서버 리퀘스트를 줄일 수 있습니다.

아래의 스크린샷은 저의 “디크립토에 대하여” 페이지의 속도 테스트 결과입니다.

보시다시피, 두 개의 소셜미디어 아이콘이 있음에도 불구하고 페이지 전체가 한 번의 서버 리퀘스트에 의해 로드 되었는데요. 이는 트위터와 인스타그램 PNG 파일이 base64로 인코딩 되어 헤더 템플릿에 포함되었기 때문입니다.

어떠한 이미지가 base64로 인코딩 되어야 하는가?

HTML 상 base64로 인코딩 된 이미지는 서버 리퀘스트를 줄이는데 도움이 되는데요, 하지만 이 또한 단점이 없는 것은 아닙니다. base64 인코딩 된 이미지는 HTML로 바로 인라인 되기 때문에 이들은 브라우저 캐시에 저장되지 못하여 이에 따라 차후의 리퀘스트를 수행하지 못하게 됩니다. 따라서 일반적으로는 아주 작은 이미지들에만 base64 인코딩을 사용할 것을 추천해 드립니다. 실제로 이는 소셜 미디어 아이콘 등에 적당한데, 이들은 보통 단색을 지니기 때문에 압축률이 상당한 편입니다. 참고사항으로 제 64×64 px 트위터 아이콘은 1,019 바이트 입니다.

큰 이미지들에 base64 인코딩을 사용하는 것은 특별한 이유가 있지 않은 한 절대로 하지 말 것을 추천해 드리는데요. 이는 base64 인코딩 된 이미지들은 그렇지 않은 것 보다 약 30% 더 많은 용량을 지니게 되는데 이는 여러분 페이지 사이즈를 불필요하게 부풀리는 결과를 초래할 수 있습니다. 이에 base64 인코딩을 사용하는 것은 항상 협상이 필요하게 되죠. 브라우저 캐싱을 포기하고 base64 인코딩 이미지를 인라인 하는 것은 속도 향상에 큰 도움이 될 수 있지만, 그렇지 않게 될 수도 있습니다. 따라서, base64 인코딩을 사용함에 있어서 사용 이전과 이후에 대해 잘 비교해 보고 테스트 해보는 것이 중요합니다.

디크립토에서, 저는 다음의 세 가지 이유에 따라 base64 인코딩을 사용하게 되었습니다.

  • 제 홈페이지는 거의 언제나 이미지가 없고, 개인적으로 한 번의 서버 리퀘스트로 전체 페이지를 띄울 수 있다는 사실이 아주 마음에 듭니다. 솔직히, 허영 메트릭입니다.
  • 이전 및 이후 비교, 테스트 결과, base64 인코딩을 사용한 것이 더 빠른 속도를 보여주었습니다.
  • 저는 클라우드플래어 (Cloudflare) 의 “모든것 캐시화 하기” (Cache everything) 기능을 사용하는데요, 이는 클라우드플래어의 거대한 엣지 서버를 통해 제 페이지를 캐시화 할 수 있도록 합니다. 클라우드플래어를 통해 한 번의 리퀘스트로 페이지가 로드 되는데 이 때문에 제 사이트의 페이지들은 200ms 미만이라는 빠른 속도를 보여줍니다.

base64 이미지 인코딩 방법

인코딩 하는 방법은 아주 쉽습니다. 가장 먼저 해야 할 일은 base64 인코딩을 위해 이미지를 최적화 시키는 것인데요. PNG 파일을 위해서는 TinyPNG를 사용하실 것을 강력히 추천해 드립니다. 다른 형태의 이미지 파일을 인코딩 하고자 하실 경우에도 그 이미지에 맞는 특정 최척화 툴이 있으니 사용하시면 될 것입니다.

다음으로, 다음과 같은 base64 인코더를 사용하셔서 이미지를 인코딩 하시면 되고, 이미지 인코딩이 끝나게 되면 아래처럼 텍스트로 된 스트링을 보게 되실 것입니다.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAMFBMVEX/zCIpKyqxkCbVqyTqvCPgtCT1xCNCPCm9mSWXeydpWSh5ZSikhibJoiWIcCdWSylg4auAAAAAeklEQVQoz2NgoBFwNjY2NkEWUBQEgU0JaAKCFegCghPQBYSQBIyNjwsKiicgBBgY2BYKCiogCzC4CwouQBHgFBQUQxHgFRQURhFgJl2AQ1BQFN0WARSBQEHBB8gCLECXNiD5xWiioKA8um9F0QUa0AS2ooaY9GEG2gEAwY8WQz+V63YAAAAASUVORK5CYII==

이처럼 무작위해 보이는 글자와 숫자들로 구성된 스트링이 텍스트 형태로 구성된 여러분의 이미지입니다. 이 경우는 base64 인코딩 된 제 버전의 파비콘이네요. 마지막으로, 아래는 여러분의 테마 템플릿 내에 base64 인코딩 된 이미지를 인라인 하는 방법입니다.

<div class="social-icon" id="twitter"><a href="https://twitter.com/decryptobl"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAz1BMVEUAAAAArO4Cq+8Aq/YArO4Cp+wArPIAtvEAre4ArO0ArO0ArO0Aq+0Are0ArO0Dre0BrO0ArO4ArO0Are0ArO0ArO4Bre4ArO4Are0DrO0Bq+0Aqu4ArO4ArO0ArO4ArO0ArO4Bre4ArO4ArO0ArO0Are4ArO0BrO4Are0Are0Bre0Are4ArOwFru0Iru0Dru4Aq+0Aru8AqvAArO0ArO0ArO0ArO0Aq+4ArOwDrO4Aq+0ArO4fsu8ArO4Aqe0Lr+4BrewArO0Aq+0ArO0ArO2zodcjAAAARHRSTlMA+wsHlA4EAe728Nqsnm4kyY96YuLRsX5dRzksHene1bm2h2hVUM7EvKijdnQ0MSEZFRL48uaCTEM+KVpMOxHNv5pKiyP9SJgAAAKXSURBVBgZ7cFVYttQFAXA88QMlpmZme000Pbuf01N3CqG6DlSPvLVGfz3nWR3OpnOBHyNcGj5w2wjazeDiYJ3goBYlMdtv0InLJ0dlfCXcEgtcdKWcY8Q9HU6M6yOAqjl3fbFEvGmnBmL4JNTabrWDaadsd1dGQWctGjTEsGjjDS6ZWYzBhHzRbxR60TVlgiOToU4sjNAACBrRJR2ZESaexSNWRPF7ewAuPRmk5sjikPR9LqTzw2zBQBFOjGkIj4SMhRN779UV5qjACjSX6yRl3FrwojPyAl4daSQ2SwquDYmPm37hDeyQaFV3SmpuGQTVzr1hBO1R2ea5UxEnDWIx2wJ+GdElyrZ3K+yin/qxDNUEHIrdEX37HGn9KTilUU8Et6pv+mW0bX8cX73OLWJx8fZzKMI62q3b3WJp4mQAuxMSmyMUCnvikGGknpAaGcOU4GtUUIHhKZEetXTKBlWRuhJoy9IiwipDfqCBs7y9AUpnC0ylBh7xIX8mpJKy7ggSIwSsnFlNmCUCCvgWumnQUnUZNwopzxG8aXwgVhoNqoU08bFrf1DJ5AyFJOv4lbezNSqBsWTPuKDsknx5VR85Kworm4ZEZYDimndRqRSg+KRREQrDnSKoeeC59isMfqMuQef3JZ6FUb3VAIV9yz2raatEZc2EvGZiaQRj5YS8InFw2BNPJuUjPvmbckkrpoj4A51UWz9rDHiYfW2iAjz+XK5KB8PbUeqb4ivIhURyQ18SbKtfs2gO/S+M0c0oeBnGN3HvO2jAq5lx/d04lv3mr8E3LUs5CyTURS9NhjtZXxKLD1sB156RZf0am+Yax8VxCO6hSAnDbMv3vPzc69u2f4ov58pSERZuNPDj1eFYmkmq/jve/wB6owEsg4cvccAAAAASUVORK5CYII=" alt="Follow Brian Li (@DecryptoBL) on Twitter." /></a></div>

결론

제대로 사용할 줄 안다면, base64 인코딩은 서버 리퀘스트를 줄여주고 여러분 워드프레스 사이트의 성능을 향상시켜 줄 수 있는 강력한 도구입니다. 다시 한 번 말씀드리지만, 단지 아주 작은 이미지들만을 대상으로 base64를 사용하시기 바라며, 이전 및 이후 비교, 테스트를 수행하셔서 base64 인코딩이 여러분 사이트의 성능에 긍정적인 영향을 끼칠 수 있도록 체크 하시기 바랍니다.


궁금한게 있으세요?

트위터이메일을 통해 연락주시기 바랍니다.