Hâldsto gjin ôfbyldings?

Se kinne in stikje tekst transformearje yn in boeiende ûnderfining wylst jo lêze. Ofbyldings ferbetterje in blogpost, meitsje it dielberder en jouwe de toan en merk fan jo hiele side.

En witsto wat? Wy binne hardwired om te reagearjen op ôfbyldings. Dêrom is it opnimmen fan ôfbyldings yn jo ynhâld in krêftich ark om te brûken by it marketing fan jo blog.

Mar, as jo net foarsichtich binne, kinne ôfbyldings mear as de helte (of mear) fan jo webside fan 'e totale grutte ferantwurdzje. Krekt in pear jier lyn wie de gemiddelde grutte fan in webside 600–700K. No is it gemiddelde 2MB en it nimt alle jierren ta.

Dat is enoarm!

De wichtichste reden dat dit bart is om't meardere ôfbyldings faker brûkt wurde op websiden, en dizze ôfbyldings binne 't goed grutte en optimalisearre. Dit betsjut dat se net bewarre of kompilearre binne op in webfreonlike manier, en ynstee fan jo siden opblaze.

De measten fan ús litte lykwols it optimalisearjen fan ôfbyldings as in neitocht litte en wolle leaver genietsje fan it dwaan fan de leuke dingen lykas it meitsjen fan in epyske post of netwurkjen mei oare bloggers yn jo niche.

Mar, it hawwen fan pagina-bloat betsjut dat jo side-laadsnelheid wurdt beynfloede. Jo tinke miskien net dat dit in grut probleem is as jo op in ferbining mei hege snelheid binne, mar in protte fan jo besikers binne net. Ek hâldt Google net fan trage laden siden, en it kin jo SEO negatyf beynfloedzje.

Wêrom moatte jo ôfbyldings optimalisearje

Jo wurkje hurd oanit meitsjen fan stellare ynhâld en jo besteegje ûntelbere oeren oan it befoarderjen fan jo blog en netwurkjen mei oare bloggers, dus it lêste ding dat jo wolle is dat potinsjele besikers jo webside ferlitte foardat it sels laden!

Stúdzjes litte sjen dat oant 40% fan besikers klikke op de knop werom as in side langer duorret as trije sekonden om te laden.

Ik wit it, trije sekonden is echt net sa lang, mar as jo op in mobile ferbining binne en jo wachtsje op in side te laden, kin in sekonde lykje as foar altyd.

En om't in protte fan jo besikers op tragere mobile ferbiningen kinne, wurdt it dúdlik - jo moatte jo sidegrutte omleech krije. En wy witte al wat de grutste misdiediger fan sidegrutte bloat is - it binne jo ôfbyldings.

Unnedich grutte ôfbyldings nimme ek romte yn op jo hostingaccount. Wylst guon fan jo miskien hawwe hosting mei "ûnbeheinde" opslachromte, beheine in protte premium hostingproviders jo oant sawat 10 GB opslach op plannen mei legere tiers. Dit kin fluch folje, benammen as jo meardere, ôfbylding-swiere siden op itselde akkount hostje.

Dus, hoe kinne jo fertelle as jo ôfbyldings jo side fertrage? Test de snelheid fan jo side mei Google PageSpeed ​​Insights.

As Google net-optimisearre ôfbyldings as in probleem rapporteart, is hjir wat jo witte moatte om it te reparearjen.

Basis fan ôfbyldingsoptimalisaasje

As it giet om it optimalisearjen fan ôfbyldings op jo blog, binne d'r in pear ferskillende dingen dy't jo moatte wêzebewust fan: bestânstype, ôfbyldingsgrutte en ôfmjittings, hoe't jo jo ôfbyldings tsjinje, en ôfbyldingskompresje.

Litte wy elk fan dizze gebieten fan tichterby besjen.

Triemtype

Ofbylden op it web wurde normaal bewarre yn it PNG- of JPEG-bestânformaat - as GIF foar animaasje. Wa hâldt net fan dy hilaryske animearre GIF's dy't oer it web driuwe!

