Hou jy nie van beelde nie?

Hulle kan 'n stukkie teks in 'n boeiende ervaring omskep terwyl jy lees. Prente verbeter 'n blogplasing, maak dit meer deelbaar en stel die toon en handelsmerk van jou hele werf aan.

En weet jy wat? Ons is vasgestel om op beelde te reageer. Dit is hoekom die inkorporering van beelde by jou inhoud 'n kragtige hulpmiddel is om te gebruik wanneer jy jou blog bemark.

Maar, as jy nie versigtig is nie, kan beelde meer as die helfte (of meer) van jou webblad se totale grootte uitmaak. Net 'n paar jaar gelede was die gemiddelde grootte van 'n webblad 600–700K. Nou is die gemiddeld 2MB en dit neem elke jaar toe.

Dit is groot!

Die hoofrede waarom dit gebeur, is omdat veelvuldige beelde meer gereeld op webblaaie gebruik word, en hierdie beelde is nie behoorlik grootte en geoptimaliseer nie. Dit beteken dat hulle nie op 'n webvriendelike manier gestoor of saamgestel is nie, en eerder jou bladsye opblaas.

Die meeste van ons laat egter die optimalisering van beelde as 'n nagedagte en sal dit eerder geniet om die prettige goed te doen. soos om 'n epiese plasing te skep of om met ander bloggers in jou nis te netwerk.

Maar om bladsyopblaas te hê, beteken dat jou bladsylaaispoed beïnvloed word. Jy dink dalk nie dit is 'n groot probleem as jy op 'n hoëspoedverbinding is nie, maar baie van jou besoekers is nie. Google hou ook nie van stadige laai van bladsye nie, en dit kan jou SEO negatief beïnvloed.

Waarom jy beelde moet optimeer

Jy werk hard aandie skep van wonderlike inhoud en jy spandeer ontelbare ure om jou blog te bevorder en met ander bloggers te netwerk, so die laaste ding wat jy wil hê, is dat potensiële besoekers jou webwerf moet verlaat voordat dit eers laai!

Studies toon dat tot 40% van besoekers klik die terug-knoppie as 'n werf langer as drie sekondes neem om te laai.

Ek weet, drie sekondes is regtig nie so lank nie, maar wanneer jy op 'n mobiele verbinding is en jy wag vir 'n werf om te laai, kan 'n sekonde soos vir ewig lyk.

En aangesien baie van jou besoekers dalk op stadiger mobiele verbindings is, word dit duidelik – jy moet jou bladsygrootte verminder. En ons weet reeds wat die grootste oortreder van bladsygrootte-opblaas is – dit is jou beelde.

Onnodige groot beelde neem ook spasie op jou gasheerrekening op. Alhoewel sommige van u gasheer kan hê met 'onbeperkte' stoorspasie, beperk baie premium gasheerverskaffers u tot ongeveer 10 GB berging op laervlakplanne. Dit kan vinnig vol raak, veral as jy verskeie, beeldswaar werwe op dieselfde rekening aanbied.

So, hoe kan jy weet of jou beelde jou werf stadiger maak? Toets jou werf se spoed met Google PageSpeed ​​Insights.

As Google ongeoptimaliseerde beelde as 'n probleem rapporteer, is hier wat jy moet weet om dit reg te stel.

Beginsel van beeldoptimering

Wanneer dit kom by die optimalisering van beelde op jou blog, is daar 'n paar verskillende dinge wat jy moet weesbewus van: lêertipe, prentgrootte en afmetings, hoe jy jou prente bedien, en prentkompressie.

Kom ons kyk na elkeen van hierdie areas van naderby.

Lêertipe

Prente op die web word gewoonlik in die PNG- of JPEG-lêerformaat gestoor – of GIF vir animasie. Wie hou nie van daardie skreeusnaakse geanimeerde GIF's wat op die web rondsweef nie!

Dit is nou tegnies okay as jy jou prente in enige van die formaat stoor – jou besoeker se blaaier sal geen probleme ondervind om jou webbladsy te vertoon nie. – maar vir die beste kwaliteit en optimalisering, hou by die volgende reëls:

• JPEG – gebruik vir foto's en ontwerpe waar mense, plekke of dinge vertoon word
• PNG – die beste vir grafika , logo's, teks-swaar ontwerpe, skermkiekies, en wanneer jy beelde met deursigtige agtergronde benodig
• GIF – as jy animasie benodig, gebruik anders PNG

So, hoekom is daar verskillende formate ?

Wel, PNG word tradisioneel gebruik om logo's en grafika te stoor omdat dit die oorspronklike beeldkwaliteit behou – niemand wil vaag teks en pixelvormige vorms hê nie. Maar as jy probeer om 'n foto as 'n PNG te stoor, sal dit ongelooflik lyk, maar die resulterende lêergrootte sal minder as verstommend wees.

