Paano i-optimize ang Iyong Mga Larawan upang maging Friendly ng SEO (Kumpletong Gabay)

Ang pagganap ng iyong website ay nakasalalay sa ilang mga kadahilanan na nagmula sa tukoy na web host na pinili mo, sa pagsunod sa mga alituntunin sa pag-access sa website, hanggang sa mga laki ng file ng imahe na iyong ginagamit.


Gayunpaman, ang pag-format ng mga ito para sa tamang sukat, ay maaaring mabawasan ang kalidad dahil sa mga pagbabago na ginagawa mo. Ang mabuting balita ay maaari mong mapanatili ang pinakamainam na kalidad ng imahe at makuha ang tamang sukat na may ilang mga pamamaraan at trick.

Ano ang Pag-optimize ng Imahe?

mga sukat sa pag-optimize ng imaheAng mga web page ay maaaring makaranas ng isang makabuluhang pagbagal kapag naroroon ang malalaking mga imahe. Maaari nitong mabawasan ang mga oras ng paglo-load at gawin ang pangkalahatang subpar sa karanasan para sa iyong mga bisita sa site.

Ang pagbawas sa laki ng file ay pag-optimize ng imahe. Maaari kang gumamit ng isang script o isang plugin para dito.

Pagkatapos nito ay nagreresulta sa mas mabilis na oras ng paglo-load para sa iyong mga pahina. Ang walang pagkawala at pagkawala ng compression ay ang dalawang pinaka-karaniwang pamamaraan sa pag-optimize.

Mga Pakinabang ng Formatting ng Imahe

average na laki ng imahe sa webTinatayang ang humigit-kumulang na 54 porsyento ng kabuuang timbang ng isang webpage ay dahil sa mga imahe.

Kapag nagtatrabaho ka sa pag-optimize ng website, ang iyong mga imahe ay dapat ang iyong unang gawain dahil dito. Ang mga pakinabang ng pag-format ng imahe ay kinabibilangan ng:

  • Pinahusay na bilis ng pag-load ng pahina
  • Ito ay mas mabilis na lumikha ng mga backup
  • Kinakailangan ang mas kaunting puwang sa imbakan ng server
  • Pinahusay na SEO gamit ang tamang plugin ng SEO
  • Mas kaunting bandwidth ang ginagamit

Paano Pagbutihin ang Pagganap gamit ang Pag-optimize ng Imahe

Ang layunin ay upang pantay-pantay na balansehin ang katanggap-tanggap na kalidad at ang pinakamababang posibleng laki ng file. Mayroong higit sa isang paraan para sa iyo na gawin ito. Bago mag-upload, ang pag-compress sa iyong mga imahe ay isang karaniwang pagpipilian. Maaari kang gumamit ng isang tool o isang plugin para sa hangaring ito (narito ang ilang).

Mahalagang isaalang-alang ang uri ng compression at file format na ginagamit mo. Ang tamang kumbinasyon ay ginagawang posible upang mabawasan ang laki ng iyong imahe ng hanggang sa limang beses.

Eksperimento na may iba’t ibang mga format ng file at mga uri ng compression upang matukoy ang pinakamahusay na kumbinasyon para sa iyong mga pangangailangan.

Piliin ang Pinakamahusay na Format ng File

Upang piliin ang pinakamahusay na uri ng file, mahalagang malaman kung alin ang magagamit. Ito ang pinakakaraniwan:

  • JPEG: Ang uri na ito ay gumagamit ng pagkawala ng pagkawala at pagkawala ng pag-optimize. Maaari mong hampasin ang isang solidong balanse ng laki ng file at kalidad sa pamamagitan ng pag-aayos ng antas ng kalidad.
  • PNG: Ang ganitong uri ay may posibilidad na magkaroon ng isang malaking laki ng file, ngunit ang mga imahe ay mas mataas sa kalidad. Maaari mong gamitin ang lossy o lossless compression.
  • GIF: Ito ay mainam para sa mga animated na imahe. Maaari mo lamang gamitin ang pagkawala ng pagkawala ng compression. Gumagamit lamang ito ng 256 na kulay.

