Web-sivuilla voi käyttää useita kuvamuotoja. Joitakin yleisiä esimerkkejä ovat GIF , JPG ja PNG . SVG-tiedostoja käytetään myös yleisesti verkkosivustoilla, mikä antaa web-suunnittelijoille uuden vaihtoehdon online-kuvaksi.
GIF-kuvat
Käytä GIF-tiedostoja kuvia, joissa on pieni, kiinteä määrä värejä. GIF-tiedostoja vähennetään aina enintään 256 yksilölliseen väreihin. GIF-tiedostojen puristusalgoritmi on vähemmän monimutkainen kuin JPG-tiedostoissa, mutta käytettäessä tasakuvioita ja tekstiä se tuottaa hyvin pieniä tiedostoja .
GIF-formaatti ei sovi valokuvakuviin tai kuvia, joilla on värejä. Koska GIF-muodossa on rajallinen määrä värejä, kaltevuudet ja valokuvat päätyvät banding- ja pikseliasetuksiin, kun ne tallennetaan GIF-tiedostona.
Lyhyesti sanottuna, voit käyttää GIF-kuvia vain yksinkertaisiin kuvia vain muutamalla väreillä, mutta voit myös käyttää PNG-tiedostoja (myös myöhemmin).
JPG-kuvat
Käytä JPG-kuvia valokuvien ja muiden kuvien kanssa, joissa on miljoonia värejä. Se käyttää monimutkaista puristusalgoritmia, jonka avulla voit luoda pienempää grafiikkaa menettelemällä kuvan laatua. Tätä kutsutaan "häviölliseksi" pakkaukseksi, koska osa kuvatiedoista katoaa, kun kuva on pakattu.
JPG-formaatti ei sovellu kuvioihin, joissa on tekstiä, suurikokoisia lohkoja ja yksinkertaisia muotoja, joilla on terävät reunat. Tämä johtuu siitä, että kun kuva on pakattu, teksti, väri tai viivat saattavat hämärtyä aiheuttaen kuvan, joka ei ole yhtä terävä kuin se tallennetaan toiseen muotoon.
JPG-kuvia käytetään parhaiten valokuvissa ja kuvissa, joissa on paljon luonnollisia värejä.
PNG-kuvat
PNG-muoto kehitettiin korvaamaan GIF-formaatti, kun ilmeni, että GIF-kuviin liittyisi rojaltimaksu. PNG-grafiikoilla on parempi pakkausnopeus kuin GIF-kuvilla, jotka johtavat pienempiin kuviin kuin samaan GIF-tiedostoon tallennetut tiedostot. PNG-tiedostot tarjoavat alfa-läpinäkyvyyttä, joten voit käyttää alueita kuvista, jotka ovat joko täysin läpinäkyviä tai käyttävät jopa alfa-läpinäkyvyyttä. Esimerkiksi pudotusvarjo käyttää useita läpinäkyvyystehosteita, ja se soveltuu PNG: lle (tai voit lopettaa meidät vain CSS-varjojen avulla).
PNG-kuvat, kuten GIF-kuvat, eivät sovi valokuville. GIF-tiedostojen avulla tallennettuja valokuvia voi käyttää oikeilla väreillä, mutta tämä voi aiheuttaa hyvin suuria kuvia. PNG-kuvia ei myöskään tueta vanhempien matkapuhelimien ja ominaisuuspuhelimien avulla.
Käytämme PNG: tä mille tahansa tiedostolle, joka vaatii läpinäkyvyyttä. Käytämme myös PNG-8: ta mille tahansa tiedostolle, joka soveltuu GIF: ksi, käyttämällä tätä PNG-muotoa.
SVG-kuvat
SVG on Scalable Vector Graphic. Toisin kuin rasteripohjaiset formaatit, jotka löytyvät JPG-, GIF- ja PNG-tiedostomuodoista, nämä tiedostot käyttävät vektoreita luomaan hyvin pieniä tiedostoja, jotka voidaan tehdä millä tahansa kokoisella ilman, että tiedostojen kokoa ei lisätä. Ne on luotu kuvien, kuten kuvakkeiden ja jopa logojen.
Kuvien valmistelu Web-toimitukselle
Riippumatta siitä, minkä kuvamallin käytät, ja sivustosi on varmasti käytössä useissa eri muodoissa kaikissa sen sivuissa, sinun on varmistettava, että kaikki sivuston kuvat ovat valmiita web-toimitukseen . Liian suuret kuvat voivat aiheuttaa sivuston toimivan hitaasti ja vaikuttaa yleiseen suorituskykyyn. Tämän torjumiseksi nämä kuvat on optimoitava, jotta löydettäisiin tasapaino korkealaatuisen ja pienimmän mahdollisen tiedostokoon välillä.
Oikeiden kuvamuotojen valinta on osa taistelua, mutta myös varmistamalla, että olet valmis kyseiset tiedostot, on seuraava askel tässä tärkeässä verkkotoimitusprosessissa.
Alkuperäinen artikkeli Jennifer Krynin. Toimittaja Jeremy Girard.