Ви завантажили зображення в Google Drive, скопіювали посилання з кнопки «Поділитися» і вставили його в <img src="...">. Сайт показує биту іконку. Знайомо?

Google Drive не віддає зображення напряму за посиланням спільного доступу. Ви отримуєте HTML-сторінку Google з прев’ю, а не сам файл. Браузер чесно намагається відобразити цю сторінку як зображення і зазнає краху. Рішення є, і воно простіше, ніж здається: потрібно зібрати пряме посилання, підставивши ID файлу в спеціальний URL. Жодних сторонніх сервісів, чистий Google Drive.

Розберемо весь процес покроково: від публікації зображення до робочого тега на вашому сайті.

💡 Швидкий огляд:

• Відкрийте спільний доступ до зображення в Google Drive (кнопка «Поділитися», рівень «Доступно всім, хто має посилання»)
• Скопіюйте ID файлу з посилання спільного доступу (довгий рядок після d/ і перед /view)
• Підставте ID у шаблон прямого посилання https://drive.google.com/uc?export=view&id=ВАШ_ID
• Готове посилання вставте в атрибут src HTML-тега img на вашому сайті

Навіщо взагалі використовувати Google Drive для хостингу зображень

Google Drive дає 15 ГБ безплатного простору кожному акаунту. Для невеликого сайту, тестового стенда або сторінки на CodePen цього більш ніж достатньо.

На відміну від сторонніх CDN, зображення лежать у вашому акаунті, і ви повністю контролюєте доступ. Закрили спільний доступ, зображення миттєво перестало відображатися на всіх сайтах. Жодних чужих серверів, жодної реєстрації в додаткових сервісах.

Швидкість віддачі у Google стабільно висока. Файли роздаються через ту саму інфраструктуру, що обслуговує YouTube і Google Photos. Для прототипів і особистих проєктів це добротний безплатний CDN.

Крок 1: відкриваємо доступ до зображення

Завантажте зображення в Google Drive, перетягніть файл у вікно браузера або натисніть кнопку «Створити» → «Завантажити файл».

Після завантаження клацніть по файлу правою кнопкою і виберіть «Поділитися» → «Спільний доступ». У вікні перемкніть рівень доступу з «Обмежений» на «Доступно всім, хто має посилання». Натисніть «Копіювати посилання».

Без цього кроку прямий URL не працюватиме. Навіть правильно зібране посилання для закритого файлу поверне помилку 403. Доступ має бути публічним.

Крок 2: отримуємо ID файлу

Скопійоване посилання спільного доступу виглядає приблизно так:

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

ID файлу — це довгий рядок між d/ і /view. У прикладі вище це 1NowYy86nUZVaCMYSXPVI4wiunm4NGU5w. Виділіть і скопіюйте його.

Ось як виглядає ID у посиланні (виділено червоною рамкою):

ID унікальний для кожного файлу в Google Drive. Це не випадковий набір символів, а внутрішній ідентифікатор, за яким Google знаходить ваш файл на своїх серверах. Змінювати його не можна.

Крок 3: збираємо пряме посилання

Підставте скопійований ID у шаблон:

1
https://drive.google.com/uc?export=view&id=ВАШ_ID

Для нашого прикладу готове посилання буде таким:

1
https://drive.google.com/uc?export=view&id=1NowYy86nUZVaCMYSXPVI4wiunm4NGU5w

Параметр export=view вказує Google віддати файл як є, без HTML-обгортки. Це не сторінка з прев’ю, а чистий байтовий потік зображення. Підходить для JPEG, PNG, WebP, GIF і SVG.

Перевірте посилання: вставте його в адресний рядок браузера. Якщо відкривається саме зображення, а не сторінка Google, посилання зібрано правильно.

Якщо замість зображення потрібне пряме завантаження файлу (наприклад, PDF або архів), замініть view на download:

1
https://drive.google.com/uc?export=download&id=ВАШ_ID

Браузер не відкриє файл, а одразу запропонує зберегти його на диск.

Крок 4: вставляємо зображення на сайт

Зібране посилання вставте в атрибут src тега <img>:

1
<img
2
  src="https://drive.google.com/uc?export=view&id=1NowYy86nUZVaCMYSXPVI4wiunm4NGU5w"
3
  alt="Описание изображения"
4
  width="800"
5
  height="600"
6
>

Не забудьте атрибут alt з осмисленим описом — це важливо і для доступності, і для SEO.

