티스토리 뷰
웹 페이지 로딩 속도란 우리가 어떤 홈페이지를 클릭한 시점부터 홈페이지 화면이 모두 불러올 때까지의 시간입니다. 홈페이지가 사업 목적일 경우 로딩속도 때문에 이탈률이 증가하면 홍보 및 구매 전환적 목적에서 치명적인 손해를 입으실 수 있습니다. 따라서 웹 페이지 로딩속도가 운영자(사업자)로서 아주 중요한 요소입니다. 그런데 대부분의 웹 콘텐츠는 가독성을 높이기 위해 많은 이미지 자료가 포함되어 있습니다. 그래서 이미지 자료가 포함 화면의 로딩속도를 개선하는 방법은 어떤것이 있는지 확인해 보도록 하겠습니다.
이미지들을 웹에서 검색되게 하여 더 많은 사용자들이 자신의 웹사이트로 유입될 수 있도록 하는 이미지 최적화 HTML 작성법과 SEO(검색엔젠 최적화)에 대해 알아보겠습니다.
1.HTML alt 속성 설정 : 이미지에 이름을 부여
<img src="IMG3221.jpg">
HTML에 이미지를 불러오는 기본적인 <img> 태그는 상단의 코드와 같습니다. <img> 태그를 명시한 후 src 속성에 파일 경로를 입력하여 이미지를 불러와 웹 페이지에 표출하는 개념입니다. 코드가 간단하여 아무 문제가 없어 보이지만 SEO 관점에서 내 사이트의 자료들을 외부에 검색시키기 위해서는 잘못된 방법입니다.
사람의 경우 웹 페이지를 읽으면서 해당 이미지가 내포하는 내용이나 주제들을 파악할 수 있지만 대부분의 검색엔진 크롤러의 경우 해당 코드가 이미지라는 것만 알 수 있고 어떤 내용을 가진 이미지인지 파악하지 못합니다. 따라서 게시자가 업로드한 이미지는 검색 결과에 반영되지 않을 확률이 높습니다.
<img src="이미지.jpg" alt="이미지에 이름">위의 문제점을 해결하기 위해 <img> 태그 내부에는 이미지에 이름을 부여하는 alt 속성이 존재합니다. 위 코드는 alt 속성을 추가한 경우 입니다. 이미지 alt 속성에 이름을 부여하면 크롤러가 해당 속성값을 참고하여 키워드가 비슷한 검색 결과에 사진을 뿌려줄 확률이 상승합니다.
2. 이미지 파일의 용량과 포맷 : 로딩 속도에 대한 검색결과 반영
구글, 네이버와 같이 대형 포털의 검색엔진은 페이지의 로딩 속도가 빠를수록 검색 결과 상단에 사이트를 반영시켜 줍니다. 기본적으로 로딩 속도가 발생하는 이유는 사이트를 제공하는 서버에서 클라이언트 PC로 데이터를 전달하기 때문입니다. 해당 데이터에는 이미지, 폰트, HTML, CSS 등 내포되어 있는데 가장 큰 용량을 차지하는 것이 이미지 파일입니다. 따라서 이미지 파일의 용량을 줄일수록 로딩 속도가 줄어들고 결론적으로 내 웹사이트가 검색결과 상단에 도출될 확률이 높아집니다.
(1) 적절한 해상도의 선택
이미지는 해상도가 작을수록 용량이 줄어들지만 화질이 흐려진다는 단점이 존재합니다. 따라서 기기 따른 적정 수준까지만 해상도를 줄여야 합니다. 모바일의 경우 아이폰 맥스 모델의 뷰포트가 428px로 대략 420px의 사진을 제공하면 되고, PC의 경우 웹사이트의 바디가 1280px 정도로 제작되기 때문에 약 1280px 크기의 사진을 제공하면 용량과 화질이 최적화됩니다.
여러 사이즈의 파일을 서버에서 제공하기 어렵기 때문에 1280px의 사진을 업로드하고 <img> 태그에 width 속성을 추가하여 각 뷰 포트에 알맞게 출력되게 설정하면 됩니다.
<img src="이미지경로.jpg" alt="이미지이름" width="100%" height="auto">
<img src="이미지경로.jpg" alt="이미지이름" width="480px" height="auto">이미지 태그에 width 속성은 px 단위와 % 단위 모두 가능하기 때문에 사용자의 사이트가 반응형으로 css 파일에 미디어 쿼리가 적용되어 있으면 100%를 이용하면 됩니다. 높이 속성의 경우 auto를 사용하면 width 비율에 맞춰서 확대 축소됩니다.
(2) 이미지 특성에 맞는 포맷과 webP
이미지의 포맷은 jpg, png, jpeg, gif와 같이 다양합니다. 기본적으로 직접 촬영한 사진은 jpg, 컴퓨터를 이용해 디자인한 이미지는 png 포맷이 작은 저장 공간을 가집니다. 현재 웹에서는 구글이 개발한 webP 규격이 자주 사용됩니다. webP는 앞에서 언급한 포맷들을 다 대체하며 용량 또한 약 30 % 적습니다. (이미지 확장자를 webp 방식으로 변경 후 업로드)