Indlela yokwenza umfanekiso ube mncinci kwi-HTML

Kuphuhliso lwewebhusayithi, ukuguqulwa komfanekiso ofanelekileyo kubalulekile ukunyusa ukusebenza kunye namava omsebenzisi. Sihlala sizifumana sinesidingo sokunciphisa ubungakanani be umfanekiso kwiHTML ukuqinisekisa ukuba ilayisha ngokukhawuleza nangokufanelekileyo kumaphepha ethu ewebhu. Kweli nqaku, siza kuphonononga iindlela ezahlukeneyo kunye nobuchule bobugcisa bokwenza umfanekiso kwi-HTML encinci, ngaloo ndlela sivumela ukwenziwa ngcono kunye nokubonwa komxholo wethu. Ukuba ujonge ukuphucula ukusebenza kwewebhusayithi yakho kwaye unciphise ubungakanani bemifanekiso yakho, ufike kwindawo elungileyo!

1. Intshayelelo yokunciphisa ubungakanani bomfanekiso kwi-HTML

Ukutshintsha ubungakanani bemifanekiso ngumsebenzi oqhelekileyo kuphuhliso lwewebhu. Xa kuziwa ekuphuculeni iwebhusayithi yethu, kubalulekile ukuqinisekisa ukuba imifanekiso yethu ilula kangangoko ngaphandle kokubeka esichengeni umgangatho wabo wokubonwayo. Ngethamsanqa, i-HTML isinika iindlela ezininzi zokufezekisa oku. ngempumelelo.

Enye indlela yokunciphisa ubungakanani bemifanekiso kukusebenzisa i-HTML "ububanzi" kunye nepropati "yokuphakama" ukulungisa imilinganiselo yomfanekiso. Oku kuphunyezwa ngokusebenzisa iimpawu kwithegi yomfanekiso. Umzekelo, ukuba sifuna ukunciphisa ubungakanani kumfanekiso Isiqingatha, sinokuseta "ububanzi" kunye "nobude" ixabiso kwisiqingatha sobukhulu boqobo bomfanekiso. Ngale ndlela, isikhangeli siya kulayisha umfanekiso kunye nemilinganiselo emincinci, eya kunceda ukuphucula ixesha lokulayisha iphepha.

Enye inketho yokunciphisa ubungakanani bemifanekiso kwi-HTML kukusebenzisa ucinezelo lomfanekiso. Kukho izixhobo ezininzi ezikhoyo kwi-intanethi ezisivumela ukuba sicinezele imifanekiso yethu ngaphandle kokulahlekelwa ngumgangatho. Ezi zixhobo zisebenza ngokususa idatha engafunekiyo kumfanekiso, ukunciphisa ubungakanani befayile ngaphandle kokuchaphazela kakhulu umgangatho wokubonwayo. Sinokusebenzisa ezi zixhobo ukucinezela imifanekiso yethu ngaphambi kokuba siyifake kwiwebhusayithi yethu, nto leyo eya kubangela ukuba kulayishwe iphepha ngokukhawuleza kubasebenzisi bethu.

Khumbula ukuba ukukhulisa ubungakanani bemifanekiso yeHTML ayiphuculi nje ukusebenza kwewebhusayithi yakho, kodwa ikwaphucula amava omsebenzisi. Ngokunciphisa ubungakanani bemifanekiso, siqinisekisa ukuba abasebenzisi bethu banokufikelela kumxholo ngokukhawuleza nangempumelelo. Sebenzisa obu buchwephesha kunye nezixhobo ezikhankanyiweyo ukwandisa imifanekiso yakho kwaye ufezekise iwebhusayithi esebenzayo nenobubele kubatyeleli bakho.

2. Ithegi kunye neempawu zokutshintsha ubungakanani bemifanekiso kwi-HTML

I-HTML ibonelela ngoluhlu lweethegi kunye neempawu ezinokuthi zisetyenziswe ukwenza ubungakanani bemifanekiso kwiphepha lewebhu. Ezi thegi kunye neempawu zikuvumela ukuba ulungelelanise ubungakanani kunye nokwakheka kwemifanekiso, uqinisekisa ukubonwa okungcono kwayo izixhobo ezahlukeneyo kunye nezikrini.

Okokuqala, ukwenza ubungakanani bomfanekiso kwakhona kwi-HTML, usebenzisa i `thegi`. Le thegi kufuneka ibandakanye iimpawu ezininzi ezibalulekileyo ukuphumeza ubungakanani obufanelekileyo. Uphawu lophawu i-src isetyenziselwa ukukhankanya umendo womfanekiso, ngelixa uphawu ububanzi y ukuphakama Zisetyenziselwa ukucacisa ububanzi kunye nokuphakama komfanekiso, ngokulandelanayo. Ezi mpawu zinokusetwa kumaxabiso angqale nge-pixel okanye ipesenti inokusetyenziselwa ukuvumela ubungakanani bobungakanani obunxulumeneyo.

