HTML이나 CSS에 이미지를 직접 삽입하면 HTTP 요청을 줄일 수 있습니다. Base64 인코딩을 활용하는 방법과 주의점을 알아보겠습니다.
Base64 인코딩이란
이미지 파일을 텍스트 문자열로 변환하는 방식입니다. data:image/png;base64,로 시작하는 긴 문자열을 본 적 있으실 겁니다. 별도 파일 없이 코드 내에 이미지를 포함할 수 있습니다.
장점과 단점
작은 아이콘 이미지에 사용하면 HTTP 요청 수를 줄여 성능이 향상될 수 있습니다. 하지만 인코딩하면 원본보다 크기가 약 33% 커지므로 큰 이미지에는 부적합합니다.
Base64 변환하기
이미지 파일을 Base64로 변환하려면 companys.kr의 인코더를 사용하세요. 변환된 문자열을 CSS나 HTML에 바로 사용할 수 있습니다.
적절한 상황에서 활용하면 웹 성능 최적화에 도움이 됩니다.