Saspiesti attēli īpaši pozitīvi ietekmē tīmekļa vietnes ielādes laiku. Bet kā saspiest attēlus tā, lai tas būtu pēc iespējas bez zau­dē­ju­miem — bez ie­vē­ro­ja­mas kva­li­tā­tes pa­ze­mi­nā­ša­nās? Un kādas iespējas ir pieejamas, lai to panāktu? Šajā ro­kas­grā­ma­tā mēs sniegsim skaidru pārskatu par attēlu sa­spie­ša­nas rīkiem.

Kāpēc man vajadzētu saspiest savus attēlus?

Mūsdienās augstas iz­šķirtspē­jas attēli un fo­tog­rā­fi­jas ir kļuvušas par ikdienu. Di­gi­tā­la­jā fo­tog­rā­fi­jā pikseļu skaits un failu izmērs arvien pa­lie­li­nās. Ne­at­ka­rī­gi no tā, vai jūs aug­šu­pie­lā­dē­jat attēlus savā tīmekļa vietnē vai vienkārši nosūtāt tos pa e-pastu, vienmēr ir svarīgi saglabāt failu izmēru pēc iespējas mazāku. At­ce­rie­ties, ka jo mazāks ir fails, jo mazāk laika ne­pie­cie­šams tā pārraidei. Tas ir izdevīgi divu iemeslu dēļ:

  • Ātrs ielādes process palielina ap­mek­lē­tā­ju ap­mie­ri­nā­tī­bu (īpaši lie­to­tā­jiem ar mobilo interneta pie­slē­gu­mu).
  • Ātra ielāde pozitīvi ietekmē mek­lē­tājprog­ram­mu reitingu

Pareizais datu formāts tiešsais­tes attēliem

Pirms attēlu pub­li­cē­ša­nas internetā, jums jā­pār­bau­da attēlu failu formāts. Ne visi grafiskie formāti ir piemēroti lie­to­ša­nai internetā. Šeit ir pieci formātu veidi, kurus var izmantot:

  • JPG/JPEG: JPG ir viens no visbiežāk iz­man­to­ta­jiem attēlu formātiem. Tas var attēlot 16,7 miljonus krāsu un lepojas ar stabilu kom­pre­si­jas koe­fi­cien­tu. JPG failus gal­ve­no­kārt izmanto fo­toat­tē­lu vai fo­toat­tē­lu līdzīgu grafiku sa­gla­bā­ša­nai, jo īpaši tādu, kurās ir daudz dažādu krāsu un izteikti kontrasti.
  • PNG: Šis formāts var attēlot no 256 (PNG8) līdz 16,7 miljoniem (PNG24) dažādu krāsu un to var izmantot tiešsais­tē. Atšķirībā no JPG, šo formātu var saspiest, nemazinot kvalitāti. PNG faili ir piemēroti grafikas, logotipu un tekstu sa­gla­bā­ša­nai. Attēlus ar maz krāsu skaitu var saspiest failos, kuru izmērs ir tikai daļa no attēla sākotnējā izmēra.
  • WebP: WebP ir moderns attēlu formāts, ko iz­strā­dā­jis Google, lai no­dro­ši­nā­tu labāku sa­spie­ša­nu, vien­lai­kus sa­gla­bā­jot augstu attēla kvalitāti. Tas atbalsta gan zudumu, gan bezzudumu sa­spie­ša­nu, kā rezultātā failu izmērs ir mazāks nekā JPEG un PNG formātā. Pa­tei­co­ties efek­tī­viem al­go­rit­miem, piemēram, pre­dik­tī­vai kodēšanai, WebP var saspiest attēlus līdz pat 30 % mazākus nekā JPEG formātā, sa­gla­bā­jot līdzīgu kvalitāti. Formāts atbalsta arī caur­spī­dī­gu­mu (alfa kanālu) un ani­mā­ci­jas, padarot to par daudz­pu­sī­gu al­ter­na­tī­vu PNG un GIF formātiem.
  • SVG: SVG (Scalable Vector Graphics) ir XML balstīts attēlu formāts, ko izmanto vektoru grafikai. Tā kā tas balstās uz ma­te­mā­tis­kiem formas un līniju ap­rak­stiem, attēla kvalitāte paliek nemainīga ne­at­ka­rī­gi no mēroga. Atšķirībā no pikseļu bal­stī­tiem formātiem, SVG failu izmēru var ie­vē­ro­ja­mi samazināt, iz­man­to­jot vien­kār­šas koda op­ti­mi­zā­ci­jas un gzip sa­spie­ša­nu, ne­ie­tek­mē­jot vizuālo kvalitāti. SVG ir īpaši piemērots lo­go­ti­piem, ikonām un ilus­trā­ci­jām tīmeklī.
  • GIF: GIF faili joprojām ir diezgan izplatīti tīmeklī, kaut arī tie var attēlot tikai 256 krāsas. Tas gal­ve­no­kārt ir tāpēc, ka GIF formāts atbalsta īsas ani­mā­ci­jas, kas veidotas no attēlu secības un ir īpaši populāras so­ciā­la­jos tīklos un līdzīgās plat­for­mās.

