Kuvien suojaaminen WordPressissä: Mitä voit estää ja mitä et?

 

Miten suojata WordPress-kuvia luvattomalta käytöltä?

Moni WordPress-sivuston omistaja pohtii, miten omia valokuvia, tuotekuvia, karttoja, kuvituksia tai portfolioita voisi suojata luvattomalta käytöltä.

Onko olemassa keino, jolla kuvien tallentamisen voi estää kokonaan?

Ei täysin.

Jos kuva näkyy verkkosivulla, selaimen täytyy vastaanottaa kuvatiedosto tai kuvan näyttämiseen tarvittava data. Siksi päättäväinen käyttäjä voi yleensä ottaa kuvasta näyttökuvan, tarkastella selaimen verkkopyyntöjä tai löytää kuvatiedoston muulla tavoin. Täydellisen teknisen eston sijaan tavoitteena on tehdä satunnaisesta kopioinnista hankalampaa, vähentää korkearesoluutioisten alkuperäiskuvien leviämistä ja tehdä kuvan omistaja sekä käyttöehdot selviksi.

Kuvien suojaaminen kannattaa nähdä kerroksittaisena ratkaisuna:

  • julkaise verkossa vain käyttötarkoitukseen sopivan kokoisia kuvia
  • lisää tärkeimpiin kuviin vesileima
  • estä tavallisimmat kopiointitavat rajatusti
  • käytä selkeitä tekijänoikeus- ja käyttöehtomerkintöjä
  • seuraa tarvittaessa kuvien luvatonta käyttöä
  • tarjoa alkuperäiset tai painokelpoiset tiedostot vain hallitusti

Miksi kuvien kopiointia ei voi estää kokonaan?

Kun vierailija avaa sivun, selain lataa sivun sisältöä palvelimelta. Tavalliseen verkkosivuun voi kuulua HTML-koodia, CSS-tyylejä, JavaScriptiä, fontteja ja kuvatiedostoja.

Jos kuva näytetään käyttäjän ruudulla, käyttäjä voi aina ainakin nähdä sen ja ottaa siitä näyttökuvan. Oikean klikkauksen esto, kuvan raahaamisen estäminen tai CSS-taustakuvan käyttö voivat vaikeuttaa tavallista tallennusta, mutta eivät muuta verkon perusperiaatetta.

Tärkeät sisältökuvat kannattaa yleensä lisätä sivulle tavallisina HTML-kuvina eli <img>-elementteinä. Google käsittelee kuvia luotettavimmin silloin, kun ne ovat kuvan src-attribuutissa, eikä CSS-taustakuvia indeksoida samalla tavalla. (Google for Developers)

Mitä kuvansuojauksella kannattaa tavoitella?

Kaikilla sivustoilla ei ole samaa suojaustarvetta.

Esimerkiksi blogin kuvituskuville voi riittää selkeä käyttöehto ja kohtuullisen kokoinen verkkoversio. Ammattivalokuvaajan portfolio, verkkokaupan tuotekuvat, maksullinen kartta-aineisto tai yksilöllinen kuvitus voi puolestaan vaatia vahvempia keinoja.

Hyvä lähtökohta on kysyä:

Mitä haittaa siitä olisi, jos joku tallentaisi tämän kuvan?

Jos suurin haitta on se, että kuvaa käytetään toisella sivustolla ilman lupaa, vesileima, käyttöehdot ja seuranta ovat yleensä tärkeämpiä kuin raskaat tekniset estot.

Jos taas kyseessä on painokelpoinen, myytävä tai muuten arvokas alkuperäistiedosto, sitä ei kannata julkaista avoimesti WordPressin Mediakirjastossa täydessä koossa.

1. Julkaise verkossa vain sopivan kokoisia kuvia

Yksi tehokkaimmista käytännön keinoista on julkaista verkossa pienempi versio alkuperäisestä kuvasta.

Jos alkuperäinen kuva on esimerkiksi 6000 pikseliä leveä, sitä ei yleensä tarvitse ladata verkkosivulle sellaisenaan. Monessa portfoliossa tai artikkelissa 1600–2400 pikseliä leveä kuva näyttää hyvältä näytöllä, mutta ei sovellu yhtä hyvin suuriin painotuotteisiin.

