Ez al dituzu irudiak maite?

Testu zati bat esperientzia erakargarri bihur dezakete irakurtzen duzun bitartean. Irudiek blogeko argitalpen bat hobetzen dute, partekagarriagoa bihurtzen dute eta zure gune osoaren tonua eta marka ezartzen dute.

Eta badakizu zer? Irudiei erantzuteko konfiguratuta gaude. Horregatik, zure edukian irudiak sartzea tresna indartsua da zure bloga merkaturatzeko garaian.

Baina, kontuz ibili ez bazara, irudiek zure web-orriaren guztizko tamainaren erdia (edo gehiago) izan dezakete. Duela urte gutxi, web orri baten batez besteko tamaina 600-700K zen. Orain, batez bestekoa 2 MB da eta urtero handitzen ari da.

Hori izugarria da!

Hori gertatzen ari den arrazoi nagusia web-orrietan hainbat irudi maizago erabiltzen direlako eta irudi hauek dira. ez dago behar bezala tamaina eta optimizatuta. Horrek esan nahi du ez direla web egokian gordetzen edo konpilatzen, eta, horren ordez, zure orriak hazten ari direla.

Gutako gehienok, ordea, irudiak optimizatzea ustekabean uzten dugu eta nahiago dugu gauza dibertigarriak egiteaz gozatzea. esate baterako, mezu epiko bat lantzea edo zure nitxoko beste blogari batzuekin saretzea.

Baina, orrialdea puztuta edukitzeak orriaren karga-abiadura eragiten duela esan nahi du. Agian ez duzu uste hau gauza handia denik abiadura handiko konexio batean bazaude, baina zure bisitari asko ez daude. Gainera, Google-ri ez zaio gustatzen orriak motela kargatzea, eta negatiboki eragin diezaioke zure SEOari.

Zergatik optimizatu behar dituzun irudiak

Gogor egiten duzu laneduki bikaina sortzen eta ordu asko ematen dituzu zure bloga sustatzen eta beste blogari batzuekin sarean aritzen; beraz, nahi duzun azken gauza bisitari potentzialek zure webgunea kargatu baino lehen abandonatzea da!

Ikerketek erakusten dutenez, % 40k bisitariek atzera botoian klik egiten dute gune batek hiru segundo baino gehiago behar baditu kargatzeko.

Badakit, hiru segundo ez dira horren luzeak, baina mugikorreko konexio batean zaudenean eta baten zain zaudenean. kargatzeko gunea, segundu batek betikoa dirudi.

Eta zure bisitari asko mugikorreko konexio motelagoak izan daitezkeenez, argi geratzen da: orriaren tamaina murriztu behar duzu. Eta dagoeneko badakigu zein den orrialde-tamainaren puzketaren iraingarri handiena: zure irudiak dira.

Alferrikako irudi handiek ere lekua hartzen dute zure hosting kontuan. Zuetako batzuek biltegiratze espazio "mugagabea" duten ostalaritza eduki dezaketen arren, premium hosting hornitzaile askok 10 GB inguruko biltegiratzera mugatzen zaituzte maila baxuko planetan. Hau azkar bete daiteke, batez ere irudi askoko gune anitz ostatatzen ari bazara kontu berean.

Beraz, nola jakin dezakezu zure irudiak zure gunea moteltzen ari ote diren? Probatu zure webgunearen abiadura Google PageSpeed ​​Insights-ekin.

Google-k optimizatu gabeko irudiak arazo gisa salatzen baditu, hona hemen hori konpontzeko jakin behar duzuna.

Irudiaren optimizazioaren oinarriak

Zure blogeko irudiak optimizatzeko orduan, hainbat gauza izan behar dituzujakitun: fitxategi mota, irudiaren tamaina eta neurriak, zure irudiak nola zerbitzatzen dituzun eta irudien konpresioa.

Ikusi ditzagun eremu horietako bakoitza gertutik.

Fitxategi mota

Webeko irudiak PNG edo JPEG fitxategi formatuan gordetzen dira normalean, edo GIF animaziorako. Nork ez ditu maite sarean mugitzen diren animazio GIF barregarri horiek!