1. variants: attēlu sa­spie­ša­na tiešsais­tē

Ja vēlaties saspiest attēlus, ne­in­sta­lē­jot īpašu prog­ram­ma­tū­ru, varat arī viegli optimizēt attēlus tiešsais­tē. Šim nolūkam internetā ir pieejami dažādi pie­dā­vā­ju­mi, kas ļauj tos saspiest bez maksas. Rīki parasti atšķiras pieejamo failu formātu un iespējamo sa­spie­ša­nas pakāpju ziņā, un bieži vien tiem ir ie­ro­be­žo­ju­mi attiecībā uz sa­spie­ša­nas reižu skaitu, ko var veikt. Daži no la­bā­ka­jiem ri­si­nā­ju­miem ir atrodami turp­mā­ka­jos punktos.

Op­ti­mi­zil­la

Mediafox Marketing tiešsais­tes rīks Op­ti­mi­zil­la ļauj vien­lai­kus aug­šu­pie­lā­dēt un saspiest līdz pat 20 attēliem. Attēliem jābūt JPEG vai PNG formātā. Tīmekļa lie­to­jum­prog­ram­ma izmanto dažādu sa­spie­ša­nas algoritmu kom­bi­nā­ci­ju, kam rak­stu­rīgs labs sa­spie­ša­nas un attēla kva­li­tā­tes attiecība. Pirms rezultātu le­ju­pie­lā­des atsevišķi vai kopā kā ZIP failu varat izmantot slideri, lai iestatītu sa­spie­ša­nas pakāpi.

Image: Image compression with Optimizilla
Once you’ve selected the desired com­pression level, confirm it in Op­ti­mi­zil­la by clicking ‘Apply’. In this example, the image size is reduced by 22 percent.

Lai palīdzētu jums atrast labākos ie­spē­ja­mos ie­sta­tī­ju­mus, Op­ti­mi­zil­la piedāvā sākotnējā attēla un tā saspiestā attēla sīktēlus. Turklāt rīks norāda attiecīgo faila izmēru. Visi aug­šu­pie­lā­dē­tie attēli pēc stundas tiek au­to­mā­tis­ki dzēsti no pa­kal­po­ju­ma sniedzēja serveriem.

Priekš­ro­cī­bas Trūkumi
Re­gu­lē­jams kom­pre­si­jas koe­fi­cients Ie­ro­be­žots līdz 20 kom­pre­si­jām vien­lai­kus
Sā­kot­nē­jās un rediģētās versijas sīkbildes priekš­ska­tī­jums

TinyPNG

TinyPNG, pretēji savam no­sau­ku­mam, ļauj saspiest ne tikai PNG failus, bet arī JPEG un WebP failus. Bezmaksas standarta versijā varat vien­lai­kus optimizēt līdz 20 attēlus šajos trīs formātos, mak­si­mā­lais faila izmērs vienam attēlam ir ie­ro­be­žots līdz 5 me­ga­bai­tiem.

Image: Screenshot of the TinyPNG website
After com­pression, TinyPNG will display the new size of the image file(s) and the saved file size (as a per­cen­tage).

Voormedia rīkam ir iepriekš definēts kom­pre­si­jas līmenis, ko nevar mainīt, bet tas samazina attēla izmēru līdz pat 80 %. Iz­man­to­jiet velk un nomešanas funkciju, lai pār­vie­to­tu vēlamās fo­tog­rā­fi­jas uz parādīto laukumu, un pēc tam le­ju­pie­lā­dē­jiet re­zul­tā­tus JPEG vai PNG formātā vai kā ZIP failu. Al­ter­na­tī­vi varat aug­šu­pie­lā­dēt uz mā­koņ­pa­kal­po­ju­mu Dropbox.

