Sut i Optimeiddio Delweddau Ar Gyfer Y We

 Sut i Optimeiddio Delweddau Ar Gyfer Y We

Patrick Harvey

Onid ydych chi'n caru delweddau?

Gallant drawsnewid darn o destun yn brofiad difyr wrth i chi ddarllen. Mae delweddau'n gwella blogbost, yn ei wneud yn fwy y gellir ei rannu ac yn gosod naws a brand eich gwefan gyfan.

A ydych chi'n gwybod beth? Rydym wedi'n gwifredig i ymateb i ddelweddau. Dyna pam mae ymgorffori delweddau yn eich cynnwys yn arf pwerus i'w ddefnyddio wrth farchnata'ch blog.

Ond, os nad ydych chi'n ofalus, gall delweddau gyfrif am dros hanner (neu fwy) o gyfanswm maint eich tudalen we. Ychydig flynyddoedd yn ôl, maint cyfartalog tudalen we oedd 600-700K. Nawr, y cyfartaledd yw 2MB ac mae'n cynyddu bob blwyddyn.

Mae hynny'n enfawr!

Y prif reswm mae hyn yn digwydd yw oherwydd bod delweddau lluosog yn cael eu defnyddio'n amlach ar dudalennau gwe, ac nid yw'r delweddau hyn ' t o faint priodol ac wedi'i optimeiddio. Mae hyn yn golygu nad ydyn nhw'n cael eu cadw na'u llunio mewn ffordd sy'n gyfeillgar i'r we, ac yn lle hynny, maen nhw'n chwyddo'ch tudalennau.

Mae'r rhan fwyaf ohonom, fodd bynnag, yn gadael optimeiddio delweddau fel ôl-ystyriaeth a byddai'n well gennym fwynhau gwneud y pethau hwyliog fel creu post epig neu rwydweithio â blogwyr eraill yn eich cilfach.

Ond, mae cael bloat tudalen yn golygu bod eich cyflymder llwytho tudalen yn cael ei effeithio. Efallai na fyddwch chi'n meddwl bod hwn yn fargen fawr os ydych chi ar gysylltiad cyflym, ond nid yw llawer o'ch ymwelwyr. Hefyd, nid yw Google yn hoffi tudalennau llwytho araf, a gall effeithio'n negyddol ar eich SEO.

Pam mae angen i chi optimeiddio delweddau

Rydych chi'n gweithio'n galed arcreu cynnwys serol ac rydych chi'n treulio oriau di-ri yn hyrwyddo'ch blog ac yn rhwydweithio â blogwyr eraill, felly'r peth olaf rydych chi ei eisiau yw i ddarpar ymwelwyr roi'r gorau i'ch gwefan cyn iddi lwytho hyd yn oed!

Mae astudiaethau'n dangos bod hyd at 40% o mae ymwelwyr yn clicio ar y botwm yn ôl os yw gwefan yn cymryd mwy na thair eiliad i'w llwytho.

Gwn, nid yw tair eiliad mor hir â hynny, ond pan fyddwch ar gysylltiad ffôn symudol a'ch bod yn aros am un safle i'w lwytho, gall eiliad ymddangos fel am byth.

A chan y gall llawer o'ch ymwelwyr fod â chysylltiadau symudol arafach, daw'n amlwg - mae angen i chi leihau maint eich tudalen. Ac rydym eisoes yn gwybod beth yw'r troseddwr mwyaf o ran maint tudalen bloat - eich delweddau chi ydyw.

Mae delweddau diangen o fawr hefyd yn cymryd lle ar eich cyfrif cynnal. Er y gallai fod gan rai ohonoch le storio “diderfyn”, mae llawer o ddarparwyr cynnal premiwm yn eich cyfyngu i tua 10GB o storfa ar gynlluniau haen is. Gall hyn lenwi'n gyflym, yn enwedig os ydych chi'n cynnal nifer o wefannau trwm o ddelweddau ar yr un cyfrif.

Felly, sut allwch chi ddweud a yw'ch delweddau'n arafu eich gwefan? Profwch gyflymder eich gwefan gyda Google PageSpeeding Insights.

