Kiel Optimumigi Bildojn Por La Reto

 Kiel Optimumigi Bildojn Por La Reto

Patrick Harvey

Ĉu vi ne amas bildojn?

Ili povas transformi tekstaĵon en allogan sperton dum vi legas. Bildoj plibonigas blogan afiŝon, igas ĝin pli konigebla kaj fiksas la tonon kaj markon de via tuta retejo.

Kaj vi scias kion? Ni estas fiksitaj por respondi al bildoj. Tial korpigi bildojn en vian enhavon estas potenca ilo por uzi dum merkatado de via blogo.

Sed, se vi ne zorgas, bildoj povas konsistigi pli ol duonon (aŭ pli) de la totala grandeco de via retpaĝo. Antaŭ nur kelkaj jaroj, la averaĝa grandeco de retpaĝo estis 600–700K. Nun, la mezumo estas 2MB kaj ĝi pliiĝas ĉiujare.

Tio estas grandega!

La ĉefa kialo, ke tio okazas, estas ĉar pluraj bildoj estas uzataj pli ofte en retpaĝoj, kaj ĉi tiuj bildoj estas; ne taŭge grandeco kaj optimumigita. Ĉi tio signifas, ke ili ne estas konservitaj aŭ kompilitaj en ret-amika maniero, kaj anstataŭe, ŝveligas viajn paĝojn.

La plej multaj el ni tamen lasas optimumigi bildojn kiel postpenson kaj prefere ĝuus fari la amuzajn aferojn. kiel krei epopean afiŝon aŭ interretigi kun aliaj blogantoj en via niĉo.

Sed, havi paĝan ŝvelaĵon signifas, ke via paĝa ŝarĝrapideco estas tuŝita. Vi eble ne pensas, ke ĉi tio estas grava afero, se vi estas en altrapida konekto, sed multaj el viaj vizitantoj ne estas. Ankaŭ, Google ne ŝatas malrapidajn ŝarĝajn paĝojn, kaj ĝi povas negative influi vian SEO.

Kial vi bezonas optimumigi bildojn

Vi multe laboras prikreante stelan enhavon kaj vi pasigas sennombrajn horojn reklamante vian blogon kaj interkonektante kun aliaj blogantoj, do la lasta afero, kiun vi volas, estas, ke eblaj vizitantoj forlasu vian retejon antaŭ ol ĝi eĉ ŝarĝas!

Studoj montras, ke ĝis 40% de vizitantoj alklakas la malantaŭan butonon se retejo daŭras pli ol tri sekundojn por ŝargi.

Mi scias, tri sekundoj vere ne estas tiom longaj, sed kiam vi estas en poŝtelefona konekto kaj vi atendas retejo por ŝargi, sekundo povas ŝajni eterne.

Vidu ankaŭ: Kiel Agordi Pagmuron Por Via WordPress Enhavo

Kaj ĉar multaj viaj vizitantoj povas esti sur pli malrapidaj moveblaj konektoj, evidentiĝas - vi devas malpliigi vian paĝan grandecon. Kaj ni jam scias, kio estas la plej granda krimulo de paĝgranda ŝvelaĵo - ĝi estas viaj bildoj.

Nenecese grandaj bildoj ankaŭ okupas spacon en via gastiga konto. Dum iuj el vi eble havas gastigadon kun "senlima" stokado, multaj altkvalitaj gastigaj provizantoj limigas vin al ĉirkaŭ 10GB da stokado en pli malaltaj planoj. Ĉi tio povas pleniĝi rapide, precipe se vi gastigas plurajn, bild-pezajn retejojn sur la sama konto.

Do, kiel vi povas scii ĉu viaj bildoj malrapidigas vian retejon? Testu la rapidecon de via retejo kun Google PageSpeed ​​Insights.

Se Guglo raportas neoptimumigitajn bildojn kiel problemon, jen kion vi bezonas scii por ripari ĝin.

Bazaj pri optimumigo de bildoj

Kiam temas pri optimumigo de bildoj en via blogo, estas kelkaj malsamaj aferoj, kiujn vi devas estikonscias pri: dosiertipo, bildgrandeco kaj dimensioj, kiel vi servas viajn bildojn kaj bildkunpremadon.

Ni rigardu pli detale ĉiun el ĉi tiuj areoj.

Dosiertipo

Bildoj en la reto estas kutime konservitaj en la PNG aŭ JPEG dosierformato - aŭ GIF por animacio. Kiu ne amas tiujn ridigajn viglajn GIF-ojn flosantajn tra la reto!