No is it technysk okee as jo jo ôfbyldings yn beide formaten bewarje - de browser fan jo besiker sil gjin problemen hawwe mei it werjaan fan jo webside - mar foar de bêste kwaliteit en optimalisaasje, hâld jo oan 'e folgjende regels:

• JPEG - brûke foar foto's en ûntwerpen wêr't minsken, plakken of dingen te sjen binne
• PNG - bêste foar grafiken , logo's, tekst-swiere ûntwerpen, skermôfbyldings, en as jo ôfbyldings nedich hawwe mei transparante eftergrûnen
• GIF - as jo animaasje nedich binne, brûk oars PNG

Dus, wêrom binne d'r ferskillende formaten ?

No, PNG wurdt tradisjoneel brûkt foar it bewarjen fan logo's en grafiken, om't it de orizjinele ôfbyldingskwaliteit behâldt - gjinien wol wazige tekst en pikseleare foarmen. Mar, as jo besykje in foto te bewarjen as in PNG, sil it geweldich útsjen, mar de resultearjende triemgrutte sil minder wêze as geweldig.

JPEG wurdt tradisjoneel brûkt foar it bewarjen fan foto's. Guon fan 'e ôfbyldingsgegevens wurde fuortsmiten om in drastysk lytsere triemgrutte te meitsjen, mar om't foto's in grut ferskaat oan kleuren en natuerlike fariaasjes befetsje, is it ferlies oan kwaliteitmeastentiids net te merken foar it minsklik each.

Wy geane letter yn mear detail oer kompresje, mar foar no as jo mar twa dingen ûnthâlde, tink dan oan: JPEG foar foto's en PNG foar tekst/grafyk.

Ofbyldmjittingen

Hawwe jo oait in webside laden en opfallen dat in lytse foto (miskien in kopôfbylding, bygelyks) f-o-r-e-v-e-r kostet om te downloaden? Lykas, sa stadich dat jo elke rigel ynkomme kinne sjen? Jo tinke by josels, hoe kin sa'n lyts byld sa lang duorje om te downloaden?

En as it bart mei in grutte kopôfbylding, is it noch slimmer, om't it de hiele sidelading kin stopje.

De reden dat dit bart is om't de blogger har ôfbylding net goed oanpast en optimalisearre hat, en yn it gefal fan ús headshot-foarbyld, miskien in folsleine-resolúsje JPEG direkt fan syn of har DSLR-kamera uploaded hawwe.

En dat is in grut bestân!

Sjoch, in webblêder sil (meastentiids) in ôfbylding skaalje fan 'e oarspronklike ôfmjittings, sadat it moai op syn plak past op in webside. Wat in lyts byld op it skerm liket te wêzen, kin in geweldige 10-megapixel foto wêze, yn realtime ôfskaald troch de browser.

No sille guon webpublisearjende platfoarms automatysk meardere farianten meitsje fan jo ôfbylding mei folsleine resolúsje yn ferskate grutte, mar sa net, dan moatte jo de grutte fan jo ôfbyldings foarôf feroarje yn in ôfbyldingsbewurker lykas Photoshop, Lightroom, Pixlr - of sels MS Paint. It kin betsjutte it ferskiltusken in 50K-bestân en 5MB ien.

WordPress, bygelyks, sil automatysk trije (of mear, ôfhinklik fan jo tema) kopyen meitsje fan jo opladen ôfbylding - allegear mei ferskillende dimensjes - dy't jo brûke kinne yn blogposten, ynstee fan altyd de ôfbylding op folsleine grutte te brûken.

As jo ​​de gewoante hawwe om grutte stockfoto-ôfbyldings op te laden, en romte wolle besparje yn jo hostingaccount, dan is de WordPress-plugin Imsanity hat dyn rêch.

It feroaret de grutte en ferfangt de orizjinele ôfbylding nei wat mear te behearjen, dus sels as jo de folsleine grutte ôfbylding yn jo post ynfoegje, sil it net sa slim wêze.