Orain teknikoki ongi dago irudiak formatu batean zein bestean gordetzen badituzu; bisitariaren arakatzaileak ez du arazorik izango zure web orria bistaratzeko. – baina kalitate eta optimizaziorik onena lortzeko, jarraitu arau hauek:

• JPEG – erabili pertsonak, lekuak edo gauzak agertzen diren argazkietarako eta diseinuetarako
• PNG – grafikoetarako egokiena. , logotipoak, testu handiko diseinuak, pantaila-argazkiak eta atzeko plano gardeneko irudiak behar dituzunean
• GIF - animazioa behar baduzu, bestela erabili PNG

Beraz, zergatik daude formatu desberdinak ?

Beno, PNG tradizionalki logoak eta grafikoak gordetzeko erabiltzen da, jatorrizko irudiaren kalitatea mantentzen duelako; inork ez du testu lausorik eta forma pixelizaturik nahi. Baina, argazki bat PNG gisa gordetzen saiatzen bazara, itxura harrigarria izango da, baina sortzen den fitxategiaren tamaina, harrigarria baino txikiagoa izango da.

JPEG erabili ohi da argazkiak gordetzeko. Irudi-datu batzuk botatzen dira fitxategi-tamaina ikaragarri txikiagoa sortzeko, baina argazkiek kolore eta aldaera natural ugari dituztenez, kalitatea galtzen da.normalean gizakiaren begiarentzat nabaritzen ez dena.

Geroago sakonduko dugu konpresioari buruz, baina oraingoz bi gauza bakarrik gogoratzen badituzu, gogoratu: JPEG argazkietarako eta PNG testu/grafikoetarako.

Irudiaren neurriak

Inoiz kargatu al duzu web orri bat eta ohartu al zara argazki txiki batek (agian buruko argazki bat, adibidez) f-o-r-e-v-e-r deskargatu behar duela? Atsegin dut, hain motel ikusten duzun lerro bakoitza sartzen? Zure buruari pentsatzen al duzu, nola behar du hainbeste denbora deskargatzen hain irudi txiki batek?

Eta goiburuko irudi handi bati gertatzen zaionean, are okerragoa da, orrialde osoa kargatu dezakeelako.

Hori gertatzen ari den arrazoia blogariak bere irudia behar bezala aldatu eta optimizatu ez duelako da, eta gure buruaren adibidearen kasuan, baliteke bereizmen osoko JPEG bat kargatu izana bere DSLR kameratik zuzenean.

Eta fitxategi izugarria da!

Ikusten duzu, web-arakatzaile batek (normalean) irudi bat eskalatuko du bere jatorrizko neurrietatik, web-orri batean bere tokian ondo moldatzeko. Pantailako irudi txiki bat dirudiena 10 megapixeleko argazki erraldoi bat izan daiteke, arakatzaileak denbora errealean eskalatua.

Orain web-argitalpen-plataforma batzuek automatikoki sortuko dituzte zure bereizmen osoko irudiaren hainbat aldaera desberdinetan. tamainak, baina hala ez bada, aldez aurretik zure irudiak tamaina aldatu beharko zenuke Photoshop, Lightroom, Pixlr edo MS Paint bezalako irudi-editore batean. Aldea esan dezake50K fitxategi baten eta 5 MB artekoa.

WordPress-ek, adibidez, automatikoki sortuko ditu kargatutako irudiaren hiru kopia (edo gehiago, zure gaiaren arabera), erabil ditzakezun guztiak dimentsio ezberdinekin. blogeko argitalpenetan, tamaina osoko irudia beti erabili beharrean.

Argazki-argazki-irudi erraldoiak igotzeko ohitura baduzu eta zure hosting kontuan lekua aurreztu nahi baduzu, WordPress plugina Imsanity-k zure bizkarra dauka.

Jatorrizko irudia tamainaz aldatzen du eta kudeatzeko moduko zerbait ordezkatzen du; beraz, tamaina osoko irudia zure argitalpenean txertatzen baduzu ere, ez da hain txarra izango.

