JPEG optimizavimas „Web“ - „Ultimate Guide“

Vaizdo suspaudimas randamas kiekviename gimtojoje medijos formate. Tačiau skirtumas tarp GIF, PNG ir JPEG yra kaip informacija yra suspausta ir rodoma ekrane. Yra tiek daug patarimų, kaip kurti puikias vaizdo žiniasklaidos priemones, tačiau daugelis dizainerių vis dar nesupranta kai kurių pagrindų.

Šiame vadove norėčiau pasidalinti keletu idėjų dėl tinkamo JPEG suspaudimo. Norite optimizuoti savo atvaizdus, ​​kad sumažintumėte tinklalapio apkrovos laiką, tuo pačiu išlaikant tinkamą kokybės lygį. Viskas apie failų dydžių ir ekrano vaizdavimo pusiausvyrą. Dizaineriams nėra puikus sprendimas. Tai užtrunka tam tikrą pradinę praktiką, bet kai suprasite JPEG suspaudimą, ateityje ateityje bus kur kas lengviau kurti svetaines.

Venkite visada taupyti 100%

Beveik niekada neišsaugosite JPEG vaizdų 100% kokybės. Tai bus ne gaminti kuo daugiau “optimizuotas” vaizdą. Jis iš tikrųjų apskaičiuoja per optimizavimo ribinę formulę, kuri padidina jūsų failų dydį pernelyg dideliu mastu. Net palyginti su 90% arba 95% kokybe, matysite didelį failo dydžio sumažėjimą.

Dauguma kartų rekomenduojama išsaugoti daug mažesnius nei 90% kokybės vaizdus. Jei „Photoshop“ atidarote dialogo langą „Išsaugoti žiniatinklyje“, pamatysite, kad jie siūlo iš anksto nustatytas reikšmes. Pridėjau žemesnes galimas JPEG reikšmes - atkreipkite dėmesį į būdingas pavadinimo konvencijas.

• Žemas - 10%
• Vidutinis - 30%
• Aukšta - 60%
• Labai aukštai - 80%
• Maksimalus - 100%

Net ir „Adobe Photoshop“ 60% vaizdo kokybė laikoma „aukšta“. Daugelis žiniatinklio kūrėjų užtikrins, kad nuo 50% iki 70% yra saugus diapazonas.

Kiek mažas yra per mažas?

Vertybės, kurias pasirinksite optimizavimui, yra visiškai priklausomos nuo projekto. Turėsite apsvarstyti, kokių tipų grafika bus išreikšta didžiausiais failų dydžiais - tai yra tie, kurie tikrai reikalingi glaudinimui.

Norėčiau teigti, kad mažiau nei 30 proc. Kiti dizaineriai prisiekia 50% “riba” sumažinti optimalią vertę. Tačiau geriausias patarimas yra tiesiog išbandyti skirtingus nustatymus ir pamatyti, kas atrodo geriausiai! Jūs negalite suklysti su keliais bandymais, optimizuojančiais žiniatinklio JPEG vaizdus.

Kompresijos parinktys

Pirmiausia turėtume paaiškinti du terminus „suspaudimas“ ir „kokybė“, kurie yra atvirkštiniai. Tai reiškia, kad išsaugosite JPEG 40% suspaudimo metu, gausite 60% kokybę (palyginti su maksimaliu 100% kokybės be suspaudimo).

Tai yra pagrindinės galimybės panaudoti - ir jos turėtų būti pakankamai saugomos žiniatinklyje. Bendrieji vartotojai nepatenka į daug gilesnį pritaikymą. Pasirinkimas ima į sudėtingesnius dalykus, kai jūs konvertuojate RGB vaizdus į YCbCr (Luminance, Chroma Blue, Chroma Red).

(Vaizdo šaltinis: Kara Monroe)

The šviesumas arba ryškumo nustatymas visada laikomas didžiausią įmanomą JPEG suspaudimo reikšmę. Su šio ryškumo reikšme atskirame kanale lengviau optimizuoti individualias Raudonos ir Mėlynos spalvų reikšmes. Tai taip pat žinoma kaip chroma subampling. Dizaineriai, norintys gauti savo rankas purvinas, mėgsta skaityti šiek tiek daugiau apie šį suspaudimo algoritmą. Patikrinkite šį puikų dienoraščio įrašą apie chromos mėginių ėmimą, ypatingą dėmesį skiriant JPEG vaizdams.

(Vaizdo šaltinis: Derek Hatfield)

Kaip įdomi pastaba, „Adobe Photoshop“ ne visuomet naudoja suspaustų duomenų atranką. Visi vaizdai, išsaugoti per “Išsaugoti žiniatinklyje” dialogo lange bus naudojama tik chroma subampling žemiau 50% kokybės vertės.

Skirtingos žiniasklaidos priemonės

Internetas taip pat yra pilnas įvairių vaizdo įrašų laikmenų. Galite turėti nuotraukas, piktogramas, mygtukus, ženklelius ir kitas grafikas. Tačiau pažymėtina, kad kokybės lyginimas tarp mygtuko ir nuotraukos tiesiog nėra prasmingas.

Naudodamiesi nuotraukomis ar detaliais vaizdais apsvarstykite galimybę susieti atskirą mažiau suspausto JPEG failą. Tada savo svetainėje galite nustatyti miniatiūras su didesniu suspaudimo santykiu ir daug mažesniais failų dydžiais. Vienintelis trūkumas yra tas, kad žiniasklaidos galerijai reikės pateikti du vaizdų rinkinius. Atkreipkite dėmesį į daugybę skirtingų grafikų, kuriuos susiuvėte svetainėje, ir apsvarstykite kiekvienos iš jų optimizavimo būdus.