Tämä tarjoaa kaksi hyötyä:

  • sivusto latautuu nopeammin
  • luvatta tallennetun kuvan käyttöarvo on rajallisempi

Tarkoitus ei ole tehdä kuvasta tahallaan huonolaatuista. Verkossa näkyvän kuvan pitää edelleen näyttää hyvältä. Säilytä vain alkuperäinen, painokelpoinen tai korkearesoluutioinen tiedosto omassa arkistossasi.

WordPress luo Mediakirjastoon ladatuista kuvista useita eri kokoja. Selain voi käyttää srcset– ja sizes-attribuutteja valitakseen laitteelle sopivan version, kun kuva lisätään WordPressin tavallisilla työkaluilla. (Google for Developers)

2. Vesileimaa tärkeimmät kuvat

Vesileima on kuvaan lisätty logo, teksti tai muu tunniste, joka kertoo kuvan alkuperän.

Vesileima ei estä tallentamista, mutta se voi vähentää luvattoman käytön houkuttelevuutta. Jos kuva kopioidaan, vesileima kulkee yleensä mukana ja auttaa tunnistamaan alkuperäisen lähteen.

Hyvä vesileima on yleensä:

  • riittävän näkyvä, ettei sitä voi rajata helposti pois
  • tarpeeksi hillitty, ettei se pilaa kuvaa kokonaan
  • sijoitettu lähelle kuvan olennaista aluetta
  • yhdenmukainen sivuston tai brändin kanssa

Pieni vesileima aivan alakulmassa on helppo rajata pois. Keskialueelle sijoitettu, osittain läpinäkyvä logo tai sivuston osoite on usein tehokkaampi.

Vesileima kannattaa harkita erityisesti:

  • portfolioihin
  • valokuvagallerioihin
  • tuotekuviin
  • karttoihin
  • piirroksiin ja kuvituksiin
  • maksulliseen sisältöön liittyviin esikatselukuviin

Vesileima ei ole täydellinen suoja. Kuvaa voidaan rajata, muokata tai käyttää näyttökuvana. Se toimii kuitenkin hyvin näkyvänä omistajuusmerkintänä ja satunnaisen väärinkäytön pelotteena.

3. Estä oikea klikkaus vain suojattavista kuvista

Oikean hiiren painikkeen esto voi vähentää tavallista Tallenna kuva nimellä -toiminnon käyttöä.

Se ei kuitenkaan estä:

  • näyttökuvien ottamista
  • selaimen kehittäjätyökalujen käyttöä
  • JavaScriptin poistamista käytöstä
  • kuvan löytämistä verkkopyynnöistä
  • kuvan tallentamista muilla menetelmillä

Siksi oikean klikkauksen esto on pelote, ei vahva tekninen suoja.

Älä estä oikeaa klikkausta koko sivustolla. Se voi haitata kävijää, joka haluaa esimerkiksi avata linkin uuteen välilehteen, kopioida tekstin, käyttää selaimen omaa valikkoa tai hyödyntää saavutettavuustyökaluja.

Rajaa esto vain kuviin, joita todella haluat suojata.

Esimerkiksi HTML:

<figure class="image-protect">
  <img
    src="/wp-content/uploads/maisemakuva.jpg"
    alt="Järvimaisema metsäisen rannan edustalla"
    draggable="false">
</figure>

Ja JavaScript:

document.addEventListener("contextmenu", (event) => {
  if (
    event.target instanceof Element &&
    event.target.closest(".image-protect img")
  ) {
    event.preventDefault();
  }
});

document.addEventListener("dragstart", (event) => {
  if (
    event.target instanceof Element &&
    event.target.closest(".image-protect img")
  ) {
    event.preventDefault();
  }
});

Tämä estää oikean klikkauksen ja kuvan raahaamisen vain .image-protect-luokalla merkityissä kuvissa.

Käytännössä tällainen toiminto on usein helpointa toteuttaa luotettavalla kuvansuojauslisäosalla, jolloin koodi ei jää riippumaan teeman tiedostoista tai WordPress-päivityksistä.

4. Estä kuvien raahaaminen

Kuvan raahaaminen työpöydälle tai toiseen sovellukseen on tavallinen tapa tallentaa kuva.

