Kuvien jakaminen

Miksi kuva kääntyy kyljelleen verkkosivulle ladattaessa? Näin korjaat suunnan

Kääntyykö kuva kyljelleen verkkosivulle ladattaessa? Lue, mistä se johtuu, tallenna kuva oikein päin ja selvitä pikkukuvien suuntaongelmat.

Tekijä: Pixilo · Päivitetty

Korjaa kuvan suunta kuudessa vaiheessa

Säilytä alkuperäinen ja tee muutokset jaettavaan kopioon. Pixilon kääntötyökaluun voi valita yhden JPG-, PNG- tai WebP-kuvan, jonka koko on enintään 25 Mt. Kuvan enimmäismitat ovat 8 000 pikseliä kummallakin sivulla ja yhteensä 32 miljoonaa pikseliä. Esimerkiksi 48 megapikselin alkuperäiskuva ylittää pikselirajan, vaikka tiedostokoko olisi pieni. Jos jokin rajoista ylittyy, tallenna ensin pienempi kopio kuvankäsittelyohjelmalla. Muunna HEIC-kuva ensin työkalulla HEIC → JPG ja tarkista muunnettu tiedosto.

  1. Avaa työkalu Kuvan peilaus ja kääntö ja valitse tuettu kuvatiedosto.
  2. Tarkista esikatselu. Jos kuva näkyy jo oikein päin, älä käännä sitä. Selain on saattanut jo tulkita kuvan suuntatiedon. Kun lataat uuden kopion, esikatselussa näkyvä suunta tallentuu kuvan pikseleihin.
  3. Käännä vain tarvittaessa. Valitse Käännä vasemmalle 90° tai Käännä oikealle 90°. Jos kuva on ylösalaisin, käännä kahdesti. Älä valitse peilausta, ellei kuva ole myös peilikuvana.
  4. Valitse Lataa PNG. Pixilo piirtää kuvan uudelleen selaimessasi ja tallentaa siitä uuden kopion. Alkuperäinen säilyy ennallaan, eikä kuvaa lähetetä Pixilon palvelimelle.
  5. Valmistele verkkosivulle ladattava tiedosto. PNG-muotoon tallennettu valokuva voi olla paljon alkuperäistä JPG:tä suurempi. Jos sivusto edellyttää JPG-muotoa, käytä työkalua PNG → JPG. Jos sivustolla on tiedostokokoraja, käytä sen jälkeen työkalua Pakkaa kuva tavoitekokoon ja tarkista, että lopputulos alittaa rajan.
  6. Avaa lopullinen tiedosto ja lataa juuri se verkkosivulle. Tarkista suunta, kuvanlaatu ja tiedostokoko. Anna kopiolle erottuva nimi, esimerkiksi pystykuva-oikeinpain.jpg, ja tarkista verkkosivulta sekä pikkukuva että suurempi näkymä.

Jos lopullinen tiedosto on oikein päin mutta sivusto kääntää sen silti, jätä tiedosto ennalleen ja jatka alla oleviin tarkistuksiin. Oikein päin olevan kopion kääntäminen uudelleen ei korjaa sivuston kuvankäsittelyä.

Keltainen kukka näkyy yhdessä selainikkunassa kyljellään ja toisessa oikein päin. Ikkunoiden välissä on kiertoa kuvaava nuoli.

Miksi kuva näkyy puhelimessa oikein mutta verkossa kyljellään?

Puhelinkuvan pikselit voivat olla tallessa kyljellään, ja mukana voi olla ohje siitä, missä suunnassa sovelluksen pitää näyttää kuva. Monissa JPG-kuvissa tätä ohjetta kutsutaan nimellä EXIF-suuntatieto. EXIF on metadataa eli kuvaan tallennettua lisätietoa.

Puhelimen galleria voi noudattaa suuntatietoa, mutta sivuston kuvankäsittely saattaa poistaa sen ennen pikselien kääntämistä. Virhe voi syntyä myös saman käännön tekemisestä kahdesti. Nykyiset selaimet yleensä huomioivat kuvan suuntatiedon oletuksena, joten ongelma ei ole yksinkertaisesti se, että selain ohittaisi sen. Lue lisää MDN:n kuvan suuntaa käsittelevästä ohjeesta.

Kun oikein päin näkyvä kuva tallennetaan uutena kuvana, suunta tulee osaksi sen pikseleitä. Pelkkä suuntatiedon poistaminen ei tee tätä, vaan kuva voi jäädä kyljelleen. Kuvan muita lisätietoja käsitellään kuvien metatieto-oppaassa.

Selvitä, missä vaiheessa suunta muuttuu

Vertaa lopullista tallentamaasi tiedostoa verkkosivulla näkyvään kuvaan. Kuvakirjaston esikatselu, tallennettu kopio ja sivuston pikkukuva voivat olla eri tiedostoja.

Valitse seuraava tarkistus sen mukaan, mitä näet
HavaintoSeuraava vaihe
Lopullinen tiedosto on jo valmiiksi kyljelläänPalaa kääntötyökaluun, korjaa esikatselun suunta ja tallenna uusi kopio
Tiedosto on oikein päin, mutta kaikki sivuston kuvakoot ovat kyljelläänVarmista valitsemasi tiedosto ja ota sitten yhteyttä sivuston ylläpitäjään
Suurempi kuva on oikein päin, mutta pikkukuva on kyljelläänPyydä ylläpitäjää tarkistamaan luodut pikkukuvat ja tallessa olevat vanhat versiot
Sama kuva näkyy yksin avattuna oikein mutta sivulla kyljelläänTarkista sivueditorin kiertoasetukset tai pyydä ylläpitäjää tarkistamaan sivun tyylit

