Miksi kuva ei näy verkkosivullani? Näin korjaat ongelman

Rikkoutuneen kuvan kuvake, tyhjä tila ja paikalleen jäävä paikkamerkki viittaavat eri ongelmiin. Tiedosto voi puuttua, selain ei ehkä pysty näyttämään sitä tai sivu saattaa piilottaa onnistuneesti latautuneen kuvan.

Aloita yhdestä puuttuvasta kuvasta. Ensimmäiset tarkistukset tehdään sivuston muokkaimessa ja selaimessa. Valinnainen ylläpitäjän osio käsittelee verkkopyyntöjä, HTML:ää, CSS:ää ja selaimen turvallisuusilmoituksia.

Jos kuva näkyy sivulla mutta puuttuu hakutuloksista, lue Google Kuvahaun opas. Jos kuva lopulta ilmestyy mutta latautuu liian hitaasti, selvitä kuvien hidasta latautumista.

1. Aloita julkaistusta sivusta

Avaa julkinen sivu muokkaimen esikatselun sijaan. Varmista muokkaimessa, että kuva on valittu, muutos tallennettu ja sivu julkaistu. Kirjaa, mitkä kuvat puuttuvat ja alkoiko ongelma kuvan lataamisen, ulkoasu-uudistuksen vai sivuston siirron jälkeen.

Kokeile julkista sivua myös yksityisessä selainikkunassa. Erilainen tulos antaa hyödyllisen vihjeen, mutta ikkunoiden välillä voivat erota kirjautumistila, tallennetut tiedot ja käytössä olevat laajennukset.

2. Etsi kuvaosoite ja kokeile sitä

Napsauta puuttuvaa kuvaa tai sen rikkoutunutta kuvaketta hiiren oikealla painikkeella ja etsi Avaa kuva uudessa välilehdessä tai Kopioi kuvan osoite. Taustakuvalle tai tyhjälle paikkamerkille näitä valintoja ei välttämättä ole.

Voit myös valita kuvan muokkaimessa ja avata sen mediatiedot. Kopioi tiedoston URL-osoite, älä liitesivun tai pilvipalvelun jakosivun osoitetta. Jakosivu voi näyttää kuvan latausnäkymässä tai vaatia kirjautumisen.

Julkinen sivu saattaa käyttää pikkukuvaa, mobiilirajausta tai erillisessä kuvapalvelussa olevaa kopiota. Jos löydät vain mediakirjaston alkuperäisen kuvan, käytä sitä lähtökohtana. Network-tarkistus paljastaa, mitä versiota sivu pyytää.

Avaa kuvaosoite yksityisessä ikkunassa kirjautumatta sisään ja valitse seuraava vaihe:

• Kuva avautuu: siirry sivun näkyvyystarkistuksiin. Jos niistä ei löydy syytä, tutki sivun todellinen kuvapyyntö.
• Näet virheen, kirjautumissivun tai käyttöoikeusvaroituksen: siirry tiedoston sijainnin ja käyttöoikeuksien tarkistuksiin.
• Ongelma ilmenee vain puhelimella: siirry mobiiliversioiden ja latautumisen tarkistuksiin, vaikka alkuperäinen kuva avautuisi.
• Selain lataa tiedoston koneelle: siirry vastausotsakkeiden tarkistukseen. Latausasetukset voivat selittää tämän toiminnan kertomatta vielä, näkyykö kuva sivulle upotettuna.

Onnistunut testi uudessa välilehdessä vahvistaa, että tiedosto näkyy siinä tilanteessa. Sivu voi silti pyytää eri versiota tai kohdata upotusta koskevan rajoituksen.

3. Palauta tiedosto tai korjaa käyttöoikeudet

Jos tiedosto puuttuu tai osoite on väärä

1. Etsi oikea kuva mediakirjastosta. Vertaa sen tiedosto-osoitetta toimimattomaan osoitteeseen. Tarkista verkkotunnus, kansio, tiedostonimi, pääte sekä isot ja pienet kirjaimet. Jotkin palvelimet erottavat nimet Photo.JPG ja photo.jpg toisistaan.
2. Vaihda toimimaton kuva kyseisessä kuvalohkossa tai pienoisohjelmassa. Valitse olemassa oleva toimiva kuva, tallenna ja julkaise. Jos alkuperäinen on poistettu, lataa ensin tilalle luotettava korvaava tiedosto.
3. Avaa julkinen sivu uudelleen. Tarkista, että se viittaa nyt toimivaan kuvaan. Jos se pyytää edelleen puuttuvaa pikkukuvaa, seuraa alla olevaa kuvakokojen tarkistusta.

