Mar a nì thu ìomhaigh nas lugha ann an HTML

Ann an leasachadh làrach-lìn, tha làimhseachadh ìomhaighean ceart deatamach gus coileanadh agus eòlas luchd-cleachdaidh a bharrachadh. Gu tric bidh sinn gar lorg fhèin leis an fheum air meud a lughdachadh dealbh ann an HTML gus dèanamh cinnteach gu bheil e a’ luchdachadh gu sgiobalta agus gu h-èifeachdach air na duilleagan lìn againn. San artaigil seo, nì sinn sgrùdadh air diofar dhòighean agus dhòighean teignigeach gus ìomhaigh ann an HTML a dhèanamh nas lugha, mar sin a’ toirt cothrom air an t-susbaint againn a bharrachadh agus lèirsinn nas fheàrr. Ma tha thu airson coileanadh do làrach-lìn adhartachadh agus meud nan ìomhaighean agad a lughdachadh, tha thu air tighinn don àite cheart!

1. Ro-ràdh mu bhith a 'lùghdachadh meud ìomhaigh ann an HTML

Tha ath-mheudachadh ìomhaighean na obair chumanta ann an leasachadh lìn. Nuair a thig e gu bhith a’ dèanamh an fheum as fheàrr den làrach-lìn againn, tha e cudromach dèanamh cinnteach gu bheil na h-ìomhaighean againn cho aotrom sa ghabhas gun a bhith a’ toirt buaidh air an càileachd lèirsinneach aca. Gu fortanach, tha HTML a’ tabhann grunn roghainnean dhuinn airson seo a choileanadh. gu h-èifeachdach.

Is e aon dhòigh air meud ìomhaighean a lughdachadh a bhith a’ cleachdadh seilbh HTML “leud” agus “àirde” gus tomhasan na h-ìomhaigh atharrachadh. Tha seo air a choileanadh le bhith a’ cleachdadh buadhan anns an taga ìomhaigh. Mar eisimpleir, ma tha sinn airson am meud a lughdachadh bho ìomhaigh letheach slighe, is urrainn dhuinn an luach “leud” agus “àirde” a shuidheachadh gu leth meud tùsail na h-ìomhaigh. San dòigh seo, luchdaichidh am brabhsair an ìomhaigh le tomhasan nas lugha, a chuidicheas le bhith ag adhartachadh ùine luchdachadh dhuilleagan.

Is e roghainn eile airson meud ìomhaighean ann an HTML a lughdachadh a bhith a’ cleachdadh teannachadh ìomhaigh. Tha grunn innealan rim faighinn air-loidhne a leigeas leinn na h-ìomhaighean againn a dhlùthadh gun a bhith a’ call càileachd. Bidh na h-innealan sin ag obair le bhith a’ toirt air falbh dàta gun fheum bhon ìomhaigh, a’ lughdachadh meud faidhle gun a bhith a’ toirt buaidh mhòr air càileachd lèirsinneach. Is urrainn dhuinn na h-innealan sin a chleachdadh gus na h-ìomhaighean againn a dhlùthadh mus cuir sinn a-steach iad air an làrach-lìn againn, agus mar thoradh air sin bidh luchdachadh dhuilleagan nas luaithe don luchd-cleachdaidh againn.

Cuimhnich gu bheil àrdachadh meud ìomhaighean HTML chan ann a-mhàin a’ leasachadh coileanadh do làrach-lìn, ach cuideachd a’ leasachadh eòlas an neach-cleachdaidh. Le bhith a’ lughdachadh meud nan ìomhaighean, bidh sinn a’ dèanamh cinnteach gum faigh ar luchd-cleachdaidh cothrom air susbaint nas luaithe agus nas èifeachdaiche. Cleachd na dòighean agus na h-innealan sin a chaidh ainmeachadh gus na h-ìomhaighean agad a bharrachadh agus gus làrach-lìn nas èifeachdaiche agus nas càirdeile fhaighinn don luchd-tadhail agad.

2. Tag agus buadhan gus ìomhaighean ath-mheudachadh ann an HTML

Tha HTML a’ toirt seachad sreath de thagaichean is bhuadhan a dh’fhaodar a chleachdadh gus ìomhaighean ath-mheudachadh air duilleag-lìn. Leigidh na tagaichean agus na buadhan sin dhut meud agus cruth nan ìomhaighean atharrachadh, a’ dèanamh cinnteach gum faicear iad ann an dòigh nas fheàrr innealan eadar-dhealaichte agus scrionaichean.