mga format ng file ng imahe

Mayroong iba pang mga pagpipilian, ngunit ang mga ito ay kabilang sa mga pinaka-karaniwang at madaling magtrabaho. Ang iba pang mga pagpipilian ay kasama ang JPEG XR at WebP. Hindi lahat ng mga browser ay sumusuporta sa dalawang ito, kaya’t alalahanin ito.

Gayunpaman, maaari silang maging isang mabubuting pagpipilian, gayunpaman. Halimbawa, kung ihahambing sa isang maihahambing na imahe ng JPEG, mayroong 30 porsyento na pagbawas sa laki ng file na may WebP, sa average.

Dahil sa kawalan ng unibersal na suporta para sa dalawang mga pagpipilian na ito, kakailanganin ng iyong aplikasyon ng karagdagang lohika sa iyong mga server o aplikasyon upang magbigay ng naaangkop na mapagkukunan:

  • Ang pag-optimize ng imahe ay isang serbisyo na ibinigay ng ilang mga CDN, kasama ang paghahatid ng WebP at JPEG XR.
  • Upang makita ang kliyente, magbigay ng pinakamahusay na format ng imahe na magagamit at suriin ang mga suportadong format posible upang magdagdag ng karagdagang lohika ng aplikasyon.
  • Ang ilang mga tool na bukas na mapagkukunan ay awtomatiko ang pag-uusap, pag-optimize at paghahatid ng naaangkop na mga pag-aari.

Sukat kumpara sa Kalidad ng compression

Ang mababang compression ay may posibilidad na magbigay ng isang mas mataas na kalidad, ngunit ang mga sukat ng mga file ay karaniwang mas malaki. Ang kabaligtaran ay totoo na may mataas na compression. Mas maliit ang mga file, ngunit ang kalidad ay may posibilidad na bumaba.

kalidad ng imahe kumpara sa compression

Sa isip, nais mo ng kabuuang isa hanggang dalawang MB para sa pangkalahatang timbang ng iyong webpage. Kaya, isaalang-alang kung gaano karaming mga imahe na kailangan mong gamitin at hatiin ang bilang na ito tungkol sa 1.5. Nagbibigay ito sa iyo ng laki ng bawat imahe na nagbibigay-daan para sa pinakamahusay na bilis ng pag-load.

Lossless kumpara sa Lossy Optimization

Ito ang dalawang uri ng compression na gagamitin mo. Mahalagang maunawaan ang ginagawa nila:

  • kawalan ng pagkawala kumpara sa lossy CompressionWalang kamalian: Ito compresses data at ito ay isang filter. Bago i-render ang imahe, dapat itong mai-compress. Gayunpaman, ang kalidad ay hindi nabawasan. Mayroong maraming mga tool na nagsasagawa ng pagkawala ng pagkawala ng compression.
  • Lossy: Tinatanggal nito ang ilang data at ito ay isang filter. Mag-isip ng kung gaano karaming pagbawas ang ginagawa mo dahil ito ay magpapahina sa imahe. Maaari kang gumamit ng iba’t ibang mga editor at mga tool upang maiayos ang mga setting ng kalidad ng imahe.

Ang pinakamainam na pagsasaayos ng alinman sa pagkawala o pagkawala ng pagsasaayos ay nakasalalay sa iyong sariling pamantayan, tulad ng tradeoff sa pagitan ng mga artifact na ipinakilala at laki ng file, at ang mga nilalaman ng imahe.

Walang isang unibersal na setting na nalalapat sa lahat ng mga imahe. Sa huli, nais mong i-play sa paligid na may iba’t ibang mga imahe upang makita kung alin ang pinakamahusay na gumagana.

Pagbabago ng mga Larawan sa Scale

Salamat sa mga tumutugon na pahina sa mga site, tulad ng WordPress, makakakuha ka ng maraming mga laki ng file sa iyong library ng media. Ang iyong browser ay maaaring pumili ng laki na pinakamahusay at i-download ito. Ang laki ng pinili ng browser ay batay sa resolusyon ng aparato.

pagbabago ng imahe sa wordpress