Napsauta tietokoneella sivuston kuvaa hiiren kakkospainikkeella ja etsi valinta Avaa kuva uudessa välilehdessä. Vertaa näin avattua kuvaa sivulla näkyvään. Paina puhelimessa kuvaa pitkään ja etsi avaamis- tai tallennusvalinta. Valikkojen nimet vaihtelevat, eivätkä kaikki sivustot tarjoa näitä toimintoja. Jos et saa kuvaa avattua erikseen, lähetä ylläpitäjälle sivun osoite ja kuvakaappaus ongelmasta.

Pikkukuva voi käyttää eri tiedostoa kuin suurempi näkymä. Myös puhelin- ja työpöytänäkymissä voidaan käyttää eri kopioita, kuten responsiivisten kuvien oppaassakerrotaan. Kerro ongelmasta ilmoittaessasi, missä näkymässä suunta on väärä.

Jos korjattu kuva kääntyy silti verkkosivulla

  1. Tarkista valitsemasi tiedosto. Lataa selvästi nimeämäsi korjattu kopio uutena kuvana. Varmista, että sivu käyttää uutta kuvaa vanhan kuvakirjaston kohteen sijaan.
  2. Tarkista sivu uudelleen ladattuna. Päivitä sivu ja avaa se mahdollisuuksien mukaan yksityisessä selainikkunassa. Näin voit huomata paikallisesti näkyvän vanhan version, mutta sivuston omat tallennetut kopiot eivät poistu.
  3. Kerro tarkasti, missä ero näkyy. Lähetä ylläpitäjälle korjattu tiedosto, sivun osoite ja kuvakaappaus. Kerro, onko kyljellään pikkukuva, suurempi näkymä vai molemmat.

Jos ylläpidät sivustoa itse, tarkista sivueditorin kuvan kiertoasetukset. Jos ladattu alkuperäinen on oikein mutta jokin siitä luotu kuvakoko väärin päin, selvitä ensin kuvankäsittelyn toiminta. Luo vasta sen jälkeen kyseinen kuvakoko uudelleen ja tyhjennä siihen liittyvä sivuston tai kuvajakelun välimuisti. Tavallinen sivuston kävijä ei yleensä voi tehdä näitä toimia.

Tekninen huomio sivuston ylläpitäjälle

Lue alkuperäinen suuntatieto, sovella sitä pikseleihin kerran ja poista tai nollaa vanha suuntatieto ennen muiden kuvaversioiden luomista. Jos vanha ohje jää voimaan pikselien kääntämisen jälkeen, kuva voi kääntyä toistamiseen. Sharpin autoOrient-ohje kuvaa tämän toiminnon, myös peilattujen suuntien osalta.

Jos täsmälleen sama sivustolta ladattu kuva näkyy omassa välilehdessään oikein mutta sivulla käännettynä, tarkista myös sivun kiertoon vaikuttavat tyylit. Älä lisää kaikille kuville yhteistä 90 asteen korjausta.

Tarvitseeko kuva kääntää vai peilata?

Kääntö kiertää koko kuvaa. Käytä sitä, kun ihmisen pää osoittaa sivulle tai kuva on ylösalaisin. Peilaus tekee kuvasta peilikuvan. Vaakasuuntainen peilaus vaihtaa vasemman ja oikean puolen, jolloin esimerkiksi takaperin näkyvä teksti kääntyy luettavaksi. Tarkista kyltti tai muu tuttu yksityiskohta ennen peilausta, etenkin selfieissä.

Neljänneskäännös vaihtaa leveyden ja korkeuden keskenään rajaamatta kuvaa. Hieman vino horisontti vaatii suoristustyökalun, jolla kulmaa voi säätää pienemmin askelin. Pixilon kääntötyökalu toimii 90 asteen askelin.

Usein kysytyt kysymykset

Pitääkö kuvaa kääntää, jos se näkyy Pixilossa jo oikein päin?

Ei. Jätä kierto ennalleen ja lataa PNG. Selain piirtää oikein näkyvän kuvan uuteen tiedostoon. Tarkista ladattu kopio ja kohdesivusto sen sijaan, että lisäisit tarpeettoman käännön.

Korjaako PNG-muunnos kuvan suunnan aina?

Ei. Muunnoksen pitää tallentaa kuva haluttuun suuntaan. Tiedostopäätteen vaihtaminen ei muunna eikä käännä kuvaa. PNG voi myös olla liian suuri tai kohdesivustolle sopimaton, joten tarkista sivuston vaatimukset.

Heikkeneekö kuvanlaatu?

PNG-tallennus välttää uuden häviöllisen JPEG-pakkauksen, mutta selaimessa uudelleen tallentaminen ei takaa kaikkien alkuperäisten väriprofiilien, metatietojen tai HDR-ominaisuuksien säilymistä. JPG-muunnoksessa kuva pakataan häviöllisesti, joten tarkista yksityiskohdat ja vältä toistuvia JPG-tallennuksia. Säilytä alkuperäinen arkistointia varten.

Voinko korjata koko kansion kerralla?

Pixilon kääntötyökalu käsittelee yhden kuvan kerrallaan. Kansiossa voi olla eri suuntiin olevia ja peilattuja kuvia, joten tarkista jokainen esikatselu sen sijaan, että kääntäisit kaikkia samalla tavalla.

Tee jaettava kopio oikein päin

Tarkista esikatselu, tallenna korjattu kopio ja tarkista vielä kuva kohdesivustolla.

Korjaa kuvan suuntaTarvitsetko JPG:n? Muunna tallennettu PNG →