Priekš­ro­cī­bas Trūkumi
Re­zul­tā­tus var aug­šu­pie­lā­dēt Dropbox Ie­ro­be­žo­jums – vien­lai­kus var saspiest 20 failus, kuru izmērs ne­pār­sniedz 5 me­ga­bai­tus (standarta versijā)
Kom­pre­si­jas līmeni nevar mainīt

iLoveIMG

iLoveIMG ir pilnīgs tiešsais­tes rīku kopums attēlu re­di­ģē­ša­nai. Barselonā bāzētā izstrādes komanda piedāvā lie­to­jum­prog­ram­mas, kas ļauj attēlus apgriezt, mainīt to izmēru, konvertēt un pat saspiest. Lai to izdarītu, iz­vē­lie­ties “Saspiest attēlu” un pēc tam ie­vie­to­jiet vēlamo attēlu, iz­man­to­jot velk-un-met funkciju vai failu pārlūku. Pieejamie formāti ir JPEG, PNG, SVG un GIF.

Image: Screenshot of image compression with iLoveIMG
After com­pression, you can download the images with a simple click.

Lai gan iLoveIMG ir tikai viens standarta sa­spie­ša­nas režīms, šis rīks piedāvā vairākas dažādas ek­s­por­tē­ša­nas iespējas. Re­zul­tā­tus var ne tikai le­ju­pie­lā­dēt uz vietējo cieto disku, bet arī aug­šu­pie­lā­dēt uz Google Drive un Dropbox, kā arī nosūtīt le­ju­pie­lā­des saiti uz sa­spies­ta­jiem attēliem. Ja sa­spie­ša­nas rezultāts jūs ne­ap­mie­ri­na, to var vienkārši dzēst, no­klik­šķi­not uz atkritumu tvertnes ikonas.

Priekš­ro­cī­bas Trūkumi
Re­zul­tā­tus var aug­šu­pie­lā­dēt Google Drive un Dropbox Tikai viens sa­spie­ša­nas režīms
Pieejami papildu rīki ap­grie­ša­nai, mē­ro­go­ša­nai un kon­ver­tē­ša­nai Nav priekš­ska­tī­ša­nas funkcijas

2. variants: attēlu sa­spie­ša­na ar Photoshop

Jūs varat arī saspiest savus attēlus ar pro­fe­sio­nā­lām attēlu apstrādes prog­ram­mām. Pirmkārt un gal­ve­no­kārt, Photoshop, ne­ap­šau­bā­mi ir nozares līderis. Papildus savām funkcijām radošai dizainam un fo­to­ma­te­riā­lu op­ti­mi­zā­ci­jai, Adobe rīks piedāvā dažādas iespējas attēla formāta maiņai un attēla izmēra pie­lā­go­ša­nai. Adobe īpaši tīmekļa vietņu fo­toat­tē­lu un attēlu op­ti­mi­zē­ša­nai ieviestā opcija „Saglabāt tīmeklim” ir īpaši praktiska tīmekļa vietņu ope­ra­to­riem. Šajā režīmā var saspiest ne tikai svarīgos tīmekļa formātus GIF, PNG, WebP un JPEG, bet arī rastra grafiku formātu WBMP (Wireless Bitmap), kas ir paredzēts mobilajām ierīcēm.

RjA067CaQhY.jpg To display this video, third-party cookies are required. You can access and change your cookie settings here.

Tiklīdz jūs rediģējat attēlu Photoshop tīmekļa op­ti­mi­zā­ci­jas režīmā, atvērsies jauns logs, kurā varat ne tikai iestatīt norādītos mērķa formātus, bet arī optimizēt vēlamo attēlu jūsu tīmekļa vietnei krāsu dziļuma un izmēra ziņā. Priekš­ska­tī­ju­ma logā Adobe rīks salīdzina oriģinālo attēlu un mērķa attēlu (ieskaitot absolūto faila izmēra in­for­mā­ci­ju), tādējādi jūs varat viegli redzēt atšķirību katru reizi, kad saspiežat attēlu.

Priekš­ro­cī­bas Trūkumi
Līdz pat trim sa­spie­ša­nas re­zul­tā­tiem pieejams tieš­rai­des priekš­ska­tī­jums Ne­pie­cie­ša­ma liela skait­ļo­ša­nas jauda
Pieejamas dažādas attēlu re­di­ģē­ša­nas funkcijas Augstas izmaksas

3. variants: attēlu sa­spie­ša­na ar bezmaksas un atvērtā koda prog­ram­mām

