Ki jan yo ajoute yon imaj nan HTML

Dènye aktyalizasyon: 02/10/2023
Author: Sebastian Vidal

Ki jan yo ajoute yon imaj nan HTML

HTML (HyperText Markup Language) se la langaj markeup estanda itilize pou kreye ak estrikti kontni sou entènèt la. Youn nan karakteristik ki pi komen ak itil nan devlopman entènèt se kapasite nan ajoute imaj. Nan atik sa a, nou pral aprann ki jan ajoute yon imaj nan HTML nan yon fason ki senp epi efikas.

Anatomi tag imaj la nan HTML

Tag imaj la nan HTML reprezante ak eleman an . Tag sa a pa gen yon fèmen epi yo itilize pou entegre imaj nan yon paj entènèt. Isit la yo montre la anatomi debaz nan tag imaj la nan HTML:

"`html
Altènatif tèks
"`

- src: se atribi obligatwa ki presize chemen an oswa URL nan imaj la yo montre.
- alt: se atribi obligatwa ki bay tèks altènatif pou imaj la, nan ka imaj la echwe pou chaje. Li enpòtan pou aksè entènèt.
- lajè: se yon atribi si ou vle ki mete lajè imaj la an piksèl.
- wotè: se yon atribi opsyonèl ki fikse wotè imaj la an piksèl.

Ajoute yon imaj lokal

Pou ajoute yon imaj lokal nan HTMLPremyèman, ou bezwen asire w ke ou gen imaj la sove nan katab la oswa anyè menm jan ak dosye HTML w ap travay sou. Lè sa a, ou ka itilize tag la ak atribi src pou presize chemen relatif imaj la.

An rezime, ajoute yon imaj nan HTML Li se yon pwosesis senp ki ka siyifikativman amelyore aparans ak kontni nan yon paj entènèt. Lè w metrize itilizasyon tag imaj la ak atribi li yo, ou pral kapab pèsonalize epi pote lavi pwojè ou yo entènèt pi efikas. Eksprime kreyativite w pa enkòpore imaj atiran ak enpòtan!

1. eleman HTML de baz pou ajoute yon imaj

Tags HTML pou ajoute yon imaj
Pou ajoute yon imaj nan HTML, yo itilize de tags prensipal yo: y . Etikèt la se itilize yo defini imaj la tèt li, pandan y ap tag la yo itilize pou presize kote imaj la. Anndan etikèt la , yo itilize atribi a src pou presize orijin imaj la, ak atribi a kanpe bay tèks altènatif nan ka imaj la pa chaje.

Lòt atribi pou amelyore vizyalizasyon
Anplis atribi debaz yo, gen atribi adisyonèl ki ka itilize pou amelyore vizyalizasyon an nan yon imaj nan HTML. Youn nan atribi sa yo se atribi a lajè, ki itilize pou presize lajè imaj la an piksèl oswa pousantaj. Yon lòt atribi itil se atribi a wotè, ki itilize pou presize wotè imaj la. Ou kapab tou itilize atribi yo aliman aliman imaj la relatif ak tèks ki antoure a, epi style pou aplike estil koutim nan imaj la, tankou gwosè font oswa koulè background.

Konsiderasyon Optimizasyon ak Aksè
Lè w ajoute yon imaj nan HTML, li enpòtan pou konsidere optimize ak aksè. Pou optimize yon imaj, li rekòmande pou konpresyon li pou diminye gwosè dosye li san li pa pèdi twòp kalite vizyèl. Sa a ede paj wèb chaje pi vit epi amelyore eksperyans itilizatè. Konsènan aksè, li esansyèl pou bay tèks alt ki gen sans nan atribi a kanpe Nan etikèt la . Sa a pèmèt moun ki gen pwoblèm vizyon oswa ki sèvi ak lektè ekran yo konprann kontni an nan imaj la. Anplis de sa, ou dwe asire tèks alt la deskriptif ak ki gen rapò ak kontèks imaj la.

Kontni eksklizif - Klike la a  Ki jan yo itilize Pinegrow?

2. Mete etikèt sou enklizyon ak atribi esansyèl

Etikèt la Li se youn nan pi itilize nan HTML pou mete imaj nan yon paj wèb. Pou mete yon imaj nan kòd nou an, nou bezwen ajoute tag sa a ak kèk atribi esansyèl ki nesesè pou imaj la parèt kòrèkteman nan navigatè a. Youn nan atribi ki pi enpòtan yo se src, ki endike chemen an oswa URL nan imaj la nou vle montre. San atribi sa a, tag la Mwen pa ta gen okenn imaj yo montre.

