Me pehea te whakaiti i te ahua ki te HTML

I roto i te whanaketanga paetukutuku, he mea nui te raweke whakaahua tika ki te arotau i te mahi me te wheako kaiwhakamahi. He maha nga wa ka kitea e tatou me te hiahia ki te whakaiti i te rahi o he ahua kei te HTML ki te whakarite kia tere me te pai te uta ki runga i o maatau wharangi paetukutuku. I roto i tenei tuhinga, ka tuhurahia e matou nga tikanga rereke me nga tikanga hangarau kia iti ake te ahua o te ahua i roto i te HTML, na reira ka pai ake te arotautanga me te tirohanga o o maatau ihirangi. Mena kei te rapu koe ki te whakapai ake i to mahinga paetukutuku me te whakaiti i te rahi o o whakaahua, kua tae mai koe ki te waahi tika!

1. He kupu whakataki ki te whakaiti i te rahi o te ahua i roto i te HTML

Ko te whakarereke i nga whakaahua he mahi noa i te whanaketanga paetukutuku. Ina tae mai ki te arotau i to maatau paetukutuku, he mea nui kia maamaa o maatau whakaahua me te kore e whakararu i to raatau kounga tirohanga. Waimarie, he maha nga whiringa ka tukuna e HTML hei whakatutuki i tenei. whai hua.

Ko tetahi huarahi ki te whakaiti i te rahi o nga whakaahua ko te whakamahi i te HTML "whanui" me te taonga "teitei" hei whakatika i nga rahi o te ahua. Ka tutuki tenei ma te whakamahi i nga huanga i te tohu whakaahua. Hei tauira, ki te hiahia tatou ki te whakaiti i te rahi Tuhinga o mua haurua, ka taea e taatau te whakarite i te uara "whanui" me te "teitei" ki te haurua o te rahi taketake o te ahua. Ma tenei ara, ka utaina e te kaitirotiro te ahua me nga waahanga iti ake, ka awhina i te whakapai ake i te waa utaina o te whaarangi.

Ko tetahi atu whiringa hei whakaiti i te rahi o nga whakaahua i roto i te HTML ko te whakamahi i te taapiri whakaahua. He maha nga taputapu e waatea ana i runga ipurangi e taea ai e matou te kopiri i o maatau whakaahua me te kore e ngaro te kounga. Ka mahi enei taputapu ma te tango i nga raraunga taapiri mai i te ahua, ka whakaiti i te rahi o te konae me te kore e tino pa ki te kounga tirohanga. Ka taea e matou te whakamahi i enei taputapu ki te kopiri i a maatau whakaahua i mua i te whakauru ki runga i to maatau paetukutuku, ka tere ake te utaina o nga whaarangi mo o maatau kaiwhakamahi.

Kia mahara ko te arotau i te rahi o nga whakaahua HTML ehara i te mea ka pai ake te mahi o to paetukutuku, engari ka pai ake te wheako kaiwhakamahi. Ma te whakaiti i te rahi o nga whakaahua, ka whakarite maatau ka taea e o maatau kaiwhakamahi te uru ki nga ihirangi tere me te pai ake. Whakamahia enei tikanga me nga taputapu kua whakahuahia hei arotau i o whakaahua me te whakatutuki i tetahi paetukutuku pai ake me te hoahoa mo o manuhiri.

2. Tohu me nga huanga hei whakarereke i nga whakaahua i roto i te HTML

Ka whakaratohia e HTML he raupapa o nga tohu me nga huanga ka taea te whakamahi hei whakarereke i nga whakaahua i runga i te wharangi paetukutuku. Ko enei tohu me nga huanga ka taea e koe te whakatika i te rahi me te whakatakotoranga o nga whakaahua, kia pai ake te tirohanga ki roto. taputapu rerekē me nga mata.

Tuatahi, ki te whakarereke i te rahi o te ahua i roto i te HTML, whakamahia te tohu ``. Me whakauru i tenei tohu etahi huanga nui hei whakatutuki i te whakarereketanga tika. Te huanga src ka whakamahia hei tohu i te ara atahanga, ko te huanga whanui y teitei Ka whakamahia hei tohu i te whanui me te teitei o te ahua. Ka taea te tautuhi i enei huanga ki nga uara motuhake-pika, ka taea ranei te whakamahi i te ōrau hei tuku i te whakarereketanga o nga whanaunga.