Behin aktibatuta, Imsanity-k lehendik dituzun irudiak ere bilatu ditzake eta horren arabera tamaina aldatu.

Zure irudiak zerbitzatzea

Zure irudiak bisitariei zerbitzatzea ez da zehatz-mehatz optimizatzea. , baina eragin ikaragarria izan dezake orriaren karga-denboran.

Blogueri gehienek beren irudiak zuzenean ostalaritza-kontutik hornitzen dituzte eta normalean ondo egon ohi da, baina benetan errendimendu guztia kendu nahi baduzu. zure webgunea, eta, ondoren, zure irudiak Eduki Bidalketa Sarean (CDN) ostatzeak alde handia izan dezake.

CDN bat mundu osoko datu-zentroetan kokatutako web zerbitzari estrategikoki kokatuta dago. Zerbitzari hauek zure irudien kopia bikoiztuak hartzen dituzte eta bisitari baten arakatzaileak zure webgunetik irudi bat eskatzen duenean, CDNk automatikoki zuzentzen du arakatzaileaGeografikoki haiengandik gertuen dagoen zerbitzaria.

Horrek esan nahi du Europako bisitariek, adibidez, Europako tokiko zerbitzari batetik hornitutako irudiak jasoko dituztela, Estatuko edo beste nonbaitekoa baino. Erantzun-denbora eta sareko latentzia murrizten direnez, irudiak askoz azkarrago deskargatzen dira, orrialdearen karga-denbora murriztuz.

Blogging Wizard-ek Sucuri erabiltzen du (segurtasunerako Suebaki bat eta baita CDN bat ere barne hartzen ditu), baina badira beste kalitate-hornitzaile batzuk. Amazonen Cloudfront edo KeyCDN bezalakoak. Nahiz eta CloudFlare ezagunak, hertsiki CDN bat ez dena, CDN bat eskaintzen du doan eta konfiguratzeko erraza da partekatutako ostalaritza pakete gehienetan.

Irudiaren konpresioa

Zure optimizatzeko orduan. irudiak, ezerk ez du zure fitxategiaren tamaina murrizten galdutako irudien konpresio aurreratuak baino.

Visme edo Photoshop bezalako irudiak editatzeko tresna gehienek fitxategiak gordeko dituzte galdutako JPEG konpresioa erabiliz, fitxategien tamaina murrizketarik onena baitu. Beraz, irudiaren kalitatea apur bat murrizten den arren, galtzen den irudien konpresioa erabiltzeak irudi handiak murrizten ditu weberako egokiak diren neurrietara.

Ziur nago Photoshop erabiltzen duten askok Gorde Weberako funtzioa ikus dezaketela. irudien optimizazioaren dena eta amaierakoa den aldetik. Eta sareko irudiak editatzeko tresnak ere, PicMonkey edo Visme bezalakoak ere optimizatzen dituzte zure irudiak.

Baina ba al zenekien Photoshop-etik edo beste edizio-tresnetatik zure irudi "optimizatua" hartu, txikitu eta konprimitu dezaketen tresnak badirela. beste %40 (edo gehiago),eta oraindik giza begiaren ia berdina dirudi?

Hona hemen doako eta ordainpeko tresna batzuk, zure irudiak web-egoerara murrizten laguntzeko.

Mahaigaineko tresnak

ImageAlpha / ImageOptim

Mac erabiltzailearentzat, ImageOptim doako mahaigaineko tresna bat da, egunero PNG irudiak optimizatzeko (gehienetan pantaila-argazkiak) kargatu aurretik erabiltzen dudana. Tresna hauek erabiltzeko errazak dira, zure fitxategiak arrastatu eta jaregin besterik ez dituzu, baina irudi bat egin behar duzu aldi berean.

Pro aholkua : Teknologia ezagutzen dutenentzat ImageOptim dago. CLI, non irudien karpeta oso bat optimizatu dezakezun aldi berean.

ImageAlpha PNG konpresorea galtzen da eta PNG fitxategiak txikitzean mirariak egin ditzake ImageOptim-ek galerarik gabeko konpresio aurreratua egiten duen bitartean (galera aukerarekin) eta PNG, JPEG eta GIF fitxategietatik alferrikako metadatuak kentzen ditu.

