Si të optimizoni imazhet për ueb

 Si të optimizoni imazhet për ueb

Patrick Harvey

A nuk ju pëlqejnë imazhet?

Ato mund të transformojnë një pjesë të tekstit në një përvojë tërheqëse ndërsa lexoni. Imazhet përmirësojnë një postim në blog, e bëjnë atë më të ndashëm dhe vendosin tonin dhe markën e të gjithë sajtit tuaj.

Dhe e dini çfarë? Ne jemi të prirur për t'iu përgjigjur imazheve. Kjo është arsyeja pse përfshirja e imazheve në përmbajtjen tuaj është një mjet i fuqishëm për t'u përdorur kur reklamoni blogun tuaj.

Por, nëse nuk jeni të kujdesshëm, imazhet mund të përbëjnë më shumë se gjysmën (ose më shumë) të madhësisë totale të faqes tuaj të internetit. Vetëm pak vite më parë, madhësia mesatare e një faqe interneti ishte 600–700K. Tani, mesatarja është 2 MB dhe po rritet çdo vit.

Kjo është e madhe!

Arsyeja kryesore që po ndodh është sepse imazhe të shumta po përdoren më shpesh në faqet e internetit, dhe këto imazhe nuk janë Nuk ka madhësi dhe optimizim të duhur. Kjo do të thotë se ato nuk ruhen ose përpilohen në një mënyrë miqësore me ueb-in, dhe në vend të kësaj, po i fryjnë faqet tuaja.

Megjithatë, shumica prej nesh, e lënë optimizimin e imazheve si një mendim të mëvonshëm dhe më mirë do të kënaqeshin duke bërë gjërat argëtuese si krijimi i një postimi epik ose krijimi i rrjeteve me blogerët e tjerë në vendin tuaj.

Por, të kesh fryrje të faqes do të thotë që shpejtësia e ngarkimit të faqes tënde ndikohet. Ju mund të mos mendoni se kjo është një punë e madhe nëse jeni në një lidhje me shpejtësi të lartë, por shumë nga vizitorët tuaj nuk janë. Gjithashtu, Google nuk i pëlqen ngarkimi i ngadalshëm i faqeve dhe mund të ndikojë negativisht në SEO.

Pse duhet të optimizoni imazhet

Ju punoni shumë nëduke krijuar përmbajtje të mrekullueshme dhe ju shpenzoni orë të panumërta duke promovuar blogun tuaj dhe duke u lidhur me blogerët e tjerë, kështu që gjëja e fundit që dëshironi është që vizitorët e mundshëm të braktisin faqen tuaj të internetit para se të ngarkohet!

Studimet tregojnë se deri në 40% të vizitorët klikojnë butonin "mbrapa" nëse një sajt kërkon më shumë se tre sekonda për t'u ngarkuar.

E di, tre sekonda nuk janë vërtet aq të gjata, por kur jeni në një lidhje celulare dhe jeni duke pritur për një siti për t'u ngarkuar, një sekondë mund të duket si përgjithmonë.

Dhe meqenëse shumë nga vizitorët tuaj mund të jenë në lidhje më të ngadalta celulare, bëhet e qartë – ju duhet të zvogëloni madhësinë e faqes tuaj. Dhe ne e dimë tashmë se cili është shkelësi më i madh i fryrjes së madhësisë së faqes – janë imazhet tuaja.

Imazhet e panevojshme të mëdha gjithashtu zënë hapësirë ​​në llogarinë tuaj të pritjes. Ndërsa disa prej jush mund të kenë një pritje me hapësirë ​​ruajtëse "të pakufizuar", shumë ofrues të pritjes premium ju kufizojnë në rreth 10 GB hapësirë ​​ruajtëse në planet e nivelit më të ulët. Kjo mund të mbushet shpejt, veçanërisht nëse strehon shumë sajte me imazhe të rënda në të njëjtën llogari.

Pra, si mund ta dalloni nëse imazhet tuaja po ngadalësojnë faqen tuaj? Testoni shpejtësinë e faqes tuaj me Google PageSpeed ​​Insights.

Nëse Google raporton imazhe të pa optimizuara si problem, ja çfarë duhet të dini për ta rregulluar atë.

Bazat e optimizimit të imazhit

Kur bëhet fjalë për optimizimin e imazheve në blogun tuaj, ka disa gjëra të ndryshme që duhet të jenii vetëdijshëm për: llojin e skedarit, madhësinë dhe dimensionet e imazhit, mënyrën se si i shërbeni imazhet tuaja dhe ngjeshjen e imazhit.

Le të hedhim një vështrim më të afërt në secilën nga këto zona.

Lloji i skedarit

Imazhet në ueb zakonisht ruhen në formatin e skedarit PNG ose JPEG – ose GIF për animacion. Kush nuk i pëlqen ato GIF gazmore të animuar që qarkullojnë nëpër ueb!

