Du laddade upp en bild till Google Drive, kopierade länken från "Dela"-knappen och klistrade in den i <img src="...">. Sidan visar en trasig ikon. Känns det igen?

Google Drive serverar inte bilder direkt via delningslänken. Du får en Google HTML-sida med en förhandsvisning, inte själva filen. Webbläsaren försöker ärligt rendera den sidan som en bild och misslyckas. Det finns en lösning, och den är enklare än den verkar: du måste bygga en direktlänk genom att sätta in fil-ID:t i en särskild URL. Inga tredjepartstjänster, ren Google Drive.

Låt oss gå igenom hela processen steg för steg: från att publicera en bild till en fungerande tagg på din sajt.

💡 Snabb översikt:

• Öppna delningsåtkomst till bilden i Google Drive ("Dela"-knappen, behörighetsnivån "Alla som har länken")
• Kopiera fil-ID:t från delningslänken (den långa strängen efter d/ och före /view)
• Sätt in ID:t i direktlänksmallen https://drive.google.com/uc?export=view&id=YOUR_ID
• Klistra in den färdiga länken i src-attributet på en HTML img-tagg på din sajt

Varför överhuvudtaget använda Google Drive för bildhosting

Google Drive ger 15 GB gratis utrymme till varje konto. För en liten sajt, testmiljö eller CodePen-sida är det mer än tillräckligt.

Till skillnad från tredjeparts-CDN ligger bilderna på ditt konto och du har full kontroll över åtkomsten. Stäng delningsåtkomsten, så slutar bilden visas på alla sajter omedelbart. Inga externa servrar, ingen registrering hos ytterligare tjänster.

Googles serveringshastighet är genomgående hög. Filerna distribueras via samma infrastruktur som serverar YouTube och Google Photos. För prototyper och personliga projekt är detta en solid gratis CDN.

Steg 1: öppna åtkomst till bilden

Ladda upp en bild till Google Drive genom att dra filen till webbläsarfönstret eller klicka på "Ny" → "Filuppladdning".

Efter uppladdningen högerklickar du på filen och väljer "Dela" → "Dela". I fönstret som öppnas ändrar du åtkomstnivån från "Begränsad" till "Alla som har länken". Klicka på "Kopiera länk".

Utan detta steg fungerar inte den direkta webbadressen. Även en korrekt konstruerad länk för en privat fil kommer att returnera ett 403-fel. Åtkomsten måste vara offentlig.

Steg 2: extrahera fil-ID:t

Den kopierade delningslänken ser ut ungefär så här:

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

Fil-ID:t är den långa strängen mellan d/ och /view. I exemplet ovan är det 1NowYy86nUZVaCMYSXPVI4wiunm4NGU5w. Markera och kopiera det.

Så här ser ID:t ut i länken (markerat i rött):

ID:t är unikt för varje fil i Google Drive. Det är inte en slumpmässig sträng, utan en intern identifierare som Google använder för att hitta din fil på sina servrar. Det kan inte ändras.

Steg 3: bygga direktlänken

Sätt in det kopierade ID:t i mallen:

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

För vårt exempel kommer den färdiga länken att se ut så här:

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

Parametern export=view talar om för Google att servera filen som den är, utan HTML-omslag. Detta är inte en förhandsvisningssida, utan en ren byteström av bilden. Fungerar för JPEG, PNG, WebP, GIF och SVG.

Testa länken: klistra in den i webbläsarens adressfält. Om själva bilden öppnas istället för en Google-sida är länken korrekt konstruerad.

Om du behöver en direkt filnedladdning istället för en bild (till exempel en PDF eller ett arkiv), ersätt view med download:

1
https://drive.google.com/uc?export=download&id=YOUR_ID

Webbläsaren öppnar inte filen, utan kommer omedelbart att fråga om den ska sparas till disk.

Steg 4: infoga bilden på sajten

Infoga den konstruerade länken i src-attributet på en <img>-tagg:

1
<img
2
  src="https://drive.google.com/uc?export=view&id=1NowYy86nUZVaCMYSXPVI4wiunm4NGU5w"
3
  alt="Image description"
4
  width="800"
5
  height="600"
6
>

Glöm inte alt-attributet med en meningsfull beskrivning, det är viktigt för både tillgänglighet och SEO.

För WordPress i Gutenberg-redigeraren, välj "Bild"-blocket → "Infoga från URL" och klistra in direktlänken. För den klassiska redigeraren, "Lägg till media"-knappen → "Infoga från URL".