An toiseach, gus ìomhaigh ath-mheudachadh ann an HTML, cleachdaidh tu an `tag`. Feumaidh grunn fheartan cudromach a bhith anns an taga seo gus ath-mheudachadh ceart a choileanadh. Am feart src air a chleachdadh gus slighe ìomhaigh a shònrachadh, fhad ‘s a tha am feart leud y àirde Bidh iad air an cleachdadh gus leud agus àirde an ìomhaigh a shònrachadh, fa leth. Faodar na buadhan sin a shuidheachadh gu luachan sònraichte piogsail no faodar ceudad a chleachdadh gus ath-mheudachadh coimeasach a cheadachadh.

A bharrachd air a 'ghnè leud y àirde, tha HTML cuideachd a 'toirt seachad buadhan eile a dh'fhaodar a chleachdadh gus ìomhaighean ath-mheudachadh. Mar eisimpleir, am feart stoidhle faodar a chleachdadh gus stoidhlichean CSS a bharrachd a chuir an sàs leithid an leud as àirde, an àirde as àirde, agus co-mheas sealladh ìomhaigh. Faodaidh tu cuideachd am feart a chleachdadh clas gus stoidhlichean sònraichte a tha air am mìneachadh ann an duilleag stoidhle a-muigh no a-staigh a chuir an sàs. Leigidh na buadhan sin barrachd smachd air cruth agus meud deireannach na h-ìomhaigh. Ann an ùine ghoirid, le bhith a 'cleachdadh nan tagaichean agus na feartan ceart ann an HTML, tha e comasach ìomhaighean ath-mheudachadh gu furasta agus gu h-èifeachdach air duilleag-lìn. Le tuigse bhunasach air na bun-bheachdan sin, faodaidh luchd-leasachaidh lìn dèanamh cinnteach gum bi ìomhaighean air an taisbeanadh nas fheàrr air diofar innealan agus scrionaichean.

3. Mar a shònraicheas tu leud agus àirde ìomhaigh ann an HTML

Tha e riatanach leud agus àirde ìomhaigh a shònrachadh ann an HTML gus smachd a chumail air coltas agus cruth bho làrach Lìon. Gu fortanach, tha grunn dhòighean ann gus an amas seo a choileanadh.

Is e an dòigh as fhasa air meud ìomhaigh a shònrachadh le bhith a’ cleachdadh nam feartan “leud” agus “àirde”. Faodar na buadhan sin a chuir gu dìreach ris an taga “img” agus leigidh iad leat leud is àirde na h-ìomhaigh a shuidheachadh ann am piogsail. Mar eisimpleir:

"`html

«`

Ma tha thu airson gum bi an ìomhaigh a’ cumail na cuibhreannan tùsail aige, cha leig thu leas ach aon de na buadhan (leud no àirde) a shònrachadh agus leigeil leis an fhear eile atharrachadh gu fèin-ghluasadach stèidhichte air a’ chuibhreann. Tha seo air a choileanadh le bhith a 'cleachdadh a' ghnè "stoidhle" agus a 'sònrachadh dìreach aon luach, an dàrna cuid airson an leud no airson an àirde. Mar eisimpleir:

"`html

«`

Faodaidh tu cuideachd aonadan tomhais coimeasach a chleachdadh, leithid ceudad, gus an ìomhaigh a mheudachadh an coimeas ris a’ ghobhar aige. Gus seo a dhèanamh, dìreach sònraich an luach a tha thu ag iarraidh agus an uairsin an soidhne sa cheud (%). Mar eisimpleir:

"`html