Tani teknikisht është në rregull nëse i ruani imazhet tuaja në cilindo format – shfletuesi i vizitorit tuaj nuk do të ketë asnjë problem të shfaqë faqen tuaj të internetit – por për cilësinë dhe optimizimin më të mirë, respektoni rregullat e mëposhtme:

  • JPEG – përdorni për fotografi dhe dizajne ku shfaqen njerëz, vende ose sende
  • PNG – më e mira për grafikë , logot, dizajnet me tekst të rëndë, pamjet e ekranit dhe kur keni nevojë për imazhe me sfond transparent
  • GIF – nëse keni nevojë për animacion, përndryshe përdorni PNG

Pra, pse ka formate të ndryshme ?

Epo, PNG përdoret tradicionalisht për ruajtjen e logove dhe grafikëve sepse ruan cilësinë origjinale të imazhit – askush nuk dëshiron tekst të turbullt dhe forma të pikseluara. Por, nëse provoni ta ruani një foto si PNG, ajo do të duket e mrekullueshme, por madhësia e skedarit që rezulton do të jetë më pak se e mahnitshme.

JPEG përdoret tradicionalisht për ruajtjen e fotove. Disa nga të dhënat e imazhit hidhen për të krijuar një madhësi skedari drastikisht më të vogël, por duke qenë se fotot përmbajnë një shumëllojshmëri të gjerë ngjyrash dhe variacione natyrale, humbja e cilësisë ështëzakonisht nuk vërehet për syrin e njeriut.

Ne do të hyjmë në më shumë detaje rreth kompresimit më vonë, por tani për tani nëse mbani mend vetëm dy gjëra, mbani mend: JPEG për fotot dhe PNG për tekst/grafikë.

Dimensionet e imazhit

A keni ngarkuar ndonjëherë një faqe interneti dhe keni vënë re se një fotografi e vogël (ndoshta një fotografi me kokë, për shembull) kërkon f-o-r-e-v-e-r për t'u shkarkuar? A thua, kaq i ngadalshëm sa mund të shohësh çdo rresht që hyn? Ju mendoni me vete, si mundet që një imazh kaq i vogël të marrë kaq shumë kohë për t'u shkarkuar?

Dhe kur ndodh me një imazh të madh të kokës, është edhe më keq sepse mund të ndalojë të gjithë ngarkesën e faqes.

Arsyeja që po ndodh kjo është sepse blogeri nuk e ka ndryshuar dhe optimizuar siç duhet imazhin e tij dhe në rastin e shembullit tonë të fotografisë së kokës, mund të ketë ngarkuar një JPEG me rezolucion të plotë direkt nga kamera e tij DSLR.

Dhe ky është një skedar i madh!

Shikoni, një shfletues ueb (zakonisht) do të shkallëzojë një imazh nga dimensionet e tij origjinale në mënyrë që të përshtatet mirë në vendin e tij në një faqe interneti. Ajo që duket të jetë një imazh i vogël në ekran mund të jetë vërtet një foto e madhe 10 megapikselë, e zvogëluar në kohë reale nga shfletuesi.

Tani disa platforma të publikimit në ueb do të krijojnë automatikisht variacione të shumta të imazhit tuaj me rezolucion të plotë në të ndryshme madhësive, por nëse jo, duhet të ndryshoni madhësinë e imazheve paraprakisht në një redaktues imazhi si Photoshop, Lightroom, Pixlr - apo edhe MS Paint. Mund të nënkuptojë ndryshiminmidis një skedari 50K dhe 5MB.

WordPress, për shembull, do të krijojë automatikisht tre (ose më shumë, në varësi të temës suaj) kopje të imazhit tuaj të ngarkuar – të gjitha me dimensione të ndryshme – që mund t'i përdorni në postimet e blogut, në vend që të përdorni gjithmonë imazhin me përmasa të plota.

Nëse e keni zakon të ngarkoni imazhe të mëdha fotografish dhe dëshironi të kurseni hapësirë ​​në llogarinë tuaj të pritjes, shtojca WordPress Imsanity ju mbështet.

Ai ndryshon përmasat dhe zëvendëson imazhin origjinal në diçka më të menaxhueshme, kështu që edhe nëse e futni imazhin me përmasa të plota në postimin tuaj, nuk do të jetë aq keq.

Pasi të aktivizohet, Imsanity mund të kërkojë gjithashtu imazhet tuaja ekzistuese dhe të ndryshojë madhësinë në përputhje me rrethanat.

Shërbimi i imazheve tuaja

Mënyra se si i shërbeni imazhet tuaja vizitorëve tuaj nuk ka të bëjë rreptësisht me optimizimin e tyre në vetvete , por mund të ketë një ndikim dramatik në kohën e ngarkimit të faqes suaj.