HTML-attribuutti:

draggable="false"

sekä dragstart-tapahtuman esto voivat vähentää tätä.

Tämä ei ole täydellinen suoja, mutta se poistaa yhden helpon tallennustavan. Mobiililaitteilla vaikutus voi vaihdella selaimen ja käyttöjärjestelmän mukaan, joten pitkän painalluksen estämiseen ei kannata rakentaa koko suojausratkaisua.

5. Älä käytä kryptisiä tiedostonimiä suojauksena

Kuvan uudelleennimeäminen esimerkiksi muotoon:

IMG_2026_4829.jpg

ei käytännössä suojaa kuvaa.

Jos kuva näkyy sivulla, sen osoite voidaan yleensä löytää selaimen verkkopyynnöistä tai sivun HTML-koodista riippumatta siitä, onko tiedostonimi kuvaava vai satunnainen.

Kryptinen tiedostonimi voi myös vaikeuttaa omaa Mediakirjaston hallintaa ja heikentää kuvan asiayhteyden ymmärtämistä hakukoneille.

Parempi tiedostonimi on esimerkiksi:

vaellusreppu-tunturireitilla.jpg

Kuvaava tiedostonimi ei estä kopiointia, mutta se auttaa hallitsemaan kuvia ja tukee kuvan ymmärrettävyyttä sivun muun sisällön yhteydessä. Google suosittelee kuvaavia tiedostonimiä sekä kuvan sisältöä vastaavia alt-tekstejä. (Google for Developers)

6. CSS-taustakuva ei ole varsinainen suojauskeino

Kuvan voi asettaa CSS:llä elementin taustakuvaksi:

.hero-image {
  background-image: url("/wp-content/uploads/maisemakuva.jpg");
  background-size: cover;
  background-position: center;
}

Tämä voi tehdä tavallisesta Tallenna kuva nimellä -toiminnosta hankalamman, koska kuva ei ole suoraan napsautettava <img>-elementti.

Se ei kuitenkaan estä teknisesti osaavaa käyttäjää löytämästä kuvan osoitetta selaimen kehittäjätyökaluista tai CSS-tiedostoista.

CSS-taustakuva sopii hyvin koristeelliseksi taustaksi, esimerkiksi hero-alueelle. Sitä ei kuitenkaan kannata käyttää tärkeän sisältökuvan suojana.

Tavallinen <img>-kuva on yleensä parempi silloin, kun kuva tarvitsee alt-tekstin, sillä alt-teksti on olennainen osa saavutettavuutta. Google myös käsittelee tavalliset <img src="...">-kuvat luotettavammin kuvahaussa. (Google for Developers)

7. Älä pilko kuvia osiin tai piilota niitä canvas-elementtiin

Kuvan pilkkominen useisiin osiin, Base64-muotoon muuttaminen tai kuvan piirtäminen canvas-elementtiin voi tehdä yksittäisen tiedoston tallentamisesta hankalampaa.

Tavallisella WordPress-sivustolla tällaiset ratkaisut ovat kuitenkin yleensä ylimitoitettuja.

Niiden haittoja voivat olla:

  • monimutkainen toteutus
  • vaikeampi ylläpito
  • hitaampi latautuminen
  • heikompi saavutettavuus
  • vaikeampi kuvien hakukonenäkyvyys
  • ongelmat välimuistin, CDN:n tai kuvanoptimoinnin kanssa
  • edelleen mahdolliset näyttökuvat

Canvas- tai rajattu API-ratkaisu voi olla perusteltu esimerkiksi maksullisessa kuvapalvelussa tai suljetussa asiakasportaalissa. Tavallisessa portfoliossa, yrityssivustolla tai blogissa verkkoversioiden pienentäminen, vesileima ja selkeät käyttöehdot ovat yleensä toimivampi ratkaisu.

8. Käytä salasanasuojausta tai käyttöoikeuksia alkuperäiskuville

Jos korkearesoluutioisia kuvia ei ole tarkoitettu kaikille kävijöille, niitä ei kannata julkaista avoimesti WordPressin Mediakirjastossa.