«`

Tha e cudromach cuimhneachadh mura sònraich thu meud nan ìomhaighean ann an HTML, seallaidh am brabhsair iad aig a’ mheud thùsail aca. Tha e ciallach na dòighean sònrachaidh leud is àirde sin a chleachdadh gu cunbhalach gus cruth èideadh a chumail air an làrach-lìn agad. Dèan deuchainn air na roghainnean sin agus lorg am fear as fheàrr a fhreagras air na feumalachdan agad!

4. A' cleachdadh ceudad gus meud ìomhaigh ann an HTML a lùghdachadh

Tha cleachdadh ceudadan ann an HTML na dhòigh fheumail air meud ìomhaigh a lughdachadh. Leigidh an dòigh seo leat an ìomhaigh atharrachadh a rèir an àite a tha ri fhaighinn air an sgrion, a’ leantainn gu taisbeanadh nas sùbailte agus nas freagarraiche airson diofar innealan agus rùintean sgrion.

Gus ceudad a chleachdadh gus meud ìomhaigh ann an HTML a lughdachadh, dìreach lean sinn na ceumannan a leanas:

1. An toiseach, lorg sinn an taga ìomhaigh HTML () agus sònraichidh sinn feart meud dha: leud agus àirde. An àite a bhith a’ sònrachadh luach stèidhichte ann am piogsail, cleachdaidh sinn ceudad. Mar eisimpleir, ma tha sinn airson gum bi an ìomhaigh a’ gabhail thairis 50% de leud na sgrìn, cleachdaidh sinn leud =»50%» anns an taga ìomhaigh.

2. An ath rud, is urrainn dhuinn an àirde atharrachadh gu co-rèireach a’ cleachdadh an togalach CSS “auto” airson a’ ghnè àirde. Bidh seo ag adhbhrachadh gum bi an àirde ag atharrachadh gu fèin-ghluasadach stèidhichte air an leud co-roinneil a chaidh a shuidheachadh leis a’ cheudad a chaidh a shònrachadh gu h-àrd. Mar eisimpleir, ma tha leud 50% aig an ìomhaigh, atharraichidh an àirde gu fèin-ghluasadach gu co-rèireach.

3. Mu dheireadh, gus dèanamh cinnteach gu bheil an ìomhaigh a 'freagairt gu ceart air diofar innealan agus rèiteachaidhean sgrion, faodar riaghailtean stoidhle a bharrachd a chur an sàs. Is urrainn dhuinn leud as àirde a shuidheachadh a’ cleachdadh an t-seilbh CSS “max-width”, a nì cinnteach nach tèid an ìomhaigh thairis ma tha an scrion nas lugha. Mar eisimpleir, is urrainn dhuinn an stoidhle “max-width: 100%;” a chuir ris. ris an ìomhaigh tag.

Cuimhnich gur e cleachdadh a thathar a’ moladh a bhith a’ cleachdadh ceudadan gus meud ìomhaigh ann an HTML a lughdachadh, leis gu bheil e a’ dèanamh cinnteach gum bi taisbeanadh nas sùbailte agus nas freagarraiche air diofar innealan agus rèiteachaidhean sgrion. Le bhith a’ leantainn nan ceumannan a tha air an ainmeachadh gu h-àrd, is urrainn dhut gu furasta meud nan ìomhaighean agad atharrachadh gun a bhith a’ call càileachd no a’ cur an coltas air falbh. Dèan deuchainn agus lorg am fear a tha iomchaidh airson na feumalachdan agad!

5. Ag ath-mheudachadh le CSS air Dealbhan HTML

Is e aon de na dùbhlain as cumanta ann a bhith a’ dealbhadh làrach-lìn a bhith a’ riaghladh meudan ìomhaighean. Gu tric, faodaidh ìomhaighean neo-leasaichte amannan luchdachadh nas fhaide adhbhrachadh agus droch bhuaidh a thoirt air eòlas an neach-cleachdaidh. Gu fortanach, tha CSS a’ tabhann fuasgladh sìmplidh airson meud ìomhaighean ann an HTML a lughdachadh.

Is e a’ chiad cheum ann a bhith a’ lughdachadh meud ìomhaigh a tomhasan a shuidheachadh a’ cleachdadh CSS. Tha seo air a choileanadh le bhith a 'cleachdadh na feartan "leud" agus "àirde". Mar eisimpleir, ma tha sinn airson leud ìomhaigh a shuidheachadh gu 300 piogsail, bhiodh an còd CSS width: 300px;. Tha e cudromach cuimhneachadh nuair a nì thu seo, gum faodadh an ìomhaigh càileachd a chall no a bhith air a shaobhadh ma thèid a lughdachadh cus.

Is e dòigh feumail eile airson meud ìomhaigh a lughdachadh a bhith a’ cleachdadh teannachadh CSS. Tha seo air a choileanadh le bhith a 'suidheachadh an togalaich "meud cùl-fhiosrachaidh" gu luach nas lugha na 100%. Mar eisimpleir, ma tha sinn airson meud ìomhaigh a lughdachadh le leth, bhiodh an còd CSS background-size: 50%;. Leigidh an dòigh seo leat meud na h-ìomhaigh a lughdachadh gun a bhith a’ call càileachd, leis nach eil e air atharrachadh ach gu fradharcach. Ach, tha e cudromach cuimhneachadh gu bheil an dòigh seo ag obair a-mhàin airson cùl-ìomhaighean. Ma tha sinn airson meud ìomhaigh a tha air a thaisbeanadh gu dìreach air an duilleag HTML a lughdachadh, tha e nas fheàrr na feartan “leud” agus “àirde” a tha air an ainmeachadh gu h-àrd a chleachdadh.

Tha lughdachadh meud ìomhaighean ann an HTML a’ cleachdadh CSS na dhòigh feumail airson luchdachadh agus coileanadh duilleag lìn a leasachadh. Le bhith a’ leantainn nan ceumannan gu h-àrd, is urrainn dhuinn meud ìomhaigh atharrachadh agus teannachadh CSS a chleachdadh gus a mheud a lughdachadh gu fradharcach. Cuimhnich an-còmhnaidh beachdachadh air càileachd ìomhaigh nuair a nì thu na h-atharrachaidhean sin gus dèanamh cinnteach gum bi an neach-cleachdaidh as fheàrr.

6. Teicneòlasan gus luchdachadh ìomhaighean beaga ann an HTML a mheudachadh

Tha grunn dhòighean ann a chuidicheas le bhith a’ luchdachadh sìos ìomhaighean beaga ann an HTML. Gu h-ìosal tha cuid de ro-innleachdan èifeachdach gus an amas seo a choileanadh:

1. Cleachd an cruth ceart: Tha e riatanach an cruth ìomhaigh cheart a thaghadh airson do làrach-lìn. Nuair a bhios tu a’ cleachdadh ìomhaighean beaga, thathas a’ moladh cruthan leithid JPEG no WEBP a chleachdadh, leis gu bheil iad a’ teannachadh an ìomhaigh gun a bhith a’ call mòran càileachd.

2. Dèan teannachadh air ìomhaighean: Mus cuir thu ìomhaighean ris an làrach-lìn agad, tha e cudromach an teannachadh gus am meud a lughdachadh gun a bhith a’ toirt buaidh air càileachd lèirsinneach cus. Tha grunn innealan air-loidhne ann a leigeas leat ìomhaighean a dhlùthadh gu sgiobalta agus gu furasta.

3. Gabh brath air tasgadan a’ bhrobhsair: Le bhith a’ suidheachadh an ùine cheart airson an tasgadan airson ìomhaighean beaga, faodaidh tu dèanamh cinnteach nach fheum luchd-tadhail na làraich agad ach na h-ìomhaighean a luchdachadh aon uair. Bidh seo a’ lughdachadh ùine luchdachadh agus a’ leasachadh eòlas luchd-cleachdaidh.

A bharrachd air na dòighean sin, tha e cudromach cuimhneachadh gum bu chòir ìomhaighean beaga a bhith air an ùrachadh airson innealan gluasadach. Tha seo a’ toirt a-steach a bhith ag atharrachadh meud ìomhaigh agus a’ cleachdadh dhòighean luchdachadh leisg gus cleachdadh dàta gluasadach a lughdachadh. Le buileachadh ceart air na ro-innleachdan sin, faodar luchdachadh ìomhaighean èifeachdach air an làrach-lìn HTML agad a choileanadh.

7. A' cleachdadh leabharlannan bhon taobh a-muigh gus ìomhaighean atharrachadh ann an HTML

Is e dòigh cumanta air ìomhaighean ath-mheudachadh ann an HTML le bhith a’ cleachdadh leabharlannan air an taobh a-muigh. Tha na leabharlannan sin a’ toirt seachad gnìomhan ro-mhìnichte a ghabhas cleachdadh gus ìomhaighean ath-mheudachadh gu furasta agus gu h-èifeachdach.

Tha grunn leabharlannan mòr-chòrdte ann a dh'fhaodar a chleachdadh airson na h-obrach seo, leithid jQuery, Cluasag y leisg. Tha na leabharlannan sin a’ tabhann diofar dhòighean agus ghnìomhan gus ìomhaighean ath-mheudachadh ann an HTML.

Gus na leabharlannan sin a chleachdadh, feumaidh tu an-toiseach an ceangal ris an leabharlann a chur ann am bann-cinn na duilleige HTML agad. Mar eisimpleir, ma cho-dhùnas tu jQuery a chleachdadh, faodaidh tu an ceangal a leanas a chur ann am bann-cinn na duilleige agad:

"`html