Os yw Google yn adrodd am ddelweddau heb eu optimeiddio fel problem, dyma beth sydd angen i chi ei wybod i'w drwsio.

Sylfaenol optimeiddio delwedd

O ran optimeiddio delweddau ar eich blog, mae yna ychydig o bethau gwahanol y mae angen i chi fodymwybodol o: math o ffeil, maint a dimensiynau delwedd, sut rydych chi'n gwasanaethu eich delweddau, a chywasgu delweddau.

Gadewch i ni edrych yn agosach ar bob un o'r meysydd hyn.

Math o ffeil

Mae delweddau ar y we fel arfer yn cael eu cadw yn y fformat ffeil PNG neu JPEG - neu GIF ar gyfer animeiddio. Pwy sydd ddim yn caru'r GIFs animeiddiedig doniol hynny sy'n arnofio o gwmpas y we!

Nawr mae'n dechnegol iawn os ydych chi'n cadw'ch delweddau yn y naill fformat na'r llall - ni fydd porwr eich ymwelydd yn cael unrhyw drafferth i arddangos eich tudalen we – ond ar gyfer yr ansawdd a’r optimeiddio gorau, cadwch at y rheolau canlynol:

  • JPEG – defnyddiwch ar gyfer ffotograffau a dyluniadau lle mae pobl, lleoedd neu bethau’n cael sylw
  • PNG – gorau ar gyfer graffeg , logos, dyluniadau testun-trwm, sgrinluniau, a phan fydd angen delweddau gyda chefndir tryloyw
  • GIF arnoch - os oes angen animeiddiad arnoch, fel arall defnyddiwch PNG

Felly, pam mae gwahanol fformatau ?

Wel, mae PNG yn cael ei ddefnyddio'n draddodiadol ar gyfer arbed logos a graffeg oherwydd ei fod yn cadw ansawdd y ddelwedd wreiddiol - does neb eisiau testun aneglur a siapiau picsel. Ond, os ceisiwch arbed llun fel PNG, bydd yn edrych yn anhygoel, ond bydd maint y ffeil canlyniadol yn llai na rhyfeddol.

Yn draddodiadol, defnyddir JPEG i arbed lluniau. Mae peth o'r data delwedd yn cael ei daflu er mwyn creu maint ffeil sylweddol llai, ond gan fod lluniau'n cynnwys amrywiaeth eang o liwiau ac amrywiadau naturiol, mae'r golled mewn ansawdd ynfel arfer yn ddisylw i'r llygad dynol.

Byddwn yn mynd i fwy o fanylion am gywasgu yn nes ymlaen, ond am y tro os ydych ond yn cofio dau beth, cofiwch: JPEG ar gyfer lluniau a PNG ar gyfer testun/graffeg.

Dimensiynau delwedd

Ydych chi erioed wedi llwytho tudalen we a sylwi bod llun bach (efallai mai llun pen, er enghraifft) yn cymryd f-o-r-e-v-e-r i'w lawrlwytho? Fel, mor araf gallwch weld pob llinell yn dod i mewn? Rydych chi'n meddwl i chi'ch hun, sut gall delwedd mor fach gymryd cymaint o amser i'w llwytho i lawr?

A phan mae'n digwydd i ddelwedd pennawd mawr, mae'n waeth byth oherwydd gall atal llwyth y dudalen gyfan.<1

Y rheswm y mae hyn yn digwydd yw oherwydd nad yw'r blogiwr wedi newid maint ac optimeiddio ei ddelwedd yn iawn, ac yn achos ein hesiampl headshot, efallai ei fod wedi uwchlwytho JPEG cydraniad llawn yn uniongyrchol o'i gamera DSLR.<1

A dyna ffeil enfawr!

Chi'n gweld, bydd porwr gwe (fel arfer) yn graddio delwedd o'i dimensiynau gwreiddiol fel ei fod yn ffitio'n dda yn ei le ar dudalen we. Gallai'r hyn sy'n ymddangos yn ddelwedd fach ar y sgrin fod yn lun enfawr 10-megapixel, wedi'i leihau mewn amser real gan y porwr.