Ar Photoshop ir ļoti ērti saspiest attēlus ar datora prog­ram­mām. Tās ne tikai piedāvā ie­vē­ro­ja­mi vairāk funkciju pēc no­klu­sē­ju­ma, bet arī ir priekš­ro­cī­bas sa­lī­dzi­nā­ju­mā ar tīmekļa rīkiem, jo tās var izmantot bez interneta sa­vie­no­ju­ma. Ja vēlaties samazināt savas tīmekļa vietnes attēlu izmēru, jums nav obligāti jāizmanto premium ri­si­nā­jums, piemēram, Adobe produkts vai cita maksas al­ter­na­tī­va. Ja jūsu budžets ir ie­ro­be­žots vai jūs ne­in­te­re­sē sa­rež­ģī­tā­kas re­di­ģē­ša­nas funkcijas, bezmaksas vai atvērtā koda programma var palīdzēt jums sasniegt pirm­kla­sī­gus op­ti­mi­zā­ci­jas re­zul­tā­tus, ja runa ir par fo­tog­rā­fi­jām, attēliem utt. Bet kurš no dau­dza­jiem bezmaksas rīkiem ir patiešām ieteicams?

IrfanView

Kopš 1996. gada attēlu skatītājs IrfanView ir viens no po­pu­lā­rā­ka­jiem bezmaksas ri­si­nā­ju­miem Windows datoriem. Pēc iz­strā­dā­tā­ja datiem, šis rīks vidēji tiek le­ju­pie­lā­dēts aptuveni miljons reižu mēnesī! Šo ie­spai­dī­go skaitli, vis­ti­ca­māk, veicina tā pie­vil­cī­gais li­cen­cē­ša­nas modelis: per­so­nis­kai lie­to­ša­nai tas ir pilnīgi bezmaksas, bet ko­mer­ciā­lai lie­to­ša­nai ne­pie­cie­ša­ma licence, kuras cena ir tikai divciparu skaitlis.

Image: Screenshot of IrfanView
If you save your image as a JPEG using the standard version of IrfanView (without plugins), you can easily adjust the quality using a slider.

Pēc no­klu­sē­ju­ma attēlu skatītājs atbalsta daudzus attēlu formātus, piemēram, PNG, JPEG, GIF, BMP, WebP un daudzus citus. Kad attēls ir ievietots, to jebkurā brīdī var konvertēt šajos formātos. Tomēr, ja attēlus ir ne­pie­cie­šams saspiest īpaši tīmeklim, ieteicams izmantot funkciju „Save for Web” (Saglabāt tīmeklim), ko var pievienot ar spraudņa palīdzību. Šis pa­pla­ši­nā­jums ļauj optimizēt attēlu un fo­toat­tē­lu kopas, vien­lai­kus iz­man­to­jot slideri, lai pielāgotu, cik lielā mērā ir jā saglabā sākotnējā attēla kvalitāte. Priekš­ska­tī­ju­ma attēls un saspiestā faila izmērs sniedz priekš­sta­tu par to, kāds varētu būt galīgais rezultāts.

Priekš­ro­cī­bas Trūkumi
Iespējama skriptu apstrāde Kom­pre­si­jas spraudnis pieejams tikai angļu valodā
Priekš­ska­tī­ša­nas funkcija un re­gu­lē­jams sa­spie­ša­nas līmenis

GIMP

Meklējot Photoshop al­ter­na­tī­vas atvērtā koda sektorā, jūs ne­iz­bē­ga­mi sa­skar­sies ar GIMP (GNU Image Ma­ni­pu­la­tion Program). Šī grafikas programma Linux, macOS un Windows ope­rē­tājsis­tē­mām, kas tika izlaista 1998. gadā, jau gadiem ilgi pārsteidz cilvēkus ar savu funkciju daudz­vei­dī­bu, kas ir ļoti līdzīga Adobe ko­mer­ciā­la­jam modelim. Tagad tā atbalsta vairāk nekā trīs­des­mit failu formātus, tostarp GIF, WebP, JPEG un PNG, kas ir būtiski formāti tīmeklim. Tas nozīmē, ka jūs jebkurā brīdī varat konvertēt savus attēlu failus vienā no šiem tīmekļa formātiem, iz­man­to­jot GIMP prog­ram­ma­tū­ru.

Image: Screenshot of GIMP
Exporting image as WebP with GIMP