Yon lòt atribi esansyèl se la kanpe, ki espesifye yon tèks altènatif pou montre si imaj la echwe pou chaje oswa si itilizatè a gen chaj imaj enfim. Li enpòtan pou mete tèks deskriptif nan atribi sa a, paske li ede moun ki gen pwoblèm vizyon konprann kontni imaj la.

Anplis de sa yo atribi, gen lòt tankou lajè y wotè, ki pèmèt ou presize lajè ak wotè imaj la an piksèl. Atribi sa yo opsyonèl, men li rekòmande pou w itilize yo pou kontwole gwosè imaj la epi anpeche li defòme sou paj la.

Nan ti bout tan, ajoute yon imaj nan HTML, nou bezwen sèvi ak tag la epi ajoute atribi esansyèl yo tankou src y kanpe. Nou kapab tou itilize atribi opsyonèl tankou lajè y wotè pou kontwole gwosè imaj la. Li enpòtan sonje ke tèks la alt nan atribi a kanpe Li dwe deskriptif ak enpòtan pou asire aksè nan sit entènèt nou an.

3. Seleksyon ak preparasyon imaj ki apwopriye a

Nan seksyon sa a, ou pral aprann kijan pou chwazi epi prepare imaj ki apwopriye pou ajoute nan paj HTML ou a. Li enpòtan pou chwazi yon imaj ki enpòtan ak atire Pou itilizatè yo, kòm sa a ede kaptire atansyon yo ak amelyore eksperyans nan Navigasyon. Anplis de sa, preparasyon apwopriye imaj asire ke li parèt kòrèkteman sou aparèy diferan ak gwosè ekran.

Seleksyon imaj: Anvan ou ajoute yon imaj nan paj wèb ou a, li enpòtan pou chwazi yon imaj ki anfòm kontni ak objektif sit ou a. Ou ka sèvi ak pwòp imaj ou oswa chèche bank imaj gratis oswa peye. Li rekòmande yo chwazi imaj kalite siperyè ak yon fòma souvan sipòte tankou JPG, PNG oswa GIF. Epitou, asire w ke ou gen dwa ki nesesè yo sèvi ak imaj la si ou pa posede li.

Edite ak optimize: Yon fwa ou gen imaj la chwazi, li lè yo edite ak optimize li pou entènèt la. Ou ka itilize pwogram koreksyon imaj tankou fotoschop oswa GIMP pou ajiste gwosè li, koupe pati ki pa nesesè yo ak amelyore kalite. Anplis de sa, li enpòtan pou optimize imaj la pou diminye gwosè li epi amelyore vitès chaj paj ou a. Sèvi ak zouti tankou TinyPNG oswa JPEGmini pou konprese imaj la san yo pa pèdi bon jan kalite.

Alt ak tit tags: Pou amelyore aksè ak fè imaj la pi fasil pou konprann, li enpòtan pou ajoute alt ak tit tags. Tag alt la bay tèks altènatif pou montre si imaj la pa chaje kòrèkteman oswa pou itilizatè ki gen pwoblèm vizyon lè l sèvi avèk lektè ekran yo. Tèks tag alt la ta dwe yon ti tan dekri kontni imaj la. Yo itilize atribi tit la pou bay deskripsyon adisyonèl imaj la lè itilizatè a hose sou li.

Sonje byen: Chwazi yon imaj ki enpòtan ak atire, koreksyon ak optimize li kòmsadwa, epi ajoute alt ak tags tit yo esansyèl pou yon paj entènèt ki atire ak aksesib. Swiv etap sa yo pou ajoute imaj efektivman sou sit ou a ak amelyore eksperyans itilizatè.

Kontni eksklizif - Klike la a  Ki jan yo pibliye yon aplikasyon nan Play Store

4. Sèvi ak pwopriyete alt la pou amelyore aksè ak SEO

Pwopriyete alt nan HTML esansyèl tou de amelyore aksè nan yon sit sit entènèt pou optimize SEO ou. Tag alt la itilize pou bay tèks altènatif pou yon imaj lè li pa ka parèt oswa lè yo li kontni paj la awotvwa. Li enpòtan pou mete pwopriyete sa a sou tout imaj paske li pèmèt itilizatè ki gen pwoblèm vizyon konprann kontni vizyèl atravè lektè ekran oswa lòt aparèy nan asistans.

