Latasit kuvan Google Driveen, kopioit linkin "Jaa"-painikkeesta ja liitit sen <img src="...">-tagiin. Sivusto näyttää rikkinäisen kuvakkeen. Kuulostaako tutulta?

Google Drive ei tarjoile kuvia suoraan jakolinkin kautta. Saat Googlelta HTML-sivun, jossa on esikatselu, et itse tiedostoa. Selain yrittää rehellisesti renderöidä tuon sivun kuvana ja epäonnistuu. Ratkaisu on olemassa, ja se on yksinkertaisempi kuin miltä näyttää: sinun täytyy rakentaa suora linkki lisäämällä tiedoston ID erityiseen URL-osoitteeseen. Ei kolmannen osapuolen palveluita, puhdas Google Drive.

Käydään koko prosessi läpi vaihe vaiheelta: kuvan julkaisemisesta toimivaan tagiin sivustollasi.

💡 Nopea yleiskatsaus:

• Avaa kuvan jakamiskäyttöoikeus Google Drivessa ("Jaa"-painike, "Kaikki, joilla on linkki" -käyttöoikeustaso)
• Kopioi tiedoston ID jakolinkistä (pitkä merkkijono d/- ja /view-osien välissä)
• Lisää ID suoralinkkimalliin https://drive.google.com/uc?export=view&id=YOUR_ID
• Liitä valmis linkki HTML img-tagin src-attribuuttiin sivustollasi

Miksi Google Drivea ylipäätään käyttää kuvien hostaukseen

Google Drive antaa 15 Gt ilmaista tilaa jokaiselle tilille. Pienelle sivustolle, testiympäristölle tai CodePen-sivulle se on enemmän kuin tarpeeksi.

Toisin kuin kolmannen osapuolen CDN-verkot, kuvat sijaitsevat omalla tililläsi ja sinulla on täysi hallinta käyttöoikeuksista. Sulje jakamiskäyttöoikeus, ja kuva lakkaa näkymästä kaikilla sivustoilla välittömästi. Ei ulkoisia palvelimia, ei rekisteröitymistä lisäpalveluihin.

Googlen palvelunopeus on jatkuvasti korkea. Tiedostot jaellaan saman infrastruktuurin kautta, joka palvelee YouTubea ja Google Kuvia. Prototyypeille ja henkilökohtaisille projekteille tämä on vankka ilmainen CDN.

Vaihe 1: kuvan käyttöoikeuden avaaminen

Lataa kuva Google Driveen raahaamalla tiedosto selainikkunaan tai klikkaamalla "Uusi" → "Tiedoston lataus".

Latauksen jälkeen klikkaa tiedostoa hiiren kakkospainikkeella ja valitse "Jaa" → "Jaa". Avautuvassa ikkunassa vaihda käyttöoikeustaso "Rajoitettu"-tilasta "Kaikki, joilla on linkki" -tilaan. Klikkaa "Kopioi linkki".

Ilman tätä vaihetta suora URL-osoite ei toimi. Jopa oikein rakennettu linkki yksityiselle tiedostolle palauttaa 403-virheen. Käyttöoikeuden on oltava julkinen.

Vaihe 2: tiedoston ID:n poimiminen

Kopioitu jakolinkki näyttää suunnilleen tältä:

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

Tiedoston ID on pitkä merkkijono d/- ja /view-osien välissä. Yllä olevassa esimerkissä se on 1NowYy86nUZVaCMYSXPVI4wiunm4NGU5w. Valitse ja kopioi se.

Tältä ID näyttää linkissä (korostettu punaisella):

ID on yksilöllinen jokaiselle Google Driven tiedostolle. Se ei ole satunnainen merkkijono, vaan sisäinen tunniste, jota Google käyttää tiedostosi paikallistamiseen palvelimillaan. Sitä ei voi muuttaa.

Vaihe 3: suoran linkin rakentaminen

Lisää kopioitu ID malliin:

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

Esimerkkimme tapauksessa valmis linkki näyttää tältä:

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

Parametri export=view käskee Googlea tarjoilemaan tiedoston sellaisenaan, ilman HTML-käärettä. Tämä ei ole esikatselusivu, vaan puhdas kuvan tavuvirta. Toimii JPEG-, PNG-, WebP-, GIF- ja SVG-muodoille.

Testaa linkki: liitä se selaimen osoiteriville. Jos itse kuva avautuu Google-sivun sijaan, linkki on rakennettu oikein.

Jos tarvitset suoran tiedostolatauksen kuvan sijaan (esimerkiksi PDF tai arkisto), korvaa view sanalla download:

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

Selain ei avaa tiedostoa, vaan kehottaa välittömästi tallentamaan sen levylle.

Vaihe 4: kuvan lisääminen sivustolle

Lisää rakennettu linkki <img>-tagin src-attribuuttiin:

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

Älä unohda alt-attribuuttia, jossa on kuvaava teksti; se on tärkeä sekä saavutettavuuden että hakukoneoptimoinnin kannalta.

WordPressissä Gutenberg-editorissa valitse "Kuva"-lohko → "Lisää URL-osoitteesta" ja liitä suora linkki. Klassisessa editorissa "Lisää media" -painike → "Lisää URL-osoitteesta".

Taustatilassa (CSS) linkki toimii täsmälleen samalla tavalla:

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

Valmis esimerkki CodePenissä