Nawr bydd rhai llwyfannau cyhoeddi gwe yn creu amrywiadau lluosog yn awtomatig o'ch delwedd cydraniad llawn mewn gwahanol meintiau, ond os na, dylech newid maint eich delweddau ymlaen llaw mewn golygydd delwedd fel Photoshop, Lightroom, Pixlr - neu hyd yn oed MS Paint. Gall olygu'r gwahaniaethrhwng ffeil 50K ac un 5MB.

Bydd WordPress, er enghraifft, yn creu tri chopi (neu fwy, yn dibynnu ar eich thema) yn awtomatig o'ch delwedd a uwchlwythwyd - pob un â dimensiynau gwahanol - y gallwch eu defnyddio mewn postiadau blog, yn hytrach na defnyddio'r ddelwedd maint llawn bob amser.

Os ydych chi'n arfer uwchlwytho lluniau stoc enfawr, ac eisiau arbed lle yn eich cyfrif cynnal, mae'r ategyn WordPress Mae gan Imsanity eich cefn.

Mae'n newid maint ac yn disodli'r ddelwedd wreiddiol i rywbeth mwy hylaw, felly hyd yn oed os ydych chi'n mewnosod y ddelwedd maint llawn yn eich postiad, ni fydd hi mor ddrwg.

Ar ôl ei actifadu, gall Imsanity hefyd chwilio'ch delweddau presennol a newid maint yn unol â hynny.

Nid yw gwasanaethu'ch delweddau

Nid yw sut rydych chi'n gwasanaethu'ch delweddau i'ch ymwelwyr yn ymwneud â'u hoptimeiddio fel y cyfryw yn unig , ond gall gael effaith ddramatig ar eich amser llwytho tudalen.

Mae'r rhan fwyaf o flogwyr yn gweini eu delweddau yn syth o'u cyfrif cynnal ac mae hynny'n iawn fel arfer, ond os ydych chi'n awyddus iawn i wasgu pob tamaid o berfformiad allan o eich gwefan, yna gall cynnal eich delweddau ar Rwydwaith Cyflenwi Cynnwys (CDN) wneud gwahaniaeth mawr.

Mae CDN yn cynnwys gweinyddwyr gwe sydd wedi'u lleoli'n strategol mewn canolfannau data ledled y byd. Mae'r gweinyddwyr hyn yn cynnal copïau dyblyg o'ch delweddau a phan fydd porwr ymwelydd yn gofyn am ddelwedd o'ch gwefan, mae'r CDN yn cyfeirio'r porwr yn awtomatig igweinydd sydd agosaf atynt yn ddaearyddol.

Mae hyn yn golygu y bydd ymwelwyr o Ewrop, er enghraifft, yn derbyn delweddau a wasanaethir gan weinydd Ewropeaidd lleol, yn hytrach nag un o'r Taleithiau neu rywle arall. Gan fod amser ymateb a hwyrni rhwydwaith wedi'i leihau, mae'r delweddau'n llwytho i lawr yn gynt o lawer, gan leihau'r amser llwytho tudalen.

Mae'r Dewin Blogio yn defnyddio Sucuri (mae'n cynnwys Mur Tân ar gyfer diogelwch yn ogystal â CDN), ond mae darparwyr ansawdd eraill fel Amazon's Cloudfront neu KeyCDN. Mae hyd yn oed y CloudFlare poblogaidd, nad yw'n CDN mewn gwirionedd, yn cynnig CDN am ddim ac mae'n hawdd ei sefydlu yn y rhan fwyaf o becynnau cynnal a rennir.

Cywasgu delwedd

Pan ddaw'n amser optimeiddio eich delweddau, nid oes dim yn lleihau maint eich ffeil yn fwy na chywasgu delweddau colledig datblygedig.

Bydd y rhan fwyaf o offer golygu delweddau fel Visme neu Photoshop yn arbed ffeiliau gan ddefnyddio cywasgiad JPEG coll gan ei fod wedi lleihau maint y ffeil orau. Felly, er bod ansawdd y ddelwedd ychydig yn llai, mae defnyddio cywasgu delweddau coll yn lleihau delweddau enfawr i feintiau gwe-gyfeillgar.