Voit esimerkiksi:

  • luoda salasanalla suojatun sivun
  • tarjota tiedostoja vain kirjautuneille asiakkaille
  • jakaa korkearesoluutioiset kuvat ostoksen jälkeen
  • käyttää asiakaskohtaisia latauslinkkejä
  • pitää painokelpoiset alkuperäistiedostot erillisessä, käyttöoikeuksin rajatussa palvelussa

Tämä ei estä kuvaa näkevää asiakasta ottamasta siitä näyttökuvaa, mutta se rajaa sitä, kuka pääsee käsiksi alkuperäisiin tiedostoihin.

Tärkeä ero on tämä:

Julkisesti näkyvää kuvaa ei voi täysin suojata kopioinnilta.
Ei-julkista alkuperäistiedostoa voidaan hallita käyttöoikeuksilla.

9. Ota hotlink-suojaus käyttöön harkiten

Hotlinking tarkoittaa tilannetta, jossa toinen verkkosivusto näyttää sinun palvelimellasi olevan kuvan omalla sivullaan suoraan kuvan URL-osoitetta käyttäen.

Tällöin toinen sivusto voi käyttää sinun kaistanleveyttäsi ilman, että se edes tallentaa kuvaa omalle palvelimelleen.

Hotlink-suojaus voi estää ulkopuolisia sivustoja upottamasta kuviasi suoraan. Se ei kuitenkaan estä kuvan tallentamista tai uudelleenlataamista toiselle palvelimelle.

Hotlink-suojaus määritetään yleensä webhotellin, CDN-palvelun tai palvelinasetusten kautta. Sen käyttöönotto kannattaa testata huolellisesti, jotta omat sivut, kuvia käyttävät aliverkkotunnukset tai hakukoneiden kuvabotit eivät esty vahingossa. Googlebotin tunnistamiseen ei pidä luottaa pelkän käyttäjäagentin nimeen, koska sitä voidaan jäljitellä. (Google for Developers)

10. Lisää selkeät käyttöehdot ja tekijänoikeusmerkintä

Tekijänoikeus ei synny vasta silloin, kun sivun alatunnisteessa lukee ©. Merkintä ei luo oikeutta, mutta se tekee omistajuuden ja käyttöehdot näkyväksi kävijälle.

Suomessa valokuvaajalla on lähtökohtaisesti yksinoikeus määrätä valokuvan kappaleiden valmistamisesta ja kuvan saattamisesta yleisön saataville. Tämä koskee myös kuvan julkaisemista verkossa. (Tekijanoikeus.fi)

Voit lisätä sivuston alatunnisteeseen esimerkiksi:

© 2026 Yrityksen nimi. Kuvien käyttö edellyttää lupaa, ellei pakottavasta lainsäädännöstä muuta johdu.

Kuvan yhteydessä voit käyttää esimerkiksi:

Kuva: Yrityksen nimi / Kaikki oikeudet pidätetään

Jos haluat sallia osan käytöstä, kerro ehdot tarkasti. Esimerkiksi lehdistölle tarkoitettujen kuvien kohdalla voit määritellä:

  • saako kuvia käyttää toimituksellisessa yhteydessä
  • pitääkö kuvaajan nimi mainita
  • saako kuvaa rajata tai muokata
  • saako kuvaa käyttää mainonnassa
  • mistä korkearesoluutioiset versiot voi pyytää

Selkeä käyttöehto vähentää epäselvyyksiä, mutta se ei korvaa yksittäistapauksissa tarvittavaa lupaa tai sopimusta.

11. Seuraa kuvien luvatonta käyttöä

Kaikkea väärinkäyttöä ei voi estää ennalta. Siksi arvokkaiden kuvien kohdalla kannattaa seurata, missä niitä käytetään.

Voit tarkistaa kuvien käyttöä esimerkiksi käänteisellä kuvahaulla. Tarkista erityisesti:

  • omat valokuvat
  • tuotekuvat
  • kartat
  • infografiikat
  • yksilölliset kuvitukset
  • portfoliosisältö
  • maksullisen materiaalin esikatselukuvat

Jos löydät kuvan luvattomasta käytöstä, tallenna ensin todisteet:

  • kuvakaappaus sivusta
  • sivun URL-osoite
  • päivämäärä
  • kuvan suora osoite, jos löydät sen
  • oma alkuperäinen kuvatiedosto
  • mahdolliset alkuperäiset julkaisutiedot