Lè w ajoute tèks alt nan pwopriyete alt la, li enpòtan pou asire ke li byen dekri sa ki reprezante nan imaj la. Li ta dwe deskriptif ak kout, transmèt enfòmasyon kle nan imaj la. Anplis de sa, li se konseye yo sèvi ak mo kle ki gen rapò ak sijè a nan paj la amelyore SEO. Sa ap ede motè rechèch yo konprann kontni imaj la epi klase sit entènèt la pi byen nan rezilta rechèch la.

Anplis de amelyore aksè ak SEO, itilizasyon apwopriye nan pwopriyete alt la kapab tou benefisye itilizatè ki gen yon koneksyon ralanti oswa limite. Lè yon imaj pa ka parèt akòz pwoblèm chaj, tèks alt yo bay nan pwopriyete alt la pral pèmèt itilizatè yo konprann kontni an nan imaj la san yo pa bezwen tann pou li chaje. Sa a amelyore eksperyans itilizatè a epi evite fristrasyon potansyèl yo.

Nan ti bout tan, lè l sèvi avèk pwopriyete alt la esansyèl pou amelyore aksè ak SEO nan yon sit entènèt. Bay tèks alt deskriptif ak ki enpòtan pou chak imaj pral ede itilizatè ki gen pwoblèm vizyèl konprann kontni vizyèl la epi pèmèt motè rechèch yo pi byen endèks sit la. Anplis de sa, li pral benefisye tou itilizatè ki gen koneksyon ralanti oswa limite lè li pèmèt yo konprann kontni vizyèl san yo pa tann pou imaj la chaje. Pa bliye toujou mete pwopriyete alt la sou tout imaj ou yo pou amelyore eksperyans itilizatè yo ak ogmante vizibilite sit entènèt ou a nan motè rechèch.

5. Ajiste gwosè imaj ak pozisyon

Ajiste gwosè ak pozisyon yon imaj nan HTML esansyèl pou reyalize yon konsepsyon vizyèlman atire ak ekilibre sou yon paj entènèt. Pou reyalize sa a, gen divès opsyon ki pèmèt ou adapte ak Customize imaj yo selon bezwen yo nan pwojè a. Teknik prensipal yo pou fè ajisteman sa yo pral detaye anba a.

Ajisteman gwosè: Pou chanje gwosè yon imaj, ou ka itilize atribi "lajè" ak "wotè" nan tag la . Atribi sa yo pèmèt ou presize lajè ak wotè imaj la an piksèl. Pa egzanp, Deskripsyon imaj. Anplis de sa, ou ka itilize tou atribi "style" pou defini gwosè a an pousantaj oswa an inite relatif (% oswa em). Pa egzanp, Deskripsyon imaj.

Ajisteman pozisyon: Pou modifye pozisyon yon imaj an relasyon ak veso li, yo ka itilize atribi "style" ansanm ak pwopriyete "flote". Pa egzanp, Deskripsyon imaj. Sa a pral fè imaj la aliman sou bò gòch veso a. Ou kapab tou itilize pwopriyete "Marge" la pou ajiste Marge oswa espas alantou imaj la. Pa egzanp, Deskripsyon imaj.

Ajisteman aliyman: Pou fè aliman yon imaj orizontal nan veso li a, ou ka itilize pwopriyete CSS "text-align" sou veso a. Pou egzanp, si ou vle aliman yon imaj nan sant la, ou ka aplike "text-align: center;" nan veso a. Anplis de sa, ou ka itilize pwopriyete "vètikal-align" tou pou fè aliman imaj la vètikal nan tèks la. Pa egzanp, Deskripsyon imaj. Teknik sa yo pèmèt ou byen ajiste gwosè ak pozisyon yon imaj sou yon paj entènèt, amelyore eksperyans vizyèl itilizatè a.

Kontni eksklizif - Klike la a  Ki jan pou fè rechèch pou yon dosye nan Coda?

6. Imaj optimize ak fòma amelyore vitès loading

Lè optimize imaj pou amelyore vitès chaje yon sit entènèt, li enpòtan pou konsidere fòma ak gwosè imaj la. Lè w ap chwazi fòma imaj la, li rekòmande pou itilize fòma tankou JPEG oswa PNG, paske yo se pi komen ak sipòte pa pifò navigatè. Anplis de sa, fòma sa yo pèmèt imaj la dwe konprese san yo pa pèdi twòp kalite vizyèl.