Nire PNG irudietarako, lehenik ImageAlpha bidez exekutatzen ditut:

Hemen, pantaila-argazkiaren irudia 103K-tik 28Kra murriztu nuen.

Ondoren, ImageOptim bidez exekutatu nuen eta % 10 gehiago gorde nuen

JPEGmini

Nire JPEG fitxategietarako, mahaigaineko JPEGmini aplikazioarekin optimizatzen ditut, eskuragarri. Mac zein Windowsentzat.

Lite bertsioak egunean 20 irudi optimizatzeko aukera ematen dizu doan, eta 19,99 $ balio du muga kentzeko.

Pro aholkua : Plugin baten bidez JPEGmini Photoshop edo Lightroom-en integratu nahi duten erabiltzaile aurreratuek Pro bertsioa eros dezakete.99,99 $.

Online/Hodeia/SaaS tresnak

TinyPNG

Kalitate handiko lineako irudiak konprimitzeko tresna baten bila bazabiltza, TinyPNG (JPEG optimizatzen du). fitxategiak ere izena izan arren) web-aplikazio bat da, 20 5MB edo txikiagoak irudiak arakatzailean arrastatu eta aldi berean optimizatu ahal izateko aukera ematen dizuna.

Garatzaileen API bat ere badute eta WordPress bat egiten dute. Zure irudiak kargatzean automatikoki optimiza ditzakeen plugina eskuragarri dago.

TinyPNG-k 500 doako irudi-optimizazio eskaintzen dizkizu hilero, eta ondoren 0,002-0,009 $-tik kobratzen du irudi bakoitzeko, bolumenaren arabera.

Orain 500. Hilabeteko irudiak asko dirudi, baina WordPress-ek sarritan hiru edo bost aldaera sortzen dituela tamaina ezberdinetan, 500 irudiak ez dirudi hainbeste blogari oparoarentzat. Zorionez, irudi bakoitzeko kostua aurrekontu egokia da.

EWWW Irudi-optimizatzailea

Dirua xahutzeko prest ez bazaude eta optimizatzearekin kezkatu nahi ez baduzu. zure irudiak eskuz, WordPress-erako doako EWWW Image Optimizer pluginak kargatutako irudiak automatikoki optimiza ditzake.

Konpresio galera egiten duen premium harpidetza hauta dezakezu, baina doako bertsioak galerarik gabeko konpresioa bakarrik egiten du, beraz, aurrezpenak dira. t ia bezain nabarmena. Denbora aurreztuko dizu eta ezer baino hobea da, hala ere.

Oharra: Azterketa osoa lortzeko, begiratuirudiak konprimitzeko tresnei buruzko gure argitalpena.

Bilderatzea

Batzuek 2017rako web orriaren batez besteko tamaina 3MBra hurbilduko dela aurreikusten dutenez, orain da zure irudiak optimizatzen hasteko unea.

Gogoratu, zure bisitari guztiak ez direla abiadura handiko konexioetan egongo, eta orriaren puzketak eta orrialdeak kargatzeko denbora motelak Google-n zure sailkapenean eragin dezaketela. Zama arintzen laguntzeko, nolabait esateko, hartu gaur zure irudiak optimizatzeko ohitura.

Erreparatu zure irudien dimentsioei eta aldatu tamaina handiegia duten stock-argazkiak edo kamera digital bateko irudiak egoki batera. tamaina.

Ondoren, aprobetxa ezazu irudien konpresio modernoa mahaigaineko JPEGmini bezalako aplikazioekin, edo TinyPNG edo Kraken bezalako hodeiko tresnekin; ahal izanez gero, WordPress-en integratuz plugin batekin.

Azkenik, zurekin bada. argitalpen-plataformak automatikoki sortzen ditu zure jatorrizko irudiaren tamaina aldaerak; aukeratu hauetako bat zure blogeko argitalpenerako, tamaina osoko jatorrizkoa baino.

Erlazionatutako irakurketa: 7 modu PDF fitxategien tamaina.