JPEG word tradisioneel gebruik om foto's te stoor. Sommige van die beelddata word weggegooi om 'n drasties kleiner lêergrootte te skep, maar aangesien foto's 'n wye verskeidenheid kleure en natuurlike variasies bevat, is die verlies in kwaliteitgewoonlik onopvallend vir die menslike oog.

Ons gaan later in meer besonderhede oor kompressie in, maar vir eers as jy net twee dinge onthou, onthou: JPEG vir foto's en PNG vir teks/grafika.

Beeldafmetings

Het jy al ooit 'n webblad opgelaai en opgemerk dat 'n piepklein prentjie (dalk 'n kopskoot, byvoorbeeld) f-o-r-e-v-e-r neem om af te laai? Soos, so stadig dat jy elke reël kan sien inkom? Jy dink by jouself, hoe kan so 'n klein prent so lank neem om af te laai?

En wanneer dit met 'n groot kopfoto gebeur, is dit nog erger, want dit kan die hele bladsylading stop.

Die rede waarom dit gebeur, is omdat die blogger nie hul beeld behoorlik aangepas en geoptimaliseer het nie, en in die geval van ons kopskootvoorbeeld, dalk 'n volresolusie JPEG direk vanaf sy of haar DSLR-kamera opgelaai het.

En dit is 'n groot lêer!

Jy sien, 'n webblaaier sal (gewoonlik) 'n prent vanaf sy oorspronklike afmetings skaal sodat dit mooi op sy plek op 'n webblad pas. Wat na 'n klein prent op die skerm lyk, kan regtig 'n groot 10-megapixel-foto wees, wat intyds deur die blaaier afgeskaal word.

Nou sal sommige webpubliseringsplatforms outomaties veelvuldige variasies van jou volle resolusie-prent in verskillende groottes, maar indien nie, moet jy vooraf die grootte van jou beelde verander in 'n beeldredigeerder soos Photoshop, Lightroom, Pixlr – of selfs MS Paint. Dit kan die verskil betekentussen 'n 50K-lêer en 5MB een.

WordPress sal byvoorbeeld outomaties drie (of meer, afhangende van jou tema) kopieë van jou opgelaaide prent skep – almal met verskillende afmetings – wat jy kan gebruik in blogplasings, eerder as om altyd die volgrootte prent te gebruik.

As jy die gewoonte het om groot voorraadfoto-prente op te laai en spasie in jou gasheerrekening wil bespaar, kan die WordPress-inprop Waansinnigheid het jou rug.

Dit verander die oorspronklike prent en vervang dit na iets wat meer hanteerbaar is, so selfs as jy die volgrootte prent in jou plasing invoeg, sal dit nie so erg wees nie.

Sodra dit geaktiveer is, kan Imsanity ook jou bestaande beelde deursoek en die grootte dienooreenkomstig verander.

Om jou beelde te bedien

Hoe jy jou beelde aan jou besoekers bedien, gaan nie streng daaroor om dit per se te optimaliseer nie. , maar dit kan 'n dramatiese impak op jou bladsy se laaityd hê.

Die meeste bloggers bedien hul beelde direk vanaf hul gasheerrekening en dit is gewoonlik goed, maar as jy regtig op soek is om elke stukkie prestasie uit te druk jou werf, dan kan die aanbieding van jou beelde op 'n Content Delivery Network (CDN) 'n groot verskil maak.

'n CDN bestaan ​​uit strategies geplaasde webbedieners wat in datasentrums regoor die wêreld geleë is. Hierdie bedieners huisves duplikaatkopieë van jou prente en wanneer 'n besoeker se blaaier 'n prent van jou webwerf versoek, stuur die CDN die blaaier outomaties na 'nbediener wat geografies die naaste aan hulle is.

Dit beteken besoekers uit Europa sal byvoorbeeld beelde ontvang wat van 'n plaaslike Europese bediener af bedien word, eerder as een van die State of elders. Aangesien reaksietyd en netwerkvertraging verminder word, laai die beelde baie vinniger af, wat die laaityd van bladsye verminder.

Blogging Wizard gebruik Sucuri (dit sluit 'n Firewall vir sekuriteit sowel as 'n CDN in), maar daar is ander kwaliteitverskaffers soos Amazon se Cloudfront of KeyCDN. Selfs die gewilde CloudFlare, wat nie streng 'n CDN is nie, bied 'n CDN gratis en is maklik om in die meeste gedeelde gasheerpakkette op te stel.

Beeldkompressie

Wanneer dit kom by die optimalisering van jou beelde, niks verminder jou lêergrootte meer as gevorderde prentkompressie met verlies nie.

Die meeste beeldredigeernutsmiddels soos Visme of Photoshop sal lêers stoor deur JPEG-kompressie te gebruik, aangesien dit die beste lêergrootteverminderings het. Dus, terwyl die beeldkwaliteit effens verminder word, verminder die gebruik van verliesagtige beeldkompressie groot beelde tot webvriendelike groottes.

Ek is seker baie wat Photoshop gebruik, sal dalk die Stoor vir Web -kenmerk sien. as die alles en einde van beeldoptimalisering. En selfs aanlyn beeldredigeernutsgoed soos PicMonkey of Visme optimaliseer ook jou beelde.

Maar het jy geweet daar is nutsgoed wat jou "geoptimaliseerde" prent van Photoshop of ander redigeernutsgoed kan neem, dit kan knars en saampers met nog 40% (of meer),en steeds lyk dit byna identies aan die menslike oog?

Hier is 'n paar gratis en betaalde nutsmiddels om jou te help om jou prente tot webvriendelike status te kry.

Desktopnutsgoed

ImageAlpha / ImageOptim

Vir die Mac-gebruiker is ImageOptim 'n gratis werkskermnutsding wat ek elke dag gebruik om PNG-beelde – meestal skermkiekies – te optimaliseer voordat ek dit oplaai. Hierdie gereedskap is maklik om te gebruik, jy sleep net jou lêers, maar jy moet een prent op 'n slag doen.

Pro-wenk : Vir die tegnologie-vaardig is daar ImageOptim– CLI, waar jy 'n hele vouer van beelde op een slag kan optimaliseer.

ImageAlpha is 'n PNG-kompressor met verlies en kan wondere doen oor die krimpende PNG-lêers terwyl ImageOptim gevorderde verlieslose (met die opsie van verlieslose) kompressie uitvoer – en dit stroop onnodige metadata van PNG-, JPEG- en GIF-lêers.

Vir my PNG-beelde laat ek dit eers deur ImageAlpha:

Hier het dit my kiekieprent van 103K tot 28K verminder.

Ek het dit toe deur ImageOptim gehardloop en 'n ekstra 10% gespaar.

JPEGmini

Vir my JPEG-lêers optimaliseer ek dit met die JPEGmini-program vir rekenaars, beskikbaar vir beide Mac en Windows.

Die Lite-weergawe laat jou toe om tot 20 beelde per dag gratis te optimaliseer, en kos $19,99 om die limiet te verwyder.

Pro-wenk : Gevorderde gebruikers wat JPEGmini in Photoshop of Lightroom wil integreer deur middel van 'n inprop, kan die Pro-weergawe koop vir$99.99.

Aanlyn / Wolk / SaaS-nutsmiddels

TinyPNG

As jy op soek is na 'n hoëgehalte aanlyn beeldkompressie-instrument, TinyPNG (dit optimaliseer JPEG lêers ook ten spyte van die naam) is 'n webtoepassing wat jou toelaat om tot 20 5MB of kleiner beelde na jou blaaier te sleep, en dit alles op een slag te laat optimeer.

Hulle het ook 'n ontwikkelaar-API en maak 'n WordPress inprop beskikbaar wat jou prente outomaties kan optimaliseer wanneer dit opgelaai word.

TinyPNG gee jou 500 gratis prentoptimalisasies per maand, en hef daarna van $0,002–0,009 per prent, afhangend van volume.

Nou 500 beelde per maand mag dalk na baie klink, maar as jy die feit in ag neem dat WordPress dikwels drie tot vyf variasies van elke beeld in verskillende groottes skep, lyk 500 beelde nie na so baie vir die produktiewe blogger nie. Gelukkig is die koste per beeld begrotingsvriendelik.

EWWW Image Optimizer

As jy nie gereed is om geld te spandeer nie, en jy nie met optimalisering gepla wil wees nie. jou beelde met die hand, die gratis EWWW Image Optimizer-inprop vir WordPress kan jou opgelaaide beelde outomaties optimaliseer.

Jy kan kies vir 'n premium-intekening wat verlieslose kompressie uitvoer, maar die gratis weergawe voer net verlieslose kompressie uit, sodat die besparings' t amper so aansienlik. Dit sal jou tyd bespaar en is egter beter as niks.

Let wel: Vir 'n volledige uiteensetting, kyk naons plasing oor beeldkompressienutsgoed.

Om dit saam te vat

Met sommige mense wat voorspel dat die gemiddelde webbladsygrootte teen 2017 3MB sal nader, is dit nou die tyd om jou beelde te begin optimeer.

Onthou, nie al jou besoekers sal op hoëspoedverbindings wees nie, en bladsyopblaas en stadige bladsylaaitye kan moontlik jou posisie by Google beïnvloed. Om jou te help om die las so te sê ligter te maak, maak vandag die gewoonte om jou prente te optimaliseer.

Gee aandag aan jou prentafmetings en verander die grootte van enige te groot voorraadfoto's of prente van 'n digitale kamera af na 'n gepaste grootte.

Neem dan voordeel uit moderne beeldkompressie met rekenaartoepassings soos JPEGmini, of wolknutsgoed soos TinyPNG of Kraken – integreer dit in WordPress met 'n inprop indien moontlik.

Laastens, as jou publiseerplatform skep outomaties veranderde grootte variasies van jou oorspronklike prent, kies een hiervan vir jou blogplasing, eerder as die oorspronklike, volgrootte een.

Verwante leeswerk: 7 maniere om die te verminder. Grootte van PDF-lêers.