I tua atu i te huanga whanui y teitei, Ka whakaratohia ano e HTML etahi atu huanga ka taea te whakamahi hei whakarereke i nga whakaahua. Hei tauira, te huanga kāhua Ka taea te whakamahi ki te whakamahi i etahi atu momo CSS penei i te whanui morahi, teitei teitei, me te ahua o te ahua o te ahua. Ka taea hoki e koe te whakamahi i te huanga piha haapiiraa ki te whakamahi i nga momo ahua motuhake kua tautuhia i roto i te pepa ahua o waho, o roto ranei. Ko enei huanga ka nui ake te mana whakahaere mo te whakatakotoranga me te rahi whakamutunga o te ahua. Hei poto, ma te whakamahi i nga tohu me nga huanga e tika ana i roto i te HTML, ka taea te whakarereke i nga whakaahua i runga i te wharangi paetukutuku. Ma te tino mohio ki enei ariā, ka taea e nga kaihanga paetukutuku te whakaatu pai ake o nga whakaahua i runga i nga taputapu rereke me nga mata.

3. Me pehea te tautuhi i te whanui me te teitei o te ahua i roto i te HTML

Ko te tohu i te whanui me te teitei o te ahua i roto i te HTML he mea nui hei whakahaere i te ahua me te whakatakotoranga Tuhinga o mua Tukutuku. Waimarie, he maha nga huarahi hei whakatutuki i tenei whainga.

Ko te huarahi ngawari ki te tautuhi i te rahi o te ahua ko te whakamahi i nga huanga "whanui" me te "teitei". Ko enei huanga ka taea te taapiri tika ki te tohu "img" ka taea e koe te tautuhi i te whanui me te teitei o te ahua ki nga pika. Hei tauira:

"`html

«`

Mena kei te pirangi koe kia mau tonu te ahua ki ona rahinga taketake, me tohu noa tetahi o nga huanga (te whanui, te teitei ranei) ka waiho ma tetahi atu e whakatika aunoa i runga i te waahanga. Ka tutuki tenei ma te whakamahi i te huanga "kāhua" me te tohu kotahi noa te uara, mo te whanui, mo te teitei ranei. Hei tauira:

"`html

«`

Ka taea hoki te whakamahi i nga waeine inenga, penei i te ōrau, ki te rahi o te atahanga ki tana ipu. Hei mahi i tenei, tohua noa te uara e hiahiatia ana ka whai i te tohu ōrau (%). Hei tauira:

"`html