Ukongeza kwimpawu ububanzi y ukuphakama, i-HTML ikwabonelela nangezinye iimpawu ezinokusetyenziselwa ukwenza ubungakanani bemifanekiso kwakhona. Umzekelo, uphawu isitayile ingasetyenziselwa ukufaka izimbo ezongezelelweyo zeCSS ezinje ngobubanzi obukhulu, ubude bobude, kunye nomlinganiselo wembonakalo yomfanekiso. Unokusebenzisa uphawu loyelelwano iklasi ukusebenzisa izimbo ezithile ezichazwe kwiphepha lesimbo sangaphandle okanye sangaphakathi. Ezi mpawu zivumela ulawulo olukhulu phezu koyilo kunye nobukhulu bokugqibela bomfanekiso. Ngamafutshane, ngokusebenzisa iithegi ezifanelekileyo kunye neempawu kwi-HTML, kunokwenzeka ukwenza ubungakanani bemifanekiso ngokulula nangempumelelo kwiphepha lewebhu. Ngokuqonda okusisiseko kwezi ngcamango, abaphuhlisi bewebhu banokuqinisekisa ukuboniswa okungcono kwemifanekiso kwizixhobo ezahlukeneyo kunye nezikrini.

3. Indlela yokucacisa ububanzi kunye nobude bomfanekiso kwi-HTML

Ukucacisa ububanzi kunye nobude bomfanekiso kwi-HTML kubalulekile ukulawula inkangeleko kunye noyilo kwisiza iwebhu. Ngethamsanqa, kukho iindlela ezininzi zokufezekisa le njongo.

Eyona ndlela ilula yokuchaza ubungakanani bomfanekiso kukusebenzisa "ububanzi" kunye "nobude" beempawu. Ezi mpawu zinokongezwa ngokuthe ngqo kwithegi ethi "img" kwaye ikuvumela ukuba usete ububanzi kunye nobude bomfanekiso kwiipikseli. Umzekelo:

"`html

«`

Ukuba ufuna umfanekiso ugcine imilinganiselo yawo yoqobo, kufuneka uchaze enye yeempawu (ububanzi okanye ukuphakama) kwaye uvumele enye ilungelelanise ngokuzenzekelayo ngokusekelwe kumlinganiselo. Oku kuphunyezwa ngokusebenzisa uphawu lwe "style" kunye nokuchaza ixabiso elinye kuphela, nokuba kububanzi okanye kubude. Umzekelo:

"`html

«`

Ungasebenzisa kwakhona iiyunithi ezizalanayo zomlinganiso, njengepesenti, ubungakanani bomfanekiso ngokwesikhongozeli sawo. Ukwenza oku, khankanya ngokulula ixabiso elifunekayo lilandelwa luphawu lwepesenti (%). Umzekelo:

"`html

