[Git] 깃허브로 무료 이미지 호스팅 하기 (임시방편)

로컬에 이미지를 저장하고 import 해서 사용하게 되면 개발 환경에서는 렌더링이 금방 되지만 Netlify 같은 무료 배포 서비스를 통해 배포하게 되면 속도가 현저하게 느려지는 경우가 발생한다. 그 이유는 서버 위치, 이미지 최적화, 네트워크 대역폭 제한 등 여러 문제가 있다.

이를 해결하기 위해 CDN 또는 S3를 사용하는데 유료 서비스가 부담스럽거나 이미지가 많지 않아 오히려 사용하기 번거롭다면 GitHub에 이미지를 업로드하여 이미지의 URL을 사용하는 것이 성능 향상에 조금이나마 도움이 된다.

다만 GitHub는 이미지 호스팅 서비스가 아니기 때문에 대규모 이미지 호스팅은 제한 되므로 임시방편의 목적으로 사용해야 한다.

 

---

 

 

GitHub 리포지토리 생성

 

이미지를 업로드할 새로운 리포지토리를 생성해 주겠습니다.

GiHub에 로그인 후 좌측 상단 New 버튼을 클릭합니다.

 

리포지토리명은 자유롭게 작성하시고 2번의 Public을 체크하여 공개된 리포지토리로 생성해 주셔야지만 업로드한 이미지가 공유되며 URL을 사용할 수 있습니다. 그다음 3 Create repository 버튼을 클릭하여 생성을 마쳐줍니다.

 

 

이미지 업로드

 

 

폴더를 생성하기 위한 임시 파일을 업로드해 주겠습니다. 단순 이미지 업로드용 리포지토리기 때문에 프로젝트와 연동할 필요는 없습니다. creating a new file 을 클릭하고

 

 

1번칸에 images/test 라고 작성하면 images 폴더가 생성되며 images 폴더 안에 test 라는 파일이 생성됩니다. 2 Commit changes... 버튼을 클릭하여 변경 사항을 커밋 합니다.

 

 

images 폴더 안에서 Add file -> Upload files를 클릭합니다.

 

 

1 choose your files 클릭 후 이미지를 업로드 하고 2 Commit changes 버튼을 클릭하여 커밋 합니다.

 

 

이미지 URL 사용

 

 

 

업로드한 이미지를 클릭하고 이미지에 마우스 우클릭하여 이미지 주소 복사를 해줍니다.

 

 

복사한 주소를 이미지 태그 src 속성에 붙여주고 실행해 보면

 

업로드한 이미지를 잘 불러옵니다.

실제 로컬에 저장한 이미지를 import 하여 개발한 웹페이지를 해당 방법으로 개선하여 속도를 측정한 결과는 아래 표와 같습니다.

구분	개선 전	개선 후
First Contentful Paint	2.3 초	1.4 초
Largest Contentful Paint	2.4 초	1.5 초
Speed Index	2.7 초	1.9 초
성능	73점	88점

 

가장 큰 콘텐츠 요소(이미지 요소 등)를 렌더링 하는데 걸리는 시간인 LCP의 시간이 감소된 걸 볼 수 있습니다.

성능이 향상됨에 따라 이미지가 제각각 로딩되는 현상도 사라졌습니다.

보편적인 방법은 절대 아니지만 정적인 웹사이트를 개발할 때 이미지 로딩 속도가 느리다면 한번 사용해 보시길 바라겠습니다.

 

더불어 아래 사이트에서 미리 이미지를 최적화하고 GitHub에 업로드하여 사용하면 더 좋은 성능을 기대할 수 있겠습니다.

🖼️ 이미지 최적화 사이트 - imgPresso

이미지프레소(imgPresso)-무료 사진/이미지 용량 줄이기-공식 사이트

 

⚡ 속도 측정 사이트 - Google PageSpeed Insights

PageSpeed Insights