Sivuston siirron jälkeen vertaa tiedostonimen lisäksi kuvan palvelinta. Sivu saattaa yhä viitata vanhaan verkkotunnukseen tai latauskansioon. Käsin kirjoitettuja polkuja käsitellään ylläpitäjän tarkistuksissa.

Jos alkuperäinen toimii mutta pikkukuva puuttuu

Uusi lataus ei välttämättä korjaa sivua, joka viittaa edelleen puuttuvaan versioon. Anna ylläpitäjälle toimivan alkuperäisen ja puuttuvan pikkukuvan URL-osoitteet. Pyydä luomaan puuttuva kuvakoko uudelleen ja päivittämään siihen viittaavat kuvaluettelot. Network-paneelista saat toimimattoman osoitteen ja tilakoodin.

Esimerkiksi: ”Alkuperäinen kuva avautuu, mutta sivu pyytää pienempää versiota, joka palauttaa 404-virheen. Palauttaisitko tämän koon ja tarkistaisit sivun responsiiviset kuvaviittaukset?” Näin korjaustarve tulee selväksi ilman, että sinun tarvitsee tuntea alustan kuvankäsittelytyökaluja.

Jos pääsy estetään tai kirjautuminen vaaditaan

Ratkaise ensin, kuuluuko kuvan olla julkinen. Jos kuuluu, valitse sivuston tavallisen julkisen medialatauksen kautta lisätty tiedosto. Paikallinen file:///C:/...-osoite, tilapäinen blob:-esikatselu tai yksityinen pilvipalvelun jakolinkki ei ole pysyvä julkinen kuvaosoite.

Jos vastaus on 401 tai 403, lähetä palveluntarjoajalle tarkka toimimaton URL-osoite, sitä käyttävä sivu ja testin ajankohta. Kysy, mikä todennus- tai jakelusääntö esti pyynnön. Syynä voi olla vanhentuva linkki tai hotlink-suojaus, joka rajoittaa upottamista muille sivustoille. Korjaa sääntö tai käytä palveluntarjoajan tukemaa julkista kuvaosoitetta. Säilytä yksityisten tiedostojen tarkoituksenmukaiset käyttörajoitukset.

4. Tarkista kuvan näkyvyys sivulla

Jos kuva avautuu suoraan, aloita sen asetuksista sivun muokkaimessa:

• Tarkista kuva ja sitä ympäröivä osio. Etsi näkyvyysasetuksia, kuten ”Piilota mobiilissa” tai ”Vain tietokoneella”. Piilotettu osio piilottaa myös sen sisällä olevat kuvat.
• Tarkista taustakuvat erikseen. Osion taustakuva tarvitsee näkyvän säiliön. Määritä tyhjälle osiolle sopiva korkeus muokkaimessa ja tarkista sitten taustan sijainti sekä mahdollinen peittoväri.
• Tarkista läpinäkyvä kuva toista taustaväriä vasten. Valkoinen logo voi sulautua valkoiseen sivuun, vaikka se latautuisi oikein. Lue läpinäkyvyyttä käsittelevä opas, jos kuvan sisältö vaikuttaa näkymättömältä.

Tallenna olennainen muutos ja tarkista julkinen sivu. Jos kuva puuttuu edelleen, ylläpitäjän tarkistuksilla voi erottaa estetyn pyynnön asettelun piilottamasta kuvasta.

5. Tarkista mobiilikuvat ja jumittuneet paikkamerkit

Jos ongelma ilmenee vain puhelimella

Avaa muokkaimen mobiilinäkymä ja tarkista, onko kuva tai osio piilotettu. Jos mobiilikuvalle on oma asetus, varmista, että se viittaa saatavilla olevaan tiedostoon. Kokeile sitten julkista sivua puhelimella, jolla ongelma ilmeni.

