Canva-kuvien optimointi verkkosivuille: vienti ja pakkaus

Tarkista Canvan latausasetukset

Tee tavallinen lataus valitsemalla Jaa → Lataa. Valitse valokuvalle JPG tai tekstiä ja grafiikkaa sisältävälle kuvalle PNG, valitse sivu ja lataa tiedosto. Tarkista tallennetun kuvan leveys ja korkeus. Jos tililläsi ei ole koko- tai laatuasetuksia, voit muuttaa mittoja tai pakata ladatun kopion myöhemmin.

Jos Rajoita kokoa-asetus on käytettävissä, Canva tukee sitä tällä hetkellä yksisivuisessa JPG- tai PNG-viennissä. Canvan mukaan monimutkainen malli voi silti ylittää pyydetyn kokorajan. Tarkista tallennetun tiedoston koko itse.

Säilytä hyvälaatuinen Canvasta ladattu tiedosto ennen pienempien versioiden kokeilemista. JPG-laadun laskeminen Canvassa ja kuvan pakkaaminen tai muuntaminen uudelleen voi poistaa yksityiskohtia kahdesti. Tee jokainen vertailuversio samasta hyvälaatuisesta ladatusta tiedostosta.

Käytä verkkosivun kuvalle kuvamuotoa. PDF-tulostus on tarkoitettu painamiseen, ei tavallisen kuvan lisäämiseen verkkosivulle. Laadukkaammalta kuulostava vaihtoehto ei välttämättä ole sopivin. Tarkista kuvan mitat, ulkoasu ja sivun todellisuudessa lataama tiedosto.

Päätä, mihin Canva-kuva tulee

Koko sivun levyinen banneri, blogin pikkukuva ja pieni logo tarvitsevat erilaiset asetukset. Avaa käyttökohteena oleva sivu ennen vientiä ja tarkista kuvan näyttöleveys, muoto ja tausta. Neliönmuotoinen somekuva ei välttämättä sovi leveään sivuotsakkeeseen.

Kirjaa kolme asiaa: arvioitu näyttöleveys, läpinäkyvyyden tarve ja se, mitä lukijan pitää kuvasta erottaa. Bannerissa olennaista voi olla tuote ja lyhyt teksti, kaaviossa jokainen sana ja viiva. Näin arvioit tulosta myös muuten kuin tiedostokoon perusteella.

Jos kuva sisältää otsikon, kappaleen tai painikkeen, harkitse niiden lisäämistä suoraan verkkosivulle. PNG- tai JPG-kuvan sisällä oleva teksti on osa kuvaa, eikä se rivitty uudelleen näytön kaventuessa. Myös Canvassa piirretty painike on vain kuva, ellei siihen lisätä toimivaa linkkiä sivustolla. Käytä kuvaa kuvituksena ja lisää tärkeät tekstit ja painikkeet sivulle aina kun mahdollista.

Valitse kuvalle JPG, PNG tai SVG

Canvasta voi viedä JPG-, PNG- ja SVG-tiedostoja eri käyttötarkoituksiin. Tarkista ajantasaiset vaihtoehdot Canvan tiedostomuotojen ohjeesta. Taulukko auttaa omien tiedostojen vertailussa, mutta mikään muoto ei ole aina paras.

JPG pienentää tiedostoa poistamalla osan kuvan yksityiskohdista. Tätä kutsutaan häviölliseksi pakkaukseksi. Se sopii usein valokuville, mutta voi pehmentää reunoja tai aiheuttaa jälkiä kirjainten ympärille. PNG välttää tällaiset pakkausjäljet, mutta PNG-valokuva voi viedä huomattavasti enemmän tilaa. Kumpikaan muoto ei korjaa alkuperäisen kuvan sumeutta.

SVG kuvaa muodot ja viivat niin, että ne säilyvät terävinä suurennettaessa. SVG:n sisään lisätty valokuva ei kuitenkaan saa uusia yksityiskohtia, ja valokuvia sisältävä tiedosto voi jäädä suureksi. Pixilon pakkaaja ei tue SVG:tä. Jos sivustosi hyväksyy SVG-tiedoston ja kuva näyttää oikealta, voit käyttää sitä sellaisenaan.

Lataamisen jälkeen voit kokeilla myös WebP-versiota. Käytä PNG-grafiikalle PNG → WebP -muunninta ja JPG-valokuvalle JPG → WebP -muunninta. Vertaa tulosta Canvasta ladattuun kuvaan. Jos tiedosto kasvaa tai teksti näyttää huonommalta, säilytä alkuperäinen ladattu tiedosto. Eri muotojen käyttökohteista kertoo verkkokuvien kuvamuoto-opas.