Ang orihinal na file ay nananatiling hindi nababago at napanatili. Maaari kang gumamit ng mga plugin upang maiwasan ang pag-save ng orihinal upang mapanatili ang puwang ng disc kung gusto mo.

Pagpapalit at Pag-alis ng Mga Larawan

Kailangan mo ba ang lahat ng mga imahe sa isang webpage? Kung hindi, alisin ang mga hindi kinakailangan. Gayunpaman, kung ang lahat ay nauugnay sa nilalaman, isaalang-alang ang pagpapalit ng mas malaki o mas mababang kalidad ng mga imahe na may mas mahusay na mga pagpipilian.

Sa ilang mga kaso, ang mga web font at CSS effects ay maaaring maganap sa lugar ng mga imahe habang nagbibigay pa rin ng isang magandang visual aesthetic sa pahina. Sa mga web font, ang magagandang typefaces ay makakatulong upang mapagbuti ang kakayahang magamit at magbigay ng isang mas pinasadyang hitsura sa iyong mga pahina.

Maaari rin nitong mapagbuti ang iyong kakayahang mabasa at pagba-brand. Siguraduhin lamang na maaari mo pa ring madaling maghanap, pumili at baguhin ang laki ng teksto nang walang pagkakaroon ng mga isyu sa pagbasa.

Kasama sa mga epekto ng CSS ang mga elemento, tulad ng mga anino at gradients. Ang mga ito ay maaari pang karagdagang pagba-brand. Ang mga hayop ay maaaring magbigay ng visual na apela sa iyong webpage sa bawat antas ng zoom at paglutas. Kumpara sa mga file ng imahe, ito ay isang maliit na bahagi ng mga bait.

Raster kumpara sa Mga Larawan ng Vector

rastor vs vector

Ang raster at vector ay dalawa sa mga pangunahing uri ng file ng imahe. Ang mga programa na nakabase sa Pixel, isang scanner o isang camera ay ginagamit upang lumikha ng mga imahe ng raster.

Malawakang ginagamit ito sa internet at mas madalas na ginagamit. Ang software ng Vector ay ginagamit upang lumikha ng mga imahe ng vector. Karaniwan ito para sa mga imahe na pumupunta sa mga pisikal na produkto, at sa engineering, CAD at 3D graphics.

Ang mga imahe ng Vector ay resolusyon- at independiyenteng mag-zoom. Kapag ang mga geometric na hugis ay kasangkot, ang vector ay mainam. Kung ang mga imahe ay kumplikado at may isang kayamanan ng mga detalye at hindi regular na mga hugis, ginusto ang mga imahe ng raster.

Ang mga raster graphics ay naka-encode ng mga indibidwal na halaga ng bawat pixel sa loob ng isang parihaba na grid upang kumatawan ng isang imahe. Ang mga graphic graphics ay kumakatawan sa isang imahe gamit ang mga puntos, linya at polygons.

Mga Implikasyon sa Mataas na Resolusyon sa Mataas na Resolusyon

Mahalagang makilala sa pagitan ng dalawang magkakaibang mga uri ng pixel, na kasama ang mga pixel ng aparato at mga CSS pixel. Maramihang mga pixel ng aparato ay maaaring naroroon sa isang solong CSS pixel. Ang detalye sa screen ay nagiging mas finer na may higit pang mga pixel ng aparato.

css pixel kumpara sa pixel ng aparatoUpang samantalahin ang mas mataas na bilang ng mga pixel ng aparato, dapat na may higit pang detalye ang mga pag-aari ng imahe.

Ang tungkulin na ito ay mainam para sa mga imahe ng vector dahil maaari silang makagawa ng matalim na mga resulta kapag nai-render sa anumang resolusyon.

Dahil ang mga imahe ng raster ay gumagamit ng isang batayang per-pixel upang ma-encode ang data ng imahe, mas mapaghamong sila. Ito ay habang tumataas ang mga laki ng file ng raster habang tumataas ang mga pixel.