«`

He mea nui kia mohio koe ki te kore koe e tohu i te rahi o nga whakaahua i roto i te HTML, ka whakaatuhia e te kaitirotiro ki o raatau rahi taketake. He mea tika kia whakamahia enei tikanga whaanui whanui me te teitei kia mau tonu te whakatakotoranga o to paetukutuku. Whakamatautau ki enei whiringa ka kitea te mea e pai ana ki o hiahia!

4. Te whakamahi i te ōrau hei whakaiti i te rahi o te ahua ki te HTML

Ko te whakamahi i nga ōrau i roto i te HTML he huarahi whai hua hei whakaiti i te rahi o te ahua. Ma tenei tikanga ka taea e koe te whakatika i te ahua kia rite ki te waahi e waatea ana kei runga te mata, ka hua ake he whakaaturanga ngawari me te urutau mo nga taputapu rereke me nga whakataunga mata.

Hei whakamahi i te ōrau hei whakaiti i te rahi o te ahua i roto i te HTML, ka whai noa i nga mahi e whai ake nei:

1. Tuatahi, ka kimihia te tohu ahua HTML () ka tohua he huanga rahi: te whanui me te teitei. Engari ki te whakapūtā he uara pūmau i roto i nga pika, ka whakamahia e matou he ōrau. Hei tauira, ki te hiahia matou kia noho te ahua ki te 50% o te whanui o te mata, ka whakamahia e matou te whanui=»50%» i roto i te tohu whakaahua.

2. I muri mai, ka taea e tatou te whakatika i te teitei kia rite ki te whakamahi i te taonga CSS "aunoa" mo te huanga teitei. Ma tenei ka whakatika aunoa te teitei i runga i te whanui orite kua whakaritea e te ōrau kua tohua ki runga ake nei. Hei tauira, mena he 50% te whanui o te ahua, ka whakatika aunoa te teitei.

3. Ka mutu, ki te whakarite kia tika te ahua ki runga i nga taputapu rereke me nga whakataunga mata, ka taea te whakamahi etahi atu ture whakaahua. Ka taea e tatou te whakarite i te whanui morahi ma te whakamahi i te taonga CSS "max-width", ka whakarite kia kore te ahua e puhake mena he iti ake te mata. Hei tauira, ka taea e tatou te taapiri i te ahua "marahi-whanui: 100%;" ki te tohu whakaahua.

Kia maumahara ko te whakamahi i nga ōrau hei whakaiti i te rahi o te ahua i roto i te HTML he tikanga e taunaki ana, na te mea e whakarite ana i te whakaaturanga ngawari me te urutau ki runga i nga taputapu rereke me nga whakataunga mata. Ma te whai i nga waahanga kua whakahuahia i runga ake nei, ka taea e koe te whakatika i te rahi o o whakaahua me te kore e ngaro te kounga me te whakakorikori i o raatau ahua. Whakamātauhia me te kimi i te tino pai mo o hiahia!

5. Te whakarereke i te rahi me te CSS i runga i nga Whakaahua HTML

Ko tetahi o nga wero noa i te wa e hoahoa ana i te paetukutuku ko te whakahaere i nga rahi whakaahua. I te nuinga o nga wa, ko nga whakaahua kaore i arotauhia ka roa ake te waa uta me te pa kino ki te wheako kaiwhakamahi. Waimarie, ka tukuna e CSS he otinga ngawari ki te whakaiti i te rahi o nga whakaahua i roto i te HTML.

Ko te mahi tuatahi ki te whakaiti i te rahi o te ahua ko te whakatakoto i ona rahi ma te whakamahi CSS. Ka tutuki tenei ma te whakamahi i nga ahuatanga "whanui" me te "teitei". Hei tauira, ki te hiahia tatou ki te tautuhi i te whanui o te ahua ki te 300 pika, ko te waehere CSS ko width: 300px;. He mea nui kia maumahara ka mahia tenei, ka ngaro pea te ahua o te ahua, ka puta kee ranei mena ka nui rawa te whakaheke.

Ko tetahi atu tikanga whai hua mo te whakaiti i te rahi o te ahua ko te whakamahi i te taapiri CSS. Ka tutuki tenei ma te whakarite i te taonga "papamuri-rahi" ki te uara iti iho i te 100%. Hei tauira, ki te hiahia tatou ki te whakaiti i te rahi o te ahua ki te haurua, ko te waehere CSS background-size: 50%;. Ma tenei tikanga ka taea e koe te whakaiti i te rahi o te ahua me te kore e ngaro te kounga, na te mea ka whakatika noa i te tirohanga. Engari, he mea nui kia mohio ko tenei tikanga e mahi ana mo nga whakaahua papamuri anake. Mena kei te pirangi matou ki te whakaiti i te rahi o te ahua ka whakaatuhia tika ki te wharangi HTML, he pai ake te whakamahi i nga taonga "whanui" me te "teitei" kua whakahuahia i runga ake nei.

Ko te whakaheke i te rahi o nga whakaahua i roto i te HTML ma te whakamahi i te CSS he tikanga whai hua hei whakapai ake i te uta me te mahinga o te wharangi paetukutuku. Ma te whai i nga waahanga kua whakahuahia i runga ake nei, ka taea e tatou te whakatika i nga rahi o te ahua me te whakamahi i te taapiri CSS hei whakaiti i tona rahi. Kia mahara tonu ki te whai whakaaro ki te kounga o te ahua ka mahia enei whakatikatika kia pai ai te wheako kaiwhakamahi.

6. Nga tikanga ki te arotau i te utaina o nga whakaahua iti ki te HTML

He maha nga tikanga hei awhina i te arotau i te utaina o nga whakaahua iti ki te HTML. Kei raro nei etahi rautaki whai hua hei whakatutuki i tenei whainga:

1. Whakamahia te whakatakotoranga tika: He mea nui ki te whiriwhiri i te whakatakotoranga whakaahua tika mo to paetukutuku. I te wa e whakamahi ana i nga whakaahua iti, e taunaki ana kia whakamahia nga whakatakotoranga penei i te JPEG, i te WEBP ranei, i te mea ka kopirihia te ahua me te kore e ngaro te kounga.

2. Whakapirihia nga Whakaahua: I mua i te taapiri i nga whakaahua ki to paetukutuku, he mea nui ki te kopiri kia iti ake te rahi me te kore e pa ki te kounga o te tirohanga. He maha nga taputapu ipurangi e taea ai e koe te kopiri i nga whakaahua tere me te ngawari.

3. Whakamahia te keteroki tirotiro: Ma te whakarite i te paunga keteroki tika mo nga whakaahua iti, ka taea e koe te whakarite kia kotahi anake te utaina o nga whakaahua e to manuhiri. Ka whakaitihia te waa uta me te whakapai ake i te wheako kaiwhakamahi.

I tua atu i enei tikanga, he mea nui ki te mahara kia pai ake nga whakaahua iti mo nga taputapu waea. Kei roto i tenei ko te whakatikatika i te rahi o te ahua me te whakamahi i nga tikanga uta mangere hei whakaiti i te whakamahinga raraunga pūkoro. Ma te whakatinanatanga tika o enei rautaki, ka taea te utaina whakaahua pai ki to paetukutuku HTML.

7. Te whakamahi i nga whare pukapuka o waho ki te whakarereke i nga whakaahua i roto i te HTML

Ko te huarahi noa ki te whakarereke i nga whakaahua i roto i te HTML ko te whakamahi i nga whare pukapuka o waho. Ka whakaratohia e enei whare pukapuka nga mahi kua tautuhia ake ka taea te whakarereke i nga whakaahua ngawari me te pai.

He maha nga whare pukapuka rongonui ka taea te whakamahi mo tenei mahi, penei i jQuery, Tauira y mangere. Ka tukuna e enei whare pukapuka nga tikanga rereke me nga mahi hei whakarereke i nga whakaahua i roto i te HTML.

Hei whakamahi i enei whare pukapuka, me whakauru tuatahi koe i te hono ki te whare pukapuka ki te pane o to wharangi HTML. Hei tauira, ki te whakatau koe ki te whakamahi jQuery, ka taea e koe te taapiri i te hono e whai ake nei ki te pane o to wharangi:

"`html