«`

Aon uair ‘s gu bheil thu air an ceangal ris an leabharlann a thoirt a-steach, faodaidh tu tòiseachadh air a chleachdadh a ghnìomhan anns a’ chòd HTML agad. Mar eisimpleir, ma tha thu airson ìomhaigh ath-mheudachadh le jQuery, faodaidh tu an gnìomh `css ()` a chleachdadh gus leud is àirde na h-ìomhaigh atharrachadh. Gu h-ìosal tha eisimpleir de cò ris a bhiodh an còd coltach:

"`html

«`

Cuimhnich gum feum thu aithnichear no clas na h-ìomhaigh a tha thu airson ath-mheudachadh a chur an àite “img”. A bharrachd air an sin, faodaidh tu na luachan “300px” agus “200px” atharrachadh a rèir na feumalachdan ath-mheudachaidh agad fhèin.

Mas fheàrr leat leabharlann eile a chleachdadh, faodaidh tu clasaichean oideachaidh sònraichte agus eisimpleirean a lorg air-loidhne gus ionnsachadh mar a dh’ atharraicheas tu ìomhaighean leis an leabharlann shònraichte sin. Cuimhnich gu bheil co-chòrdadh agus dòighean-obrach fhèin aig gach leabharlann, agus mar sin tha e cudromach gun lean thu stiùireadh agus sgrìobhainnean an leabharlainn a thaghas tu gus dèanamh cinnteach gum faigh thu na toraidhean a tha thu ag iarraidh.

8. Beachdachaidhean ruigsinneachd nuair a tha thu a' dèanamh ìomhaigh nas lugha ann an HTML

Faodaidh cleachdadh ìomhaighean mòra air làrach-lìn droch bhuaidh a thoirt air eòlas an neach-cleachdaidh, gu sònraichte air innealan gluasadach le ceanglaichean nas slaodaiche. Mar sin, gu tric feumar meud ìomhaighean a lughdachadh gus an luchdachadh as fheàrr agus ruigsinneachd a leasachadh. An ath rud, mìnichidh sinn mar a nì thu e ann an HTML.

1. Cleachd an taga HTML `img` gus an dealbh a chuir a-steach don duilleag agad. Dèan cinnteach gun cuir thu a-steach am feart `src` le suidheachadh an ìomhaigh. Mar eisimpleir:

"`html