Shumica e blogerëve i shërbejnë imazhet e tyre direkt nga llogaria e tyre e pritjes dhe kjo zakonisht është mirë, por nëse me të vërtetë po kërkoni të shtrydhni çdo pjesë të performancës nga faqen tuaj, më pas mbajtja e imazheve tuaja në një Rrjet të shpërndarjes së përmbajtjes (CDN) mund të bëjë një ndryshim të madh.

Një CDN përbëhet nga serverë ueb të vendosur në mënyrë strategjike të vendosura në qendrat e të dhënave në të gjithë botën. Këta serverë mbajnë kopje të kopjuara të imazheve tuaja dhe kur shfletuesi i një vizitori kërkon një imazh nga faqja juaj e internetit, CDN e drejton automatikisht shfletuesin në njëserveri që është gjeografikisht më i afërti me ta.

Kjo do të thotë që vizitorët nga Evropa, për shembull, do të marrin imazhe të servirura nga një server lokal evropian, në vend të një nga shtetet apo gjetkë. Meqenëse koha e përgjigjes dhe vonesa e rrjetit zvogëlohen, imazhet shkarkohen shumë më shpejt, duke zvogëluar kohën e ngarkimit të faqes.

Magjistari i blogjeve përdor Sucuri (përfshin një mur zjarri për sigurinë si dhe një CDN), por ka ofrues të tjerë cilësorë si Cloudfront i Amazon ose KeyCDN. Edhe CloudFlare popullor, i cili nuk është rreptësisht një CDN, ofron një CDN falas dhe është i lehtë për t'u konfiguruar në shumicën e paketave të përbashkëta të pritjes.

Ngjeshja e imazhit

Kur bëhet fjalë për optimizimin tuaj imazhe, asgjë nuk e zvogëlon madhësinë e skedarit tuaj më shumë sesa kompresimi i avancuar i imazhit me humbje.

Shumica e mjeteve të redaktimit të imazheve si Visme ose Photoshop do t'i ruajnë skedarët duke përdorur kompresimin JPEG me humbje pasi ka reduktimet më të mira të madhësisë së skedarit. Pra, ndërsa cilësia e imazhit është paksa e reduktuar, përdorimi i kompresimit të imazhit me humbje i redukton imazhet e mëdha në madhësi të përshtatshme për ueb-in.

Jam i sigurt që shumë që përdorin Photoshop mund të shohin funksionin e tij Ruaj për ueb si të gjitha dhe në fund të optimizimit të imazhit. Dhe madje edhe mjetet e redaktimit të imazheve në internet si PicMonkey ose Visme optimizojnë gjithashtu imazhet tuaja.

Por a e dini se ka mjete që mund të marrin imazhin tuaj të "optimizuar" nga Photoshop ose mjete të tjera redaktimi, ta shtypin dhe kompresojnë atë me 40% të tjera (ose më shumë),dhe ende a duket pothuajse identik me syrin e njeriut?

Këtu janë disa mjete falas dhe me pagesë për t'ju ndihmuar t'i zvogëloni imazhet tuaja në një status miqësor në ueb.

Shiko gjithashtu: 15 Shtojcat më të mira SEO të WordPress & Mjetet për 2023

Mjetet e desktopit

ImageAlpha / ImageOptim

Për përdoruesit e Mac, ImageOptim është një mjet pa pagesë desktopi që e përdor çdo ditë për të optimizuar imazhet PNG - kryesisht pamjet e ekranit - përpara se t'i ngarkoj ato. Këto mjete janë të lehta për t'u përdorur, ju thjesht tërhiqni dhe lëshoni skedarët tuaj, por duhet të bëni një imazh në të njëjtën kohë.

Këshillë profesionale : Për ata që janë të aftë për teknologjinë ekziston ImageOptim– CLI, ku mund të optimizoni një dosje të tërë imazhesh në të njëjtën kohë.

ImageAlpha është një kompresor PNG me humbje dhe mund të bëjë mrekulli në tkurrjen e skedarëve PNG ndërsa ImageOptim kryen kompresim të avancuar pa humbje (me opsionin e humbjes) - dhe kjo heq meta të dhënat e panevojshme nga skedarët PNG, JPEG dhe GIF.

Për imazhet e mia PNG, fillimisht i ekzekutoj ato përmes ImageAlpha:

Këtu, ai e zvogëloi imazhin tim të pamjes së ekranit nga 103K në 28K.

Më pas e kalova përmes ImageOptim dhe ruajta një shtesë prej 10%.

JPEGmini

Për skedarët e mi JPEG, i optimizoj ato me aplikacionin JPEGmini të desktopit, i disponueshëm për Mac dhe Windows.

Versioni Lite ju lejon të optimizoni deri në 20 imazhe në ditë falas dhe kushton 19,99 dollarë për të hequr kufirin.