Sivustot voivat luoda useita kuvakokoja ja antaa selaimen valita niistä. Puhelin saattaa pyytää puuttuvaa pientä versiota samalla, kun kannettava käyttää toimivaa suurta kuvaa. Pyydä ylläpitäjää vertaamaan valittuja osoitteita toimivalla ja ongelmallisella näyttökoolla sekä palauttamaan puuttuva versio. Valitun version selvittämistä käsitellään teknisissä tarkistuksissa.

Jos näkyviin tulevan kuvan tilalle jää paikkamerkki

Sivun alempana olevan kuvan tai vielä avaamattoman galleriaruudun lataamista voidaan tarkoituksella lykätä. Selvitä ongelmaa, jos kuva pysyy tyhjänä sen jälkeen, kun olet vierittänyt sen kohdalle tai avannut kyseisen ruudun ja antanut sille aikaa latautua. Epäonnistunut pyyntö ja kokonaan käynnistymätön pyyntö vaativat eri korjaukset.

Kokeile kyseisen gallerian tai viivästetyn latauksen asetusta yhdellä sivulla testiympäristössä. Jos kuva palaa, pyydä ylläpitäjää korjaamaan kyseinen komponentti ennen laajempaa muutosta. Heti sivun avautuessa näkyvän pääkuvan kohdalla arvioi, onko viivästetty lataus sopiva ratkaisu. Lazy loading -oppaamme avaa eri vaihtoehdot.

6. Vertaa muokkainta vierailijan näkymään

Jos kuva näkyy vain muokkaimessa, varmista, että julkaisit kuvamuutoksen oikealle sivulle. Vertaa sitten mediakirjaston osoitetta julkisen sivun pyyntöön. Yksityinen muokkaimen esikatselu ja toimiva julkinen kuvatiedosto ovat eri asioita.

Kun olet korjannut vanhentuneen sivun tai kuvaviittauksen, päivitä kyseisen sivun tai tiedoston välimuisti julkaisujärjestelmän dokumentoitujen toimintojen avulla. Sisällönjakeluverkolla eli CDN:llä voi olla oma välimuistinsa. Selaimen tietojen tyhjentäminen ei päivitä sivuston yhteistä välimuistia.

Jos ongelma ilmenee vain yhdessä selainprofiilissa, kokeile ilman laajennuksia ja tarkista profiilin sivustokohtaiset oikeudet. Yksityinen selaus ei kaikissa kokoonpanoissa poista laajennuksia käytöstä. Tallenna epäonnistunut pyyntö ennen kuin päätät, vaatiiko huomiota sisällönesto vai sivuston jakelutapa.

Ylläpitäjän osio neuvoo testaamaan ilman selaimen tavallista HTTP-välimuistia. MDN:n välimuistiopas käsittelee selaimen ja jaettuja välimuisteja.

7. Muuta tiedostoa, kun syy on muodossa tai koossa

Tarkista tiedoston todellinen muoto ja kohdepalvelun vaatimukset ennen muuntimen valintaa. Muuntaminen voi korjata muotojen yhteensopimattomuuden, mutta ei palauttaa puuttuvaa osoitetta tai tuoda piilotettua osiota näkyviin.

• Tiedosto on HEIC- tai HEIF-muodossa ja kohde vaatii JPG:n: tee kuvasta liikkumaton JPG-kopio HEIC–JPG-muuntimella. Tarkista tulos ja säilytä alkuperäinen. iPhonen kuva voi olla jo JPEG-muodossa, joten tarkista muoto ensin.
• Alusta ei hyväksy SVG:tä mutta hyväksyy PNG:n: tee PNG-kopio sopivilla pikselimitoilla. Tarkista grafiikka ennen lataamista.
• Tiedosto ei avaudu omallakaan laitteella: palauta toimiva alkuperäinen tai vie kuva uudelleen sen luoneesta sovelluksesta. Tiedostopäätteen muuttaminen ei korjaa vioittunutta sisältöä.
• Sivustolle lähetettävä tiedosto ylittää ilmoitetun rajan: tee rajan alittava kopio ja varmista sitten, että tiedoston lähettäminen valmistui ja sivu käyttää lähetettyä tiedostoa.