Для WordPress у редакторі Gutenberg виберіть блок «Зображення» → «Вставити з URL» і вставте пряме посилання. Для класичного редактора, кнопка «Додати медіафайл» → «Вставити з URL».

У фоновому режимі (CSS) посилання працює так само:

1
.hero {
2
  background-image: url('https://drive.google.com/uc?export=view&id=ВАШ_ID');
3
}

Готовий приклад на CodePen

На CodePen можна перевірити роботу методу без розгортання сайту. Створіть новий Pen, вставте тег <img> із прямим посиланням із попереднього кроку, і зображення відобразиться в панелі попереднього перегляду.

Працює з будь-якими публічними зображеннями з Google Drive. Змінюєте вихідне зображення в Drive (той самий ID, новий файл), на сайті автоматично підтягується свіжа версія.

Обмеження методу

У прямих посилань Google Drive є стеля за трафіком. Google не публікує точних цифр, але на практиці за кількох тисяч показів на добу зображення може перестати завантажуватися. Для високонавантаженого продакшен-сайту це не рішення, беріть спеціалізований CDN (Cloudinary, Bunny CDN) або об’єктне сховище (Amazon S3).

Зображення має бути публічним. Доступ «Лише на запрошення» або «Для певних користувачів» прямий URL не активує.

Формат посилання може змінитися. Google не гарантує стабільності endpoint uc?export=view як публічного API. За 10+ років використання він не ламався, але формально метод не задокументований для стороннього використання. Для довгострокових проєктів надійніше підняти власне сховище.

Тим не менш, для прототипу, лендингу на вихідні, сторінки-портфоліо або Codepen-прикладу цей метод повністю виправданий. Швидко, безплатно і без реєстрації в сторонніх сервісах.

⁉️🤔 Часті запитання

Зображення не завантажується, хоча посилання зібрано правильно. У чому річ?

Перевірте рівень доступу до файлу в Google Drive. Навіть правильно зібране посилання uc?export=view&id=... поверне порожнечу або помилку 403, якщо файл не опубліковано публічно. Відкрийте налаштування доступу і переконайтеся, що вибрано «Доступно всім, хто має посилання», а не «Обмежений доступ». Другий частий випадок, файл було видалено з Drive або переміщено в кошик. ID при цьому залишається тим самим, але віддавати нічого.

Чи можна вставляти SVG-зображення цим самим методом?

Так, SVG працює так само. Google Drive коректно віддає векторні файли через export=view, і браузер відображає їх у <img> без проблем. Однак пам’ятайте про безпеку: SVG може містити скрипти, тому не вставляйте чужі SVG-файли на свій сайт без перевірки. Для власних іконок та ілюстрацій метод повністю застосовний.

Скільки зображень можна роздавати з одного Google-акаунта?

Жорсткого ліміту за кількістю файлів немає, все впирається в обсяг сховища (15 ГБ безплатно) і неофіційну стелю за трафіком. На практиці 50-100 зображень на особистому сайті-візитівці працюють без нарікань роками. Для комерційного сайту зі шквалом відвідувачів краще орендувати CDN.

Чим export=view відрізняється від export=download?

export=view віддає файл як контент для відображення в браузері: зображення відкривається у вкладці, відео починає відтворюватися. export=download примусово запускає завантаження: браузер не показує файл, а зберігає його на диск. Для <img src=""> використовуйте саме view. Для посилання «Завантажити PDF» на кнопці, download.

Чи можна генерувати прев’ю різного розміру?

Так, додайте параметр sz=wНОМЕР до посилання. Наприклад, &sz=w320 обмежить ширину зображення 320 пікселями. Google масштабує зображення на льоту, а ви зекономите трафік для мобільної версії сайту. Повний шаблон: https://drive.google.com/uc?export=view&id=ВАШ_ID&sz=w320.

Чи варто використовувати Google Drive як CDN для зображень

Для особистого блогу, пет-проєкту або швидкого прототипу, так, це робочий і виправданий варіант. Нуль витрат, повний контроль доступу і мінімум рухів.

Для сайту з відвідуваністю від пари тисяч осіб на день дивіться в бік Cloudinary з його безплатним тиром (25 ГБ трафіку на місяць) або Bunny CDN із посекундною тарифікацією. Коштують копійки, а зображення завантажуються стабільно за будь-якого навантаження.

Метод із Google Drive тримайте в закладках як аварійний. Коли потрібно швидко поділитися скриншотом на форумі, показати макет замовнику або оживити зображення в Codepen — це найкоротший шлях від завантаження файлу до робочого посилання. Без реєстрацій, без SMS, без квот.