JPEG optimeerimine veebi jaoks - Ultimate Guide

Pildi tihendamine on leitud igas emakeeles. Kuid erinevus GIF, PNG ja JPEG vahel on kuidas teave on tihendatud ja kuvatakse ekraanil. Veebis avaldatud suurepärase kujutise meedia koostamiseks on nii palju näpunäiteid, kuid paljud disainerid ei mõista veel mõningaid põhialuseid.

Selles juhendis tahaksin jagada mõningaid ideid õige JPEG-tihenduse kohta. Sa tahad oma pilte optimeerida, et vähendada veebilehe laadimisaega, säilitades samal ajal korraliku kvaliteedi. See kõik on tasakaalu leidmine failisuuruste ja ekraanipildi vahel. Disaineritel pole täiuslikku lahendust. See võtab mõned esialgsed tavad, kuid kui sa mõistad JPEG-i pakkimist, muutub see tulevikus veebilehtede arendamiseks palju lihtsamaks.

Vältige alati 100% salvestamist

Peaksite peaaegu kunagi salvestama JPEG-pilte 100% kvaliteediga. See on mitte toota võimalikult palju “optimeeritud” pilt. See arvutab tegelikult optimeerimispiiri valemiga, mis suurendab teie failide suurust üleliia. Isegi võrreldes 90% või 95% kvaliteediga näete faili suurust märkimisväärselt.

Enamik kordi soovitatakse salvestada pilte, mis on palju madalamad kui 90%. Kui avate Photoshopis dialoogiboksi Save for Web (Salvesta veebilehe), märkate, et nad pakuvad eelseadistatud väärtusi, mida saate valida. Lisasin allpool olevad võimalikud JPEG-väärtused - märkige oma olemuslikud nimetuskonventsioonid.

Madal - 10%
Keskmine - 30%
Kõrge - 60%
Väga kõrge - 80%
Maksimaalne - 100%

Isegi Adobe Photoshopis peetakse 60% pildikvaliteeti kõrgeks. Paljud veebiarendajad hoiavad vahemikus 50% kuni 70%, mis on ohutu vahemik, millega kinni pidada.

Kui madal on liiga madal?

Optimeerimiseks valitud väärtused sõltuvad täielikult käimasolevast projektist. Peate kaaluma, millist tüüpi graafika väljendab suurimaid failisuuruseid - need on need, mis tõesti vajavad tihendamist.

Ma väidaksin, et alla 30% oled sa pildikvaliteedi kärpimine. Teised disainerid vannuvad 50% a “piirang” optimaalse väärtuse vähendamiseks. Parim soovitus on siin lihtsalt proovida erinevaid seadeid ja vaadata, mis on parim! Mõnede testiuuringutega, mis optimeerivad veebi JPEG-pilte, ei saa te valesti minna.

Kompressioonivalikud

Kõigepealt peaksime selgitama kahte mõistet „kokkusurumine” ja „kvaliteet”, mis on üksteise suhtes vastupidised. See tähendab, et kui salvestate JPEG-i 40% -lise kokkusurumise korral, saad 60% kvaliteedi (võrreldes maksimaalse 100% kvaliteediga ilma kompressioonita).

Need on kõige lihtsamad võimalused kasutada - ja need peaksid olema veebi salvestamisel piisavad. Üldkasutajad ei satu palju sügavamatesse kohandustesse. Allaproovimine satub keerulisematesse küsimustesse, kus konverteerite RGB-pildid YCbCr-ks (heledus, Chroma Blue, Chroma Red).

(Pildi allikas: Kara Monroe)

The heledus või heleduse määrangut hoitakse alati JPEG-tihendamisel kõige kõrgemal võimalikul väärtusel. Selle heleduse väärtusega eraldi kanalil on lihtsam punaste ja siniste värvide individuaalset väärtust optimeerida. Seda tuntakse ka kui mustuse alamproov. Disainerid, kes soovivad oma käed määrduda, armastavad seda kompressioonialgoritmi veidi rohkem lugeda. Vaadake seda suurt blogi postitust, mis on seotud värvilahendusega, mis on spetsiaalselt suunatud JPEG-piltidele.

(Pildi allikas: Derek Hatfield)

Huvitava külje märkusena ei kasuta Adobe Photoshop alati tihendamiseks alamvalimit. Kõik salvestatud pildid “Salvesta veebi” dialoogiboksis kasutatakse ainult 40% kvaliteediväärtust alamvalimit.

Erinev veebimeedia

Veeb on täis ka erinevaid kujutise meediaid. Teil võivad olla fotod, ikoonid, nupud, märgid ja muud graafika. Kuid see on märkimisväärne, et kvaliteedi võrdlemine nupu ja foto vahel ei ole mõtet.

Kui kasutate fotosid või detailseid pilte, kaaluge linkimist eraldi väiksema tihendusega JPEG-failiga. Seejärel saate oma saidil pisipilte kõrgema tihendusastme ja palju väiksema failisuurusega seadistada. Ainsaks negatiivseks küljeks on see, et meediagalerii jaoks peate esitama kaks kujutiste komplekti. Pange tähele palju erinevaid graafikaid, mida olete veebisaidil õmmeldud, ning kaaluge optimeerimismeetodeid igaühe jaoks eraldi.

