JPEG optimizācija Web - Ultimate ceļvedim

Attēlu saspiešana ir atrodama katrā vietējā mediju formātā. Tomēr atšķirība starp GIF, PNG un JPEG ir kā informācija tiek saspiesta un parādīta ekrānā. Ir tik daudz padomu, kā veidot tīmeklī publicētus lieliskus attēlus, un daudzi dizaineri joprojām nesaprot dažus pamatus.

Šajā rokasgrāmatā es vēlos dalīties ar dažām idejām par pareizu JPEG saspiešanu. Jūs vēlaties optimizēt savus attēlus, lai samazinātu tīmekļa lapas ielādes laiku, vienlaikus saglabājot pienācīgu kvalitātes līmeni. Tas viss ir par līdzsvaru starp failu izmēriem un ekrāna attēlojumu. Nav ideāla risinājuma, lai dizaineri varētu sekot. Tas aizņem dažas sākotnējās prakses, bet, tiklīdz jūs sapratīsiet JPEG saspiešanu, nākotnē tā kļūst daudz vieglāka.

Izvairieties vienmēr saglabāt 100%

Jums gandrīz nekad nevajadzētu saglabāt JPEG attēlus ar 100% kvalitāti. Tas būs ne ražot vislielāko iespējamo “optimizēta” attēlu. Tā faktiski aprēķina, izmantojot optimizācijas limita formulu, kas palielina jūsu faila izmērus pārmērīgi. Pat salīdzinot ar 90% vai 95% kvalitāti, jūs redzēsiet ievērojamu faila lieluma kritumu.

Vairumā gadījumu jums būs ieteicams saglabāt attēlus, kas ir daudz zemāki par 90%. Ja programmā Photoshop atverat dialoglodziņu Saglabāt tīmeklī, jūs pamanīsiet, ka tie piedāvā iepriekš iestatītas vērtības, no kurām jūs varat izvēlēties. Es pievienoju zemāk norādītās iespējamās JPEG vērtības - pamaniet raksturīgās nosaukuma konvencijas.

• Zems - 10%
• Vidējs - 30%
• Augsts - 60%
• Ļoti augstu - 80%
• Maksimālais - 100%

Pat programmā Adobe Photoshop 60% attēla kvalitāte tiek uzskatīta par augstu. Daudzi tīmekļa izstrādātāji nodrošinās, ka no 50% līdz 70% ir drošs diapazons, ar ko pieturēties.

Cik zems ir pārāk zems?

Vērtības, ko izvēlaties optimizācijai, ir pilnībā atkarīgas no projekta. Jums būs jāapsver, kuri grafikas veidi būs visaugstākie faila izmēri - tie ir tie, kas patiešām ir nepieciešami saspiešanai.

Es apgalvoju, ka zem 30% jūs patiešām sagraujat fundamentālo attēla kvalitāti. Citi dizaineri zvēr 50% kā a “ierobežojumu” lai samazinātu optimālo vērtību. Bet labākais padoms šeit ir vienkārši izmēģināt dažādus iestatījumus un redzēt, kas izskatās vislabāk! Jūs nevarat kļūdīties ar dažiem testiem, kas optimizē tīmekļa JPEG attēlus.

Kompresijas opcijas

Vispirms mums ir jāprecizē divi termini "kompresija" un "kvalitāte", kas ir otrādi. Tas nozīmē, ka, saglabājot JPEG ar 40% saspiešanu, iegūsit 60% kvalitāti (salīdzinot ar maksimālo 100% kvalitāti bez saspiešanas).

Tās ir visvienkāršākās iespējas izmantot - un tām jābūt pietiekamām, lai saglabātu tīmeklī. Vispārējie lietotāji neiesaistās daudz dziļākos pielāgojumos. Paraugu ņemšana kļūst sarežģītākajos jautājumos, kad jūs pārvēršat RGB attēlus YCbCr (Luminance, Chroma Blue, Chroma Red).

(Image Source: Kara Monroe)

The spilgtums vai spilgtuma iestatījums vienmēr tiek saglabāts augstākajā iespējamajā JPEG saspiešanas vērtībā. Ar šo spilgtuma vērtību atsevišķā kanālā ir vieglāk optimizēt sarkanās un zilās krāsas individuālās krāsas. Tas ir arī pazīstams kā hroma apakšparaugu ņemšana. Dizaineri, kas interesējas par savu roku netīrumu, labprāt lasīs nedaudz vairāk par šo kompresijas algoritmu. Pārbaudiet šo lielisko emuāra ziņu par hroma paraugu ņemšanu, kas īpaši vērsta uz JPEG attēliem.

(Image Source: Derek Hatfield)

Kā interesantai piezīmei Adobe Photoshop ne vienmēr izmanto saspiešanai apakšparaugu ņemšanu. Visi attēli, kas saglabāti, izmantojot “Saglabāt tīmeklī” dialoglodziņā tiks izmantota tikai hroma apakšklase zem 50% kvalitātes vērtības.

Atšķirīga Web Media

Tīmeklī ir arī dažāda veida attēlu mediji. Jums var būt fotogrāfijas, ikonas, pogas, nozīmītes un citas grafikas tonnas. Bet ir svarīgi, ka kvalitātes salīdzināšana starp pogu un fotogrāfiju nav jēga.

Izmantojot fotoattēlus vai detalizētus attēlus, apsveriet iespēju piesaistīt atsevišķu mazāk saspiestu JPEG failu. Tad jūs varat iestatīt sīktēlus savā vietnē ar augstāku saspiešanas koeficientu un daudz mazāku faila izmēru. Vienīgais negatīvais aspekts ir tas, ka multivides galerijai būs jāsniedz divi attēlu komplekti. Ņemiet vērā daudzās dažādās grafikas, kuras esat iešuvis tīmekļa vietnē, un apsveriet optimizācijas metodes katram no tiem atsevišķi.

