JPEG-optimointi Web - Ultimate -oppaalle

Kuvien pakkaus löytyy jokaisesta alkuperäisestä mediamuodosta. GIF: n, PNG: n ja JPEG: n välinen ero on kuitenkin millä tavalla tiedot pakataan ja näytetään näytöllä. On niin paljon vinkkejä, joilla voit luoda hyviä kuvamateriaaleja, jotka julkaistaan ​​verkossa, ja monet suunnittelijat eivät vieläkään ymmärrä joitakin perustekijöitä.

Tässä oppaassa haluaisin jakaa muutamia ideoita asianmukaisesta JPEG-pakkauksesta. Haluat optimoida kuvasi pienentämällä verkkosivujen latausaikoja ja samalla kunnollista laatutasoa. Kyse on tasapainon löytämisestä tiedostojen koon ja näytön kuvauksen välillä. Suunnittelijoille ei ole täydellinen ratkaisu. Se vie jonkin verran alustavaa käytäntöä, mutta kun ymmärrät JPEG-pakkauksen, siitä tulee tulevaisuudessa paljon helpompi kehittää sivustoja.

Vältä aina säästämistä 100%: ssa

Sinun pitäisi melkein koskaan tallentaa JPEG-kuviasi 100-prosenttisesti. Tämä tulee ei tuottaa mahdollisimman paljon “optimoitu” kuva. Se laskee itse optimointirajan kaavan avulla, joka kasvattaa tiedostokokojasi kohtuuttomasti. Jopa 90%: n tai 95%: n laatuun nähden näet tiedoston kokoa huomattavasti.

Useimpia kertoja suositellaan tallentamaan paljon alle 90% laadukkaita kuvia. Jos avaat Photoshopissa Web for Save for Web -valintaikkunan, huomaat, että ne tarjoavat esiasetettuja arvoja, joista voit valita. Lisäsin alla olevat mahdolliset JPEG-arvot - huomaa luontaiset nimitysjärjestelyt.

• Matala - 10%
• keskikokoinen - 30%
• Korkea - 60%
• Erittäin korkea - 80%
• Maksimi - 100%

Jopa Adobe Photoshopissa 60%: n kuvanlaatu katsotaan "korkeaksi". Monet web-kehittäjät takaavat 50–70%: n välisen turvallisuuden.

Kuinka matala on liian alhainen?

Optimointiin valitut arvot ovat täysin riippuvaisia ​​projektista. Sinun täytyy pohtia, minkä tyyppiset grafiikat tuottavat korkeimmat tiedostokoot - nämä ovat niitä, jotka todella tarvitsevat pakkausta.

Väitän, että alle 30% olet todella pilkkomassa peruslaadun. Muut suunnittelijat vannovat 50% a “raja” optimaalisen arvon vähentämiseksi. Paras neuvoja tässä on vain kokeilla erilaisia ​​asetuksia ja nähdä, mikä näyttää parhaiten! Et voi mennä vikaan muutaman testitutkimuksen avulla, jotka optimoivat webin JPEG-kuvia.

Pakkausasetukset

Meidän on ensin selvitettävä kaksi termiä "pakkaus" ja "laatu", jotka ovat toisiaan päinvastaisia. Tämä tarkoittaa, että jos tallennat JPEG-koodin 40%: n pakkauksessa, saat 60%: n laadun (verrattuna enintään 100%: n laatuun ilman pakkausta).

Nämä ovat kaikkein perustavimpia vaihtoehtoja hyödyntää - ja niiden pitäisi olla riittäviä verkkoon tallennettaessa. Yleiset käyttäjät eivät pääse paljon syvempiin mukautuksiin. Näytteenotto tulee monimutkaisempiin asioihin, joissa muunnetaan RGB-kuvat YCbCr: ksi (Luminance, Chroma Blue, Chroma Red).

(Image Source: Kara Monroe)

luminanssi tai kirkkauden asetus pidetään aina korkeimmalla mahdollisella arvolla JPEG-pakkauksessa. Kun tämä kirkkausarvo on erillisellä kanavalla, on helpompi optimoida punaisen ja sinisen väriarvot. Tämä tunnetaan myös nimellä näytteenotto. Suunnittelijat, jotka ovat kiinnostuneita saamaan kätensä likaisiksi, rakastavat lukea lisää tästä pakkausalgoritmista. Tutustu tähän hienoon blogipostiin, joka koskee erityisesti JPEG-kuvia.

(Image Source: Derek Hatfield)

Mielenkiintoisena sivuhuomautuksena Adobe Photoshop ei aina käytä pakkauskoordinointia. Kaikki “Tallenna Webiin” -valintaikkunassa käytetään vain kroma-alinäytettä alle 50%: n laatua.

Web Media eroaa toisistaan

Verkko on myös täynnä erilaisia ​​kuvamateriaaleja. Voit saada valokuvia, kuvakkeita, painikkeita, merkkejä ja muita grafiikoita. Mutta on huomattava, että laadun vertailu painikkeen ja valokuvan välillä ei ole järkevää.

Kun käytät valokuvia tai yksityiskohtaisia ​​kuvia, harkitse yhdistämistä erilliseen, pienempään pakattuun JPEG-tiedostoon. Sitten voit asentaa sivustosi pienoiskuvat, joilla on suurempi pakkaussuhde ja paljon pienemmät tiedostokoot. Ainoa haittapuoli on, että sinun on annettava kaksi kuvasarjaa media galleriaan. Huomaa monista eri grafiikoista, jotka olet ommellut koko sivustossa, ja harkitse optimointitekniikoita jokaiselle erikseen.