MDN:n kuvamuoto-opas vertailee selaintukea ja muotojen ominaisuuksia. Jos SVG näyttää viennin jälkeen erilaiselta, lue SVG-opas. Jos kuva näkyy mutta näyttää epätarkalta, lue sumeita kuvia käsittelevä opas.

Esimerkki: tuotekuva katoaa mobiilissa

Tässä havainnollistavassa esimerkissä tuotekuva toimii kannettavalla verkkokaupan siirron jälkeen, mutta puhelimella näkyy rikkoutunut kuva. Mediakirjaston alkuperäinen avautuu, joten omistaja tarkistaa puhelimen todellisen kuvapyynnön.

Puhelin valitsee tiedoston /media/blue-mug-640.webp, joka palauttaa 404-virheen. Kannettava käyttää tiedostoa /media/blue-mug-1280.webp. Siirrossa kopioitiin suurempi tiedosto mutta pienempi versio jäi pois.

Ylläpitäjä luo puuttuvan koon uudelleen, tarkistaa muut tarjolla olevat versiot ja päivittää tarvittaessa vanhentuneet sivuviittaukset. Omistaja lataa julkisen sivun uudelleen puhelimella ja varmistaa, että pyydetty tiedosto palauttaa nyt oikean kuvan. Syynä oli puuttuva luotu kuvaversio; alkuperäisen muodon vaihtaminen ei korjaisi tätä viittausta.

8. Varmista korjaus vierailijan näkökulmasta

Toista epäonnistunut testi samalla julkisella sivulla, näyttökoolla ja galleriaruudulla. Varmista, että oikea kuva näkyy ja säilyy näkyvissä myös uudelleenlatauksen jälkeen. Testaa ilman ylläpitäjän kirjautumista, jos kuvan on tarkoitus näkyä kaikille.

Jos muutos koskee sivupohjaa tai jakelua, tarkista myös toinen samaa komponenttia käyttävä sivu sekä tietokone- että mobiilinäkymä. Kirjaa lyhyesti syy ja muuttamasi tiedosto tai asetus.

Jos jonkun muun pitää viimeistellä korjaus, lähetä hänelle sivun URL, valitun kuvan URL, virheen ajankohta, selain- ja laitetiedot sekä olennainen virheilmoitus. Kerro, näkyykö kuva muokkaimessa, suoraan uudessa välilehdessä tai toisella näyttökoolla. Poista yksityiset tunnisteet ja henkilötiedot julkisesti jaettavasta aineistosta.

Valinnainen osio: tekniset tarkistukset sivuston ylläpitäjälle

Valitse yllä kerättyihin havaintoihin sopivat tarkistukset. Ne auttavat erottamaan puuttuvan tiedoston, epäonnistuneen pyynnön ja latautuneen mutta piilossa olevan kuvan.

Tutki kuvapyyntö Network-paneelissa

1. Avaa ongelmallinen julkinen sivu. Valitse Chromen valikosta Lisää työkaluja → Kehittäjän työkalut ja avaa Network. Muissa selaimissa on vastaavat toiminnot.
2. Pidä tallennus päällä ja lataa sivu uudelleen. Valitse Img-suodatin tai hae tiedostonimellä. Vieritä kuvan kohdalle tai avaa sen galleriaruutu, jos lataus tavallisesti käynnistyy niin.
3. Valitse pyyntö. Kirjaa Headers-välilehdeltä Request URL, tilakoodi ja vastausotsakkeet. Katso palautettua sisältöä Preview- tai Response-välilehdeltä.
4. Jos pyyntöä ei löydy, poista suodattimet. Osoite on voinut muuttua tai skripti voi noutaa kuvan Fetch/XHR-pyynnöllä.

Voit verrata tuoretta verkkolatausta valitsemalla Disable cache, pitämällä kehittäjän työkalut auki ja lataamalla sivun uudelleen. Tämä ohittaa selaimen tavallisen HTTP-välimuistin, ei CDN:n välimuistia. Jos sivustoa käsittelee service worker, tarkista sen tallentamat vastaukset erikseen. Katso Chromen Network-ohje.