Grafikas modeļa plānošana

Vēlaties, lai būtu organizēta failu sistēma, kas ir pietiekami vienkārša, lai izietu. Daži tīmekļa pārziņi izvēlēsies izvietot savus fotoattēlus citur tīmeklī - piemēram, Flickr vai Picasa. Tomēr, lai samazinātu attēla izmērus, jūs joprojām vēlaties izmantot kādu saspiešanas rīku, bet tas, kā jūs tos attēlojat savā vietnē, būs atšķirīgs. Tas jo īpaši attiecas uz mobilo ierīču ar piekļuvi internetam popularitāti.

Es atklāju interesantu rakstu par JavaScript JPEG kodējumu, kas notiktu jūsu frontenda kodā. Augstas kvalitātes attēlu galerijām nav daudz priekšrocību, bet tā var noskrāties no jūsu mobilā tīkla apmeklētājiem. Tas būtu arī noderīgs paņēmiens, lai dinamiski attēlus pievienotu vai no jauna apgrieztu sīktēlus.

Vēl viens iedomātā rīks, lai pārbaudītu, ir Yahoo! Smush.it. Tā ir tīmekļa lietojumprogramma, kas izmanto pārlūkprogrammu un kurā varat augšupielādēt attēlu, un Smush.it noņems nevajadzīgos papildu baitus, lai optimizētu faila lielumu. Tas ir 100% bezzudumu nozīmē, ka attēla kvalitāte vispār nepazemināsies. Un vēl labāk varat augšupielādēt attēlus no tiešajiem URL, ja tie ir izvietoti jūsu tīmekļa vietnē vai trešās puses serverī.

Papildu rīki

Ir daudz programmatūras, lai izmēģinātu attēla manipulācijas. Jebkuri papildu baiti, kurus varat noskriet no katra faila lieluma, ir būtiski. Tur nav daudz programmatūras, bet pieejamās iespējas ir pārsteidzošas.

IrfanView

Šī bezmaksas Windows programmatūra ļauj apskatīt un optimizēt jebkuru lielu attēlu kopu. Man īpaši patīk šī programmatūra, jo tā atbalsta partijas pārveidošanu no vairāku direktoriju attēliem. Jūs varat piemērot tās pašas funkcijas vairākiem simtiem JPEG attēlu automātiski.

Kas vēl labāk ir spraudņa atbalsts no trešo pušu izstrādātājiem. Viens no šādiem piemēriem ir RIOT (Radical Image Optimization Tool). Šis spraudnis darbojas citiem līdzīgiem atvērtā pirmkoda grafikas redaktoriem, piemēram, GIMP. Tas piedāvā divējāda attēla skatu, kur var manuāli pielāgot kompresijas parametrus katram attēlam.

Programmatūras atbalsts ir brīnišķīgs, un RIOT funkcijas ir ļoti viegli lietojamas. Līdztekus attēla saspiešanai ir pieejami arī papildu metadatu, piemēram, EXIF ​​un Adobe XMP, noņemšana. Šie papildu biti var pievienot tikai jūsu kopējam faila lielumam, un tie ir reti nepieciešami.

ImageOptim Mac

Ja jūs izmantojat OS X un nepieciešama jaudīga kompresijas lietotne, tad skatieties tālāk. ImageOptim ir spēcīgs instruments, lai saspiestu attēlus tīmeklī - reizēm pat labāk nekā Photoshop.

Visa lietojumprogramma atbalsta vilkšanas un nomešanas funkcionalitāti, tāpēc ir viegli optimizēt lielus attēlu kopumus. Līdzīgi var palaist komandas tieši no termināļa un uzstādīšanas apvalka skriptiem. Plašāku informāciju un tehnisko atbalstu skatiet Google koda lapā.

Ir bijuši daži nelieli jautājumi, kas saistīti ar jaunāko 1.3.3 stabilu izlaišanu, lai padarītu pixelated JPEG attēlus Operā. Mēģiniet pārbaudīt visus optimizētos attēlus 4 galvenajās pārlūkprogrammās - Chrome, Safari, Firefox un Opera (un varbūt IE). Ja kaut kas izskatās vājš, varat mēģināt lejupielādēt ImageOptim 1.3.0, kas pārveido mazliet tīrāku.

Noderīgi resursi

• JPEG 101: Crash Course Guide par JPEG
• Labi kompresijas iestatījumi, lai saglabātu JPG attēlus WordPress
• Gudras JPEG optimizācijas metodes
• Kā optimizēt JPEG attēlus tīmekļa vietnēm
• Viss, kas jums jāzina par attēla saspiešanu

Secinājums

JPEG saspiešana ir sarežģīta, jo jums ir nepieciešams atrast atbilstošu līdzsvaru starp kvalitāti un saturu. Pat ja mūsdienu interneta pieslēguma ātrums pieaug, joprojām ir nepieciešams samazināt tīmekļa lapu apjomu. Jaunas sistēmas, piemēram, jQuery un Typekit, var saskarties ar simtiem papildu kilobaitu, pat ja tas ir labi optimizēts.

Man joprojām ir jāiesaka Adobe Photoshop kā mana pirmizrādes attēlu rediģēšanas programmatūra. JPEG optimizācijas procesam, iespējams, ir vēl citi piemēri. Bet tīmekļa dizaineri var iegūt ar mazāk pazīstamiem atvērtā koda risinājumiem. Ja jums ir līdzīgi triki vai idejas par JPEG saspiešanu, lūdzu, dalieties ar mums tālāk norādītajā diskusiju zonā.