«`

Ina whakauruhia e koe te hono ki te whare pukapuka, ka taea e koe te timata ki te whakamahi ona mahi i roto i to waehere HTML. Hei tauira, ki te hiahia koe ki te whakarereke i tetahi ahua ki te jQuery, ka taea e koe te whakamahi i te mahi `css()` hei huri i te whanui me te teitei o te ahua. Kei raro nei he tauira o te ahua o te waehere:

"`html

«`

Kia maumahara me whakakapi e koe te "img" ki te kaitautuhi, te karaehe ranei o te ahua e hiahia ana koe ki te whakarereke i te rahi. Hei taapiri, ka taea e koe te whakatika i nga uara "300px" me te "200px" ki o hiahia whakarereke.

Ki te hiahia koe ki te whakamahi i tetahi atu whare pukapuka, ka taea e koe te rapu akoranga motuhake me nga tauira i runga ipurangi ki te ako me pehea te whakarereke i nga whakaahua me taua whare pukapuka. Kia maumahara kei ia whare pukapuka tana ake wetereo me ana tikanga, no reira he mea nui ki te whai i nga tohutohu me nga tuhinga o te whare pukapuka e whiriwhiri ana koe kia whiwhi koe i nga hua e hiahiatia ana.

8. Nga whakaaro mo te urunga i te wa e iti ake ai te ahua ki te HTML

Ko te whakamahi i nga whakaahua nui i runga i te paetukutuku ka pa kino ki te wheako o te kaiwhakamahi, ina koa ki nga taputapu pūkoro he puhoi nga hononga. Na reira, he mea tika kia whakaitihia te rahi o nga whakaahua kia pai ake te uta me te whakapai ake i te urunga. I muri mai, ka whakamaramahia e matou me pehea te mahi i roto i te HTML.

1. Whakamahia te tohu HTML `img` hei whakauru i te ahua ki to wharangi. Me whakauru te huanga `src` me te waahi whakaahua. Hei tauira:

"`html

