Kā optimizēt savus attēlus, lai tie būtu SEO draudzīgi (Pilns ceļvedis)

Jūsu vietnes veiktspēja ir atkarīga no vairākiem faktoriem, sākot no konkrētā jūsu izvēlētā tīmekļa mitinātāja, ievērojot vietņu pieejamības vadlīnijas, līdz izmantoto attēlu failu izmēriem..


Formatējot tos pareizam izmēram, jūsu veikto modifikāciju dēļ var samazināties kvalitāte. Labā ziņa ir tā, ka ar dažiem paņēmieniem un trikiem jūs varat saglabāt optimālu attēla kvalitāti un iegūt pareizo izmēru.

Kas ir attēla optimizācija?

attēla optimizācijas dimensijasWeb lapas var piedzīvot ievērojamu palēnināšanos, kad ir lieli attēli. Tas var saīsināt ielādes laiku un padarīt vietnes apmeklētājus par vispārēju pieredzi.

Faila lieluma samazināšana ir attēla optimizācija. Tam varat izmantot skriptu vai spraudni.

Tādējādi jūsu lapas tiek ielādētas ātrāk. Zaudējumi un zaudējumi saspiešana ir divas visizplatītākās optimizācijas metodes.

Attēla formatēšanas priekšrocības

vidējie attēla izmēri tīmeklīTiek lēsts, ka aptuveni 54 procenti no visas tīmekļa vietnes svara ir saistīti ar attēliem.

Kad jūs strādājat ar vietņu optimizēšanu, šī iemesla dēļ jūsu attēliem vajadzētu būt pirmajam uzdevumam. Attēla formatēšanas priekšrocības ietver:

  • Uzlabots lapas ielādes ātrums
  • Ātrāk ir izveidot dublējumus
  • Nepieciešama mazāk servera atmiņas
  • Uzlabota SEO ar pareizo SEO spraudni
  • Tiek izmantots mazāks joslas platums

Kā uzlabot veiktspēju, izmantojot attēla optimizāciju

Mērķis ir vienmērīgi līdzsvarot pieņemamo kvalitāti un pēc iespējas mazāku faila lielumu. Jums ir vairāk nekā viens veids, kā to izdarīt. Pirms augšupielādes bieži sastopama attēlu saspiešana. Šim nolūkam varat izmantot rīku vai spraudni (šeit ir daži).

Ir svarīgi ņemt vērā izmantoto saspiešanas veidu un faila formātu. Pareizā kombinācija ļauj samazināt attēla izmēru līdz pat piecām reizēm.

Eksperimentējiet ar dažādiem failu formātiem un saspiešanas veidiem, lai noteiktu vislabāko kombināciju jūsu vajadzībām.

Izvēlieties labāko faila formātu

Lai izvēlētos labāko faila veidu, ir svarīgi zināt, kuri ir pieejami. Šīs ir visizplatītākās:

  • JPEG: Šis tips izmanto bezzaudējumu un zaudējumus optimizāciju. Pielāgojot kvalitātes līmeni, varat panākt stabilu faila lieluma un kvalitātes līdzsvaru.
  • PNG: Šim tipam parasti ir lielāks faila lielums, bet attēli ir augstākas kvalitātes. Var izmantot zaudējumu vai bezzaudējumu saspiešanu.
  • GIF: Tas ir ideāli piemērots animētiem attēliem. Var izmantot tikai bezzaudējumu saspiešanu. Tas izmanto tikai 256 krāsas.

attēlu failu formāti

Ir arī citas iespējas, taču tās ir vienas no visizplatītākajām un ar kurām ir viegli strādāt. Citas iespējas ir JPEG XR un WebP. Ne visi pārlūkprogrammas atbalsta šos divus, tāpēc apzinieties to.

Tomēr tie var būt reāla izvēle. Piemēram, salīdzinot ar salīdzināmu JPEG attēlu, WebP vidējais faila lielums tiek samazināts par 30 procentiem.

Tā kā šīm divām iespējām nav universāla atbalsta, jūsu lietojumprogrammai serveros vai lietojumprogrammā būs nepieciešama papildu loģika, lai nodrošinātu atbilstošu resursu:

  • Attēlu optimizācija ir pakalpojums, ko nodrošina daži CDN, ieskaitot WebP un JPEG XR piegādi.
  • Lai noteiktu klientu, nodrošiniet labāko pieejamo attēla formātu un pārbaudiet atbalstītos formātus, un ir iespējams pievienot papildu lietojumprogrammu loģiku.
  • Daži atvērtā koda rīki automatizē sarunu, optimizāciju un atbilstošu līdzekļu apkalpošanu.