Këshillë profesionale : Përdoruesit e avancuar që duan të integrojnë JPEGmini në Photoshop ose Lightroom me anë të një shtojce mund të blejnë versionin Pro për99,99 $.

Vegla në internet / Cloud / SaaS

TinyPNG

Nëse jeni duke kërkuar për një mjet kompresimi të imazhit në internet me cilësi të lartë, TinyPNG (ai optimizon JPEG edhe skedarët pavarësisht nga emri) është një aplikacion ueb që ju lejon të tërhiqni deri në 20 imazhe 5 MB ose më të vogla në shfletuesin tuaj dhe t'i optimizoni të gjitha menjëherë.

Ata gjithashtu kanë një API zhvilluesi dhe bëjnë një WordPress disponohet një shtesë shtesë që mund të optimizojë automatikisht imazhet tuaja pas ngarkimit.

TinyPNG ju jep 500 optimizime imazhesh falas në muaj dhe më pas tarifon nga 0,002-0,009 dollarë për imazh, në varësi të vëllimit.

Shiko gjithashtu: 10 platformat më të mira për të shitur produkte dixhitale në 2023

Tani 500 imazhet në muaj mund të duken si shumë, por kur merrni parasysh faktin që WordPress shpesh krijon tre deri në pesë variacione të çdo imazhi në madhësi të ndryshme, 500 imazhe nuk duken si aq shumë për blogerin pjellor. Për fat, kostoja për imazh është buxhetore.

EWWW Image Optimizer

Nëse nuk jeni gati të shpenzoni para dhe nuk dëshironi të shqetësoheni me optimizimin imazhet tuaja manualisht, shtojca falas EWWW Image Optimizer për WordPress mund të optimizojë automatikisht imazhet tuaja të ngarkuara.

Ju mund të zgjidhni një abonim premium që kryen kompresim me humbje, por versioni falas kryen vetëm kompresim pa humbje, kështu që kursimet nuk janë' t pothuajse aq substanciale. Megjithatë, do t'ju kursejë kohë dhe është më mirë se asgjë.

Shënim: Për një përmbledhje të plotë, shikonipostimi ynë mbi mjetet e ngjeshjes së imazhit.

Përfundimi i tij

Me disa njerëz që parashikojnë se madhësia mesatare e faqes së internetit do t'i afrohet 3MB deri në vitin 2017, tani është koha për të filluar optimizimin e imazheve tuaja.

Mos harroni, jo të gjithë vizitorët tuaj do të jenë në lidhje me shpejtësi të lartë dhe fryrja e faqes dhe koha e ngadaltë e ngarkimit të faqeve mund të ndikojnë potencialisht në renditjen tuaj me Google. Për t'ju ndihmuar të lehtësoni ngarkesën, si të thuash, bëhuni zakon të optimizoni imazhet tuaja sot.

Kushtojini vëmendje dimensioneve të imazhit tuaj dhe ndryshoni madhësinë e çdo fotoje ose imazhi tepër të madh nga një aparat fotografik dixhital në një madhësi të përshtatshme madhësia.

Më pas, përfitoni nga kompresimi modern i imazhit me aplikacionet e desktopit si JPEGmini, ose mjete cloud si TinyPNG ose Kraken – duke i integruar ato në WordPress me një shtesë nëse është e mundur.

Së fundi, nëse platforma e publikimit krijon automatikisht variacione të ndryshuara në madhësi të imazhit tuaj origjinal, zgjidhni një nga këto për postimin tuaj në blog, në vend të origjinalit, me përmasa të plota.

Lexim i ngjashëm: 7 mënyra për të reduktuar Madhësia e skedarëve PDF.

Patrick Harvey

Patrick Harvey është një shkrimtar me përvojë dhe tregtar dixhital me mbi 10 vjet përvojë në industri. Ai ka një njohuri të gjerë për tema të ndryshme si blogimi, mediat sociale, tregtia elektronike dhe WordPress. Pasioni i tij për të shkruar dhe ndihmuar njerëzit të kenë sukses në internet e ka shtyrë atë të krijojë postime të thella dhe tërheqëse që i japin vlerë audiencës së tij. Si një përdorues i aftë i WordPress-it, Patrick është i njohur me hapat e krijimit të faqeve të suksesshme të internetit dhe ai e përdor këtë njohuri për të ndihmuar bizneset dhe individët të krijojnë praninë e tyre në internet. Me një sy të mprehtë për detaje dhe një përkushtim të palëkundur ndaj përsosmërisë, Patrick është i përkushtuar t'u ofrojë lexuesve të tij tendencat dhe këshillat më të fundit në industrinë e marketingut dixhital. Kur ai nuk është duke bërë blog, Patrick mund të gjendet duke eksploruar vende të reja, duke lexuar libra ose duke luajtur basketboll.