Tilakoodi rajaa tutkintaa, mutta ei yksin kerro kaikkia syitä. MDN selittää HTTP-tilakoodit ja normaalin 304-validoinnin. Tarkista kuvan palvelimen DNS- ja HTTPS-asetukset, jos virhe koskee palvelinnimeä tai varmennetta.

Vastauksen pitäisi sisältää varsinaista kuvadataa ja sopiva Content-Type, esimerkiksi image/jpeg tai image/webp. Osoite, jonka pääte on .jpg, voi palauttaa HTML:ää, ja kuvapalvelu voi puolestaan aivan oikein toimittaa eri kuvamuodon samasta päätteestä huolimatta.

Jos osoitteen avaaminen lataa tiedoston

Tarkista sisältötyypin lisäksi Content-Disposition. Jos vastaus sisältää arvon Content-Disposition: attachment, suora avaaminen voi käynnistää tiedoston latauksen. Tämä ei yksin osoita, että kuva ei näkyisi sivulla: tutki myös upotetun kuvan pyyntö. Jos kopioit latauslinkin, käytä palveluntarjoajan tukemaa kuvien näyttämiseen tarkoitettua osoitetta. Katso Content-Disposition-ohje.

Selvitä valittu responsiivisen kuvan osoite

Napsauta ongelmallista kuvaa Chromessa tai Edgessä hiiren oikealla ja valitse Tarkista. Valitse Elements-paneelista varsinainen <img>, älä sen säiliötä tai <picture>-elementtiä. Avaa Console ja kirjoita tämä vain tietoja lukeva lauseke:

$0.currentSrc

$0 viittaa näissä kehittäjän työkaluissa viimeksi valittuun elementtiin. Tuloksena on valittu kuvaosoite, ei vahvistus onnistuneesta latauksesta. Tarkista osoite Network-paneelista. Console Utilities -ohje selittää muuttujan $0, ja MDN dokumentoi ominaisuuden currentSrc.

Selain voi valita tiedoston srcset-määritteestä tai ehdot täyttävästä <picture>-lähteestä. Toimiva src ei korjaa puuttuvaa valittua vaihtoehtoa. Picture-vararatkaisu riippuu lähteen ehdoista ja selaintuesta; siihen ei kannata luottaa valitun tiedoston 404-virheen korjaajana. Katso responsiivisen kuvan valinta ja picture-ohje.

Selvitä HTML:n ja CSS:n kuvapolut

Sivulla https://example.com/services/kitchens/, jos sivu ei aseta eri perusosoitetta, nämä kaksi lähdettä pyytävät eri sijainteja:

<img src="images/kitchen.jpg" alt="Valmis keittiö, jossa on tammikaapit">
<img src="/images/kitchen.jpg" alt="Valmis keittiö, jossa on tammikaapit">

Ensimmäinen pyytää osoitetta /services/kitchens/images/kitchen.jpg ja toinen osoitetta /images/kitchen.jpg samalla palvelimella. Valitse todellista julkaisupaikkaasi vastaava osoite, myös mahdollinen alihakemiston etuliite huomioiden. MDN selittää suhteelliset ja absoluuttiset polut. Ulkoisessa CSS-tiedostossa suhteellinen kuvaosoite ratkaistaan tyylitiedoston osoitteesta; katso CSS:n URL-ohje.

Tutki asettelu ja latauksen toteutus

Tarkista Elements → Computed -näkymästä kuva ja sen sisältävät ylätason elementit: display: none, visibility: hidden, nollaan asetettu peittävyys, kokoon painuneet mitat, leikkaus ja päälle tuleva elementti. Taustakuva ei anna tyhjälle säiliölle kuvan korkeutta. Korjaa aiheuttava sääntö muokkaimessa tai alkuperäisessä tyylitiedostossa; kehittäjän työkalujen tilapäinen muutos katoaa yleensä uudelleenlatauksessa. Katso Chromen CSS-tarkistusohje ja background-image-ohje.

Jos oikea osoite on vain data-src-määritteessä, tarkista kuvalähteen asettava skripti ja siihen liittyvät Console-virheet. Kun käytät selaimen omaa loading="lazy"-toimintoa, anna sopivat mitat ja varmista, että kuvalle on tilaa asettelussa jo ennen latausta. Selaimen lazy loading -opas selittää toiminnan.