«`

Kubalulekile ukuba uqaphele ukuba ukuba awukhankanyi ubungakanani bemifanekiso kwi-HTML, isikhangeli siya kubonisa ubungakanani bayo bokuqala. Kuyacetyiswa ukuba usebenzise obu buchule bokuchazwa kobubanzi kunye nobude ngokuqhubekayo ukugcina uyilo olufanayo kwiwebhusayithi yakho. Zama ngezi ndlela kwaye ufumane eyona ifanele iimfuno zakho!

4. Ukusebenzisa ipesenti ukunciphisa ubungakanani bomfanekiso kwi-HTML

Ukusebenzisa iipesenti kwi-HTML yindlela eluncedo yokunciphisa ubungakanani bomfanekiso. Le ndlela ikuvumela ukuba ulungelelanise umfanekiso ngokwendawo ekhoyo kwisikrini, okukhokelela kunikezelo olubhetyebhetye ngakumbi kunye nohlengahlengiso lwezixhobo ezahlukeneyo kunye nezigqibo zesikrini.

Ukusebenzisa ipesenti ukunciphisa ubungakanani bomfanekiso kwi-HTML, silandela la manyathelo alandelayo:

1. Okokuqala, sifumana umfanekiso wethegi ye-HTML () kwaye siyabela ubungakanani besayizi: ububanzi kunye nobude. Endaweni yokuchaza ixabiso elizinzileyo kwiipikseli, siyakusebenzisa ipesenti. Umzekelo, ukuba sifuna ukuba umfanekiso uthabathe i-50% yobubanzi besikrini, siya kusebenzisa ububanzi=»50%» kwithegi yomfanekiso.

2. Okulandelayo, sinokuhlenga-hlengisa ukuphakama ngokulinganayo sisebenzisa ipropathi ye-CSS "ye-auto" yophawu lobude. Oku kuya kubangela ukuba ubude bulungelelanise ngokuzenzekelayo ngokusekelwe kububanzi obulinganayo obusetwe ngepesenti eyabelwe ngasentla. Ngokomzekelo, ukuba umfanekiso unobubanzi be-50%, ukuphakama kuya kulungelelanisa ngokuzenzekelayo ngokulinganayo.

3. Ekugqibeleni, ukuqinisekisa ukuba umfanekiso uhambelana ngokuchanekileyo kwizixhobo ezahlukeneyo kunye nezisombululo zesikrini, imigaqo eyongezelelweyo yesitayile ingasetyenziswa. Sinokuseta ububanzi obuninzi sisebenzisa ipropathi ye-CSS ethi "max-width", eya kuqinisekisa ukuba umfanekiso awuphuphumali ukuba isikrini sincinci. Umzekelo, singongeza isimbo "max-width: 100%;" kwithegi yomfanekiso.

Khumbula ukuba ukusebenzisa iipesenti ukunciphisa ubungakanani bomfanekiso kwi-HTML yinkqubo ecetyiswayo, njengoko iqinisekisa umboniso oguquguqukayo kunye nokulungelelaniswa kwizixhobo ezahlukeneyo kunye nezisombululo zesikrini. Ngokulandela la manyathelo akhankanywe ngasentla, unokuhlengahlengisa ngokulula ubungakanani bemifanekiso yakho ngaphandle kokulahlekelwa ngumgangatho okanye ukuphazamisa inkangeleko yayo. Zama kwaye ufumane eyona ifanelekileyo kwiimfuno zakho!

5. Ukulinganisa kwakhona ngeCSS kwiMifanekiso yeHTML

Omnye wemingeni eqhelekileyo xa uyila iwebhusayithi kukulawula ubungakanani bemifanekiso. Rhoqo, imifanekiso engalungiswanga inokubangela amaxesha okulayisha amade kwaye ibe nefuthe elibi kumava omsebenzisi. Ngethamsanqa, i-CSS inikezela ngesisombululo esilula sokunciphisa ubungakanani bemifanekiso kwi-HTML.

Inyathelo lokuqala lokunciphisa ubungakanani bomfanekiso kukuseta imilinganiselo yawo usebenzisa iCSS. Oku kuphunyezwa ngokusebenzisa "ububanzi" kunye "nokuphakama" iimpawu. Umzekelo, ukuba sifuna ukuseta ububanzi bomfanekiso ukuya kwiipikseli ezingama-300, ikhowudi yeCSS iya kuba width: 300px;. Kubalulekile ukukhumbula ukuba xa usenza oku, umfanekiso ungalahlekelwa ngumgangatho okanye ubonakale ugqwethekile ukuba uyancipha kakhulu.

Enye indlela eluncedo yokunciphisa ubungakanani bomfanekiso kukusebenzisa ucinezelo lweCSS. Oku kuphunyezwa ngokumisela ipropathi "yobungakanani obungasemva" kwixabiso elingaphantsi kwe-100%. Umzekelo, ukuba sifuna ukunciphisa ubungakanani bomfanekiso ngesiqingatha, ikhowudi yeCSS iya kuba background-size: 50%;. Olu buchule likuvumela ukuba unciphise ubungakanani bomfanekiso ngaphandle kokulahlekelwa ngumgangatho, kuba uhlengahlengiswa kuphela ngokubonakalayo. Nangona kunjalo, kubalulekile ukuqaphela ukuba obu buchule busebenza kuphela kwimifanekiso yangasemva. Ukuba sifuna ukunciphisa ubungakanani bomfanekiso oboniswe ngokuthe ngqo kwiphepha le-HTML, kungcono ukusebenzisa "ububanzi" kunye "nobude" iimpawu ezikhankanywe ngasentla.

Ukunciphisa ubungakanani bemifanekiso kwi-HTML usebenzisa iCSS yindlela eluncedo yokuphucula ukulayisha kunye nokusebenza kwephepha lewebhu. Ngokulandela la manyathelo akhankanywe ngasentla, sinokuhlengahlengisa imilinganiselo yomfanekiso kwaye sisebenzise ucinezelo lweCSS ukuze sinciphise ngokubonakalayo ubungakanani bayo. Ngalo lonke ixesha khumbula ukuqwalasela umgangatho womfanekiso xa usenza olu hlengahlengiso ukuze uqinisekise amava afanelekileyo omsebenzisi.

6. Iindlela zokuphucula ukulayishwa kwemifanekiso emincinci kwi-HTML

Kukho iindlela ezininzi ezinokunceda ukwandisa ukulayishwa kwemifanekiso emincinci kwi-HTML. Ngezantsi zizicwangciso ezisebenzayo zokuphumeza le njongo:

1. Sebenzisa ifomathi echanekileyo: Kubalulekile ukukhetha ifomathi yomfanekiso efanelekileyo kwiwebhusayithi yakho. Xa usebenzisa imifanekiso emincinci, kuyacetyiswa ukuba kusetyenziswe iifomati ezifana neJPEG okanye i-WEBP, njengoko zicinezela umfanekiso ngaphandle kokulahlekelwa ngumgangatho omkhulu.

2. Compress Images: Ngaphambi kokuba ungeze imifanekiso kwiwebhusayithi yakho, kubalulekile ukuyicinezela ukunciphisa ubungakanani babo ngaphandle kokuchaphazela umgangatho obonakalayo kakhulu. Kukho izixhobo ezininzi ze-intanethi ezikuvumela ukuba ucinezele imifanekiso ngokukhawuleza kwaye kulula.

3. Thatha inzuzo ye-cache ye-browser: Ngokucwangcisa ukuphela kwexesha elichanekileyo le-cache kwimifanekiso emincinci, unokuqinisekisa ukuba iindwendwe zakho zesayithi zifuna kuphela ukulayisha imifanekiso kanye. Oku kunciphisa ixesha lokulayisha kwaye kuphucula amava omsebenzisi.

Ukongeza kobu buchule, kubalulekile ukukhumbula ukuba imifanekiso emincinci kufuneka ilungiselelwe izixhobo eziphathwayo. Oku kubandakanya ukulungisa ubungakanani bomfanekiso kunye nokusebenzisa iindlela zokulayisha ezonqenayo ukunciphisa ukusetyenziswa kwedatha yeselula. Ngokuphunyezwa ngokufanelekileyo kwezi zicwangciso, ukulayisha umfanekiso osebenzayo kwiwebhusayithi yakho ye-HTML kunokufezekiswa.

7. Ukusebenzisa amathala eencwadi angaphandle ukwenza ubungakanani bemifanekiso kwiHTML

Indlela eqhelekileyo yokutshintsha ubungakanani bemifanekiso kwi-HTML kukusebenzisa amathala eencwadi angaphandle. La mathala eencwadi abonelela ngemisebenzi echazwe kwangaphambili enokuthi isetyenziswe ukwenza ubungakanani bemifanekiso ngokulula nangokufanelekileyo.

Kukho amathala eencwadi aliqela adumileyo anokusetyenziselwa lo msebenzi, anje i-jQuery, Umqamelo y lazysizes. La mathala eencwadi abonelela ngeendlela ezahlukeneyo kunye nemisebenzi yokwenza ubungakanani bemifanekiso kwi-HTML.

Ukusebenzisa la mathala, kufuneka uqale ubandakanye ikhonkco kwilayibrari kwiheda yephepha lakho le-HTML. Umzekelo, ukuba uthatha isigqibo sokusebenzisa i-jQuery, unokongeza ikhonkco elilandelayo kwiheda yephepha lakho:

"`html