Izmērs pret saspiešanas kvalitāti

Zema saspiešana mēdz dot augstāku kvalitāti, taču parasti faili ir lielāki. Ar lielu saspiešanu notiek tieši pretēji. Faili ir mazāki, taču kvalitātei ir tendence pazemināties.

attēla kvalitāte pret saspiešanu

Ideālā gadījumā jūs vēlaties kopumā no vienas līdz divām MB jūsu tīmekļa lapas kopējam svaram. Tātad apsveriet, cik daudz attēlu jums jāizmanto un daliet šo skaitli ar apmēram 1,5. Tas dod jums attēla izmēru, kas ļauj sasniegt vislabāko ielādes ātrumu.

Zaudējumu un zaudējumu optimizācija

Šie ir divi saspiešanas veidi, kurus izmantosit. Ir svarīgi saprast, ko viņi dara:

  • lossless vs lossy CompressionZaudējumi: Tas saspiež datus, un tas ir filtrs. Pirms attēla atveidošanas tam jābūt nesaspiestam. Tomēr kvalitāte netiek samazināta. Ir vairāki rīki, kas veic bezzaudējumu saspiešanu.
  • Zaudēts: Tas novērš dažus datus, un tas ir filtrs. Ņemiet vērā, cik daudz samazināšanas jūs veicat, jo tas pasliktinās attēlu. Lai pielāgotu attēla kvalitātes iestatījumus, varat izmantot dažādus attēlu redaktorus un rīkus.

Pazaudētās vai bezzaudētās konfigurācijas optimālā konfigurācija ir atkarīga no jūsu kritērijiem, piemēram, kompromisa starp ieviestajiem artefaktiem un faila lielumu un attēla saturu..

Visiem attēliem nav viena universāla iestatījuma. Galu galā jūs vēlaties paspēlēties ar dažādiem attēliem, lai redzētu, kurš darbojas vislabāk.

Attēlu mainīšana pēc mēroga

Pateicoties atsaucīgām vietņu lapām, piemēram, WordPress, multivides bibliotēkā iegūsit vairākus failu izmērus. Jūsu pārlūkprogramma var izvēlēties labāko izmēru un to lejupielādēt. Pārlūka izvēlētais izmērs ir atkarīgs no ierīces izšķirtspējas.

attēla mainīšana

Oriģinālais fails paliek neskarts un tiek saglabāts. Jūs varat izmantot spraudņus, lai izvairītos no oriģināla saglabāšanas, lai taupītu diska vietu, ja vēlaties.

Attēlu aizstāšana un novēršana

Vai jums ir nepieciešami visi tīmekļa lapas attēli? Ja nē, noņemiet nevajadzīgos. Tomēr, ja visi ir saistīti ar saturu, apsveriet iespēju lielākus vai zemākas kvalitātes attēlus aizstāt ar labākām opcijām.

Dažos gadījumos attēlus var aizstāt tīmekļa fonti un CSS efekti, vienlaikus nodrošinot jauku lapas vizuālo estētiku. Izmantojot tīmekļa fontus, jauki burtveidoli var palīdzēt uzlabot lietojamību un nodrošināt jūsu lapām piemērotāku izskatu.

Tas var arī uzlabot jūsu lasāmību un zīmolu. Vienkārši pārliecinieties, ka joprojām varat viegli meklēt, atlasīt un mainīt teksta izmērus, neradot lasāmības problēmas.

CSS efekti ietver elementus, piemēram, ēnas un slīpumus. Arī tie var turpināt zīmolu veidošanu. Animācijas var nodrošināt vizuālu pievilcību jūsu vietnē katrā tālummaiņas līmenī un izšķirtspējā. Salīdzinot ar attēlu failiem, šie ir tikai daļa no baitiem.

Rastra un vektora attēli

rastor vs vektors

Rasta un vektors ir divi no primārajiem attēlu failu tipiem. Lai izveidotu rastra attēlus, tiek izmantotas pikseļu bāzes programmas, skeneris vai kamera.

Tos plaši izmanto internetā un biežāk. Vektora attēlu izveidošanai izmanto vektoru programmatūru. Tie ir raksturīgi attēliem, kas nonāk fiziskos izstrādājumos, kā arī inženierzinātnēs, CAD un 3D grafikā.