Graafikamudeli planeerimine

Sa tahad olla organiseeritud failisüsteem, mis on piisavalt lihtne, et läbi sõita. Mõned veebimeistrid otsustavad oma fotosid mujal veebis - näiteks Flickris või Picasas. Sellegipoolest tahad siiski kasutada mõningaid tihendusvahendeid, et vähendada kujutise suurust, kuid kuidas neid oma saidil kuvatakse. See kehtib eriti internetiühendusega mobiilseadmete populaarse tõusu kohta.

Leidsin huvitava artikli, mis räägib JavaScripti JPEG kodeeringust, mis juhtuks teie esipaneeli koodis. Kõrgekvaliteediliste pildigaleriide jaoks ei ole palju kasu, kuid see võib teie mobiilikülastajate laadimisajad ära raseerida. See oleks ka kasulik meetod piltide linkimisel või pisipiltide uuesti kärpimiseks dünaamiliselt.

Teine väljamõeldud tööriist on Yahoo! Smush.it. See on brauseripõhine veebirakendus, kus saate pildi üles laadida ja Smush.it eemaldab kõik mittevajalikud lisabaidid faili suuruse optimeerimiseks. See on 100% kadudeta, mis tähendab, et pildikvaliteet ei vähene üldse. Ja isegi paremate piltide laadimine otsestest URL-idest on võimalik, kui teil on need veebisaidi või kolmanda osapoole serveris.

Täiendavad tööriistad

Kujutise manipuleerimiseks on palju tarkvara. Oluline on igasuguste failide suuruse eest raseerida. Seal ei ole palju tarkvara, kuid saadaval olevad võimalused on hämmastavad.

IrfanView

See tasuta Windowsi tarkvara võimaldab teil vaadata ja optimeerida kõiki suuri pilte. Mulle meeldib see tarkvara eriti, sest see toetab partiide teisendamist mitmest kataloogist. Sama funktsiooni saab automaatselt kasutada sadade JPEG-piltide puhul.

Veelgi parem on kolmanda osapoole arendajate pluginate tugi. Üks selline näide on RIOT (Radical Image Optimization Tool). See plugin töötab teiste sarnaste avatud lähtekoodiga graafika redaktorite nagu GIMP puhul. See pakub kahekordset pilti, kus saab iga pildi jaoks kompressiooniparameetreid käsitsi reguleerida.

Tarkvara tugi on suurepärane ja RIOT-i funktsioone on väga lihtne kasutada. Lisaks pildi tihendamisele on teil juurdepääs ka täiendavatele metaandmetele nagu EXIF ja Adobe XMP. Need täiendavad andmebittid võivad lisada ainult teie failide koguarvu ja neid on harva vaja.

ImageOptim Macile

Kui kasutate OS X-i ja vajate tugevat pakkimisrakendust, siis vaata enam. ImageOptim on võimas vahend veebi piltide tihendamiseks - mõnikord isegi parem kui Photoshop.

Kogu rakendus toetab lohistamise funktsiooni, nii et suurte piltide optimeerimine on lihtne. Samamoodi saate käske käsutada otse Terminali ja häälestus shelliskripti sees. Lisateabe saamiseks ja tehnilise toe saamiseks vaadake Google'i koodilehekülge.

Viimastel 1.3.3 stabiilsetel versioonidel on olnud pisiprobleeme pikseliseeritud JPEG-piltide esitamisel Opera. Proovige kontrollida kõiki oma optimeeritud pilte neljas peamises brauseris - Chrome, Safari, Firefox ja Opera (ja võib-olla ka IE). Kui midagi tundub vilt, võite proovida alla laadida ImageOptim 1.3.0, mis teisendab bitipuhastit.

Kasulikud ressursid

JPEG 101: Crash Course Guide JPEG-il
Õige tihendusseaded JPG-piltide salvestamiseks WordPressile
Nutikas JPEG optimeerimise tehnika
Kuidas veebisaitide JPEG-pilte optimeerida
Kõik, mida pead teadma pildi tihendamisest

Järeldus

JPEG-i pakkimine on keeruline, sest peate leidma õige tasakaalu kvaliteedi ja aine vahel. Isegi kui meie kaasaegsed internetiühenduse kiirused kasvavad, on siiski vaja vähendada veebilehtede suurust. Uued raamid, nagu jQuery ja Typekit, võivad lüüa sadade täiendavate kilobaitide arvuga isegi hästi optimeeritud disaini korral.

Ma pean siiski esitama Adobe Photoshopi oma esilinastuse kujutise redigeerimise tarkvara. JPEG optimeerimisprotsessi jaoks on paremad teised näited. Kuid veebidisainerid võivad saada isegi vähem tuntud avatud lähtekoodiga lahenduste abil. Kui teil on sarnaseid trikke või ideid JPEG-i kokkusurumise kohta, siis palun jaga meiega allpool olevas arutelupiirkonnas.