«`

Nje ukuba ufake ikhonkco kwithala leencwadi, ungaqala ukusebenzisa imisebenzi yayo kwikhowudi yakho yeHTML. Umzekelo, ukuba ufuna ukwenza ubungakanani kwakhona bomfanekiso ngejQuery, ungasebenzisa `css()` umsebenzi ukutshintsha ububanzi kunye nobude bomfanekiso. Ngezantsi ngumzekelo wendlela ikhowudi enokuthi ijongeke ngayo:

"`html

«`

Khumbula ukuba kufuneka ubuyisele u-"img" ngesichongi okanye udidi lomfanekiso ofuna ukuwuguqula kwakhona. Ukongeza, unokuhlengahlengisa "300px" kunye ne "200px" amaxabiso ngokwezidingo zakho zohlengahlengiso.

Ukuba ukhetha ukusebenzisa elinye ithala leencwadi, unokukhangela izifundo ezithile kunye nemizekelo kwi-intanethi ukuze ufunde indlela yokutshintsha ubungakanani bemifanekiso ngelo thala leencwadi. Khumbula ukuba ithala leencwadi ngalinye linesintaksi kunye neendlela zalo, ngoko ke kubalulekile ukulandela imiyalelo kunye namaxwebhu ethala leencwadi olikhethayo ukuqinisekisa ukuba ufumana iziphumo ezinqwenelekayo.

8. Iingqwalasela zokufikeleleka xa usenza umfanekiso ube mncinci kwi-HTML

Ukusebenzisa imifanekiso emikhulu kwiwebhusayithi kunokuchaphazela kakubi amava omsebenzisi, ngakumbi kwizixhobo eziphathwayo ezinonxibelelwano olucothayo. Ke ngoko, kuye kufuneke ukuba kuncitshiswe ubungakanani bemifanekiso ukukhulisa ukulayisha nokuphucula ukufikeleleka. Emva koko, siya kuchaza indlela yokwenza ngayo kwi-HTML.

1. Sebenzisa i-HTML `img` ithegi ukufaka umfanekiso kwiphepha lakho. Qinisekisa ukubandakanya `src` uphawu loyelelwano kunye nendawo yomfanekiso. Umzekelo:

"`html

