구글 드라이브 이미지 링크 Html 호스팅 사용 방법

구글 드라이브 이미지 링크 HTML 호스팅 사용 방법

웹사이트를 관리하거나 블로그를 운영하면서 고화질 이미지를 효율적으로 관리하고 싶으신가요? 구글 드라이브는 이미지를 저장하고 공유할 수 있는 훌륭한 클라우드 서비스입니다. 하지만 단순히 공유 링크를 복사해 붙여넣는 방식으로는 웹페이지에 이미지를 삽입할 수 없습니다. 이번 글에서는 구글 드라이브 이미지 링크를 HTML에서 사용하는 방법을 단계별로 자세히 알려드리겠습니다.

---

1. 구글 드라이브 이미지 링크란?

구글 드라이브에서 파일을 공유하면 일반적으로 다음과 같은 링크를 제공합니다:

https://drive.google.com/file/d/FILE_ID/view?usp=sharing

이 링크는 웹페이지에서 바로 이미지를 표시하지 않고 구글 드라이브 뷰어로 연결됩니다. 웹페이지에 이미지를 삽입하려면 이 링크를 HTML 태그와 호환되는 형태로 변환해야 합니다.

---

2. 구글 드라이브 이미지 링크 변환 방법

구글 드라이브 이미지 링크를 HTML에 사용할 수 있도록 변환하는 방법에는 크게 3가지가 있습니다.

① 썸네일 링크

• 빠른 로딩이 필요할 때 적합합니다.
• 사용 방법:

<img src="https://drive.google.com/thumbnail?id=FILE_ID&sz=w1000">

• FILE_ID 부분을 구글 드라이브 링크에서 추출한 파일 ID로 교체하세요.

예시:

<img src="https://drive.google.com/thumbnail?id=10lqdbFxUKvg-sLK_e-3DglpDajHN631g&sz=w1000">

② iframe 링크

• 이미지뿐만 아니라 문서, PDF 파일 등을 미리보기 화면으로 삽입할 때 유용합니다.
• 사용 방법:

<iframe src="https://drive.google.com/file/d/FILE_ID/preview" allow="autoplay"></iframe>

• 파일이 직접 열리며, 다양한 파일 포맷에 적합합니다.

예시:

<iframe src="https://drive.google.com/file/d/10lqdbFxUKvg-sLK_e-3DglpDajHN631g/preview" allow="autoplay"></iframe>

③ Google 사용자 콘텐츠 링크

• 구글의 CDN(Content Delivery Network)을 사용하여 빠른 이미지 로딩을 제공합니다.
• 사용 방법:

<img src="https://lh3.googleusercontent.com/d/FILE_ID?authuser=0">

• 가장 효율적인 방식이며, 이미지가 바로 로드됩니다.

예시:

<img src="https://lh3.googleusercontent.com/d/10lqdbFxUKvg-sLK_e-3DglpDajHN631g?authuser=0">

 

아래 사이트에 접속하시면 구글 드라이브 링크만 넣으면 자동으로 html 변환 링크를 만들어 집니다.

구글 드라이브 구글 포토 이미지 Html 링크 변환 사이트

3. 구글 드라이브 파일 ID 추출 방법

구글 드라이브 링크에서 파일 ID를 추출하는 방법은 간단합니다:

1. 링크 예시: https://drive.google.com/file/d/10lqdbFxUKvg-sLK_e-3DglpDajHN631g/view?usp=sharing
2. /file/d/와 /view 사이에 있는 문자열이 파일 ID입니다.
3. 위 링크의 경우 파일 ID는 10lqdbFxUKvg-sLK_e-3DglpDajHN631g입니다.

---

4. 주의사항

• 공유 설정 확인
  이미지를 사용하는 모든 사용자가 접근할 수 있도록 구글 드라이브의 공유 설정에서 "링크가 있는 모든 사용자 보기 가능"으로 설정해야 합니다.
• 저작권
  공유하려는 이미지나 파일이 저작권 문제를 유발하지 않는지 확인하세요.
• 호환성 확인
  모든 브라우저에서 이미지가 제대로 표시되는지 테스트하세요.

---

리뷰를 마치며

구글 드라이브는 간단한 설정만으로 웹페이지에 이미지를 삽입할 수 있는 유용한 도구입니다. 본문에서 소개한 3가지 변환 방법(썸네일, iframe, 사용자 콘텐츠 링크)을 활용하면, 고화질 이미지를 효율적으로 웹사이트나 블로그에 통합할 수 있습니다. 사용 목적에 맞는 방식을 선택해 활용하시고, 방문자들에게 멋진 시각적 경험을 제공해 보세요!

궁금한 점이 있다면 댓글로 남겨주세요. 😊

썸네일 만들기 버전2

※ 참고 사이트

https://blog.naver.com/yak-bang/223383190339