As ienris aktivearre is, kin Imsanity ek jo besteande ôfbyldings sykje en de grutte oanpasse.

Jo ôfbyldings tsjinje

Hoe't jo jo ôfbyldings tsjinje oan jo besikers is net strikt oer it optimalisearjen fan se per se , mar it kin in dramatyske ynfloed hawwe op jo side-laadtiid.

De measte bloggers tsjinje har ôfbyldings direkt fan har hosting-akkount en dat is normaal goed, mar as jo echt sykje om elk bytsje prestaasjes út te drukken jo side, dan hosting fan jo ôfbyldings op in Content Delivery Network (CDN) kin in grut ferskil meitsje.

In CDN bestiet út strategysk pleatste webservers dy't yn datasintra oer de hiele wrâld sitte. Dizze servers hoste dûbele kopyen fan jo ôfbyldings en as de browser fan in besiker in ôfbylding fan jo webside freget, rjochtet de CDN de browser automatysk nei inserver dy't geografysk it tichtst by harren is.

Dit betsjut dat besikers út Jeropa bygelyks ôfbyldings sille ûntfange fan in lokale Jeropeeske server, ynstee fan ien út de Steaten of earne oars. Sûnt de reaksjetiid en netwurklatinsje wurdt fermindere, wurde de ôfbyldings folle flugger downloade, wat de laadtiid fan side fermindert.

Blogging Wizard brûkt Sucuri (it befettet in Firewall foar feiligens en ek in CDN), mar d'r binne oare kwaliteitsproviders. lykas Amazon's Cloudfront of KeyCDN. Sels de populêre CloudFlare, dy't net strikt in CDN is, biedt in CDN fergees en is maklik yn te stellen yn de measte dielde hostingpakketten.

Ofbyldingskompresje

As it giet om it optimalisearjen fan jo ôfbyldings, neat ferminderet jo triemgrutte mear as avansearre kompresje mei ferlies fan ôfbyldings.

De measte byldbewurkingsynstruminten lykas Visme of Photoshop sille bestannen opslaan mei JPEG-kompresje mei ferlies, om't it de bêste reduksjes fan triemgrutte hat. Dus, hoewol de ôfbyldingskwaliteit wat fermindere wurdt, ferminderet it brûken fan lossy-ôfbyldingskompresje enoarme ôfbyldings nei webfreonlike maten.

Ik bin der wis fan dat in protte dy't Photoshop brûke, syn funksje Bewarje foar web kinne besjen. as it alles en it ein fan 'e ôfbyldingsoptimalisaasje. En sels online ark foar bewurkjen fan ôfbyldings lykas PicMonkey of Visme optimalisearje jo ôfbyldings ek.

Mar wisten jo dat d'r ark binne dy't jo "optimisearre" ôfbylding kinne nimme fan Photoshop of oare bewurkingsynstruminten, krûpe en komprimearje mei nochris 40% (of mear),en noch lykje it hast identyk oan it minsklik each?

Hjir binne wat fergese en betelle ark om jo te helpen om jo ôfbyldings te ferleegjen nei webfreonlike status.

Desktop-ark

ImageAlpha / ImageOptim

Foar de Mac-brûker is ImageOptim in fergese buroblêd-ark dat ik elke dei brûk om PNG-ôfbyldings te optimalisearjen - meast skermôfbyldings - foardat ik se upload. Dizze ark binne maklik te brûken, jo gewoan slepe en droppe jo triemmen, mar jo moatte dwaan ien ôfbylding op in tiid.

Pro tip : Foar de tech-savvy der is ImageOptim– CLI, wêr't jo in hiele map mei ôfbyldings tagelyk kinne optimalisearje.

ImageAlpha is in lossy PNG-kompressor en kin wûnders dwaan op krimpende PNG-bestannen, wylst ImageOptim avansearre lossless (mei de opsje fan lossy) kompresje útfiert - en it stript ûnnedige metadata fan PNG-, JPEG- en GIF-bestannen.