«`

2. Yongeza uphawu `ububanzi` ukucacisa ububanzi obufunekayo bomfanekiso kwiipikseli. Umzekelo, ukuba ufuna umfanekiso ube ngama-300 eepixels ububanzi, ungayenza ngolu hlobo lulandelayo:

"`html

«`

3. Sebenzisa uphawu lophawu `ubude` ukucacisa ubude obufunwayo bomfanekiso kwiipikseli. Ngale ndlela, unokulawula zombini ububanzi kunye nobude bomfanekiso. Umzekelo:

"`html

«`

Khumbula ukuba xa ulinganisa ubungakanani bomfanekiso, kufuneka ugcine umlinganiselo wokuqala ukuwuthintela ukuba ungajongeki ugqwethekile. Nceda uqaphele ukuba ukunciphisa ubungakanani bomfanekiso akuyi kuchaphazela ngokuthe ngqo umgangatho walo, kodwa kubalulekile ukufumana ibhalansi phakathi kobukhulu kunye nomgangatho wokulayisha ngokukhawuleza kunye namava afanelekileyo omsebenzisi. Ungalibali ukongeza umbhalo wealt ochaza umfanekiso ukuphucula ukufikeleleka kwawo!

9. Iingcebiso zokugcina umgangatho xa unciphisa ubungakanani bomfanekiso kwi-HTML

Kukho iindlela ezahlukeneyo zobuchule kunye neengcebiso ekufuneka sizithathele ingqalelo xa sinciphisa ubungakanani bomfanekiso weHTML ngaphandle kokuthomalalisa umgangatho wawo. Ngezantsi kukho iingcebiso eziphambili:

1. Sebenzisa uphawu "lobubanzi" kunye "nobude": Kubalulekile ukucacisa imilinganiselo yomfanekiso kwiipikseli usebenzisa "ububanzi" kunye "nobude" beempawu. Oku kuvumela isikhangeli ukuba sigcine isithuba esaneleyo somfanekiso, sinqande ukuphinda-phinda ngokungeyomfuneko kwaye ngaloo ndlela sikwandise ukusebenza kwawo.

2. Cinezela umfanekiso: Kukho izixhobo ze-intanethi kunye neenkqubo zokuhlela imifanekiso ezisivumela ukuba sicinezele imifanekiso ngaphandle kokulahlekelwa ngumgangatho. Ngokunciphisa ubungakanani befayile, ukulayishwa kwephepha kukhawuleza kakhulu. Ngaphezu koko, kucetyiswa ukuba usebenzise iifomathi zemifanekiso iifomati ezikhaphukhaphu, ezifana neJPEG okanye i-PNG ecinezelweyo, endaweni yeefomati ezinzima ezifana ne-TIFF okanye i-BMP.

3. Kuphephe ukwenza ubungakanani kwakhona usebenzisa i-CSS: Nangona kunokwenzeka ukubuyisela ubungakanani bomfanekiso usebenzisa i-CSS, oku kunokuchaphazela kakubi umgangatho wawo. Kukhethwa ukuba usebenzise imifanekiso enemilinganiselo echanekileyo ukusuka ekuqaleni kwaye unqande ukunyanzela ubungakanani ngeCSS. Sebenzisa kuphela imilinganiselo eyimfuneko ukubonisa umfanekiso ngokuchanekileyo, ukuphepha amaxabiso amakhulu kakhulu okanye amancinci.

Khumbula ukuba ukwenziwa komfanekiso yinxalenye ebalulekileyo yophuhliso lwewebhu, njengoko iphepha elicothayo linokuba nefuthe elibi kumava omsebenzisi. Ngokulandela ezi ngcebiso kunye nokusebenzisa izixhobo ezifanelekileyo, uya kukwazi ukunciphisa ubungakanani bomfanekiso we-HTML ngaphandle kokuncama umgangatho wawo, ngaloo ndlela ufezekise iphepha lewebhu elikhawulezayo nelisebenzayo.

10. Imizekelo yekhowudi yokwenza umfanekiso ube mncinci kwi-HTML

Ukwenza umfanekiso ube mncinci kwi-HTML, ungasebenzisa i-CSS ukubuyisela ubungakanani bomfanekiso. Nantsi eminye imizekelo yekhowudi onokuyisebenzisa njengereferensi:

1. Sebenzisa ipropathi yobubanzi beCSS ukuseta ububanzi bomfanekiso. Umzekelo, ukuba ufuna ukunciphisa ubungakanani bomfanekiso ngesiqingatha, unokuseta ububanzi ukuya kuma-50%.

2. Enye indlela yokutshintsha ubungakanani bomfanekiso kukusebenzisa ipropathi ye-CSS "yobude" ukuseta ubude bomfanekiso. Umzekelo, ukuba ufuna ukunciphisa ubungakanani bomfanekiso ngekota, unokuseta ubude ukuya kuma-25%.

3. Ungasebenzisa kwakhona ipropathi ye-CSS "yokuguqula" ukwenza ubungakanani bomfanekiso. Umzekelo, ukuba ufuna ukunciphisa ubungakanani bomfanekiso ngesiqingatha ngokomlinganiselo, ungasebenzisa "isikali(0.5)" umsebenzi.

Khumbula ukuba le yimizekelo nje kwaye unokuhlengahlengisa amaxabiso ngokweemfuno zakho. Kwakhona, khumbula ukuba ukuguqula ubungakanani bomfanekiso usebenzisa i-HTML kunye neCSS ichaphazela kuphela umboniso kwisiphequluli, kungekhona ubungakanani befayile yomfanekiso.

11. Ukulungisa iingxaki eziqhelekileyo xa uhlengahlengisa imifanekiso kwi-HTML

Inkqubo ichazwe ngezantsi. Inyathelo nenyathelo Ukulungisa iingxaki eziqhelekileyo xa uhlengahlengisa imifanekiso kwi-HTML:

1. Sebenzisa iimpawu zeCSS: I-HTML inikezela ngeepropati ezininzi zeCSS ukulungisa ubungakanani bemifanekiso. Enye yezona zinto zixhaphakileyo yipropati "yobubanzi", ekuvumela ukuba uchaze ububanzi obufunwayo kwiipikseli okanye ipesenti. Umzekelo, icwangcisa ububanzi bomfanekiso ukuya kwi-300 pixels. Ngokufanayo, ipropati "yokuphakama" ingasetyenziselwa ukucacisa ubude.

2. Gcina i-aspect ratio: Ukuze ugweme iingxaki eziphazamisayo, kuyacetyiswa ukuba ugcine umlinganiselo we-original aspect ratio xa uhlengahlengisa imifanekiso. Ukufezekisa oku, ungasebenzisa ipropathi "yobubanzi" kwaye ushiye ixabiso "lokuphakama" kwepropati engenanto okanye usebenzise "i-auto". Umzekelo, .

3. Sebenzisa izixhobo zangaphandle: Ukuba ufuna ukubuyisela ubungakanani bemifanekiso emininzi ngexesha elinye okanye ukuba ulawulo oluphezulu lwenkqubo yohlengahlengiso luyafuneka, izixhobo zangaphandle zinokusetyenziswa. Ezinye iinketho ezidumileyo ziquka iinkqubo zokuhlela umfanekiso ezifana I-Adobe Photoshop okanye i-GIMP, okanye iinkonzo ze-intanethi ezifana ne-TinyPNG okanye i-Kraken.io. Ezi zixhobo zihlala zibonelela ngeenketho eziphezulu, ezinje ngokuzenzekela ngokutsha, ucinezelo, okanye ukufomatha kwakhona imifanekiso.

Ngalo lonke ixesha khumbula ukugcina a isipele yemifanekiso yantlandlolo phambi kokwenza naluphi na uhlengahlengiso, kunye novavanyo kwizixhobo ezahlukeneyo kunye nobukhulu bescreen ukuqinisekisa ukuba imifanekiso ilungiswa ngokufanelekileyo. Landela la manyathelo kwaye uphephe iingxaki eziqhelekileyo xa ulinganisa imifanekiso yakho kwi-HTML.

12. Ukusetyenziswa kweendlela zokucinezela umfanekiso kwi-HTML

Ukusetyenziswa kweendlela zokucinezela umfanekiso kwi-HTML kubalulekile ukunyusa ukulayisha kunye nokuboniswa kwemifanekiso kwiwebhusayithi. Uxinzelelo kunciphisa ubukhulu be iifayile zemifanekiso ngaphandle kokuchaphazela kakhulu umgangatho wayo wokubonwayo, ophucula ukusebenza kwephepha kunye namava omsebenzisi.

Kukho iindlela ezininzi zokucinezela ezinokuthi zisetyenziswe kwi-HTML, ezinjengokusetyenziswa kweenkqubo kunye nezixhobo ezithile, ezinje ngeAdobe Photoshop okanye i-GIMP, ekuvumela ukuba uhlengahlengise umgangatho kunye nobukhulu bemifanekiso phambi kokuyilayisha kwiwebhusayithi. Kwakhona kunokwenzeka ukusebenzisa iinkonzo ze-intanethi ezicinezela ngokuzenzekelayo imifanekiso ngaphandle kokulahlekelwa ngumgangatho.

Ukongezelela, kubalulekile ukusebenzisa iifomathi zemifanekiso ehambelana newebhu, njengeJPEG, PNG, okanye WEBP. Ezi fomati zibonelela ngamanqanaba ahlukeneyo oxinzelelo kunye nenkxaso yokungafihli, ngoko ke kubalulekile ukukhetha eyona ifanelekileyo ngokusekelwe kuhlobo lomfanekiso kunye nenjongo yayo kwiwebhusayithi. Unokusebenzisa ubuchule bokulayisha obuvila, obulayisha umfanekiso kuphela xa ubonakala kwifestile yesiphequluli, enceda ukukhawuleza ixesha lokulayisha iphepha.

Ngamafutshane, kubalulekile ukuphucula ukulayishwa kunye nokuboniswa kwemifanekiso kwiwebhusayithi. Ukusebenzisa iinkqubo ezithile kunye nezixhobo, ukukhetha ifomathi yomfanekiso efanelekileyo kunye nokusebenzisa ubuchule obufana nokulayisha okuvilaphayo zezinye zeendlela ezicetyiswayo zokuphumeza ukusebenza okuphuculweyo kunye namava afanelekileyo omsebenzisi. Ngalo lonke ixesha khumbula ukuvavanya iwebhusayithi kwizixhobo ezahlukeneyo kunye noqhagamshelo ukuqinisekisa ukuba imifanekiso ilayisha ngokukhawuleza nangempumelelo.

13. Indlela yokulungelelanisa imifanekiso kwizixhobo ezahlukeneyo kwi-HTML

Kukho iindlela ezahlukeneyo zokulungelelanisa imifanekiso kwizixhobo ezahlukeneyo kwi-HTML. Indlela yesinyathelo-nge-nyathelo yokusombulula le ngxaki iya kuchazwa ngezantsi.

1. Sebenzisa uphawu lwe "srcset": Olu phawu lukuvumela ukuba uchaze imifanekiso eyahlukeneyo yobukhulu besikrini. Ukwenza oku, iifayile zemifanekiso ezahlukeneyo mazifakwe kwithegi "img" kwaye zihlulwe ngeekoma. Umzekelo:
"`html