Tämän jälkeen voit lähettää sivuston ylläpitäjälle selkeän poistopyynnön.

Esimerkiksi:

Hei,

Huomasin, että verkkosivullanne käytetään kuvaani ilman lupaa:

[URL-osoite]

Olen kuvan oikeudenhaltija. Pyydän poistamaan kuvan sivustolta tai ottamaan minuun yhteyttä käyttöluvan sopimiseksi viimeistään [päivämäärä].

Ystävällisin terveisin,

[Nimi]
[Yhteystiedot]

Jos ylläpitäjä ei reagoi, seuraava vaihe voi olla yhteydenotto sivuston palveluntarjoajaan tai siihen palveluun, jossa sisältö julkaistaan. Jos kyseessä on merkittävä kaupallinen vahinko tai toistuva väärinkäyttö, tekijänoikeuksiin perehtyneen juristin neuvonta voi olla perusteltua.

Mitä Google-näkyvyydelle tapahtuu, jos kuvia yrittää piilottaa?

Kuvien suojaus ja Google Kuvahaun näkyvyys ovat usein ristiriidassa.

Jos haluat kuviesi näkyvän Google Kuvahaussa, kuvien pitää olla Googlen saavutettavissa. Google voi estää kuvan indeksoinnin esimerkiksi noimageindex-asetuksella, mutta tämä ei estä kuvan kopioimista — se vain vähentää sen näkyvyyttä Googlen hakutuloksissa. (Google for Developers)

Siksi kannattaa päättää, mikä on tärkeämpää:

  • Mahdollisimman hyvä näkyvyys: käytä kuvaavia tiedostonimiä, alt-tekstejä ja indeksoitavia kuvia.
  • Mahdollisimman rajattu näkyvyys: älä julkaise arvokkaita alkuperäistiedostoja avoimena sisältönä.
  • Tasapaino: julkaise laadukas verkkoversio, lisää tarvittaessa vesileima ja säilytä alkuperäinen tiedosto yksityisessä arkistossa.

Käytännöllisin suojausmalli WordPress-sivustolle

Useimmille WordPress-sivustoille toimiva ratkaisu on tämä:

  1. Säilytä alkuperäiset kuvat omassa arkistossasi.
  2. Julkaise verkossa pienempi, käyttötarkoitukseen sopiva versio.
  3. Lisää vesileima arvokkaimpiin kuviin.
  4. Estä oikea klikkaus ja kuvan raahaaminen vain suojattavista kuvista.
  5. Älä käytä CSS-taustakuvaa tai kryptisiä tiedostonimiä varsinaisena suojauskeinona.
  6. Lisää selkeä tekijänoikeus- ja käyttöehtomerkintä.
  7. Harkitse hotlink-suojausta, jos kuvia upotetaan muille sivustoille.
  8. Tarjoa painokelpoiset tai korkearesoluutioiset tiedostot vain hallitusti.
  9. Seuraa tärkeimpien kuvien käyttöä käänteisellä kuvahaulla.
  10. Reagoi luvattomaan käyttöön dokumentoimalla tapaus ja lähettämällä poistopyyntö.

Yhteenveto

WordPress-kuvien kopiointia ei voi estää kokonaan, jos kuva näkyy avoimesti verkossa.

Voit kuitenkin tehdä luvattomasta käytöstä hankalampaa, vähentää korkearesoluutioisten tiedostojen leviämistä ja osoittaa selkeästi, kuka kuvan omistaa.

Tehokkain ratkaisu ei yleensä ole yksi tekninen esto. Se on harkittu yhdistelmä:

  • sopivan kokoiset verkkokuvat
  • vesileimat
  • rajatut oikean klikkauksen ja raahaamisen estot
  • selkeät käyttöehdot
  • hallittu pääsy alkuperäistiedostoihin
  • aktiivinen seuranta ja tarvittaessa poistopyynnöt

Täydellisen suojan tavoittelu voi helposti heikentää sivuston nopeutta, saavutettavuutta ja käyttökokemusta. Useimmille sivustoille paras ratkaisu on riittävä suojaus, joka vaikeuttaa satunnaista kopiointia mutta pitää sivuston edelleen miellyttävänä käyttää.