Konpresyon imaj enpòtan diminye gwosè dosye ak Se poutèt sa amelyore vitès loading. Gen plizyè zouti sou entènèt ak lojisyèl espesyalize ki ka ede ak sa a, tankou Photoshop, TinyPNG oswa JPEG Optimizer. Zouti sa yo pèmèt ou ajiste bon jan kalite a nan imaj la, diminye rezolisyon an ak elimine metadata nesesè. Sonje tou ke gwosè imaj la dwe apwopriye pou itilize sou sit entènèt la, evite itilize imaj ki twò gwo paske yo ta ralanti chaj paj la.

Anplis konpresyon, Yon lòt aspè enpòtan se gwosè imaj la an piksèl. Li rekòmande pou ajiste dimansyon imaj yo dirèkteman nan HTML lè l sèvi avèk atribi tankou "lajè" ak "wotè." Sa a pèmèt navigatè a rezève espas ase pou imaj la, sa ki anpeche yon efondreman layout pandan y ap chaje paj la. Li itil tou pou itilize zouti tankou "srcset" pou endike diferan vèsyon imaj la pou diferan gwosè ekran ak rezolisyon yo.

An konklizyon, pou amelyore vitès chaje yon paj entènèt, li nesesè pou optimize ak byen fòma imaj yo. Sa a enplike nan chwazi fòma ki kòrèk la, konpresyon imaj la san yo pa pèdi bon jan kalite, ak ajiste gwosè pixel la asire pèfòmans optimal. Swivan konsèy sa yo, ou pral kapab amelyore eksperyans itilizatè a ak pwezante sit entènèt ou a nan motè rechèch.

7. Ajoute yon deskripsyon oswa yon tit nan imaj la

Ki jan yo ajoute yon deskripsyon oswa tit nan imaj nan HTML

Lè nou ajoute imaj nan paj wèb nou yo, li enpòtan pou bay yon deskripsyon oswa yon tit pou amelyore aksè ak eksperyans itilizatè. Nan HTML, nou gen diferan fason pou reyalize sa. Anba a mwen pral eksplike twa metòd popilè pou ajoute yon deskripsyon oswa tit nan imaj ou yo.

1. "alt" atribi nan etikèt la : Yon fason komen pou ajoute yon deskripsyon nan yon imaj nan HTML se sèvi ak "alt" atribi nan tag la . Yo itilize atribi sa a pou bay tèks altènatif pou parèt si imaj la pa chaje kòrèkteman. Anplis de sa, motè rechèch ak asistan lekti itilize deskripsyon sa a pou konprann kontni imaj la. Tèks la ta dwe kout ak klè, kaptire pati ki pi enpòtan nan imaj la.

2. «tit» atribi sou etikèt la : Yon lòt fason pou ajoute yon deskripsyon oswa yon tit nan yon imaj se lè w itilize atribi "tit" nan tag la . Yo itilize atribi sa a pou bay plis enfòmasyon sou imaj la lè itilizatè a pase sou li. Ou ka sèvi ak sa a pou ofri plis detay sou imaj la oswa bay li yon kontèks espesifik.

3. Mete etikèt sou

y
: Si ou vle ajoute yon deskripsyon pi elabore nan imaj ou a, ou ka itilize tags yo

y
. Etikèt la

se itilize yo gwoup imaj la ak deskripsyon li yo, pandan y ap tag la
yo itilize pou bay tèks deskripsyon an. Sa a ka itil espesyalman lè w ap fè fas ak imaj konplèks oswa lè ou vle mete yon eksplikasyon detaye pou konplete imaj la.

Sonje ajoute yon deskripsyon apwopriye oswa tit pou chak imaj sou sit entènèt ou a. Sa a pa pral sèlman amelyore eksperyans itilizatè a, men tou, aksè ak plase motè rechèch la. Ajoute valè nan imaj ou yo ak amelyore kalite kontni entènèt ou a!

8. Aplike estil CSS nan imaj

Nan atik sa a, nou pral eksplore kijan pou aplike estil CSS nan imaj nan HTML. Avèk CSS, nou ka Customize aparans nan imaj nou yo, tankou redimansyonman, ajoute fwontyè, ak aplike efè vizyèl. Sa a ban nou tout kontwòl sou aparans nan imaj yo sou sit entènèt nou an.

1. Redimensionner imaj: Avèk CSS, nou ka fasilman redimansyone imaj nou yo pou anfòm bezwen nou yo. Nou ka itilize pwopriyete "lajè" ak "wotè" pou presize dimansyon egzak imaj la. Nou kapab tou etabli yon gwosè relatif lè l sèvi avèk pousantaj oswa "em". Sa a pèmèt nou kreye desen fleksib ak reponn.