Vektoru attēli nav atkarīgi no izšķirtspējas un tālummaiņas. Ja ir iesaistītas ģeometriskas formas, vektors ir ideāls. Ja attēli ir sarežģīti un tajos ir daudz detaļu un neregulāras formas, priekšroka tiek dota rastra attēliem.

Rastra grafika kodē katra pikseļa atsevišķās vērtības taisnstūrveida režģī, lai attēlotu attēlu. Vektorgrafika attēlo attēlu, izmantojot punktus, līnijas un daudzstūrus.

Augstas izšķirtspējas ekrāna sekas

Ir svarīgi atšķirt divus dažādus pikseļu tipus, kas ietver ierīces pikseļus un CSS pikseļus. Vienā CSS pikselī var būt vairāki ierīces pikseļi. Sīkāka informācija ekrānā kļūst smalkāka, izmantojot vairāk ierīces pikseļu.

CSS pikselis pret ierīces pikseļuLai pilnībā izmantotu augstāko ierīces pikseļu skaitu, attēla aktīviem jābūt precīzākiem.

Šis uzdevums ir ideāli piemērots vektoru attēliem, jo ​​tie var dot asu rezultātu ja tiek sniegts jebkurā izšķirtspējā.

Tā kā rastra attēlos tiek izmantoti attēla datu kodēšanai uz vienu pikseļu, tie ir sarežģītāki. Tas notiek, kamēr palielinās pikseļu palielināšanās laikā rastra faila lielums.

Tātad augstas izšķirtspējas ekrāniem ir nepieciešami augstas izšķirtspējas attēli, lai izmantotu priekšrocības. Vektoru attēli ir vislabāk augstas izšķirtspējas ekrāniem jo tie vienmēr nodrošina skaidrus rezultātus, jo tie nav nošķirti.

Tikai atceraties, ka neatkarīgi no izšķirtspējas attēla optimizācijas paņēmieni ir vienādi.

Vektoru attēlu optimizēšana

Mērogojamu vektorgrafiku (SVG) atbalsta visi mūsdienu pārlūkprogrammas.

Tas ir ideāli piemērots divdimensiju grafikai, un formāts ir balstīts uz XML attēlu. SVG failus var izveidot ar rokām, izmantojot vēlamo teksta redaktoru vai ar lielāko daļu programmatūras, kas balstīta uz vektoriem.

Lai samazinātu SVG failu lielumu, tie jāsamazina. Saspiežot SVG failus, jāizmanto GZIP.

Rastra attēlu optimizēšana

Pikseļu režģis veido rastra attēlu. Atsevišķie pikseļi atrodas divdimensiju režģī. Piemēram, secība 10 000 pikseļu veido attēlu no 100 līdz 100 pikseļiem. Katrs pikselis kodē caurspīdīgumu un krāsu informāciju.

rastra smagsRGBA vērtības tiek saglabātas katrā pikselī. Tie ietver:

  • Sarkans kanāls
  • Zils kanāls
  • Zaļais kanāls
  • Alfa (caurspīdīguma) kanāls

Pārlūks iekšēji piešķir 256 nokrāsas (vērtības). Vienā kanālā tas nozīmē astoņus bitus. Uz pikseli tas ir četri baiti. Tas ļauj aprēķināt faila lielumu, izmantojot režģa izmērus. Nepieciešams daudz, lai faila izmērs kļūtu ļoti liels.

Tātad, lai samazinātu attēla faila lielumu, ir dažas stratēģijas:

  • Samaziniet attēla mazliet dziļumu. To var izdarīt, izmantojot mazāku krāsu paliktni.
  • Optimizējiet datus, ko atsevišķie pikseļi glabā.

Rīki un parametru iestatīšana

Nav perfekta attēla rīka, optimizācijas parametru kopas vai formāta, kas darbotos katram attēlam. Attēla saturs un tā tehniskās un vizuālās prasības noteiks, kas jums jālieto.

Kad esat atradis labu iestatījumu komplektu, nākotnē to varēsit izmantot līdzīgiem attēliem, lai ietaupītu laiku. Tomēr pārliecinieties, ka nekad neuzskatīsit, ka visu attēlu saspiešanai jāizmanto vienādi iestatījumi.