Content Security Policy: tarkista, vastaako tarkoitettu kuvapalvelin direktiiviä img-src tai direktiiviä default-src, jos kuville ei ole omaa direktiiviä. Katso CSP:n kuvalähteitä koskeva ohje.

Sekasisältö: HTTP-kuvaviittaus HTTPS-sivulla voidaan päivittää HTTPS:ään tai estää käyttötavasta riippuen. Varmista, että kuva on saatavilla HTTPS:n kautta, ja päivitä viittaus. Katso MDN:n sekasisältöohje.

CORS ja upotuskäytännöt: tavallisen eri alkuperästä tulevan kuvan näyttäminen ja sen pikselien lukeminen canvas-elementillä vaativat eri asioita. Määritteen crossorigin lisääminen voi estää latauksen, jos kuvapalvelin ei palauta vaadittua CORS-vastausta. Tarkista kuvien CORS-ohje ja mahdollinen ilmoitettu Cross-Origin Resource Policy -rajoitus.

Usein kysytyt kysymykset

Miksi minä näen kuvan mutta vierailijat eivät?

Muokkain voi näyttää julkaisemattoman tai tilapäisen esikatselun, ja kirjautuneena sinulla voi olla oikeuksia, joita vierailijoilla ei ole. Testaa julkinen sivu ilman kirjautumista. Jos tiedoston on tarkoitus olla julkinen, lisää se sivuston julkiseen käyttöön tarkoitetun mediatoiminnon kautta. Muussa tapauksessa pyydä ylläpitäjää tarkistamaan kuvan näyttäminen kirjautuneille käyttäjille.

Miksi kuva avautuu uudessa välilehdessä mutta ei sivulla?

Vertaa ensin tarkkoja osoitteita: sivu saattaa pyytää eri kokoa. Jos osoitteet vastaavat toisiaan, tarkista upotetun kuvan pyynnöstä käyttöoikeus- ja selaimen käytäntövirheet. Jos kuvapyyntö onnistuu, jatka sivun näkyvyys- ja asetteluasetuksiin.

Todistaako 200-vastaus, että kuva toimii?

Ei. Tarkista vastauksen sisältö. Tilakoodilla 200 palautettu kirjautumissivu ei ole kuva. Jos vastaus sisältää oikean kuvan, jatka olennaisiin Console-ilmoituksiin ja kuvan näyttämiseen sivulla. Pelkkä vastauskoodi ei vahvista näkyvää lopputulosta.

Korjaako pienempi pikselikoko tai pakkaaminen rikkoutuneen kuvan?

Niistä on apua, jos sivustolle lähetettävä tiedosto ylittää ilmoitetun kokorajan tai liian suuri kuva siirtyy hitaasti. Väärä polku, puuttuva pikkukuva tai piilotettu osio tarvitsee toisenlaisen korjauksen. Selvitä tiedoston lähetysvirheestä tai kuvapyynnöstä ongelman laatu ennen tiedoston muuttamista.

Kannattaako tiedosto nimetä uudelleen tai sen pääte vaihtaa?

Nimeä tiedosto uudelleen, jos korjaat tiettyä polku- tai nimeämisongelmaa, ja päivitä vanhaa nimeä käyttävät viittaukset. Tiedostopäätteen .heic vaihtaminen päätteeksi .jpg ei muunna kuvaa. Käytä muunninta, jos todellista muotoa ei tueta, ja säilytä alkuperäinen.

Saavatko alt-teksti, robots.txt tai Search Console kuvan näkyviin?

Alt-teksti kuvailee kuvaa silloin, kun sitä ei näe; se ei nouda tiedostoa. Robots-ohjeet ja Search Console koskevat hakukonerobottien tekemää sivuston läpikäyntiä ja hakunäkyvyyttä. Kun kuva puuttuu vierailijan sivulta, tee ensin tiedoston, pyynnön ja asettelun tarkistukset.

Tiivistä tekoälylläChatGPT (avautuu uuteen välilehteen)Grok (avautuu uuteen välilehteen)Google (avautuu uuteen välilehteen)Perplexity (avautuu uuteen välilehteen)Claude (avautuu uuteen välilehteen)