Rwy'n siŵr y gallai llawer sy'n defnyddio Photoshop weld ei nodwedd Cadw ar gyfer y We fel be-all a diwedd-y cyfan o ddelwedd optimization. Ac mae hyd yn oed offer golygu delweddau ar-lein fel PicMonkey neu Visme yn gwneud y gorau o'ch delweddau hefyd.

Ond a oeddech chi'n gwybod bod yna offer a all gymryd eich delwedd “optimized” o Photoshop neu offer golygu eraill, ei wasgu a'i gywasgu 40% arall (neu fwy),a yn dal a yw'n ymddangos bron yn union yr un fath â'r llygad dynol?

Dyma rai offer rhad ac am ddim a thâl i'ch helpu i wasgu'ch delweddau i statws gwe-gyfeillgar.

Offer penbwrdd

ImageAlpha / ImageOptim

Ar gyfer y defnyddiwr Mac, mae ImageOptim yn offeryn bwrdd gwaith am ddim yr wyf yn ei ddefnyddio bob dydd i optimeiddio delweddau PNG - sgrinluniau yn bennaf - cyn i mi eu huwchlwytho. Mae'r offer hyn yn hawdd i'w defnyddio, rydych chi'n llusgo a gollwng eich ffeiliau, ond mae'n rhaid i chi wneud un ddelwedd ar y tro.

Gweld hefyd: 3 Ategyn Prinder WordPress Gorau ar gyfer 2023 (Hybu Gwerthiant Cyflym)

Awgrym Pro : Ar gyfer y dechnoleg ddeallus mae ImageOptim– CLI, lle gallwch optimeiddio ffolder gyfan o ddelweddau ar unwaith.

Mae ImageAlpha yn gywasgydd PNG colledig a gall wneud rhyfeddodau ar grebachu ffeiliau PNG tra bod ImageOptim yn perfformio cywasgiad di-golled uwch (gyda'r opsiwn o lossy) - ac mae'n yn stripio metadata diangen o ffeiliau PNG, JPEG a GIF.

Gweld hefyd: 29 Ystadegau Gorau Chatbot ar gyfer 2023: Defnydd, Demograffeg, Tueddiadau

Ar gyfer fy nelweddau PNG, rwy'n eu rhedeg yn gyntaf trwy ImageAlpha:

Yma, gostyngodd fy nelwedd sgrin o 103K i 28K.

Yna rhedais ef trwy ImageOptim ac arbedais 10% ychwanegol.

JPEGmini

Ar gyfer fy ffeiliau JPEG, rwy'n eu hoptimeiddio gyda'r ap JPEGmini bwrdd gwaith, sydd ar gael ar gyfer Mac a Windows.

Mae'r fersiwn Lite yn caniatáu i chi wneud y gorau o hyd at 20 delwedd y dydd am ddim, ac mae'n costio $19.99 i ddileu'r terfyn.

Awgrym Pro : Gall defnyddwyr uwch sydd am integreiddio JPEGmini i Photoshop neu Lightroom trwy ategyn brynu'r fersiwn Pro ar gyfer$99.99.

Offer Ar-lein / Cloud / SaaS

TinyPNG

Os ydych chi'n chwilio am offeryn cywasgu delweddau ar-lein o ansawdd uchel, TinyPNG (mae'n optimeiddio JPEG Mae ffeiliau hefyd er gwaethaf yr enw) yn ap gwe sy'n eich galluogi i lusgo hyd at 20 5MB neu ddelweddau llai i'ch porwr, a'u hoptimeiddio i gyd ar unwaith.

Mae ganddyn nhw hefyd API datblygwr a gwneud WordPress ategyn ar gael a all optimeiddio'ch delweddau yn awtomatig ar ôl eu huwchlwytho.

Mae TinyPNG yn rhoi 500 o optimeiddiadau delwedd am ddim i chi bob mis, ac wedi hynny mae'n codi rhwng $0.002-0.009 y ddelwedd, yn dibynnu ar faint.