Kaya, ang mga high-resolution na screen ay nangangailangan ng mga imahe na may mataas na resolusyon upang maani ang mga benepisyo. Ang mga imahe ng Vector ay pinakamahusay para sa mga screen ng high-resolution dahil palagi silang nagbibigay ng matalim na mga resulta dahil sa pagiging malaya sa resolusyon.

Tandaan lamang na anuman ang paglutas, ang mga diskarte sa pag-optimize ng imahe ay pareho.

Pag-optimize ng Mga Larawan ng Vector

Ang Scalable Vector Graphics (SVG) ay suportado ng lahat ng mga modernong browser.

Ito ay mainam para sa two-dimensional graphics at ang format ay batay sa XML-image. Ang mga file na SVG ay maaaring malikha ng kamay gamit ang text editor na gusto mo o sa karamihan ng mga uri ng software na nakabatay sa vector.

Upang mabawasan ang laki ng mga file ng SVG, dapat nilang binawi. Ang GZIP ay dapat gamitin kapag nag-compress ng mga file ng SVG.

Pag-optimize ng Mga Raster na Larawan

Ang isang grid ng mga pixel ay bumubuo ng isang raster na imahe. Ang mga indibidwal na mga piksel ay nasa isang two-dimensional grid. Halimbawa, ang isang pagkakasunud-sunod ng 10,000 mga pixel ay bumubuo ng isang imahe ng 100 hanggang 100 mga pixel. Ang bawat pixel ay nag-encode ng transparency at impormasyon ng kulay.

mabigat ang rasterAng mga halaga ng RGBA ay nakaimbak ng bawat piksel. Kabilang dito ang:

  • Red channel
  • Blue channel
  • Green channel
  • Channel (transparency) na channel

Ang 256 shade (halaga) ay inilalaan sa loob ng browser. Bawat channel, isinasalin ito sa walong piraso. Bawat pixel, ito ay apat na bait. Ginagawa nitong posible upang makalkula ang laki ng file gamit ang mga sukat ng grid. Hindi kinakailangan ng marami para sa laki ng file na maging napakalaki.

Kaya, upang mabawasan ang laki ng file ng imahe, may ilang mga diskarte:

  • Bawasan ang kalaliman ng imahe. Maaari mong gawin ito sa pamamagitan ng paggamit ng isang mas maliit na kulay na papag.
  • I-optimize ang data na iniimbak ng indibidwal na mga piksel.

Mga tool at Parameter Tuning

Walang perpektong tool ng imahe, hanay ng mga parameter ng pag-optimize o format na gagana para sa bawat imahe. Ang mga nilalaman ng imahe, at mga kinakailangan sa teknikal at visual nito, ay matukoy kung alin ang dapat mong gamitin.

Kapag nakakita ka ng isang mahusay na setting ng setting, maaari mo itong gamitin para sa mga katulad na mga imahe sa hinaharap upang makatipid ng oras. Gayunpaman, tiyaking hindi mo kailanman ipinapalagay na ang parehong mga setting ay dapat gamitin upang i-compress ang lahat ng mga imahe.

Ang pag-aaral tungkol sa ilang karaniwang mga tool ay makakatulong sa iyo sa paggawa ng tamang pagpipilian. Ang apat na ito ay kabilang sa mga madalas na ginagamit:

  • Gifsicle: Pinapayagan ka nitong mag-optimize at lumikha ng iba’t ibang mga imahe ng GIF.
  • Optipng: Ginagamit ito upang pahintulutan ang pagkawala ng pag-optimize ng PNG.
  • Jpegtran: Pinapayagan ka ng isang ito na mag-optimize ng mga imahe ng JPEG.
  • Pngquant: Ginagamit ito upang pahintulutan ang pag-optimize ng PNG.

Paghahatid ng Naka-scale na Mga Asset ng Imahe

Mayroong dalawang pangunahing pamantayan upang isaalang-alang kapag nagsasagawa ka ng pag-optimize ng imahe:

  • Pag-optimize ng kabuuang bilang ng mga imahe.
  • Pag-optimize kung gaano karaming mga byte ang kinakailangan upang i-encode ang bawat pixel sa isang imahe.

