-
[1원의 팁] CSS에서 Base64 인코딩은 피하라프론트엔드 2024. 1. 7. 19:42
일반적으로 Base64 인코딩된 이미지를 CSS에 넣는 것은 성능 측면에서 권장되지 않습니다.
이로 인해 스타일 시트의 크기가 증가하고, 페이지 로딩이 느려질 수 있습니다.
폰트 아이콘이나 HTML에 직접 내장된 SVG와 같은 대안은 더 나은 최적화와 사용자 경험을 제공할 수 있습니다.
이러한 방법들은 브라우저에게 필요한 리소스를 효율적으로 처리하고,
필요한 경우에만 로드하여 초기 로딩 성능을 향상시킬 수 있습니다.
1. 폰트 아이콘 사용
폰트 아이콘 라이브러리 중 하나인 Font Awesome를 사용하는 예시입니다. 이 라이브러리는 아이콘을 폰트로 제공하므로, 하나의 요청으로 여러 아이콘을 사용할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Font Icon Example</title>
<style>
/* Your custom styles */
.icon {
font-size: 24px;
color: blue;
}
</style>
</head>
<body>
<div class="icon">
<i class="fas fa-heart"></i> <!-- Heart icon from Font Awesome -->
</div>
</body>
</html>2. HTML에 직접 내장된 SVG 사용
SVG 이미지를 직접 HTML에 내장하여 사용하는 예시입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Example</title>
</head>
<body>
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14h2v-6h-2zm0-8h2v-2h-2z"/>
</svg>
</body>
</html>'프론트엔드' 카테고리의 다른 글
웹 브라우저에서 스크립트 및 리소스 로딩 최적화 (1) 2025.03.21 CSS가 렌더링 차단 리소스인 이유 (1) 2024.01.07 <script> 속성의 defer 와 async (0) 2024.01.07