«`

2. Tāpirihia te huanga `whānui` hei whakapūtā te whānui e hiahiatia ana o te atahanga i roto i nga pika. Hei tauira, ki te hiahia koe kia 300 pika te whanui o te ahua, ka taea e koe te mahi penei:

"`html

«`

3. Whakamahia te huanga `teitei` ki te tautuhi i te teitei e hiahiatia ana o te ahua i roto i nga pika. Ma tenei ara, ka taea e koe te whakahaere i te whanui me te teitei o te ahua. Hei tauira:

"`html

«`

Kia maumahara ki te whakarereke i te rahi o te ahua, me mau tonu te rahinga taketake kia kore ai e hee te ahua. Kia mahara ko te whakaheke i te rahi o te ahua kaore e pa ki tona kounga, engari he mea nui kia kitea he taurite i waenga i te rahi me te kounga mo te uta tere me te wheako kaiwhakamahi tino pai. Kaua e wareware ki te taapiri i nga kupu alt e whakaahua ana i te ahua kia pai ake ai te uru!

9. Nga tohutohu hei pupuri i te kounga ina whakaitihia te rahi o te ahua ki HTML

He maha nga tikanga me nga taunakitanga me whai whakaaro tatou ina whakaitihia te rahi o te ahua HTML me te kore e whakararu i tona kounga. Kei raro nei etahi tohutohu matua:

1. Whakamahia te huanga "whanui" me "teitei": He mea nui ki te tautuhi i nga rahinga tika o te ahua i roto i nga pika ma te whakamahi i nga huanga "whanui" me te "teitei". Ma tenei ka taea e te kaitirotiro te rahui i te waahi tika mo te ahua, ka karo i te rescaling koretake me te arotau i tana mahi.

2. Kōpeke te ahua: He taputapu ipurangi me nga kaupapa whakatika whakaahua e taea ai e tatou te kopiri i nga whakaahua me te kore e ngaro te kounga. Ma te whakaiti i te rahi o te konae, ka tere te utaina o te whaarangi. I tua atu, ka tūtohutia kia whakamahia whakatakotoranga ahua Ko nga whakatakotoranga mama ake, penei i te JPEG, i te PNG kōpeke ranei, hei utu mo nga whakatakotoranga taumaha penei i te TIFF, BMP ranei.

3. A ape i te whakarereke i te rahi ma te whakamahi CSS: Ahakoa ka taea te whakarereke i te rahi o te ahua ma te whakamahi CSS, ka pa kino tenei ki tona kounga. He pai ake te whakamahi i nga whakaahua me nga rahi tika mai i te tiimatanga me te karo i te kaha o te rahi ma te CSS. Whakamahia nga inenga e tika ana hei whakaatu tika i te ahua, ka karo i nga uara nui, iti rawa ranei.

Kia mahara ko te arotautanga atahanga tetahi waahanga nui o te whanaketanga paetukutuku, na te mea he puhoi te whaarangi ka pa kino ki te wheako kaiwhakamahi. Ma te whai i enei tohutohu me te whakamahi i nga taputapu e tika ana, ka taea e koe te whakaiti i te rahi o te ahua HTML me te kore e patu i tona kounga, na reira ka eke ki te whaarangi paetukutuku tere me te pai ake.

10. He tauira waehere kia iti ake te ahua ki te HTML

Kia iti ake te ahua i roto i te HTML, ka taea e koe te whakamahi CSS hei whakarereke i te ahua. Anei etahi tauira waehere ka taea e koe te whakamahi hei tohutoro:

1. Whakamahia te taonga whanui CSS hei tautuhi i te whanui o te ahua. Hei tauira, ki te hiahia koe ki te whakaiti i te rahi o te ahua ki te haurua, ka taea e koe te whakarite i te whanui ki te 50%.

2. Ko tetahi atu huarahi ki te whakarereke i te ahua ko te whakamahi i te taonga "teitei" CSS ki te tautuhi i te teitei o te ahua. Hei tauira, ki te hiahia koe ki te whakaiti i te rahi o te ahua ki te hauwhā, ka taea e koe te whakarite i te teitei ki te 25%.

3. Ka taea hoki e koe te whakamahi i te taonga CSS "whakahuri" hei whakarereke i te ahua. Hei tauira, ki te hiahia koe ki te whakaiti i te rahi o te ahua ki te haurua, ka taea e koe te whakamahi i te mahi "tauine(0.5)".

Kia mahara he tauira noa enei ka taea e koe te whakatika i nga uara kia rite ki o hiahia. Me mahara ano ko te whakarereke i te ahua ma te whakamahi i te HTML me te CSS ka pa ki te whakaaturanga i roto i te tirotiro, ehara i te rahi o te konae whakaahua.

11. Te whakatika i nga raruraru noa i te whakarereketanga o nga whakaahua i roto i te HTML

Kei raro nei nga korero mo te tukanga taahiraa i te taahiraa Hei whakatika i nga raru noa i te whakarereketanga o nga whakaahua ki te HTML:

1. Whakamahia nga ahuatanga CSS: Ka tukuna e HTML nga taonga CSS maha hei whakatika i te rahi o nga whakaahua. Ko tetahi o nga mea tino noa ko te taonga "whanui", ka taea e koe te whakaatu i te whanui e hiahiatia ana i roto i nga pika me te ōrau. Hei tauira, ka tautuhi i te whanui atahanga ki te 300 pika. Waihoki, ka taea te whakamahi i te taonga "teitei" hei tohu i te teitei.

2. Kia mau tonu te ahua ōwehenga: Hei karo i nga raru pahekeheke, he mea tika kia mau tonu te ahua o te ahua taketake ina huri te rahi o nga whakaahua. Hei whakatutuki i tenei, ka taea e koe te whakamahi i te taonga "whanui" me te waiho i te uara o te taonga "teitei" kia noho kau, whakamahia "aunoa". Hei tauira, .

3. Whakamahia nga taputapu o waho: Mena ka hiahia koe ki te whakarereke i nga whakaahua maha i te wa kotahi, ki te hiahia ranei koe ki te whakahaere i nga mahi whakatikatika, ka taea te whakamahi i nga taputapu o waho. Ko etahi o nga whiringa rongonui ko nga kaupapa whakatika whakaahua penei Adobe Photoshop GIMP ranei, ratonga ipurangi pera i TinyPNG, Kraken.io ranei. Ko enei taputapu e tuku ana i nga whiringa matatau ake, penei i te whakarereke aunoa, te taapiri, te whakahōputu whakaahua ranei.

Kia mahara tonu ki te penapena a tārua o nga whakaahua taketake i mua i te whakarereketanga, me te whakamatautau ki nga taputapu rereke me nga rahi mata kia tika ai te whakarereketanga o nga whakaahua. A pee i enei taahiraa ka karo i nga raru noa i te whakarereke i o whakaahua ki te HTML.

12. Te whakamahi i nga tikanga taapiri whakaahua i roto i te HTML

He mea nui te whakamahi i nga tikanga taapiri whakaahua i roto i te HTML ki te arotau i te uta me te whakaatu o nga whakaahua ki runga i te paetukutuku. Ka whakaitihia te rahi o te kōpeketanga kōnae whakaahua me te kore e tino pa ki tona kounga tirohanga, ka pai ake te mahi o te whaarangi me te wheako kaiwhakamahi.

He maha nga tikanga taapiri ka taea te whakamahi ki te HTML, penei i te whakamahi i nga kaupapa me nga taputapu motuhake, penei i te Adobe Photoshop, GIMP ranei, ka taea e koe te whakatika i te kounga me te rahi o nga whakaahua i mua i te tuku ki te paetukutuku. Ka taea hoki te whakamahi i nga ratonga ipurangi ka kopiri aunoa i nga whakaahua me te kore e ngaro te kounga.

I tua atu, he mea nui ki te whakamahi i nga whakatakotoranga whakaahua-a-tukutuku, penei i te JPEG, PNG, WEBP ranei. Ko enei whakatakotoranga e tuku ana i nga taumata rereke me te tautoko mo te maamaatanga, na reira he mea nui ki te whiriwhiri i te mea tino tika i runga i te ahua o te ahua me tona kaupapa i runga i te paetukutuku. Ka taea hoki e koe te whakamahi i te tikanga uta mangere, e utaina ana te ahua ka kitea ana i te matapihi tirotiro, ka tere ake te waa utaina o te whaarangi.

Hei poto, he mea nui ki te whakapai ake i te uta me te whakaatu o nga whakaahua ki runga i te paetukutuku. Ma te whakamahi i nga kaupapa me nga taputapu motuhake, ko te whiriwhiri i te whakatakotoranga whakaahua e tika ana me te whakamahi i nga tikanga penei i te uta mangere etahi o nga tikanga e taunaki ana kia tutuki pai ake te mahinga me te wheako kaiwhakamahi tino pai. Me mahara tonu ki te whakamatautau i te paetukutuku ki runga i nga taputapu rereke me nga hononga kia tere ai te uta o nga whakaahua.

13. Me pehea te whakarereke i nga whakaahua ki nga taputapu rereke i roto i te HTML

He rereke nga huarahi hei whakarereke i nga whakaahua ki nga taputapu rereke i roto i te HTML. Ko tetahi tikanga taahiraa-i-te-taahiraa hei whakaoti i tenei raru ka korerohia i raro nei.

1. Whakamahia te huanga "srcset": Ma tenei huanga ka taea e koe te tautuhi i nga whakaahua rereke mo nga rahi o te mata. Hei mahi i tenei, me whakauru nga konae ahua rereke ki te tohu "img" ka wehea e nga piko. Hei tauira:
"`html