«`

2. Cuir am feart `leud` gus an leud a tha thu ag iarraidh san ìomhaigh a shònrachadh ann am piogsail. Mar eisimpleir, ma tha thu airson gum bi an ìomhaigh 300 piogsail de leud, faodaidh tu a dhèanamh mar a leanas:

"`html

«`

3. Cleachd am feart `height` gus an àirde a tha thu ag iarraidh san ìomhaigh a shònrachadh ann am piogsail. San dòigh seo, faodaidh tu smachd a chumail air leud agus àirde an ìomhaigh. Mar eisimpleir:

"`html

«`

Cuimhnich, nuair a bhios tu ag ath-mheudachadh ìomhaigh, feumaidh tu a’ chuibhreann thùsail a chumail gus nach coimhead e air a shaobhadh. Thoir an aire nach toir lughdachadh meud ìomhaigh buaidh dhìreach air a chàileachd, ach tha e cudromach cothromachadh a lorg eadar meud agus càileachd airson luchdachadh luath agus an eòlas cleachdaiche as fheàrr. Na dìochuimhnich cuideachd teacsa alt a chuir ris a’ toirt cunntas air an ìomhaigh gus a ruigsinneachd a leasachadh!

9. Molaidhean airson càileachd a chumail suas nuair a lùghdaicheas tu meud ìomhaigh ann an HTML

Tha diofar dhòighean agus molaidhean ann a dh'fheumas sinn aire a thoirt nuair a tha sinn a 'lùghdachadh meud ìomhaigh HTML gun a bhith a' toirt buaidh air càileachd. Gu h-ìosal tha cuid de phrìomh mholaidhean:

1. Cleachd am feart "leud" agus "àirde": Tha e cudromach na dearbh mheudan den ìomhaigh a shònrachadh ann am piogsail a 'cleachdadh na buadhan "leud" agus "àirde". Leigidh seo leis a’ bhrobhsair àite gu leòr a ghlèidheadh ​​airson an ìomhaigh, a’ seachnadh ath-sgèileadh neo-riatanach agus mar sin a’ dèanamh an coileanadh as fheàrr.

2. Dèan teannachadh air an ìomhaigh: Tha innealan air-loidhne agus prògraman deasachaidh ìomhaighean ann a leigeas leinn ìomhaighean a dhlùthadh gun a bhith a’ call càileachd. Le bhith a’ lughdachadh meud an fhaidhle, bidh luchdachadh duilleag a’ dol suas gu mòr. A bharrachd air an sin, thathar a 'moladh a chleachdadh cruthan ìomhaighean cruthan nas aotroime, leithid JPEG no PNG teann, an àite cruthan trom leithid TIFF no BMP.

3. Seachain a bhith a' cleachdadh CSS: Ged a tha e comasach ìomhaigh ath-mheudachadh le CSS, faodaidh seo droch bhuaidh a thoirt air càileachd. Tha e nas fheàrr ìomhaighean a chleachdadh leis na tomhasan ceart bhon toiseach agus seachain am meud tro CSS. Cleachd dìreach na tomhasan a tha riatanach gus an ìomhaigh a thaisbeanadh gu ceart, a’ seachnadh luachan ro mhòr no beag.

Cuimhnich gu bheil optimization ìomhaigh na phàirt riatanach de leasachadh lìn, oir faodaidh duilleag slaodach droch bhuaidh a thoirt air eòlas an neach-cleachdaidh. Le bhith a 'leantainn nam molaidhean seo agus a' cleachdadh nan innealan iomchaidh, bidh e comasach dhut meud ìomhaigh HTML a lùghdachadh gun a bhith a 'toirt seachad a chàileachd, agus mar sin a' coileanadh duilleag-lìn nas luaithe agus nas èifeachdaiche.

10. Còd eisimpleirean gus ìomhaigh a dhèanamh nas lugha ann an HTML

Gus ìomhaigh a dhèanamh nas lugha ann an HTML, faodaidh tu CSS a chleachdadh gus an ìomhaigh ath-mheudachadh. Seo eisimpleirean de chòd a dh'fhaodas tu a chleachdadh mar iomradh:

1. Cleachd seilbh leud CSS gus leud an ìomhaigh a shuidheachadh. Mar eisimpleir, ma tha thu airson meud ìomhaigh a lughdachadh le leth, faodaidh tu an leud a shuidheachadh gu 50%.

2. Is e dòigh eile air an ìomhaigh ath-mheudachadh le bhith a’ cleachdadh an t-seilbh CSS “àirde” gus àirde na h-ìomhaigh a shuidheachadh. Mar eisimpleir, ma tha thu airson meud an ìomhaigh a lughdachadh le cairteal, faodaidh tu an àirde a shuidheachadh gu 25%.

3. Faodaidh tu cuideachd an "cruth-atharrachadh" CSS seilbh a chleachdadh gus an ìomhaigh ath-mheudachadh. Mar eisimpleir, ma tha thu airson meud an ìomhaigh a lughdachadh le leth co-rèireach, faodaidh tu an gnìomh “sgèile (0.5)” a chleachdadh.

Cuimhnich gur e dìreach eisimpleirean a tha seo agus faodaidh tu na luachan atharrachadh a rèir do fheumalachdan. Cuideachd, cumaibh cuimhne nach toir ath-mheudachadh air an ìomhaigh a’ cleachdadh HTML agus CSS ach buaidh air an taisbeanadh sa bhrobhsair, chan e fìor mheud faidhle an deilbh.

11. A' fuasgladh dhuilgheadasan cumanta nuair a bhios tu ag ath-mheudachadh ìomhaighean ann an HTML

Tha am modh-obrach air a mhìneachadh gu h-ìosal. ceum air cheum Gus duilgheadasan cumanta a rèiteachadh nuair a bhios tu ag ath-mheudachadh ìomhaighean ann an HTML:

1. Cleachd feartan CSS: tha HTML a’ tabhann iomadh togalach CSS gus meud nan ìomhaighean atharrachadh. Is e aon den fheadhainn as cumanta an t-seilbh "leud", a leigeas leat an leud a tha thu ag iarraidh a shònrachadh ann am piogsail no ceudad. Mar eisimpleir, suidhich leud an ìomhaigh gu 300 piogsail. Mar an ceudna, faodar an togalach "àirde" a chleachdadh gus an àirde a shònrachadh.

2. Cùm an co-mheas taobh: Gus duilgheadasan saobhadh a sheachnadh, tha e ciallach an co-mheas taobh tùsail a chumail nuair a bhios tu ag ath-mheudachadh ìomhaighean. Gus seo a choileanadh, faodaidh tu an t-seilbh "leud" a chleachdadh agus luach an togalaich "àirde" fhàgail falamh no cleachd "auto". Mar eisimpleir, .

3. Cleachd innealan bhon taobh a-muigh: Ma dh'fheumas tu grunn dhealbhan ath-mheudachadh aig an aon àm no ma tha feum air smachd nas adhartaiche air a' phròiseas ath-mheudachadh, faodar innealan bhon taobh a-muigh a chleachdadh. Tha cuid de roghainnean mòr-chòrdte a’ toirt a-steach prògraman deasachaidh ìomhaighean mar Adobe Photoshop no GIMP, no seirbheisean air-loidhne mar TinyPNG no Kraken.io. Mar as trice bidh na h-innealan sin a’ tabhann roghainnean nas adhartaiche, leithid ath-mheudachadh fèin-ghluasadach, teannachadh, no ath-dhealbhadh ìomhaighean.

Cuimhnich an-còmhnaidh a shàbhaladh a cùl-taic de na h-ìomhaighean tùsail mus dèan thu atharrachaidhean sam bith, agus dèan deuchainn air diofar innealan agus meudan sgrion gus dèanamh cinnteach gu bheil ìomhaighean air an ath-mheudachadh gu ceart. Lean na ceumannan seo agus seachain duilgheadasan cumanta nuair a bhios tu ag ath-mheudachadh nan ìomhaighean agad ann an HTML.

12. Cleachdadh dòighean teannachaidh ìomhaighean ann an HTML

Tha cleachdadh dhòighean teannachaidh ìomhaighean ann an HTML deatamach gus an luchdachadh agus an taisbeanadh as fheàrr de dhealbhan air làrach-lìn. Bidh teannachadh a’ lughdachadh meud nan faidhlichean ìomhaigh gun a bhith a’ toirt buaidh mhòr air a chàileachd lèirsinneach, a tha e fhèin a’ leasachadh coileanadh duilleag agus eòlas luchd-cleachdaidh.

Tha grunn dhòighean teannachaidh ann a ghabhas cur an sàs ann an HTML, leithid cleachdadh phrògraman agus innealan sònraichte, leithid Adobe Photoshop no GIMP, a leigeas leat càileachd is meud nan ìomhaighean atharrachadh mus luchdaich thu suas iad chun làrach-lìn. Tha e comasach cuideachd seirbheisean air-loidhne a chleachdadh a bhios gu fèin-ghluasadach a’ teannachadh ìomhaighean gun a bhith a’ call càileachd.

A bharrachd air an sin, tha e cudromach cruthan ìomhaigh a tha càirdeil don lìon a chleachdadh, leithid JPEG, PNG, no WEBP. Bidh na cruthan sin a’ tabhann diofar ìrean de dhlùthadh agus taic airson follaiseachd, agus mar sin tha e cudromach am fear as iomchaidh a thaghadh a rèir an seòrsa ìomhaigh agus an adhbhar air an làrach-lìn. Faodaidh tu cuideachd an dòigh luchdachadh leisg a chuir an sàs, a bhios a’ luchdachadh an ìomhaigh dìreach nuair a tha e ri fhaicinn ann an uinneag a ’bhrobhsair, a chuidicheas le bhith a’ luathachadh ùine luchdachadh na duilleige.

Ann an ùine ghoirid, tha e riatanach luchdachadh agus taisbeanadh ìomhaighean air làrach-lìn a leasachadh. A’ cleachdadh phrògraman agus innealan sònraichte, a’ taghadh an cruth ìomhaigh iomchaidh agus a’ cleachdadh dhòighean leithid luchdachadh leisg tha cuid de na cleachdaidhean a thathar a’ moladh airson coileanadh coileanadh nas fheàrr agus an eòlas cleachdaiche as fheàrr. Cuimhnich an-còmhnaidh deuchainn a dhèanamh air an làrach-lìn air diofar innealan agus ceanglaichean gus dèanamh cinnteach gun luchdaich ìomhaighean gu sgiobalta agus gu h-èifeachdach.

13. Mar a leasaicheas tu ìomhaighean gu diofar innealan ann an HTML

Tha diofar dhòighean ann air dealbhan atharrachadh gu diofar innealan ann an HTML. Thèid dòigh ceum air cheum airson an duilgheadas seo fhuasgladh gu mionaideach gu h-ìosal.

1. Cleachd am feart “srcset”: Leigidh am feart seo leat diofar dhealbhan a shònrachadh airson diofar mheudan sgrion. Gus seo a dhèanamh, feumaidh na diofar fhaidhlichean ìomhaigh a bhith air an toirt a-steach don taga “img” agus air an sgaradh le cromagan. Mar eisimpleir:
"`html