Valitse sivulle sopivat pikselimitat

Tarkista, kuinka leveänä kuva näkyy sivulla enimmillään. Jos banneri näkyy 800 pikselin levyisenä, vertaa 800 ja 1600 pikselin levyisiä versioita puhelimen tai kannettavan tiheäpikselisellä näytöllä. Lisäpikselit voivat tuoda esiin enemmän yksityiskohtia, mutta suuremman tiedoston lataaminen kuluttaa enemmän dataa. Vertaa vaihtoehtoja sen sijaan, että kaksinkertaistaisit jokaisen kuvan mitat automaattisesti.

Säilytä leveyden ja korkeuden suhde eli kuvasuhde. 800 × 450 on 16:9-muotoinen alue, johon 1600 × 900 sopii samalla suhteella. 1600 × 1600 -neliö tarvitsee rajauksen tai erilaisen asettelun. Jos otsake on puhelimella paljon korkeampi, muokkaa sommittelua, jotta tärkeää sisältöä ei leikkaannu sivuilta.

Sivusto voi tarjota puhelimelle pienemmän kuvatiedoston ja suurelle näytölle suuremman. Tällaisia kuvia kutsutaan responsiivisiksi. Yhden suuren kuvan lataaminen sivustolle ei vielä riitä: sivuston pitää luoda tai tarjota eri versiot ja valita ladattava tiedosto. Tarkista sivustotyökalusi toiminta ennen kuin teet itse paljon kopioita. Lisätietoa saat responsiivisten kuvien oppaasta ja MDN:n responsiivisten kuvien ohjeesta.

Tarkista ladatun tiedoston leveys ja korkeus, älä vain Canva-editorissa näkyviä mittoja. Jos latauskokoa ei voi muuttaa, aloita lähellä tarvittavaa kokoa olevasta mallista ja tarkista tulos. Liian suurta kuvaa voi pienentää Pixilon koonmuutostyökalulla. Pienen JPG- tai PNG-kuvan suurentaminen ei palauta puuttuvia yksityiskohtia.

Lataa grafiikka läpinäkyvällä taustalla

Osa latausasetuksista, kuten läpinäkyvän PNG:n tallennus, vaatii niitä tukevan Canva-tilauksen. Jos valinta puuttuu, katso linkitetystä ohjeesta tilisi nykyiset vaihtoehdot. Tavallisen JPG- tai PNG-latauksen voi silti optimoida.

Kuvankatseluohjelma voi näyttää läpinäkyvän kuvan valkoisella taustalla. Valkoinen esikatselu ei siis yksin kerro, onko tausta läpinäkyvä. Kokeile ladattua kuvaa sekä vaalealla että tummalla taustalla ja tarkista kohteen reunat ja varjot.

JPG:n muuntaminen PNG:ksi ei poista taustaa. Jos mallin valokuvassa on valkoinen suorakulmio kohteen takana, PNG:n valitseminen ei hävitä sitä. Poista ei-toivottu tausta mallista ennen lataamista.

Jos kuva on aina saman yksivärisen taustan päällä, läpinäkyvyyttä ei välttämättä tarvita. Säilytä läpinäkyvä versio erikseen, jos aiot käyttää sitä muualla. Taustan alkuperän selvittämisessä auttaa mustien ja valkoisten taustojen opas: onko tausta tiedostossa vai pelkästään kuvaa näyttävässä sovelluksessa?

läpinäkyvän taustan vientiohje

Pakkaa Canva-kuva Pixilolla

Kun mitat ja sommittelu ovat sopivat, avaa kuvanpakkaaja. Voit lisätä enintään 20 JPG-, PNG- tai WebP-kuvaa, joista kukin on enintään 25 Mt. Pixilo käsittelee kuvat yksitellen laitteellasi ja säilyttää niiden muodon, leveyden ja korkeuden. Yksittäisen kuvan pisin sivu saa olla enintään 8000 pikseliä ja kokonaiskoko enintään 32 miljoonaa pikseliä. Esimerkiksi 8000 × 4000 täyttää molemmat rajat, mutta 8000 × 8000 ei.