Nawr 500 efallai y bydd delweddau'r mis yn swnio'n llawer, ond pan fyddwch chi'n ystyried y ffaith bod WordPress yn aml yn creu tri i bum amrywiad o bob delwedd mewn gwahanol feintiau, nid yw 500 o ddelweddau yn ymddangos fel bod llawer ar gyfer y blogiwr toreithiog. Yn ffodus, mae'r gost fesul delwedd yn gyfeillgar i'r gyllideb.

Optimizer Delwedd EWWW

Os nad ydych chi'n barod i wario arian, ac nad ydych chi am gael eich poeni ag optimeiddio eich delweddau â llaw, gall yr ategyn Optimizer Delwedd EWWW rhad ac am ddim ar gyfer WordPress optimeiddio'r delweddau rydych wedi'u llwytho i fyny yn awtomatig.

Gallwch ddewis tanysgrifiad premiwm sy'n perfformio cywasgu colledus, ond mae'r fersiwn rhad ac am ddim ond yn perfformio cywasgiad di-golled felly mae'r arbedion' t bron mor sylweddol. Bydd yn arbed amser i chi ac mae'n well na dim byd, serch hynny.

Sylwer: Am fanylion llawn, ewch iein post ar offer cywasgu delweddau.

Wrth ei lapio

Gyda rhai pobl yn rhagweld maint cyfartalog y dudalen we i nesáu at 3MB erbyn 2017, nawr yw'r amser i ddechrau optimeiddio'ch delweddau.

Cofiwch, ni fydd pob un o'ch ymwelwyr ar gysylltiadau cyflym, a gall amserau chwythiad tudalennau ac amseroedd llwytho tudalennau araf effeithio ar eich safle gyda Google. Er mwyn eich helpu i ysgafnhau'r llwyth, fel petai, dewch i'r arfer o optimeiddio'ch delweddau heddiw.

Rhowch sylw i ddimensiynau eich delwedd a newid maint unrhyw stoc o luniau neu ddelweddau rhy fawr o gamera digidol i lawr i un priodol maint.

Nesaf, manteisiwch ar gywasgu delweddau modern gydag apiau bwrdd gwaith fel JPEGmini, neu offer cwmwl fel TinyPNG neu Kraken - gan eu hintegreiddio i WordPress gydag ategyn os yn bosibl.

Yn olaf, os yw'ch llwyfan cyhoeddi yn creu amrywiadau o'ch delwedd wreiddiol yn awtomatig, dewiswch un o'r rhain ar gyfer eich post blog, yn hytrach na'r un gwreiddiol, maint llawn.

Darllen Cysylltiedig: 7 Ffordd o Leihau'r Maint Ffeiliau PDF.

Patrick Harvey

Mae Patrick Harvey yn awdur profiadol ac yn farchnatwr digidol gyda dros 10 mlynedd o brofiad yn y diwydiant. Mae ganddo wybodaeth helaeth am bynciau amrywiol fel blogio, cyfryngau cymdeithasol, e-fasnach, a WordPress. Mae ei angerdd dros ysgrifennu a helpu pobl i lwyddo ar-lein wedi ei ysgogi i greu swyddi craff a deniadol sy'n rhoi gwerth i'w gynulleidfa. Fel defnyddiwr WordPress hyfedr, mae Patrick yn gyfarwydd â hanfodion adeiladu gwefannau llwyddiannus, ac mae'n defnyddio'r wybodaeth hon i helpu busnesau ac unigolion fel ei gilydd i sefydlu eu presenoldeb ar-lein. Gyda llygad craff am fanylion ac ymrwymiad diwyro i ragoriaeth, mae Patrick yn ymroddedig i ddarparu'r tueddiadau a'r cyngor diweddaraf yn y diwydiant marchnata digidol i'w ddarllenwyr. Pan nad yw'n blogio, gellir dod o hyd i Patrick yn archwilio lleoedd newydd, darllen llyfrau, neu chwarae pêl-fasged.