Skip to content

Milloin käytetään JPG-, GIF-, PNG- ja SVG-muotoja

15 de heinäkuu de 2021

Yleisiä esimerkkejä kuvatyypeistä verkossa ovat GIF, JPG ja 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 ei ole yhtä monimutkainen kuin JPG-tiedostoissa, mutta tasaisilla värikuvilla ja tekstillä käytettynä se tuottaa hyvin pieniä tiedostokokoja. GIF-muoto ei sovi 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 valmiita web-toimitusta varten. Liian suuret kuvat voivat saada sivuston toimimaan hitaasti ja vaikuttamaan yleiseen suorituskykyyn. Tämän torjumiseksi nämä kuvat on optimoitava tasapainon löytämiseksi 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.

Alusta mla apa chicago Sinun viitteesi

Kyrnin, Jennifer. ”Milloin JPG-, GIF-, PNG- ja SVG-muotoja tulee käyttää.” ThoughtCo, toukokuu. 14, 2021, thinkco.com/when-to-use-certain-image-formats-3467831.
Kyrnin, Jennifer. (2021, 14. toukokuuta). Milloin käytetään JPG-, GIF-, PNG- ja SVG-muotoja. Haettu osoitteesta https://www.thoughtco.com/when-to-use-certain-image-formats-3467831
Kyrnin, Jennifer. ”Milloin JPG-, GIF-, PNG- ja SVG-muotoja tulee käyttää.” ThoughtCo. https://www.thoughtco.com/when-to-use-certain-image-formats-3467831 (käytetty 15. heinäkuuta 2021).