HTML 이미지요소를 사용하여 웹사이트 로딩 속도 최적화

소모임 > 인공지능 Posted 2023.06.30 by 티쳐✨

2301

img를 로딩하는데 보통 웹사이트는 속도가 느려집니다.

두 가지 방법으로 이를 개선할 수 있습니다. 첫 번째는 이미지가 필요할 때 로드하는 것이고, 두 번째는 기기에 따라 서로 다른 이미지를 보내줌으로써 속도를 최적화 할 수 있습니다.

1. 이미지가 필요할 때 로딩하게 하기

이미지가 필요할 때에 로딩함으로써 속도를 개선할 수 있습니다.

만약 그렇지 않다면 일반적으로 html에 포함된 모든 이미지를 로딩하게 되고 로딩이 기다려지는 동안 속도가 느려집니다.

이는 또한 모든 이미지를 읽어야 하기 때문에 리소스도 낭비되게 됩니다.

간단하게 이를 극복하는 방법이 있습니다.

HTML의 img 태그에 lazy 속성을 추가하려면, 다음과 같이 loading 속성을 lazy로 설정하면 됩니다.

img src="image.jpg" loading="lazy"

태그의< 와 > 생략했습니다. 자동 변환되는 것을 피하기 위해서.

이렇게 설정하면 브라우저는 이미지를 필요할 때까지 로딩하지 않고, 대신 사용자가 이미지가 있는 영역으로 스크롤하면 이미지를 로드합니다. 이는 웹페이지의 초기 로딩 시간을 줄이는 데 도움이 됩니다.

그러나 모든 브라우저가 lazy 속성을 지원하지 않으므로, 브라우저 호환성을 확인하는 것이 중요합니다.

또한, 이 속성은 HTML을 직접 작성할 때만 사용할 수 있습니다. HTML을 동적으로 생성하거나 조작하는 경우(예: JavaScript 또는 서버 사이드 렌더링), 해당 엘리먼트에 속성을 프로그래밍 방식으로 추가해야 합니다.

예를 들어, JavaScript를 사용하여 lazy 속성을 추가하는 방법은 다음과 같습니다:

1
2
3
4
5
6
var img = document.createElement('img');
img.src = 'image.jpg';
img.alt = 'Description of Image';
img.loading = 'lazy';
document.body.appendChild(img);
 
Colored by Color Scripter
cs

2. 다른 이미지를 내보내기

웹 페이지에서는 반응형 이미지를 사용하여 브라우저 창의 크기에 따라 다른 이미지를 보여줄 수 있습니다. 이는 srcset 속성과 sizes 속성을 이용합니다.

HTML에서는 다음과 같이 작성할 수 있습니다:

srcset 속성은 브라우저에게 이미지의 여러 버전을 제공합니다. 각 이미지는 공백으로 구분되며, 이미지 URL 뒤에는 이미지의 너비를 나타내는 w 단위가 있습니다.
sizes 속성은 브라우저 창의 크기에 따른 이미지의 예상 크기를 브라우저에 알려줍니다. 각 값은 쉼표로 구분되며, 미디어 조건과 그 조건이 만족될 때의 이미지 너비를 나타냅니다.
src 속성은 srcset과 sizes 속성을 지원하지 않는 브라우저를 위한 대체 이미지를 제공합니다.

이렇게 하면 브라우저는 창의 크기와 디스플레이의 픽셀 밀도에 따라 가장 적합한 이미지를 선택하여 로드합니다. 이를 통해 사용자에게 최적화된 이미지를 제공할 수 있습니다.