Wgrał(a) Pan/Pani obraz na Dysk Google, skopiował(a) link z przycisku „Udostępnij" i wstawił(a) go w <img src="...">. Strona pokazuje ikonę uszkodzonego obrazka. Brzmi znajomo?

Dysk Google nie udostępnia obrazów bezpośrednio przez link do udostępniania. Otrzymuje Pan/Pani stronę HTML Google z podglądem, a nie sam plik. Przeglądarka uczciwie próbuje wyświetlić tę stronę jako obraz i ponosi porażkę. Rozwiązanie istnieje i jest prostsze, niż się wydaje: należy zbudować bezpośredni link, podstawiając ID pliku do specjalnego URL. Żadnych zewnętrznych serwisów, czysty Dysk Google.

Przeanalizujmy cały proces krok po kroku: od publikacji obrazu do działającego znacznika na Pana/Pani stronie.

💡 Szybki przegląd:

• Udostępnij obraz na Dysku Google (przycisk „Udostępnij", poziom „Każdy, kto ma link")
• Skopiuj ID pliku z linku udostępniania (długi ciąg znaków po d/ i przed /view)
• Podstaw ID do szablonu bezpośredniego linku https://drive.google.com/uc?export=view&id=ВАШ_ID
• Gotowy link wstaw w atrybut src znacznika HTML img na swojej stronie

Po co w ogóle używać Dysku Google do hostingu obrazów

Dysk Google daje 15 GB bezpłatnej przestrzeni na każde konto. Dla małej strony, środowiska testowego lub strony na CodePen to więcej niż wystarczy.

W przeciwieństwie do zewnętrznych CDN, obrazy leżą na Pana/Pani koncie i ma Pan/Pani pełną kontrolę nad dostępem. Gdy zamknie Pan/Pani udostępnianie, obraz natychmiast przestaje się wyświetlać na wszystkich stronach. Żadnych obcych serwerów, żadnej rejestracji w dodatkowych serwisach.

Szybkość dostarczania plików przez Google jest niezmiennie wysoka. Pliki są serwowane przez tę samą infrastrukturę, która obsługuje YouTube i Zdjęcia Google. Dla prototypów i projektów osobistych to solidny bezpłatny CDN.

Krok 1: udostępniamy obraz

Prześlij obraz na Dysk Google, przeciągając plik do okna przeglądarki lub klikając przycisk „Nowy" → „Prześlij plik".

Po przesłaniu kliknij plik prawym przyciskiem myszy i wybierz „Udostępnij" → „Udostępnij". W oknie zmień poziom dostępu z „Ograniczony" na „Każdy, kto ma link". Kliknij „Kopiuj link".

Bez tego kroku bezpośredni URL nie zadziała. Nawet poprawnie zbudowany link do zamkniętego pliku zwróci błąd 403. Dostęp musi być publiczny.

Krok 2: pobieramy ID pliku

Skopiowany link udostępniania wygląda mniej więcej tak:

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

ID pliku to długi ciąg znaków między d/ a /view. W powyższym przykładzie jest to 1NowYy86nUZVaCMYSXPVI4wiunm4NGU5w. Zaznacz go i skopiuj.

Oto jak wygląda ID w linku (wyróżnione czerwoną ramką):

ID jest unikalne dla każdego pliku na Dysku Google. To nie jest przypadkowy zestaw znaków, ale wewnętrzny identyfikator, za pomocą którego Google znajduje Pana/Pani plik na swoich serwerach. Nie można go zmieniać.

Krok 3: budujemy bezpośredni link

Podstaw skopiowane ID do szablonu:

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

Dla naszego przykładu gotowy link będzie następujący:

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

Parametr export=view mówi Google, aby dostarczył plik w obecnej postaci, bez opakowania HTML. To nie jest strona z podglądem, ale czysty strumień bajtów obrazu. Działa dla JPEG, PNG, WebP, GIF i SVG.

Proszę sprawdzić link: wkleić go w pasek adresu przeglądarki. Jeśli otworzy się sam obraz, a nie strona Google, link został zbudowany poprawnie.

Jeśli zamiast obrazu potrzebne jest bezpośrednie pobranie pliku (na przykład PDF lub archiwum), proszę zamienić view na download:

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

Przeglądarka nie otworzy pliku, ale od razu zaproponuje zapisanie go na dysku.

Krok 4: wstawiamy obraz na stronę

Zbudowany link proszę wstawić w atrybut src znacznika <img>:

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

Proszę nie zapomnieć o atrybucie alt z sensownym opisem, jest to ważne zarówno dla dostępności, jak i dla SEO.

Dla WordPress w edytorze Gutenberg proszę wybrać blok „Obraz" → „Wstaw z URL" i wkleić bezpośredni link. Dla klasycznego edytora, przycisk „Dodaj plik multimedialny" → „Wstaw z URL".

W tle (CSS) link działa tak samo:

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

Gotowy przykład na CodePen