PNG-pakkaus on häviötöntä: kuvan pikselit ja värit säilyvät ennallaan. Canvan jo tehokkaasti pakkaama PNG saattaa pienentyä vain vähän. JPG:n ja WebP:n pakkaus voi muuttaa pieniä yksityiskohtia, joten tarkista tulos. Jos uusi tiedosto ei ole pienempi, Pixilo säilyttää alkuperäisen.

Kuvamuodon vaihtamiseen tarvitset muuntimen. Etusivun pakkaaja pitää PNG:n PNG:nä. PNG → WebP- ja JPG → WebP -työkaluissa voit säätää laatua kuvan lisäämisen jälkeen ja ottaa asetuksen käyttöön valitsemalla Päivitä tulokset. Jos kuvan leveys tai korkeus ylittää 4000 pikseliä, nämä muuntimet pienentävät sen suhteessa niin, että pisin sivu on 4000 pikseliä. Tarkista ladatun kuvan mitat, jos alkuperäinen malli on hyvin suuri.

Jos lomakkeessa on tiukka tiedostokokoraja, kokeile työkalua Pakkaa kuva tavoitekokoon. Valitse lomakkeen hyväksymä kuvamuoto ja tarkista myös vähimmäisleveys ja -korkeus. Hyvin pientä tiedostoa ei aina voi tehdä tekstin tai yksityiskohtien selkeyttä heikentämättä. Huomioi kaikki lomakkeen vaatimukset, älä pelkästään tiedostokokoa.

Esimerkki: valmistele Canva-banneri artikkeliin

Oletetaan, että artikkelisi banneri näkyy sivulla enintään 800 × 450 pikselin kokoisena. Mallissa on valokuva ja lyhyt teksti. Mitat ovat suunnitteluesimerkkejä, eivät pakkaustestin tuloksia.

1. Valmistele sommittelu. Käytä 16:9-muotoa ja pidä pääkohde näkyvissä sekä tietokoneella että puhelimella. Lisää artikkelin otsikko sivulle sen sijaan, että toistaisit pitkän otsikon kuvan sisällä.
2. Lataa kaksi versiota. Jos mahdollista, vie samasta mallista 1600 × 900 -kokoinen JPG ja PNG. Avaa molemmat ja tarkista lyhyen tekstin terävyys. Tee kumpikin vienti Canva-mallista, älä jo pakatusta kopiosta.
3. Vertaa pakkausta. Kokeile etusivun pakkaajaa valitsemallesi ladatulle tiedostolle. Kokeile PNG:stä myös WebP-kopiota, jos sivustosi tukee sitä. Anna tiedostoille eri nimet, jotta vertaat oikeita versioita.
4. Tarkista kuva tietokoneella ja puhelimella. Katso banneria 800 × 450 -koossa ja puhelimella käytettävällä leveydellä. Tekstin pitää olla luettavaa ilman suurentamista. Jos se on liian pientä, yksinkertaista mallia tai siirrä teksti sivulle sen sijaan, että lisäisit pakkausta.
5. Julkaise valitsemasi versio. Tarkista sivuston todellisuudessa lataama tiedosto, sen koko ja rajaus. Jos sivusto luo pienempiä versioita automaattisesti, tarkista myös ne ennen muiden kuvien päivittämistä.

Kirjaa kyseiseen paikkaan sopineet mitat ja kuvamuoto. Käytä niitä lähtökohtana samankaltaisille kuville, mutta tarkista jokainen tulos. Pelkistetty kuvitus ja yksityiskohtainen valokuva voivat vaatia eri asetukset, vaikka mitat olisivat samat.

Korjaa sumea teksti tai yllättävän suuri tiedosto

Ladattu malli on jo valmiiksi sumea

Avaa Canvasta ladattu kuva ennen pakkaamista. Jos se on jo sumea, palaa malliin ja tarkista alkuperäinen valokuva, tekstin koko ja ladatun kuvan mitat. Tavallisia syitä käsitellään Canvan sumeiden latausten ohjeessa. Pakkaaminen ei korjaa epätarkkaa valokuvaa tai liian pieneksi tallennetun kuvan tekstiä.

Tiedosto on omalla laitteella terävä, mutta sivustolla sumea

Sivusto voi venyttää pientä pikkukuvaa, pakata kuvan uudelleen tai näyttää vanhaa tallennettua versiota. Avaa julkaistun sivun kuva uuteen välilehteen, jos selain sallii sen, ja tarkista mitat. Tarvittaessa voit selvittää ladatun tiedoston selaimen kehittäjätyökaluilla. Suurempi Canva-vienti ei auta, jos sivu lataa edelleen pienen pikkukuvan.