I bakgrundsläge (CSS) fungerar länken på exakt samma sätt:

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

Färdigt exempel på CodePen

På CodePen kan du testa metoden utan att driftsätta en sajt. Skapa en ny Pen, infoga en <img>-tagg med direktlänken från föregående steg, så visas bilden i förhandsvisningspanelen.

Fungerar med alla offentliga bilder från Google Drive. Ändra originalbilden i Drive (samma ID, ny fil), så dras den färska versionen automatiskt igenom på sajten.

Metodens begränsningar

Direkta Google Drive-länkar har ett trafiktak. Google publicerar inga exakta siffror, men i praktiken, med flera tusen visningar per dag, kan en bild sluta ladda. För en produktionssajt med hög trafik är detta ingen lösning, använd ett specialiserat CDN (Cloudinary, Bunny CDN) eller objektlagring (Amazon S3).

Bilden måste vara offentlig. Åtkomst via "Endast inbjudna" eller "Specifika användare" aktiverar inte den direkta webbadressen.

Länkformatet kan ändras. Google garanterar inte stabiliteten för uc?export=view-ändpunkten som ett publikt API. Under 10+ års användning har det inte gått sönder, men formellt är metoden inte dokumenterad för externt bruk. För långsiktiga projekt är det mer tillförlitligt att sätta upp din egen lagring.

Icke desto mindre, för en prototyp, helglandningssida, portföljsida eller Codepen-exempel är denna metod fullt motiverad. Snabbt, gratis och utan registrering hos tredjepartstjänster.

⁉️🤔 Vanliga frågor

Bilden laddas inte, trots att länken är korrekt konstruerad. Vad är fel?

Kontrollera åtkomstnivån för filen i Google Drive. Även en korrekt konstruerad uc?export=view&id=...-länk returnerar ingenting eller ett 403-fel om filen inte är publicerad offentligt. Öppna åtkomstinställningarna och försäkra dig om att "Alla som har länken" är valt, inte "Begränsad åtkomst". Det andra vanliga fallet är att filen har raderats från Drive eller flyttats till papperskorgen. ID:t förblir detsamma, men det finns inget att servera.

Kan jag infoga SVG-bilder med samma metod?

Ja, SVG fungerar på exakt samma sätt. Google Drive serverar vektorfiler korrekt via export=view, och webbläsaren visar dem i <img> utan problem. Tänk dock på säkerheten: SVG kan innehålla skript, så infoga inte tredjeparts SVG-filer på din sajt utan verifiering. För dina egna ikoner och illustrationer är metoden fullt tillämpbar.

Hur många bilder kan serveras från ett Google-konto?

Det finns ingen hård gräns för antalet filer, allt beror på lagringsvolym (15 GB gratis) och det inofficiella trafiktaket. I praktiken fungerar 50-100 bilder på en personlig portföljsajt utan klagomål i åratal. För en kommersiell sajt med tung trafik är det bättre att hyra ett CDN.

Vad är skillnaden mellan export=view och export=download?

export=view serverar filen som innehåll för visning i webbläsaren, en bild öppnas i en flik, video börjar spelas. export=download tvingar fram en nedladdning: webbläsaren visar inte filen utan sparar den till disk. För <img src=""> använd view. För en "Ladda ner PDF"-länk på en knapp, använd download.

Kan jag generera förhandsvisningar i olika storlekar?

Ja, lägg till parametern sz=wNUMBER i länken. Till exempel, &sz=w320 begränsar bildens bredd till 320 pixlar. Google skalar bilden i farten, och du sparar trafik för den mobila versionen av sajten. Full mall: https://drive.google.com/uc?export=view&id=YOUR_ID&sz=w320.

Är det värt att använda Google Drive som CDN för bilder

För en personlig blogg, pet project eller snabb prototyp, ja, detta är ett fungerande och motiverat alternativ. Noll kostnad, full åtkomstkontroll och minimal ansträngning.

För en sajt med trafik från ett par tusen personer per dag, titta på Cloudinary med deras gratisnivå (25 GB trafik per månad) eller Bunny CDN med per-sekund-fakturering. De kostar ören, och bilder laddas stabilt under vilken belastning som helst.

Ha Google Drive-metoden i dina bokmärken som ett nödalternativ. När du snabbt behöver dela en skärmdump på ett forum, visa en layout för en kund eller väcka en bild till liv i Codepen, är detta den kortaste vägen från filuppladdning till fungerande länk. Inga registreringar, inga SMS, inga kvoter.