Grafiikkamallin suunnittelu

Haluat olla järjestetty tiedostojärjestelmä, joka on tarpeeksi helppoa, jotta se voisi lähteä läpi. Jotkut ylläpitäjät valitsevat isännöivät valokuvia muualla verkossa - kuten Flickrissä tai Picasassa. Kuitenkin haluat silti käyttää joitakin pakkaustyökaluja pienentääksesi kuvien kokoa, mutta miten ne näytetään sivustossasi vaihtelevat. Tämä pätee erityisesti siihen, että mobiililaitteiden, joissa on pääsy Internetiin, suosio kasvaa.

Löysin mielenkiintoisen artikkelin, jossa käsiteltiin JavaScript-JPEG-koodausta, joka tapahtuisi etuosan koodissa. Korkealaatuisia kuvagallerioita ei ole paljon hyötyä, mutta se voi ajaa latausajat mobiilikäyttäjille. Se olisi myös hyödyllinen tekniikka kuvien linkittämiseksi tai pienoiskuvien uudelleen rajaamiseksi dynaamisesti.

Toinen hieno työkalu on Yahoo! Smush.it. Se on selainpohjainen web-sovellus, jossa voit ladata kuvan ja Smush.it poistaa kaikki tarpeettomat ylimääräiset tavut tiedostokoon optimoimiseksi. Se on 100% häviötön, joten kuvanlaatu ei heikkene lainkaan. Ja vieläkin paremmin voit ladata kuvia suorista URL-osoitteista, jos ne ovat isännöi sivustossasi tai kolmannen osapuolen palvelimessa.

Lisätyökalut

On paljon ohjelmistoja, joilla yritetään kuvankäsittelyä. Mahdolliset ylimääräiset tavut, joita voit poistaa jokaisen tiedoston koosta, ovat ratkaisevan tärkeitä. Siellä ei ole paljon ohjelmistoja, mutta käytettävissä olevat vaihtoehdot ovat hämmästyttäviä.

IrfanView

Tämä ilmainen Windows-ohjelmisto mahdollistaa kaikkien suurten kuvien joukon tarkastelun ja optimoinnin. Pidän erityisesti tästä ohjelmistosta, koska se tukee useiden hakemistojen kuvien muunnosta. Voit käyttää samoja toimintoja satoja JPEG-kuvia automaattisesti.

Mikä on vielä parempi, on kolmannen osapuolen kehittäjien tuki. Yksi tällainen esimerkki on RIOT (Radical Image Optimization Tool). Tämä laajennus toimii muilla vastaavilla avoimen lähdekoodin grafiikkatiedostimilla, kuten GIMP: llä. Se tarjoaa kaksoiskuvanäkymän, jossa voit manuaalisesti säätää kunkin kuvan pakkausparametreja.

Ohjelmistotuki on hienoa, ja RIOT-ominaisuudet ovat erittäin helppokäyttöisiä. Kuvan pakkaamisen ohella voit myös poistaa muita metatietoja, kuten EXIF ​​ja Adobe XMP. Nämä ylimääräiset tietomäärät voivat lisätä vain koko tiedostokokoasi ja niitä tarvitaan harvoin.

ImageOptim Macille

Jos käytät OS X: ää ja tarvitset tehokkaan pakkausohjelman, katso enää. ImageOptim on tehokas työkalu, jolla pakataan kuvia verkossa - joskus jopa paremmin kuin Photoshop.

Koko sovellus tukee vedä ja pudota -toimintoa, joten suurten kuvasarjojen optimointi on helppoa. Voit samoin suorittaa komentoja suoraan Terminalin ja asennusohjelman komentosarjojen sisällä. Tutustu Google-koodisivuun saadaksesi lisätietoja ja teknistä tukea.

Viimeisimmässä 1.3.3-vakaassa julkaisussa on esiintynyt pieniä ongelmia, kun kuvassa on pikseloituja JPEG-kuvia Operassa. Yritä tarkistaa kaikki optimoidut kuvat neljässä suuressa selaimessa - Chrome, Safari, Firefox ja Opera (ja ehkä IE). Jos jokin näyttää vääristyneeltä, voit yrittää ladata ImageOptim 1.3.0, joka muuntaa hieman puhtaamman.

Hyödyllisiä resursseja

• JPEG 101: Crash Course Guide JPEG: ssä
• Oikeat pakkausasetukset JPG-kuvien tallentamiseksi WordPressille
• Älykkäät JPEG-optimointitekniikat
• Miten optimoida JPEG-kuvat verkkosivuilla
• Kaikki mitä sinun tarvitsee tietää kuvien pakkaamisesta

johtopäätös

JPEG-pakkaus on hankala, koska sinun täytyy löytää oikea tasapaino laadun ja aineen välillä. Vaikka nykyaikaiset Internet-yhteyksien nopeutemme kasvavat, on edelleen tarpeen vähentää verkkosivujen kokoa. Uudet kehykset, kuten jQuery ja Typekit, voivat tarttua satoihin ylimääräisiin kilotavuihin, jopa hyvin optimoituun suunnitteluun.

Minun on edelleen suositeltava Adobe Photoshopia ensi-iltaisena kuvankäsittelyohjelmistona. JPEG-optimointiprosessissa on mahdollisesti muitakin esimerkkejä. Mutta web-suunnittelijat voivat saada jopa vähemmän tunnettuja avoimen lähdekoodin ratkaisuja. Jos sinulla on samanlaisia ​​temppuja tai ideoita JPEG-pakkauksesta, jaa kanssamme alla olevassa keskustelualueella.