puno ng format ng imaheAng laki ng iyong file ng imahe ay bumabagsak sa kabuuang mga pixel na pinarami ng kabuuang byte na kinakailangan para sa indibidwal na pag-encode ng pixel. Heto na. Isaisip ito kapag nagtatrabaho ka upang matukoy ang pinakamainam na laki para sa mga file ng imahe sa iyong website.

Dahil dito, ang pinaka-epektibo at madaling paraan upang mai-optimize ang mga imahe ay tiyaking hindi ka nagpapadala ng higit pang mga pixel na talagang kailangan mong ipakita ang pag-aari sa browser sa nais nitong laki.

Kaya, huwag lamang umasa sa iyong browser upang makapag-save ng mga imahe. Maaari itong maging sanhi ng mga ito upang maipakita sa isang mas mababang resolusyon. Gumagamit din ito ng maraming dagdag na mga mapagkukunan ng CPU.

Sa pangkalahatan ay hindi posible na ginagarantiyahan ang eksaktong laki ng pagpapakita para sa bawat solong pag-aari na naihatid. Gayunpaman, mahalagang tiyakin na pinapanatili mo ang lahat ng hindi kinakailangang mga pixel.

Kinakailangan din na maihatid mo ang iyong malaking mga asset nang mas malapit hangga’t maaari sa laki ng kanilang pagpapakita.

Listahan ng Pag-optimize ng Imahe

Ang lahat ng impormasyon dito ay nagbibigay-daan sa iyo upang ma-optimize ang iyong mga imahe upang ang iyong mga webpage ay mas mabilis. Magagamit mo pa rin ang magagandang mga imahe, ngunit hindi sila magiging sanhi ng isang makabuluhang paghina sa mga oras ng paglo-load ng iyong pahina.

Ito ay magpapasaya sa iyong mga bisita at pagbutihin ang pangkalahatang pag-andar ng iyong website. Isaalang-alang ang mga sumusunod na puntos ng checklist kapag na-optimize mo ang iyong mga imahe:

  • Isaalang-alang ang mga format ng vector mula noong nagtatrabaho sila para sa mataas na resolusyon at maraming mga aparato dahil independiyente ang sukat at resolusyon nila.
  • Ang lahat ng mga assets ng SVG ay dapat na mai-compress at minified. Tinatanggal nito ang hindi kinakailangang metadata.
  • Para sa mga format ng raster, maglaro sa pinakamainam na mga setting ng kalidad. Makakatipid ka nito ng isang makabuluhang bilang ng mga bait.
  • Para sa bawat pag-aari, alamin ang iyong mga kinakailangan sa pagganap at piliin ang pinakamahusay na format para sa mga imahe ng raster.
  • Pag-automate tuwing maaari mong tiyakin na pare-pareho ang pag-optimize ng imahe.
  • Ihatid ang mga naka-scale na imahe upang ang natural na laki ng imahe at ang laki ng pagpapakita ay katulad ng maaari.

Upang mabilang ito, mayroong parehong agham at isang sining sa pag-optimize ng imahe. Ang mga algorithm at pamamaraan na lubos na binuo ay nagsisilbing agham.

Ang kakulangan ng tiyak na mga sagot tungkol sa indibidwal na compression ng imahe ay ang sining. Sa huli, dapat kang maglaro sa paligid at mag-eksperimento. Pinapayagan ka nitong gumawa ng pinakamahusay na pagpipilian para sa iyong mga file ng imahe at kung paano sila nag-aambag sa iyong bilis ng webpage.

Sa pagtaas ng katanyagan at pagiging sopistikado ng mga tagabuo ng website ng third-party tulad ng Wix, madali para sa mga taga-disenyo ang maging tamad ngunit manatiling nakatuon sa pagbuo at pagpapanatili ng mahusay na mga proseso ng pag-optimize ng imahe kung ang pagbagsak ng isang template o pagbuo ng isang site mula sa simula.

Mga sanggunian at mga kredito ng imahe:

  • PicupMedia.com
  • Computing.HomeDNS.org
  • CognitiveSEO.com
  • StackOverflow.com
  • EngineThemes.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map