Nun estas teknike bone se vi konservas viajn bildojn en ambaŭ formatoj – la retumilo de via vizitanto ne havos problemon montri vian retpaĝon. – sed por la plej bona kvalito kaj optimumigo, obeu la jenajn regulojn:

  • JPEG – uzu por fotoj kaj dezajnoj, kie aperas homoj, lokoj aŭ aferoj
  • PNG – plej bone por grafikaĵoj , emblemoj, tekst-pezaj dezajnoj, ekrankopioj, kaj kiam vi bezonas bildojn kun travideblaj fonoj
  • GIF - se vi bezonas animacion, alie uzu PNG

Do, kial ekzistas malsamaj formatoj ?

Nu, PNG estas tradicie uzata por konservi emblemojn kaj grafikaĵojn ĉar ĝi konservas la originalan bildkvaliton - neniu volas neklaran tekston kaj pikselitajn formojn. Sed, se vi provas konservi foton kiel PNG, ĝi aspektos mirinda, sed la rezulta dosiergrando estos, malpli ol mirinda.

JPEG estas tradicie uzata por konservi fotojn. Kelkaj el la bildaj datumoj estas forĵetitaj por krei draste pli malgrandan grandecon de dosiero, sed ĉar fotoj enhavas ampleksan varion de koloroj kaj naturaj varioj, la perdo de kvalito estaskutime nerimarkebla por la homa okulo.

Ni eniros pli detale pri kunpremado poste, sed nuntempe se vi memoras nur du aferojn, memoru: JPEG por fotoj kaj PNG por teksto/grafikaĵoj.

Dimensioj de la bildo

Ĉu vi iam ŝargis retpaĝon kaj rimarkis, ke eta bildo (eble kappafo, ekzemple) bezonas f-o-r-e-v-e-r por elŝuti? Ŝatas, tiel malrapide, ke vi povas vidi ĉiun linion eniri? Vi pensas al vi mem, kiel tiel malgranda bildo povas daŭri tiom da tempo por elŝuti?

Kaj kiam ĝi okazas al granda kapbildo, tio estas eĉ pli malbona ĉar ĝi povas bremsi la tutan paĝan ŝarĝon.

Kial tio okazas estas ĉar la bloganto ne ĝuste regrandigis kaj optimumigis sian bildon, kaj en la kazo de nia kappafo ekzemplo, eble alŝutis plenrezolucian JPEG rekte de sia DSLR-fotilo.

Kaj tio estas grandega dosiero!

Vi vidas, tTT-legilo (kutime) skalos bildon de siaj originalaj dimensioj tiel ke ĝi bone konvenu en sia loko sur retpaĝo. Kio ŝajnas esti malgranda bildo surekrana povus vere esti grandega 10-megapiksela foto, malgrandigita en reala tempo de la retumilo.

Nun iuj ret-eldonaj platformoj aŭtomate kreos plurajn variaĵojn de via plenrezolucia bildo en malsamaj malsamaj formoj. grandecoj, sed se ne, vi devus regrandigi viajn bildojn antaŭe en bildredaktilo kiel Photoshop, Lightroom, Pixlr - aŭ eĉ MS Paint. Ĝi povas signifi la diferenconinter 50K dosiero kaj 5MB unu.

WordPress, ekzemple, aŭtomate kreos tri (aŭ pli, depende de via temo) kopiojn de via alŝutita bildo - ĉiuj kun malsamaj dimensioj - kiujn vi povas uzi en blogaj afiŝoj, anstataŭ ĉiam uzi la plengrandan bildon.

Vidu ankaŭ: 9 Kialoj Por Komenci Blogon (Kaj 7 Kialoj Kial Vi Ne Devus)

Se vi kutimas alŝuti grandegajn bildfotojn, kaj volas ŝpari spacon en via gastiga konto, la WordPress kromaĵo Imsanity havas vian dorson.

Ĝi regrandigas kaj anstataŭigas la originalan bildon al io pli regebla, do eĉ se vi enmetas la plengrandan bildon en vian afiŝon, ĝi ne estos tiel malbona.

Unufoje aktivigita, Imsanity ankaŭ povas serĉi viajn ekzistantajn bildojn kaj regrandigi laŭe.

Servi viajn bildojn

Kiel vi servas viajn bildojn al viaj vizitantoj ne estas strikte pri optimumigo de ili per si mem. , sed ĝi povas havi draman efikon al via paĝa ŝarĝotempo.

