Yleisiä esimerkkejä kuvatyypeistä verkossa ovat GIF, JPGja PNG. SVG-tiedostot. Nämä eri muodot tarjoavat web-suunnittelijoille useita vaihtoehtoja verkkosivuston visuaalisen optimoimiseksi.
GIF-kuvat
Käytä GIF-tiedostoja kuville, joissa on pieni, kiinteä määrä värejä. GIF-tiedostot pienennetään aina korkeintaan 256 yksilölliseen väriin. GIF-tiedostojen pakkausalgoritmi on vähemmän monimutkainen kuin JPG-tiedostoissa, mutta tasaisilla värikuvilla ja tekstillä käytettynä se tuottaa erittäin pienet tiedostokoot.
GIF-muoto ei sovellu valokuviin tai liukuvärisillä kuvilla. Koska GIF-muodossa on rajoitettu määrä värejä, liukuvärit ja valokuvat johtavat kaistaleisiin ja pikselöitymiseen, kun ne tallennetaan GIF-tiedostona.
JPG-kuvat
Käytä JPG-kuvia valokuviin ja muihin kuviin, joissa on miljoonia värejä. Se käyttää monimutkaista pakkausalgoritmia, jonka avulla voit luoda pienempiä grafiikoita menettämällä osan kuvan laadusta. Tätä kutsutaan "häviölliseksi" pakkaukseksi, koska osa kuvan tiedoista menetetään, kun kuvaa pakataan.
JPG-muoto ei sovellu kuville, joissa on tekstiä, suuria yksivärisiä lohkoja ja yksinkertaisia muotoja, joissa on terävät reunat. Tämä johtuu siitä, että kun kuva pakataan, teksti, väri tai viivat voivat hämärtyä, jolloin kuva ei ole yhtä terävä kuin se tallennettaisiin toisessa muodossa.
PNG-kuvat
PNG-muoto kehitettiin korvaamaan GIF-muoto, kun näytti siltä, että GIF-kuvista peritään rojaltimaksu. PNG-grafiikoilla on parempi pakkausaste kuin GIF-kuvilla, mikä johtaa pienempiin kuviin kuin sama tiedosto, joka on tallennettu GIF-tiedostona. PNG-tiedostot tarjoavat alfa-läpinäkyvyyden, mikä tarkoittaa, että kuvissasi voi olla joko täysin läpinäkyviä alueita tai jopa käyttää alfa-läpinäkyvyyttä. Esimerkiksi varjo käyttää useita läpinäkyvyystehosteita ja sopisi PNG: lle (tai voit vain lopettaa meidät käyttämään CSS-varjoja sen sijaan).
PNG-kuvat, kuten GIF-tiedostot, eivät sovellu hyvin valokuviin. On mahdollista kiertää banding-ongelma, joka vaikuttaa GIF-tiedostoina tallennettuihin valokuviin aidoilla väreillä, mutta tämä voi johtaa erittäin suuriin kuviin. Vanhemmat matkapuhelimet eivät myöskään tue PNG-kuvia hyvin.
SVG-kuvat
SVG on lyhenne sanoista Scalable Vector Graphic. Toisin kuin JPG-, GIF- ja PNG-tiedostoissa olevat rasteripohjaiset tiedostomuodot, nämä tiedostot luovat vektorien avulla hyvin pieniä tiedostoja, jotka voidaan renderoida missä tahansa koossa ilman, että laadun heikkeneminen tiedostokoon kasvaessa. Ne on luotu kuviin, kuten kuvakkeisiin ja jopa logoihin.
Kuvien valmistelu verkkojakelua varten
Huolimatta siitä, mitä kuvamuotoa käytät, varmista, että kaikki kyseisen sivuston kuvat ovat valmis web-toimitukseen. Liian suuret kuvat voivat saada sivuston toimimaan hitaasti ja vaikuttamaan yleiseen suorituskykyyn. Tämän torjumiseksi nämä kuvat on optimoitava löytää tasapaino laadukkaan ja pienimmän mahdollisen tiedostokoon välillä kyseisellä laatutasolla.
Oikean kuvamuodon valinta on osa taistelua, mutta myös varmista, että olet valmistellut kyseiset tiedostot, on seuraava vaihe tässä tärkeässä web-toimitusprosessissa.