Grafinio modelio planavimas

Norite turėti organizuotą rinkmenų sistemą, kuri būtų pakankamai paprasta, kad galėtumėte perkrauti. Kai kurie žiniatinklio valdytojai nuspręs surengti savo nuotraukas kitur žiniatinklyje - pvz., „Flickr“ ar „Picasa“. Tačiau vis tiek norite naudoti tam tikrą suspaudimo įrankį, kad sumažintumėte vaizdo dydį, tačiau tai, kaip juos rodote savo svetainėje, bus skirtingas. Tai ypač pasakytina apie populiarų mobiliųjų įrenginių, turinčių prieigą prie interneto, kilimą.

Radau įdomų straipsnį, kuriame aptarėme „JavaScript“ JPEG kodavimą, kuris atsitiktų jūsų „Frontend“ kode. Aukštos kokybės vaizdų galerijoms nėra daug naudos, tačiau ji gali nuvilti jūsų mobiliųjų lankytojų pakrovimo laiką. Tai taip pat būtų naudinga technika, kai dinamiškai prijungsite vaizdus arba iš naujo apkarpysite miniatiūras.

Kitas išgalvotas įrankis yra „Yahoo! Smush.it. Tai žiniatinklio programa naršyklėje, kurioje galite įkelti vaizdą ir „Smush.it“ pašalins visus nereikalingus papildomus baitus, kad optimizuotų failo dydį. Tai yra 100% praradimas, o tai reiškia, kad vaizdo kokybė visai nesumažės. Ir dar geriau galite pakrauti vaizdus iš tiesioginių URL, jei turite juos talpinti savo svetainėje ar trečiojo šalies serveryje.

Papildomi įrankiai

Yra daug programinės įrangos, kad galėtumėte išbandyti vaizdų manipuliavimą. Bet kokie papildomi baitai, kuriuos galite nuskusti kiekvieno failo dydžiui, yra labai svarbūs. Yra nemažai programinės įrangos, tačiau galimos galimybės yra nuostabios.

IrfanView

Ši nemokama „Windows“ programinė įranga leidžia peržiūrėti ir optimizuoti bet kokį didelių vaizdų rinkinį. Man ypač patinka ši programinė įranga, nes ji palaiko partijos konversiją iš kelių katalogų vaizdų. Jūs galite taikyti tas pačias funkcijas per šimtus JPEG vaizdų automatiškai.

Kas dar geriau, yra trečiosios šalies kūrėjų palaikymas. Vienas iš tokių pavyzdžių yra RIOT (Radical Image Optimization Tool). Šis įskiepis veikia kitiems panašiems atviro kodo grafikos redaktoriams, pvz., GIMP. Jis siūlo dvigubo vaizdo vaizdą, kuriame galite rankiniu būdu koreguoti kompresijos parametrus kiekvienam jūsų vaizdui.

Programinės įrangos palaikymas yra puikus ir RIOT funkcijos yra labai paprasta naudoti. Kartu su vaizdo suspaudimu jūs taip pat turite galimybę pašalinti papildomus metaduomenis, pvz., EXIF ​​ir Adobe XMP. Šie papildomi duomenų bitai gali pridėti tik prie viso failo dydžio ir jie retai reikalingi.

„ImageOptim for Mac“

Jei naudojate OS X ir jums reikia galingos suspaudimo programos, tada nebijokite toliau. „ImageOptim“ yra galingas įrankis, leidžiantis suspausti vaizdus internete - kartais net geriau nei „Photoshop“.

Visa programa palaiko drag-and-drop funkciją, todėl lengva optimizuoti didelius vaizdų rinkinius. Panašiai galite paleisti komandas iš „Terminal“ ir „setup shell“ scenarijų. Išsamesnės informacijos ir techninės pagalbos ieškokite „Google“ kodų puslapyje.

Buvo atlikta keletas nedidelių problemų, susijusių su naujausia 1.3.3 stabilia spauda pateikiant „pixelated JPEG“ vaizdus operoje. Pabandykite patikrinti visus optimizuotus vaizdus 4 pagrindinėse naršyklėse - „Chrome“, „Safari“, „Firefox“ ir „Opera“ (o gal ir IE). Jei kas nors atrodo nelygus, galite pabandyti atsisiųsti „ImageOptim 1.3.0“, kuris konvertuoja šiek tiek švaresnį.

Naudingi ištekliai

• „JPEG 101“: „Crash Course Guide“ (JPEG 101)
• Teisė suspaudimo nustatymai, kad išsaugotumėte „JPG“ vaizdus „WordPress“
• Protingi JPEG optimizavimo metodai
• Kaip optimizuoti svetainių JPEG vaizdus
• Viskas, ką reikia žinoti apie vaizdo suspaudimą

Išvada

JPEG suspaudimas yra sudėtingas, nes reikia rasti tinkamą kokybės ir medžiagos pusiausvyrą. Net jei mūsų modernūs interneto ryšio spartos didėja, vis dar reikia sumažinti tinklalapių dydį. Naujos sistemos, pvz., „JQuery“ ir „Typekit“, gali įveikti šimtus papildomų kilobaitų, net ir gerai optimizuotu dizainu.

Aš vis dar turiu rekomenduoti „Adobe Photoshop“ kaip mano premjero vaizdo redagavimo programinę įrangą. JPEG optimizavimo procesui galbūt yra geresnių pavyzdžių. Tačiau interneto dizaineriai gali gauti net mažiau žinomus atviro kodo sprendimus. Jei turite panašių gudrybių ar idėjų dėl JPEG suspaudimo, pasidalykite su mumis toliau pateikiamoje diskusijų srityje.