«`
Le khowudi ibonisa ukuba "small-image.jpg" iya kuboniswa ukuba isikrini sinobubanzi obufikelela kwi-320 pixels, "medium-image.jpg" ukuba ububanzi bukhulu kuno-320px kodwa bungaphantsi okanye bulingana no-768px, kwaye " umfanekiso omkhulu .jpg» ukuba ububanzi bukhulu kuno-768px kodwa bungaphantsi okanye bulingana no-1024px.

2. Sebenzisa imibuzo yemidiya yeCSS: Enye inketho kukusebenzisa imithetho yemibuzo yemidiya yeCSS ukuchaza izimbo ezahlukeneyo zobukhulu besikrini. Kule meko, ungasebenzisa imifanekiso njengemvelaphi yezinto okanye ukuseta ubungakanani bemifanekiso eyahlukeneyo usebenzisa uphawu "lobubanzi". Umzekelo:
"`html

«`
Le khowudi ibonisa "i-small-image.jpg" njengemvelaphi yento "enomfanekiso" weklasi kwizikrini ukuya kuthi ga kwi-480px ububanzi, "medium-image.jpg" kwizikrini ezinkulu kuno-480px kodwa zingaphantsi okanye zilingana no-1024px, kunye " “image-grande.jpg” kwizikrini ezinkulu kuno-1024px.

3. Sebenzisa izikhokelo kunye namathala eencwadi: Kukho izikhokelo ezininzi kunye neelayibrari ezenza lula inkqubo yokulungelelanisa umfanekiso, njengeQela leMifanekiso ephendulayo yoLuntu (RICG), iPicturefill kunye neLazy Load. Ezi zixhobo ziququzelela ukuphunyezwa kobuchule obukhankanywe ngasentla kwaye zivumela ukulungelelaniswa okusebenzayo kunye nokuzenzekelayo kwemifanekiso kwizixhobo ezahlukeneyo.

14. Isiphelo: Iindlela ezilungileyo zokwenza umfanekiso ube mncinci kwi-HTML

Isishwankathelo, ukunciphisa ubungakanani bomfanekiso kwi-HTML yinkqubo elula enokufezekiswa ngokulandela iindlela ezimbalwa ezilungileyo. Ngezantsi kukho iingcebiso kunye neengcebiso zokwenza oko:

1. Sebenzisa iimpawu zobukhulu: uphawu “lobubanzi” kunye “nobude” belebhile yindlela elula yokuchaza imilinganiselo yomfanekiso kwi HTML. iyakuseta ububanzi kunye nobude bomfanekiso ukuya kuma-500 kunye nama-300 pixels ngokulandelelanayo. Kubalulekile ukukhankanya ukuba oku kuya kuguqula kuphela ubungakanani obubonakalayo bomfanekiso, hayi ubungakanani befayile.

2. Cinizela umfanekiso: Ucinezelo kunciphisa ubungakanani befayile yomfanekiso ngaphandle kokuchaphazela kakhulu umgangatho wokubonwayo. Kukho izixhobo ezininzi ze-intanethi kunye nesoftware ekhoyo yokucinezela imifanekiso kwiJPEG, PNG okanye iGIF ifomathi. Qinisekisa ukuba usebenzisa ifomathi yocinezelo efanelekileyo kwaye uhlengahlengise izicwangciso ngokweemfuno zakho.

3. Lungiselela iwebhu: Kukho ezinye iindlela zokwandisa umfanekiso ukuze usetyenziswe kwiwebhu. Unokusebenzisa iifomati zemifanekiso ezisebenza ngakumbi njengeWebP okanye iSVG, ebonelela ngomlinganiselo ongcono woxinzelelo. Ukongeza, kuya kufuneka ucinge ngokutshintsha isisombululo somfanekiso ukuba uya kuboniswa kuphela kwizixhobo eziphathwayo. ** **Nantsi indlela yokusebenzisa ithegi kwi-HTML ukuquka iinguqulelo ezininzi zomfanekiso kwaye uvumele isikhangeli ukuba sikhethe eyona ifanelekileyo ngokusekwe kwizakhono zayo.

4. Ukunciphisa ikhowudi ye-HTML: enye inkalo ebalulekileyo kukunciphisa ubungakanani bekhowudi ye-HTML equlethe umfanekiso. Ukufezekisa oku, unokususa indawo emhlophe engabalulekanga kunye nezimvo. Unokudibanisa imifanekiso emininzi kwiphepha elinye le-sprite usebenzisa ubuchule be-CSS Sprites. **

**Oku kunciphisa umphezulu weseva xa ifumana izicelo zemifanekiso emininzi. Ukongeza, cinga ukusebenzisa iindlela ze-caching ukuze isikhangeli sigcine imifanekiso kwimemori yayo yethutyana kwaye kungafuneki ukuba siyikhuphele kwakhona ngotyelelo ngalunye.

Landela ezi ndlela zilungileyo kwaye ngokuqinisekileyo uya kuba nakho ukunciphisa ngokufanelekileyo ubungakanani bemifanekiso yakho yeHTML, ngaloo ndlela uphucula ukusebenza kwewebhusayithi yakho kunye nokubonelela ngamava angcono omsebenzisi.

Ukuqukumbela, ukunciphisa ubungakanani bomfanekiso kwi-HTML yinkqubo ebalulekileyo yokwandisa isantya sokulayisha sewebhusayithi kunye nokuphucula amava omsebenzisi. Ngezixhobo ezikhankanyiweyo kunye nobuchule, abaphuhlisi banokufezekisa le njongo ngokufanelekileyo.

Ngokusebenzisa iithegi ze-HTML ukucacisa ubungakanani bomfanekiso, ugwema ukulayisha imiba kwaye uqinisekise ukuba umfanekiso ubonisa ngokuchanekileyo kwizixhobo ezahlukeneyo kunye nezikrini. Ukongezelela, ngokucinezela umfanekiso ngeefomathi ezifana neJPEG okanye iWebP, ubunzima befayile buyancipha ngaphandle kokulahlekelwa ngumgangatho obonakalayo.

Kubalulekile ukukhumbula ukuba iwebhusayithi nganye yahlukile kwaye inokufuna uhlengahlengiso olongezelelweyo ngokuxhomekeke kwiimfuno zakho ezithile. Kuyacetyiswa ukuba kwenziwe uvavanyo lwexesha kunye nokulungiswa ukuze kugcinwe ukusebenza kakuhle.

Isishwankathelo, ngokulandela obu buchule kunye nokwandisa ngokufanelekileyo ubungakanani bemifanekiso ye-HTML, abaphuhlisi banokufikelela kwiwebhusayithi ekhawulezayo kunye nokusebenza kakuhle, banikezela ngamava aphuculweyo omsebenzisi. Ngokusetyenziswa ngokufanelekileyo kwezixhobo kunye nobuchule obukhoyo, ubungakanani bomfanekiso abuyi kuba ngumda kwihlabathi ledijithali.