Na CodePen można sprawdzić działanie metody bez wdrażania strony. Proszę utworzyć nowy Pen, wstawić znacznik <img> z bezpośrednim linkiem z poprzedniego kroku, a obraz wyświetli się w panelu podglądu.

Działa z dowolnymi publicznymi obrazami z Dysku Google. Gdy zmieni Pan/Pani obraz źródłowy na Dysku (to samo ID, nowy plik), na stronie automatycznie pojawi się świeża wersja.

Ograniczenia metody

Bezpośrednie linki Dysku Google mają limit transferu. Google nie publikuje dokładnych danych, ale w praktyce przy kilku tysiącach wyświetleń na dobę obraz może przestać się ładować. Dla wysoko obciążonej strony produkcyjnej to nie jest rozwiązanie, proszę sięgnąć po specjalistyczny CDN (Cloudinary, Bunny CDN) lub magazyn obiektowy (Amazon S3).

Obraz musi być publiczny. Dostęp „Tylko na zaproszenie" lub „Dla określonych użytkowników" nie aktywuje bezpośredniego URL.

Format linku może ulec zmianie. Google nie gwarantuje stabilności endpointu uc?export=view jako publicznego API. Przez ponad 10 lat użytkowania nie uległ awarii, ale formalnie metoda nie jest udokumentowana do użytku zewnętrznego. Dla projektów długoterminowych bezpieczniej jest postawić własny magazyn.

Niemniej jednak, dla prototypu, weekendowego landing page’a, strony portfolio czy przykładu na Codepen ta metoda jest w pełni uzasadniona. Szybko, bezpłatnie i bez rejestracji w zewnętrznych serwisach.

⁉️🤔 Często zadawane pytania

Obraz nie ładuje się, chociaż link jest zbudowany poprawnie. O co chodzi?

Proszę sprawdzić poziom dostępu do pliku na Dysku Google. Nawet poprawnie zbudowany link uc?export=view&id=... zwróci pustkę lub błąd 403, jeśli plik nie został opublikowany publicznie. Proszę otworzyć ustawienia dostępu i upewnić się, że wybrano „Każdy, kto ma link", a nie „Ograniczony dostęp". Drugi częsty przypadek: plik został usunięty z Dysku lub przeniesiony do kosza. ID pozostaje wtedy takie samo, ale nie ma czego dostarczać.

Czy można wstawiać obrazy SVG tą samą metodą?

Tak, SVG działa tak samo. Dysk Google poprawnie dostarcza pliki wektorowe przez export=view, a przeglądarka wyświetla je w <img> bez problemu. Należy jednak pamiętać o bezpieczeństwie: SVG może zawierać skrypty, dlatego proszę nie wstawiać cudzych plików SVG na swoją stronę bez sprawdzenia. Dla własnych ikon i ilustracji metoda jest w pełni odpowiednia.

Ile obrazów można serwować z jednego konta Google?

Nie ma sztywnego limitu co do liczby plików, wszystko zależy od pojemności magazynu (15 GB bezpłatnie) i nieoficjalnego limitu transferu. W praktyce 50-100 obrazów na osobistej wizytówce działa bez zarzutu latami. Dla komercyjnej strony z dużą liczbą odwiedzających lepiej wynająć CDN.

Czym różni się export=view od export=download?

export=view dostarcza plik jako treść do wyświetlenia w przeglądarce: obraz otwiera się w karcie, wideo zaczyna się odtwarzać. export=download wymusza pobranie: przeglądarka nie pokazuje pliku, tylko zapisuje go na dysk. Dla <img src=""> proszę używać właśnie view. Dla linku „Pobierz PDF" na przycisku, download.

Czy można generować podglądy o różnych rozmiarach?

Tak, proszę dodać parametr sz=wНОМЕР do linku. Na przykład &sz=w320 ograniczy szerokość obrazu do 320 pikseli. Google skaluje obraz w locie, a Pan/Pani oszczędza transfer dla mobilnej wersji strony. Pełny szablon: https://drive.google.com/uc?export=view&id=ВАШ_ID&sz=w320.

Czy warto używać Dysku Google jako CDN dla obrazów

Dla osobistego bloga, projektu hobbystycznego lub szybkiego prototypu, tak, to działająca i uzasadniona opcja. Zero kosztów, pełna kontrola dostępu i minimum działań.

Dla strony z odwiedzalnością od kilku tysięcy osób dziennie proszę spojrzeć w stronę Cloudinary z jego bezpłatnym poziomem (25 GB transferu miesięcznie) lub Bunny CDN z rozliczaniem sekundowym. Kosztują grosze, a obrazy ładują się stabilnie przy każdym obciążeniu.

Metodę z Dyskiem Google proszę trzymać w zakładkach jako awaryjną. Kiedy trzeba szybko podzielić się zrzutem ekranu na forum, pokazać makietę klientowi lub ożywić obraz w Codepen, to najkrótsza droga od przesłania pliku do działającego linku. Bez rejestracji, bez SMS-ów, bez limitów.