2. Ajoute fwontyè nan imaj: Yon lòt aspè ke nou ka Customize ak CSS yo se fwontyè yo nan imaj nou yo. Nou ka itilize pwopriyete "fwontyè" la pou ajoute yon fwontyè solid, pwentiye, Relief oswa Relief nan imaj nou yo. Nou kapab tou presize koulè a ​​ak epesè fwontyè a selon preferans nou yo.

3. Aplike efè vizyèl nan imaj: CSS tou pèmèt nou aplike efè vizyèl enteresan nan imaj nou yo. Nou ka itilize pwopriyete "filtre" pou ajoute efè tankou flou, kontras oswa saturation. Nou kapab tou itilize pwopriyete "opasite" pou fè imaj nou yo pi transparan oswa kreye efè superposition. Efè sa yo ka ede amelyore aparans imaj nou yo epi fè yo parèt deyò sou sit entènèt nou an.

Nan ti bout tan, CSS ban nou anpil opsyon pou Customize gade nan imaj HTML nou yo. Nou ka redimansyone, ajoute fwontyè, epi aplike efè vizyèl pou kreye yon eksperyans vizyèlman atiran pou itilizatè nou yo. Eksperyans ak diferan estil ak opsyon pou jwenn konsepsyon ki pi byen adapte bezwen ou ak preferans ou.

9. nidifikasyon lyen nan imaj pou pi bon eksperyans itilizatè

Nidifikasyon lyen nan imaj se yon teknik trè itil pou amelyore eksperyans itilizatè a sou yon sit entènèt. Avèk HTML, nou ka ajoute lyen ki mennen nan imaj pou pèmèt itilizatè yo klike sou yo epi ale nan yon paj oswa resous ki gen rapò. Sa a itil espesyalman nan ka kote imaj la ka reprezante yon lyen vizyèlman, men li pa gen yon atribi lyen.

Pou fè nich yon lyen nan yon imaj, nou bezwen premye asire w ke nou gen tag imaj la () nan kòd HTML nou an. Lè sa a, sèvi ak tag lyen an (), nou vlope tag imaj la. Anndan tag lyen an, nou presize URL nou vle redireksyon lè yo klike sou imaj la.

Li enpòtan sonje ke lè nidifikasyon yon lyen nan yon imaj, nou dwe tou ajoute tèks alt deskriptif lè l sèvi avèk atribi a. kanpe. Sa enpòtan anpil pou aksè ak ede moun k ap itilize lektè ekran konprann kontni imaj la.

10. Konsiderasyon final ak pi bon pratik pou ajoute imaj nan HTML

Lè w ajoute imaj nan HTML, li enpòtan pou konsidere sèten pi bon pratik pou asire ekspozisyon kòrèk ak optimize atravè diferan navigatè ak aparèy. Anba a gen kèk konsiderasyon final ak pi bon pratik ki pral ede amelyore kalite ak pèfòmans imaj sou paj entènèt ou yo.

1. Gwosè imaj ak rezolisyon: Anvan ou ajoute yon imaj, asire w ke li se bon gwosè ak rezolisyon pou sit entènèt ou an. Redimansyonman yon imaj lè l sèvi avèk HTML ka afekte kalite li yo ak pèfòmans loading, kidonk li se konseye yo sèvi ak yon pwogram koreksyon imaj yo pre-ajiste li nan bezwen ou yo.

2. Fòma imaj: Nan HTML, gen plizyè fòma imaj ou ka itilize, tankou JPEG, PNG, ak GIF. Chak fòma gen karakteristik pwòp li yo ak avantaj, kidonk li enpòtan pou chwazi fòma ki kòrèk la depann de kalite imaj ou vle montre. Pou egzanp, si ou bezwen yon imaj ak transparans, fòma PNG a se opsyon ki pi bon.

3. Atribi eleman : Eleman an Yo itilize li pou montre imaj nan HTML. Anplis tag la fèmen, eleman sa a aksepte plizyè atribi ki pèmèt ou kontwole aspè tankou gwosè, alt tèks, lyen, ak style imaj. Li rekòmande pou itilize atribi ki apwopriye yo pou optimize ekspozisyon ak aksè nan imaj la sou sit entènèt ou a.

Lè w suiv konsiderasyon final sa yo ak pi bon pratik lè w ajoute imaj nan HTML, ou ka asire yon eksperyans itilizatè optimal ak amelyore pèfòmans sit entènèt ou a. Toujou sonje teste ak optimize imaj ou yo pou jwenn pi bon rezilta yo. Nou espere atik sa a te itil ou epi ede ou kreye paj wèb vizyèlman atire ak efikas!