Uzzinot dažus izplatītus rīkus, jūs varat palīdzēt izdarīt pareizo izvēli. Šie četri ir vieni no visbiežāk izmantotajiem:

  • Gifs: Tas ļauj jums optimizēt un izveidot dažādus GIF attēlus.
  • Optipng: To izmanto, lai bez zaudējumiem varētu optimizēt PNG.
  • Jpegtran: Tas ļauj jums optimizēt JPEG attēlus.
  • Pngquant: To izmanto, lai optimizētu PNG.

Mērogotu attēlu līdzekļu piegāde

Attēla optimizācijā jāņem vērā divi galvenie kritēriji:

  • Attēla kopējā pikseļu skaita optimizēšana.
  • Optimizējot, cik baitu ir nepieciešami katra attēla pikseļa kodēšanai.

attēla formāta koksAttēla faila lielums tiek sadalīts līdz kopējais pikseļu skaits, kas reizināts ar kopējo baitu daudzumu, kas nepieciešams atsevišķam pikseļu kodējumam. Tas būs īstais. Paturiet to prātā, kad strādājat, lai noteiktu optimālāko savas vietnes attēlu failu lielumu.

Tādēļ visefektīvākais un vienkāršākais attēlu optimizācijas veids ir pārliecināties, ka nepiegādājat vairāk pikseļu, kas jums noteikti nepieciešami, lai parādītu aktīvu pārlūkā tā paredzētajā lielumā..

Tātad, ne tikai paļaujieties uz savu pārlūku, lai mainītu attēlus. Tas var izraisīt to parādīšanu ar zemāku izšķirtspēju. Tas arī izmanto daudz papildu CPU resursus.

Parasti nav iespējams garantēt precīzu katra piegādātā aktīva attēlojuma lielumu. Tomēr ir svarīgi pārliecināties, vai samaziniet visus nevajadzīgos pikseļus līdz minimumam.

Ir arī svarīgi, lai jūs piegādātu savus lielos aktīvus pēc iespējas tuvāk to displeja izmēram.

Attēlu optimizācijas kontrolsaraksts

Visa šeit sniegtā informācija ļauj jums optimizēt savus attēlus, lai jūsu tīmekļa lapas būtu ātrākas. Jūs joprojām varēsit izmantot skaistus attēlus, taču tie neizraisīs būtisku palēninājumu jūsu lapas ielādes laikā.

Tas padarīs jūsu apmeklētājus laimīgus un uzlabos jūsu vietnes vispārējo funkciju. Optimizējot savus attēlus, ņemiet vērā šādus kontrolsaraksta punktus:

  • Apsveriet vektoru formātus, jo tie darbojas augstas izšķirtspējas un vairākās ierīcēs, jo tie ir no mēroga un izšķirtspējas.
  • Visi SVG aktīvi ir jāsaspiež un jāsamazina. Tas noņem nevajadzīgos metadatus.
  • Rastra formātiem izmantojiet optimālos kvalitātes iestatījumus. Tas var ietaupīt ievērojamu skaitu baitu.
  • Katram aktīvam izdomājiet savas funkcionālās prasības un izvēlieties labāko rastra attēlu formātu.
  • Automatizējiet, kad vien iespējams, lai nodrošinātu pastāvīgu attēla optimizāciju.
  • Apkalpojiet mērogotus attēlus, lai dabiskais attēla izmērs un displeja izmērs būtu pēc iespējas līdzīgāki.

Apkopojot to, ir gan zinātne, gan māksla attēlu optimizēšanai. Augsti attīstīti algoritmi un paņēmieni kalpo kā zinātne.

Galvenais ir tas, ka nav galīgu atbilžu par individuālu attēlu saspiešanu. Galu galā jums vajadzētu spēlēt apkārt un eksperimentēt. Tas ļauj jums vislabāk izvēlēties attēlu failus un to, kā tie veicina jūsu tīmekļa lapas ātrumu.

Pieaugot tādu trešo pušu vietņu veidotāju kā Wix popularitātei un izsmalcinātībai, dizaineriem ir viegli kļūt aplieti, bet vienmēr koncentrējieties uz labu attēlu optimizācijas procesu izstrādi un uzturēšanu neatkarīgi no tā, vai veidne tiek samazināta vai vietne tiek veidota no jauna..

Atsauces un attēla kredītpunkti:

  • Vietne PicupMedia.com
  • Computing.HomeDNS.org
  • CognitiveSEO.com
  • StackOverflow.com
  • EngineThemes.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

About the author

Adblock
detector