Papildus attēlu kon­ver­tē­ša­nai mazākā failu formātā, GIMP piedāvā arī papildu ek­s­por­tē­ša­nas opcijas, kas ļauj viegli saspiest attēlus. Iz­man­to­jiet slideri, lai iestatītu sa­spie­ša­nas pakāpi. Papildu opcijas arī ir prak­tis­kas: piemēram, ja ak­ti­vi­zē­jat īpašību „Prog­ressi­ve”, rezultāts ir nedaudz lielāks, bet at­se­viš­ķās zonas tiek ielādētas noteiktā secībā, tā ka pat pēc īsa ielādes laika tiek parādīts ap­tu­ve­nais attēls.

Priekš­ro­cī­bas Trūkumi
Atvērtā koda Priekš­ska­tī­ju­mā tiek parādīts tikai rezultāta faila izmērs
Saspiedes pakāpe ir re­gu­lē­ja­ma

PNGGauntlet

Bezmaksas programma PNGGauntlet nodrošina grafisko lietotāja in­ter­fei­su trim atvērtā koda rīkiem PNGOUT, OptiPNG un DeflOpt, kas visi ir iz­strā­dā­ti PNG formāta attēlu op­ti­mi­zē­ša­nai un sa­spie­ša­nai. Tāpēc šī programma, kas ir pieejama tikai Windows ope­rē­tājsis­tē­mai, ir ideāls ri­si­nā­jums, lai izveidotu ļoti mazus logotipus, grafikas un uzrakstus PNG formātā jūsu tīmekļa projektam. Papildus PNG formātam, sa­spie­ša­nas vai kon­ver­tē­ša­nas procesā var izmantot arī JPEG, GIF, TIFF un BMP formātus.

Image: Screenshot of the PNGGauntlet interface
If you tick ‘Overwrite Original Files’, PNGGauntlet au­to­ma­ti­cally replaces the original image with the newly created file.

Ir divi veidi, kā saspiest attēlus ar PNGGauntlet. Jūs varat piekļūt standarta ie­sta­tī­ju­miem, ie­vie­to­jot vienu vai vairākus attēlus un nospiežot pogu „Optimize!”, vai arī vispirms iz­vē­lē­ties in­di­vi­duā­lus ie­sta­tī­ju­mus, pie­lā­go­jot trīs ieviesto rīku ie­sta­tī­ju­mus, no­klik­šķi­not uz pogas ar tādu pašu nosaukumu. Ne­at­ka­rī­gi no tā, kuru veidu iz­vē­la­ties, bezmaksas rīks pēc veik­smī­gas sa­spie­ša­nas parādīs attēla faila(-u) jauno izmēru (sa­lī­dzi­nā­ju­mā ar oriģinālu) procentos.

Priekš­ro­cī­bas Trūkumi
Vienkārša skriptu apstrāde Nav priekš­ska­tī­ša­nas režīma
Ir iespējama in­di­vi­duā­la kom­pre­si­jas līmeņa pie­lā­go­ša­na Ie­ro­be­žots ar PNG kā izvades formātu
Jaunākā versija ir no 2012. gada

ImageOp­tim

Ja vēlaties saspiest savas tīmekļa projekta attēlus un fo­tog­rā­fi­jas un jums ir ne­pie­cie­šams atvērtā koda rīks macOS, mēs iesakām ImageOp­tim no Kornel Lesinski. Šī GPL licencētā programma apvieno vairākus attēlu op­ti­mi­zā­ci­jas rīkus, piemēram, MozJPEG, pngquant un SVGO, ļaujot ne tikai noņemt ne­va­ja­dzī­gos EXIF metadatus, bet arī saspiest dažādus attēlu formātus, piemēram, JPEG, SVG, GIF un PNG.

Image: Screenshot of ImageOptim
Once you’ve dragged your file into the tool, the com­pression process begins au­to­ma­ti­cally. A green tick indicates that the com­pression was successful.

Iz­man­to­jot velk-un-met funkciju, jūs varat ievietot vēlamos attēlu failus ImageOp­tim, kur programma uzsāks to sa­spie­ša­nu uzreiz. Tomēr jūs varat jebkurā brīdī veikt izmaiņas ie­sta­tī­ju­mos un pielāgot sa­spie­ša­nas līmeni, kā arī pievienot vai noņemt opcijas. Vienkārši no­klik­šķi­niet uz trim pun­kti­ņiem, lai turpinātu. Pēc tam vienkārši no­klik­šķi­niet uz “Atkārtot”, lai veiktu kon­ver­tē­ša­nu vēlreiz.

Priekš­ro­cī­bas Trūkumi
Dažādas sa­spie­ša­nas funkcijas Nav priekš­ska­tī­ša­nas režīma
Atvērtā koda
Go to Main Menu