Plej multaj blogantoj servas siajn bildojn rekte el sia gastiga konto kaj tio kutime estas bone, sed se vi vere serĉas elpremi ĉiun pecon de rendimento el via retejo, tiam gastigi viajn bildojn en Enhava Livera Reto (CDN) povas fari grandan diferencon.

CDN konsistas el strategie metitaj retserviloj situantaj en datumcentroj tra la mondo. Ĉi tiuj serviloj gastigas duplikatajn kopiojn de viaj bildoj kaj kiam la retumilo de vizitanto petas bildon de via retejo, la CDN aŭtomate direktas la retumilon alservilo kiu geografie estas la plej proksima al ili.

Ĉi tio signifas, ke vizitantoj el Eŭropo, ekzemple, ricevos bildojn servitajn de loka eŭropa servilo, anstataŭ unu el la ŝtatoj aŭ aliloke. Ĉar responda tempo kaj reto-latenteco estas reduktitaj, la bildoj elŝutas multe pli rapide, reduktante paĝan ŝarĝotempon.

Blogging Wizard uzas Sucuri (ĝi inkluzivas fajroŝirmilon por sekureco same kiel CDN), sed ekzistas aliaj kvalitaj provizantoj. kiel Amazon's Cloudfront aŭ KeyCDN. Eĉ la populara CloudFlare, kiu ne estas strikte CDN, ofertas CDN senpage kaj estas facile instalebla en la plej multaj komunaj gastigaj pakaĵoj.

Bilda kunpremo

Kiam temas pri optimumigo de via bildoj, nenio reduktas vian dosiergrandecon pli ol altnivela kunpremado de perdbildoj.

Plej multaj bildaj redaktaj iloj kiel Visme aŭ Photoshop konservos dosierojn uzante perdan kunpremadon de JPEG ĉar ĝi havas la plej bonajn reduktojn de grandeco de dosiero. Do, kvankam la bildkvalito estas iomete reduktita, uzi perdan bildkunpremadon reduktas grandegajn bildojn al ret-amikaj grandecoj.

Mi certas, ke multaj kiuj uzas Photoshop eble vidos ĝian Konservi por TTT funkcion. kiel la ĉio kaj la fino de bilda optimumigo. Kaj eĉ interretaj bildaj redaktaj iloj kiel PicMonkey aŭ Visme ankaŭ optimumigas viajn bildojn.

Sed ĉu vi sciis, ke ekzistas iloj, kiuj povas preni vian "optimumigitan" bildon el Photoshop aŭ aliaj redaktaj iloj, kraĉi kaj kunpremi ĝin. je alia 40% (aŭ pli),kaj ankoraŭ ĉu ĝi ŝajnas preskaŭ identa al la homa okulo?

Jen kelkaj senpagaj kaj pagitaj iloj por helpi vin redukti viajn bildojn al ret-amika stato.

Tablaj iloj

ImageAlpha / ImageOptim

Por la uzanto de Mac, ImageOptim estas senpaga labortabla ilo, kiun mi uzas ĉiutage por optimumigi PNG-bildojn – plejparte ekrankopiojn – antaŭ ol mi alŝutas ilin. Ĉi tiuj iloj estas facile uzeblaj, vi simple treni kaj faligi viajn dosierojn, sed vi devas fari unu bildon samtempe.

Profesiulo : Por la tekspertuloj ekzistas ImageOptim– CLI, kie vi povas optimumigi tutan dosierujon da bildoj samtempe.

ImageAlpha estas perda PNG-kompresoro kaj povas fari mirindaĵojn pri ŝrumpado de PNG-dosieroj dum ImageOptim faras altnivelan senperdan (kun la eblo de perda) kunpremadon - kaj ĝi forigas nenecesajn metadatumojn el PNG, JPEG kaj GIF-dosieroj.

Por miaj PNG-bildoj, mi unue prizorgas ilin per ImageAlpha:

Ĉi tie, ĝi reduktis mian ekranfoton de 103K al 28K.

Mi tiam trakuris ĝin per ImageOptim kaj ŝparis kroman 10%.

JPEGmini

Por miaj JPEG-dosieroj, mi optimumigas ilin per la labortabla JPEGmini-apliko, disponebla. por kaj Mac kaj Vindozo.

La Lite versio permesas vin optimumigi ĝis 20 bildojn tage senpage, kaj kostas $19.99 por forigi la limon.