PNG pienenee tuskin lainkaan

Kuvasta voi poistaa vain rajallisesti tietoa muuttamatta sen ulkoasua. Valokuvaa tai tarkkaa tekstuuria sisältävä PNG voi jäädä suureksi, etenkin jos se on jo hyvin pakattu. Kokeile JPG:tä, jos läpinäkyvyyttä ei tarvita. Myös WebP tukee läpinäkyvyyttä, mutta tarkista teksti ja reunat muunnoksen jälkeen. Säilytä PNG, jos se näyttää paremmalta, tai pienennä mittoja vain, jos kuva pysyy selkeänä.

Kuva näyttää huonommalta kahden muunnoksen jälkeen

Palaa hyvälaatuiseen Canvasta ladattuun tiedostoon. Vältä toistuvaa JPG → WebP → JPG -muuntamista. Jokainen häviöllinen tallennus voi heikentää kuvaa lisää, eikä viimeinen muunnos peru aiempaa. Tee kaikki vertailuversiot samasta lähteestä ja vertaa niitä suoraan siihen.

Tarkista julkaistu sivu, älä vain tiedostoa

• Tarkista ladattu kuva. Varmista, että sivulla näkyy uusi tiedosto tai sivuston siitä tekemä sopiva versio, ei vanha tai tarpeettoman suuri kopio.
• Tarkista mobiilirajaus. Pidä kohde näkyvissä äläkä sijoita tärkeitä tekstejä reunoille, jotka asettelu voi piilottaa.
• Lisää tärkeät tiedot sivun tekstiksi. Kävijän ei pitäisi joutua suurentamaan kuvaa nähdäkseen ainoan hinnan, ohjeen tai toimintakehotuksen.
• Kuvaile merkitykselliset kuvat. Lisää alt-teksti eli lyhyt kuvaus ihmisille, jotka eivät näe kuvaa. Kerro, mikä kuvassa on olennaista tällä sivulla. Pelkille koristekuville jätetään yleensä tyhjä alt-teksti. Noudata Googlen kuvien hakukoneoptimoinnin ohjetta, mutta älä täytä kuvauksia hakusanoilla.
• Tarkista sivun latautuminen. Pienempi tiedosto auttaa, mutta myös lataamisen alkamisajankohta vaikuttaa. Lue opas kuvista ja Core Web Vitals -mittareista, jos sivun pääkuva ilmestyy edelleen hitaasti.

Usein kysytyt kysymykset

Kannattaako Canva-kuvat aina ladata PNG:nä?

Ei. Kokeile PNG:tä läpinäkyvälle grafiikalle ja tarkkaa tekstiä sisältäville kuville. JPG sopii valokuviin, joissa ei tarvita läpinäkyvyyttä. Vertaa tiedostoja niiden todellisessa näyttökoossa sen sijaan, että käyttäisit samaa muotoa kaikille kuville.

Voinko optimoida Canva-kuvia ilman maksullisia vientiasetuksia?

Kyllä. Lataa saatavilla oleva JPG tai PNG, tarkista mitat ja muuta kopion kokoa, pakkaa se tai muunna se Pixilolla. Tämä ei avaa Canvan maksullisia ominaisuuksia eikä luo läpinäkyvyyttä kuvaan, jossa sitä ei ole.

Parantaako kaksinkertainen vientikoko aina kuvaa?

Ei. Suurempi vienti voi näyttää terävämmältä tiheäpikselisellä näytöllä, mutta se ei korjaa malliin lisättyä pientä tai sumeaa valokuvaa. Vertaa versioita omalla sivullasi ja käytä suurempaa vain, jos siitä on näkyvää hyötyä.

Tarvitsevatko verkkokuvat tietyn DPI-asetuksen?

Keskity kuvan pikselileveyteen ja -korkeuteen sekä sen näyttökokoon sivulla. Pelkkä DPI-luvun muuttaminen ei lisää yksityiskohtia. Verkko- ja painokuvien eroja käsittelee DPI-, PPI- ja pikseliopas.

Takaako WebP paremmat hakusijoitukset?

Ei. Kuvamuodon vaihtaminen ei takaa parempaa sijoitusta. Hyödyllinen kuva, selkeä ympäröivä sisältö, tarkoituksenmukaiset kuvaukset ja nopeasti toimiva sivu ovat tärkeämpiä kuin tiedostopäätteen valitseminen sen itsensä vuoksi.