«`
Tha an còd seo ag innse gun tèid "small-image.jpg" a thaisbeanadh ma tha leud suas ri 320 piogsail aig an sgrion, "meadhanach-image.jpg" ma tha an leud nas motha na 320px ach nas lugha na no co-ionnan ri 768px, agus" mòr-ìomhaigh .jpg» ma tha an leud nas motha na 768px ach nas lugha na no co-ionann ri 1024px.

2. Cleachd ceistean meadhanan CSS: Is e roghainn eile riaghailtean ceistean meadhanan CSS a chleachdadh gus diofar stoidhlichean a mhìneachadh airson diofar mheudan sgrion. Anns a 'chùis seo, faodaidh tu ìomhaighean a chleachdadh mar chùl-raon eileamaidean no suidhich diofar mheudan ìomhaigh a' cleachdadh a 'ghnè "leud". Mar eisimpleir:
"`html

«`
Tha an còd seo a’ taisbeanadh “small-image.jpg” mar chùl-raon na h-eileamaid le “image” clas air scrionaichean suas gu 480px de leud, “medium-image.jpg” air scrionaichean nas motha na 480px ach nas lugha na no co-ionann ri 1024px, agus “ “image-grande.jpg” air scrionaichean nas motha na 1024px.

3. Cleachd frèaman agus leabharlannan: Tha grunn fhrèaman agus leabharlannan ann a bhios a’ sìmpleachadh pròiseas atharrachadh ìomhaigh, leithid Buidheann Coimhearsnachd Ìomhaighean Responsive (RICG), Picturefill agus Lazy Load. Bidh na h-innealan sin a’ comasachadh buileachadh nan dòighean a tha air an ainmeachadh gu h-àrd agus a’ ceadachadh atharrachadh nas èifeachdaiche agus nas fèin-ghluasadach air ìomhaighean gu diofar innealan.

14. Co-dhùnadh: Cleachdaidhean as fheàrr gus ìomhaigh a dhèanamh nas lugha ann an HTML

Ann an geàrr-chunntas, tha lughdachadh meud ìomhaigh ann an HTML na phròiseas gu math sìmplidh a ghabhas coileanadh le bhith a’ leantainn beagan chleachdaidhean as fheàrr. Gu h-ìosal tha cuid de mholaidhean agus mholaidhean airson sin a dhèanamh:

1. Cleachd buadhan meud: feart “leud” agus “àirde” den leubail Is e dòigh shìmplidh air meud ìomhaigh a shònrachadh ann an HTML. suidhichidh e leud agus àirde na h-ìomhaigh gu 500 agus 300 piogsail fa leth. Tha e cudromach a ràdh nach atharraich seo ach meud lèirsinneach na h-ìomhaigh, chan e meud an fhaidhle.

2. Dèan teannachadh air an ìomhaigh: Bidh teannachadh a ’lughdachadh meud an fhaidhle ìomhaigh gun a bhith a’ toirt buaidh mhòr air càileachd lèirsinneach. Tha grunn innealan agus bathar-bog air-loidhne rim faighinn gus ìomhaighean a dhlùthadh ann an cruth JPEG, PNG no GIF. Dèan cinnteach gun cleachd thu cruth teannachaidh iomchaidh agus atharraich na roghainnean a rèir do fheumalachdan.

3. Optimize airson an lìon: Tha dòighean eile ann gus ìomhaigh a bharrachadh airson a chleachdadh air an lìon. Faodaidh tu cruthan ìomhaigh nas èifeachdaiche a chleachdadh leithid WebP no SVG, a tha a’ tabhann co-mheas teannachaidh nas fheàrr. A bharrachd air an sin, bu chòir dhut beachdachadh air rùn na h-ìomhaigh atharrachadh mura tèid a thaisbeanadh ach air innealan gluasadach. ** ** Seo mar a chleachdas tu an taga ann an HTML gus iomadh dreach den ìomhaigh a ghabhail a-steach agus leigeil leis a’ bhrobhsair am fear as iomchaidh a thaghadh a rèir a chomasan.

4. Lùghdaich an còd HTML: 's e taobh cudromach eile a bhith a' lùghdachadh meud a' chòd HTML anns a bheil an ìomhaigh. Gus seo a choileanadh, faodaidh tu àite geal neo-riatanach agus beachdan a thoirt air falbh. Faodaidh tu cuideachd grunn ìomhaighean a chur còmhla ann an aon duilleag sprite a’ cleachdadh an dòigh CSS Sprites. **

** Bidh seo a’ lughdachadh cosgais an fhrithealaiche nuair a gheibh thu iomadh iarrtas ìomhaigh. A bharrachd air an sin, smaoinich air dòighean caching a chleachdadh gus an urrainn don bhrobhsair ìomhaighean a shàbhaladh na chuimhne sealach agus gun a bhith aca ri luchdachadh sìos a-rithist le gach tadhal.

Lean na cleachdaidhean as fheàrr sin agus gu cinnteach bidh e comasach dhut meud nan ìomhaighean HTML agad a lughdachadh gu h-èifeachdach, mar sin a’ dèanamh an fheum as fheàrr de choileanadh na làraich-lìn agad agus a’ toirt seachad eòlas cleachdaiche nas fheàrr.

Gu crìch, tha lughdachadh meud ìomhaigh ann an HTML na phròiseas riatanach gus astar luchdachadh làrach-lìn a bharrachadh agus eòlas an neach-cleachdaidh a leasachadh. Tro na h-innealan agus na dòighean a chaidh ainmeachadh, faodaidh luchd-leasachaidh an amas seo a choileanadh gu h-èifeachdach.

Le bhith a’ cleachdadh tagaichean HTML gus meud na h-ìomhaigh a shònrachadh, bidh thu a’ seachnadh cùisean luchdaidh agus a’ dèanamh cinnteach gu bheil an ìomhaigh a’ taisbeanadh gu ceart air diofar innealan agus scrionaichean. A bharrachd air an sin, le bhith a’ teannachadh an ìomhaigh le cruthan leithid JPEG no WebP, tha cuideam an fhaidhle air a lughdachadh gun a bhith a’ call càileachd lèirsinneach cudromach.

Tha e cudromach cuimhneachadh gu bheil gach làrach-lìn gun samhail agus is dòcha gu feum iad atharrachaidhean a bharrachd a rèir na feumalachdan sònraichte agad. Tha e ciallach deuchainnean agus optimization bho àm gu àm a dhèanamh gus an coileanadh as fheàrr a chumail suas.

Ann an geàrr-chunntas, le bhith a’ leantainn nan dòighean sin agus a’ dèanamh an fheum as fheàrr de mheud ìomhaighean HTML, faodaidh luchd-leasachaidh làrach-lìn nas luaithe agus nas èifeachdaiche a choileanadh, a’ tabhann eòlas cleachdaiche nas fheàrr. Tro bhith a’ cleachdadh na h-innealan agus na dòighean a tha rim faighinn gu ceart, cha bhith meud ìomhaigh tuilleadh na chuingealachadh san t-saoghal dhidseatach.