«`
Ko tenei waehere e tohu ana ka whakaatuhia "small-image.jpg" mena he 320 pika te whanui o te mata, "medium-image.jpg" mena he nui ake te whanui i te 320px engari he iti iho i te rite ranei ki te 768px, me te " nui-whakaahua .jpg» ki te nui ake te whanui i te 768px engari he iti iho i te rite ranei ki te 1024px.

2. Whakamahia nga patai pāpāho CSS: Ko tetahi atu whiringa ko te whakamahi i nga ture patai pāpāho CSS hei tautuhi i nga momo momo mo nga rahi mata rereke. I tenei keehi, ka taea e koe te whakamahi i nga whakaahua hei papamuri o nga huānga, te whakarite ranei i nga rahi whakaahua rereke ma te whakamahi i te huanga "whanui". Hei tauira:
"`html

«`
Ko tenei waehere e whakaatu ana i te "small-image.jpg" hei papamuri o te huānga me te karaehe "ahua" ki runga i nga mata tae atu ki te 480px te whanui, "medium-image.jpg" ki nga mata nui ake i te 480px engari iti iho i te rite ranei ki te 1024px, me te " "image-grande.jpg" i runga i nga mata nui ake i te 1024px.

3. Whakamahia nga anga me nga wharepukapuka: He maha nga anga me nga wharepukapuka e whakamaarama ana i te tukanga urutau ahua, penei i te Responsive Images Community Group (RICG), Picturefill me Lazy Load. Ko enei taputapu ka awhina i te whakatinanatanga o nga tikanga kua whakahuahia i runga ake nei, me te tuku i te pai ake me te whakarereke aunoa o nga whakaahua ki nga taputapu rereke.

14. Whakamutunga: Nga mahi pai ki te whakaiti i te ahua ki te HTML

Hei whakarāpopototanga, ko te whakaiti i te rahi o te ahua i roto i te HTML he mahinga ngawari ka taea te whakatutuki ma te whai i etahi mahi pai. Kei raro nei etahi tohutohu me nga tohutohu mo te mahi pera:

1. Whakamahia nga huanga rahi: te huanga "whanui" me te "teitei" o te tapanga he huarahi ngawari ki te tautuhi i nga rahi o te ahua ki te HTML. ka tautuhi i te whanui me te teitei o te ahua ki te 500 me te 300 pika. He mea nui ki te whakahua ko tenei ka whakarereke i te rahi o te ahua o te ahua, kaua ko te rahi o te konae.

2. Kōpekehia te atahanga: Ka whakaitihia te rahi o te konae whakaahua me te kore e tino pa ki tona kounga tirohanga. He maha nga taputapu ipurangi me nga rorohiko e waatea ana hei kopiri i nga whakaahua ki te JPEG, PNG, GIF ranei. Kia mohio koe kei te whakamahi koe i te whakatakotoranga taapiri tika me te whakatika i nga tautuhinga kia rite ki o hiahia.

3. Arotau mo te paetukutuku: He huarahi kee hei arotau i te ahua hei whakamahi Kei te paetukutuku. Ka taea e koe te whakamahi i nga whakatakotoranga ahua pai ake penei i te WebP, i te SVG ranei, he pai ake te pai o te owehenga taapiri. I tua atu, me whakaaro koe ki te huri i te taumira o te ahua mena ka whakaatuhia ki runga taputapu pūkoro. ** ** Anei me pehea te whakamahi i te tohu i roto i te HTML ki te whakauru i nga putanga maha o te ahua me te tuku i te kaitirotiro ki te whiriwhiri i te mea tino tika i runga i ona kaha.

4. Whakaitihia te waehere HTML: ko tetahi atu waahanga nui ko te whakaiti i te rahi o te waehere HTML kei roto te ahua. Hei whakatutuki i tenei, ka taea e koe te tango mokowāma me nga korero kore. Ka taea hoki e koe te whakakotahi i nga whakaahua maha ki te pepa sprite kotahi ma te whakamahi i te tikanga CSS Sprites. **

**Ka whakaitihia te runga o te tūmau ina whiwhi tono whakaahua maha. I tua atu, whakaarohia te whakamahi i nga tikanga keteroki kia taea ai e te kaitirotiro te penapena whakaahua i roto i tana maharatanga rangitahi, kia kore ai e tango ano i ia haerenga.

Whaia enei tikanga pai ka tino kaha koe ki te whakaiti i te rahi o o whakaahua HTML, na reira ka arotau te mahinga o to paetukutuku me te pai ake o te wheako kaiwhakamahi.

Hei whakamutunga, ko te whakaiti i te rahi o te ahua i roto i te HTML he tikanga tino nui ki te arotau i te tere uta o te paetukutuku me te whakapai ake i te wheako kaiwhakamahi. Na roto i nga taputapu me nga tikanga kua whakahuahia, ka taea e nga kaihanga te whakatutuki i tenei whainga.

Ma te whakamahi i nga tohu HTML hei tohu i te rahi o te ahua, ka karo koe i te uta i nga take me te whakarite kia whakaatu tika te ahua ki runga i nga taputapu rereke me nga mata. I tua atu, ma te kopiri i te ahua me nga whakatakotoranga penei i te JPEG, i te WebP ranei, ka heke te taumaha o te konae me te kore e ngaro te kounga o te tirohanga.

He mea nui kia maumahara he ahurei ia paetukutuku, ka hiahia pea koe ki etahi atu whakatikatika i runga i o hiahia motuhake. He mea tika kia mahia nga whakamatautau me te arotautanga kia mau tonu te mahi tino pai.

Hei whakarapopototanga, ma te whai i enei tikanga me te arotau tika i te rahi o nga whakaahua HTML, ka taea e nga kaiwhakawhanake te whakatutuki i te paetukutuku tere me te pai ake, me te tuku i te wheako kaiwhakamahi pai ake. Ma te whakamahi tika i nga taputapu me nga tikanga e waatea ana, ka kore te rahi o nga whakaahua hei herenga i roto i te ao matihiko.