CodePenissä voit testata menetelmää ilman sivuston käyttöönottoa. Luo uusi Pen, lisää <img>-tagi edellisen vaiheen suoralla linkillä, ja kuva ilmestyy esikatselupaneeliin.

Toimii minkä tahansa Google Driven julkisen kuvan kanssa. Vaihda alkuperäinen kuva Drivessa (sama ID, uusi tiedosto), ja päivitetty versio päivittyy automaattisesti sivustolle.

Menetelmän rajoitukset

Suorilla Google Drive -linkeillä on liikennekatto. Google ei julkaise tarkkoja lukuja, mutta käytännössä useiden tuhansien päivittäisten katselukertojen myötä kuva saattaa lakata latautumasta. Vilkkaille tuotantosivustoille tämä ei ole ratkaisu; käytä erikoistunutta CDN:ää (Cloudinary, Bunny CDN) tai oliotallennusta (Amazon S3).

Kuvan on oltava julkinen. "Vain kutsutut" tai "Tietyt käyttäjät" -käyttöoikeus ei aktivoi suoraa URL-osoitetta.

Linkin muoto saattaa muuttua. Google ei takaa uc?export=view-päätepisteen vakautta julkisena API:na. Yli 10 vuoden käytön aikana se ei ole hajonnut, mutta muodollisesti menetelmää ei ole dokumentoitu ulkoiseen käyttöön. Pitkäaikaisissa projekteissa on luotettavampaa pystyttää oma tallennustila.

Tästä huolimatta prototyypille, viikonlopun laskeutumissivulle, portfoliosivustolle tai Codepen-esimerkille tämä menetelmä on täysin perusteltu. Nopea, ilmainen ja ilman rekisteröitymistä kolmannen osapuolen palveluihin.

⁉️🤔 Usein kysytyt kysymykset

Kuva ei lataudu, vaikka linkki on rakennettu oikein. Mikä on vialla?

Tarkista tiedoston käyttöoikeustaso Google Drivessa. Jopa oikein rakennettu uc?export=view&id=...-linkki ei palauta mitään tai antaa 403-virheen, jos tiedostoa ei ole julkaistu julkisesti. Avaa käyttöoikeusasetukset ja varmista, että "Kaikki, joilla on linkki" on valittuna, ei "Rajoitettu pääsy". Toinen yleinen syy on, että tiedosto on poistettu Drivesta tai siirretty roskakoriin. ID pysyy samana, mutta tarjoiltavaa ei ole.

Voinko lisätä SVG-kuvia tällä samalla menetelmällä?

Kyllä, SVG toimii täsmälleen samalla tavalla. Google Drive tarjoilee vektoritiedostot oikein export=view-parametrin kautta, ja selain näyttää ne <img>-tagissa ongelmitta. Muista kuitenkin turvallisuus: SVG voi sisältää skriptejä, joten älä lisää kolmannen osapuolen SVG-tiedostoja sivustollesi ilman tarkistusta. Omille kuvakkeille ja kuvituksille menetelmä on täysin soveltuva.

Kuinka monta kuvaa yhdeltä Google-tililtä voi tarjoilla?

Tiedostojen määrälle ei ole ehdotonta rajaa, kaikki riippuu tallennustilan määrästä (15 Gt ilmaiseksi) ja epävirallisesta liikennekatosta. Käytännössä 50-100 kuvaa henkilökohtaisella portfoliosivustolla toimii valittamatta vuosia. Kaupalliselle sivustolle, jolla on paljon liikennettä, on parempi vuokrata CDN.

Mitä eroa on export=view ja export=download -parametreilla?

export=view tarjoilee tiedoston sisältönä selaimessa näytettäväksi, kuva avautuu välilehdessä, video alkaa toistaa. export=download pakottaa latauksen: selain ei näytä tiedostoa vaan tallentaa sen levylle. <img src="">-tagissa käytä view-parametria. Painikkeen "Lataa PDF" -linkissä käytä download-parametria.

Voinko luoda erikokoisia esikatselukuvia?

Kyllä, lisää linkkiin sz=wNUMBER-parametri. Esimerkiksi &sz=w320 rajoittaa kuvan leveyden 320 pikseliin. Google skaalaa kuvan lennosta, ja säästät liikennettä sivuston mobiiliversiossa. Täysi malli: https://drive.google.com/uc?export=view&id=YOUR_ID&sz=w320.

Kannattaako Google Drivea käyttää kuvien CDN:nä

Henkilökohtaiselle blogille, lemmikkiprojektille tai nopealle prototyypille kyllä, tämä on toimiva ja perusteltu vaihtoehto. Nolla kustannusta, täysi käyttöoikeuksien hallinta ja minimaalinen vaiva.

Sivustolle, jonka liikenne on parista tuhannesta ihmisestä päivässä, katso Cloudinaryn ilmaista tasoa (25 Gt liikennettä kuukaudessa) tai Bunny CDN:ää sekuntiperusteisella laskutuksella. Ne maksavat pennejä, ja kuvat latautuvat vakaasti missä tahansa kuormituksessa.

Pidä Google Drive -menetelmä kirjanmerkeissäsi hätävaihtoehtona. Kun sinun täytyy nopeasti jakaa kuvakaappaus foorumilla, näyttää asettelu asiakkaalle tai herättää kuva henkiin Codepenissä, tämä on lyhin polku tiedoston lataamisesta toimivaan linkkiin. Ei rekisteröitymisiä, ei tekstiviestejä, ei kiintiöitä.