Profesiulkonsileto. : Altnivelaj uzantoj, kiuj volas integri JPEGmini en Photoshop aŭ Lightroom per kromaĵo, povas aĉeti la Pro-version por$99.99.

Retaj/Nubaj/SaaS-iloj

TinyPNG

Se vi serĉas altkvalitan interretan bildkunpremilon, TinyPNG (ĝi optimumigas JPEG). dosieroj ankaŭ malgraŭ la nomo) estas TTT-apliko, kiu ebligas al vi treni ĝis 20 5MB aŭ pli malgrandajn bildojn en vian retumilon, kaj optimumigi ilin ĉiuj samtempe.

Ili ankaŭ havas programiston API kaj faras WordPress. disponebla kromaĵo, kiu povas aŭtomate optimumigi viajn bildojn post alŝuto.

TinyPNG donas al vi 500 senpagajn bildajn optimumojn monate, kaj poste kostas de $0.002–0.009 per bildo, depende de volumeno.

Nun 500. bildoj monate povas soni kiel multe, sed se vi konsideras la fakton, WordPress ofte kreas tri ĝis kvin variaĵojn de ĉiu bildo en malsamaj grandecoj, 500 bildoj ne ŝajnas tiom por la produktiva bloganto. Feliĉe, la po-bilda kosto estas buĝeta afabla.

EWWW Bild-Optimigilo

Se vi ne pretas elspezi monon, kaj vi ne volas esti ĝenita per optimumigo. viaj bildoj permane, la senpaga kromaĵo EWWW Image Optimizer por WordPress povas aŭtomate optimumigi viajn alŝutitajn bildojn.

Vi povas elekti superan abonon kiu elfaras perdan kunpremadon, sed la senpaga versio nur elfaras senperdan kunpremadon do la ŝparaĵoj estas' t preskaŭ same substanca. Ĝi ŝparos al vi tempon kaj tamen estas pli bona ol nenio.

Noto: Por kompleta resumo, kontrolunia afiŝo pri bildaj kunpremaj iloj.

Envolvi ĝin

Kiel kelkaj homoj antaŭdiras, ke la meza retpaĝa grandeco alproksimiĝos al 3MB antaŭ 2017, nun estas la tempo por komenci optimumigi viajn bildojn.

Memoru, ne ĉiuj viaj vizitantoj estos sur altrapidaj konektoj, kaj paĝa ŝvelaĵo kaj malrapidaj tempoj de ŝarĝo de paĝoj eble povas influi vian rangotabelon ĉe Guglo. Por helpi vin malpezigi la ŝarĝon, por tiel diri, alkutimiĝi hodiaŭ optimumigi viajn bildojn.

Atentu viajn bildajn dimensiojn kaj regrandigu tro grandajn stokajn fotojn aŭ bildojn de cifereca fotilo al taŭga. grandeco.

Sekva, profitu la modernan bildkunpremadon per labortablaj aplikaĵoj kiel JPEGmini, aŭ nubaj iloj kiel TinyPNG aŭ Kraken – integrigante ilin en WordPress per kromaĵo se eble.

Laste, se via eldonplatformo aŭtomate kreas regrandigitajn variaĵojn de via originala bildo, elektu unu el ĉi tiuj por via bloga afiŝo, anstataŭ la originalan, plengrandan.

Rilata Legado: 7 Manieroj Por Malgrandigi La Grandeco De PDF-Dosieroj.

Patrick Harvey

Patrick Harvey estas sperta verkisto kaj cifereca merkatisto kun pli ol 10 jaroj da sperto en la industrio. Li havas vastan scion pri diversaj temoj kiel blogado, sociaj amaskomunikiloj, elektronika komerco kaj WordPress. Lia pasio por skribi kaj helpi homojn sukcesi interrete instigis lin krei komprenemajn kaj allogajn afiŝojn, kiuj donas valoron al lia publiko. Kiel lerta WordPress-uzanto, Patrick konas la enojn de konstruado de sukcesaj retejoj, kaj li uzas ĉi tiun scion por helpi entreprenojn kaj individuojn same establi sian interretan ĉeeston. Kun vigla okulo por detaloj kaj neŝancelebla engaĝiĝo al plejboneco, Patrick estas dediĉita provizi siajn legantojn per la plej novaj tendencoj kaj konsiloj en la cifereca merkatado industrio. Kiam li ne blogas, Patrick povas esti trovita esploranta novajn lokojn, legante librojn, aŭ ludanta basketbalon.