Foar myn PNG-ôfbyldings rin ik se earst troch ImageAlpha:

Hjir fermindere it myn skermôfbylding fan 103K nei 28K.

Ik haw it doe troch ImageOptim rûn en in ekstra 10% bewarre.

JPEGmini

Foar myn JPEG-bestannen optimalisearje ik se mei de buroblêd JPEGmini-app, beskikber foar sawol Mac as Windows.

De Lite ferzje lit jo maksimaal 20 ôfbyldings deis fergees optimalisearje, en kostet $19,99 om de limyt te ferwiderjen.

Pro tip : Avansearre brûkers dy't JPEGmini wolle yntegrearje yn Photoshop of Lightroom fia in plugin kinne de Pro-ferzje keapje foar$99.99.

Online / Cloud / SaaS-ark

TinyPNG

As jo ​​op syk binne nei in heechweardich online ôfbyldingskompresjeark, TinyPNG (it optimalisearret JPEG bestannen ek nettsjinsteande de namme) is in webapp wêrmei jo oant 20 5MB of lytsere ôfbyldings yn jo blêder kinne slepe, en se tagelyk optimalisearje kinne.

Se hawwe ek in ûntwikkelders API en meitsje in WordPress plugin beskikber dy't jo ôfbyldings automatysk kinne optimalisearje by upload.

TinyPNG jout jo 500 fergese ôfbyldingsoptimalisaasjes per moanne, en kostet dêrnei fan $0,002-0,009 per ôfbylding, ôfhinklik fan folume.

No 500 ôfbyldings per moanne klinke miskien as in protte, mar as jo it feit beskôgje dat WordPress faaks trije oant fiif farianten fan elke ôfbylding yn ferskate grutte makket, liket 500 ôfbyldings net dat folle foar de produktive blogger. Gelokkich binne de kosten per ôfbylding budzjetfreonlik.

EWWW Image Optimizer

As jo ​​net ree binne om jild te besteegjen, en jo wolle net lestich falle mei optimalisearjen jo ôfbyldings mei de hân, de fergese plugin EWWW Image Optimizer foar WordPress kin jo opladen ôfbyldings automatysk optimalisearje.

Jo kinne kieze foar in premium abonnemint dat kompresje mei ferlies útfiert, mar de fergese ferzje fiert allinich kompresje sûnder ferlies, sadat de besparrings binne' t hast like substansjeel. It sil jo tiid besparje en is lykwols better dan neat.

Opmerking: Sjoch foar in folsleine oersjochús post oer byldkompresje-ark.

It ynpakken

Mei guon minsken dy't foarsizze dat de gemiddelde websidegrutte oant 2017 3MB benaderet, is no de tiid om te begjinnen mei it optimalisearjen fan jo ôfbyldings.

Tink derom, net al jo besikers sille op hege snelheidsferbiningen wêze, en side-bloat en trage side-laadtiden kinne mooglik ynfloed hawwe op jo ranglist by Google. Om jo te helpen de lading te ferljochtsjen, om sa te sizzen, meitsje hjoed de gewoante om jo ôfbyldings te optimalisearjen.

Jou omtinken foar jo ôfbyldingsdimensjes en feroarje de grutte fan alle al te grutte stockfoto's of ôfbyldings fan in digitale kamera nei in passende grutte.

Nee, profitearje fan moderne ôfbyldingskompresje mei buroblêd-apps lykas JPEGmini, of wolk-ark lykas TinyPNG of Kraken - yntegrearje se yn WordPress mei in plugin as it mooglik is.

As lêste, as jo publisearjen platfoarm makket automatysk feroare grutte fariaasjes fan jo orizjinele ôfbylding, kies ien fan dizze foar jo blogpost, ynstee fan de orizjinele, folsleine grutte.

Related Reading: 7 Ways To Reduce The Grutte fan PDF-bestannen.