I ka hoʻomohala ʻana i ka pūnaewele, pono ka hoʻoponopono kiʻi kūpono e hoʻokō i ka hana a me ka ʻike mea hoʻohana. Loaʻa pinepine mākou iā mākou iho me ka pono e hoʻemi i ka nui o he kiʻi ma HTML e hōʻoia i ka hoʻouka wikiwiki a me ka maikaʻi ma kā mākou mau ʻaoʻao pūnaewele. Ma kēia ʻatikala, e ʻimi mākou i nā ʻano hana like ʻole a me nā ʻenehana loea e hana liʻiliʻi i kahi kiʻi ma HTML, no laila e ʻae ai i ka ʻoi aku ka maikaʻi a me ka ʻike ʻana i kā mākou ʻike. Inā ʻoe e ʻimi nei e hoʻomaikaʻi i kāu hana pūnaewele a hoʻemi i ka nui o kāu mau kiʻi, ua hele mai ʻoe i kahi kūpono!
1. Hoʻomaka i ka hōʻemi ʻana i ka nui kiʻi ma HTML
ʻO ka hoʻololi ʻana i nā kiʻi he hana maʻamau i ka hoʻomohala pūnaewele. I ka hiki ʻana mai i ka hoʻomaikaʻi ʻana i kā mākou pūnaewele, he mea nui e hōʻoia i ka māmā o kā mākou mau kiʻi me ka ʻole o ka hoʻololi ʻana i ko lākou ʻano hiʻohiʻona. ʻO ka mea pōmaikaʻi, hāʻawi ʻo HTML iā mākou i nā koho e hoʻokō i kēia. me ka maikaʻi.
ʻO kahi ala e hoʻemi ai i ka nui o nā kiʻi, ʻo ia ka hoʻohana ʻana i ka waiwai HTML "ākea" a me "kiʻekiʻe" e hoʻoponopono i nā ana o ke kiʻi. Hoʻokō ʻia kēia ma ka hoʻohana ʻana i nā ʻano ma ka tag kiʻi. No ka laʻana, inā makemake mākou e hoʻemi i ka nui mai kahi kiʻi i ka hapalua, hiki iā mākou ke hoʻonohonoho i ka waiwai "ākea" a me ka "kiʻekiʻe" i ka hapalua o ka nui kumu o ke kiʻi. Ma kēia ala, e hoʻouka ka polokalamu kele i ke kiʻi me nā ana liʻiliʻi, e kōkua i ka hoʻomaikaʻi ʻana i ka manawa hoʻouka ʻaoʻao.
ʻO kahi koho ʻē aʻe e hōʻemi i ka nui o nā kiʻi ma HTML ʻo ia ka hoʻohana ʻana i ke kaomi kiʻi. Nui nā mea hana i loaʻa ma ka pūnaewele e ʻae iā mākou e hoʻopaʻa i kā mākou mau kiʻi me ka nalowale ʻole o ka maikaʻi. Ke hana nei kēia mau mea hana ma ka wehe ʻana i nā ʻikepili ʻē aʻe mai ke kiʻi, e hōʻemi ana i ka nui o ka faila me ka ʻole o ka hoʻopilikia nui ʻana i ka maikaʻi ʻike. Hiki iā mākou ke hoʻohana i kēia mau mea hana no ka hoʻopaʻa ʻana i kā mākou mau kiʻi ma mua o ka hoʻokomo ʻana iā lākou ma kā mākou pūnaewele, kahi e wikiwiki ai ka hoʻouka ʻana i ka ʻaoʻao no kā mākou mea hoʻohana.
E hoʻomanaʻo i ka hoʻonui ʻana i ka nui o nā kiʻi HTML ʻaʻole e hoʻomaikaʻi wale i ka hana o kāu pūnaewele, akā hoʻomaikaʻi pū i ka ʻike mea hoʻohana. Ma ka hōʻemi ʻana i ka nui o nā kiʻi, hōʻoia mākou e hiki i kā mākou mea hoʻohana ke komo wikiwiki a ʻoi aku ka maikaʻi. E hoʻohana i kēia mau ʻenehana a me nā mea hana i ʻōlelo ʻia e hoʻomaikaʻi i kāu mau kiʻi a loaʻa i kahi pūnaewele ʻoi aku ka maikaʻi a me ka hoaaloha no kāu mau malihini.
2. Tag a me nā ʻano e hoʻololi i nā kiʻi ma HTML
Hāʻawi ʻo HTML i kahi pūʻulu o nā hōʻailona a me nā ʻano i hiki ke hoʻohana ʻia e hoʻololi i nā kiʻi ma kahi ʻaoʻao pūnaewele. ʻAe kēia mau hōʻailona a me nā hiʻohiʻona iā ʻoe e hoʻoponopono i ka nui a me ka hoʻonohonoho ʻana o nā kiʻi, e hōʻoia i ka ʻike maikaʻi ʻana iā lākou i loko. nā hāmeʻa like ʻole a me nā pale.
ʻO ka mea mua, e hoʻololi i kahi kiʻi ma HTML, hoʻohana ʻoe i ka 'tag`. Pono e loaʻa i kēia lepili kekahi mau hiʻohiʻona koʻikoʻi no ka hoʻokō ʻana i ka nui kūpono. ʻO ke ʻano src hoʻohana ʻia e kuhikuhi i ke ala kiʻi, ʻoiai ke ʻano ka laulā y kiʻekiʻe Hoʻohana ʻia lākou e kuhikuhi i ka laulā a me ke kiʻekiʻe o ke kiʻi. Hiki ke hoʻonohonoho ʻia kēia mau hiʻohiʻona i nā waiwai kikoʻī pixel a i ʻole ka pākēneka hiki ke hoʻohana ʻia e ʻae i ka hoʻololi hou ʻana.
Ma waho aʻe o ke ʻano ka laulā y kiʻekiʻe, Hāʻawi pū ʻo HTML i nā ʻano ʻē aʻe i hiki ke hoʻohana ʻia e hoʻololi i ka nui o nā kiʻi. No ka laʻana, ka ʻano kaila hiki ke hoʻohana ʻia no ka hoʻopili ʻana i nā ʻano CSS hou e like me ka laulā kiʻekiʻe, ke kiʻekiʻe kiʻekiʻe, a me ka lakio hiʻohiʻona kiʻi. Hiki iā ʻoe ke hoʻohana i ke ʻano papa e hoʻopili i nā ʻano kikoʻī i wehewehe ʻia i loko o kahi pepa kāʻei waho a i loko paha. Hāʻawi kēia mau hiʻohiʻona i ka mana nui ma luna o ka hoʻolālā a me ka nui hope o ke kiʻi. I ka pōkole, ma ka hoʻohana ʻana i nā hōʻailona kūpono a me nā ʻano ma HTML, hiki ke maʻalahi a me ka hoʻololi ʻana i nā kiʻi ma kahi ʻaoʻao pūnaewele. Me ka ʻike kumu o kēia mau manaʻo, hiki i nā mea hoʻomohala pūnaewele ke hōʻoia i ka hōʻike maikaʻi ʻana o nā kiʻi ma nā polokalamu like ʻole a me nā pale.
3. Pehea e wehewehe ai i ka laulā a me ke kiʻekiʻe o ke kiʻi ma HTML
ʻO ka wehewehe ʻana i ka laulā a me ke kiʻekiʻe o kahi kiʻi ma HTML he mea nui ia e hoʻomalu i ke ʻano a me ka hoʻolālā mai kahi pūnaewele Pūnaewele. ʻO ka mea pōmaikaʻi, nui nā ala e hoʻokō ai i kēia pahuhopu.
ʻO ke ala maʻalahi loa e wehewehe i ka nui o ke kiʻi ma ka hoʻohana ʻana i nā ʻano "ākea" a me "ke kiʻekiʻe". Hiki ke hoʻohui pololei ʻia kēia mau ʻano i ka tag "img" a hiki iā ʻoe ke hoʻonohonoho i ka laulā a me ke kiʻekiʻe o ke kiʻi i nā pika. ʻo kahi laʻana:
"`html
"ʻAʻole maopopo
Inā makemake ʻoe i ke kiʻi e mālama i kona mau ʻāpana kumu, pono ʻoe e kuhikuhi i kekahi o nā ʻano (ākea a i ʻole ke kiʻekiʻe) a e hoʻoponopono i nā mea ʻē aʻe ma muli o ka like. Loaʻa kēia ma ka hoʻohana ʻana i ke ʻano "style" a kuhikuhi i hoʻokahi waiwai, no ka laula a i ʻole ke kiʻekiʻe. ʻo kahi laʻana:
"`html
"ʻAʻole maopopo
Hiki iā ʻoe ke hoʻohana i nā ʻāpana pili o ke ana, e like me ka pākēneka, e nui ai ke kiʻi e pili ana i kāna ipu. No ka hana ʻana i kēia, e kuhikuhi wale i ka waiwai i makemake ʻia a ukali ʻia e ka hōʻailona pakeneka (%). ʻo kahi laʻana:
"`html
"ʻAʻole maopopo
He mea nui e hoʻomaopopo inā ʻaʻole ʻoe e kuhikuhi i ka nui o nā kiʻi ma HTML, e hōʻike ka polokalamu kele pūnaewele i ko lākou nui kumu. Manaʻo ʻia e hoʻohana mau i kēia mau ʻano kikoʻī ākea a me ke kiʻekiʻe e mālama i kahi hoʻolālā like ʻole ma kāu pūnaewele. E hoʻāʻo me kēia mau koho a ʻimi i ka mea kūpono loa i kāu mau pono!
4. Hoʻohana i ka pākēneka e hoʻemi i ka nui o kahi kiʻi ma HTML
ʻO ka hoʻohana ʻana i nā pākēneka ma HTML he ala kūpono e hōʻemi i ka nui o kahi kiʻi. Hiki i kēia ʻenehana iā ʻoe ke hoʻoponopono i ke kiʻi e like me ka wahi i loaʻa ma ka pale, ka hopena i kahi hōʻike maʻalahi a hiki ke hoʻololi ʻia no nā mea like ʻole a me nā hoʻonā pale.
No ka hoʻohana ʻana i ka pākēneka e hōʻemi i ka nui o kahi kiʻi ma HTML, e hahai wale mākou i kēia mau ʻanuʻu:
1. ʻO ka mua, ʻimi mākou i ka tag kiʻi HTML () a hāʻawi mākou iā ia i kahi ʻano nui: ākea a me ke kiʻekiʻe. Ma kahi o ka wehewehe ʻana i kahi waiwai paʻa i nā pika, e hoʻohana mākou i ka pākēneka. No ka laʻana, inā makemake mākou i ke kiʻi e noho i 50% o ka laulā o ka pale, e hoʻohana mākou i ka laulā = »50%» i ka tag kiʻi.
2. A laila, hiki iā mākou ke hoʻololi i ke kiʻekiʻe me ka hoʻohana ʻana i ka waiwai CSS "auto" no ka hiʻohiʻona kiʻekiʻe. E hoʻololi ʻokoʻa kēia i ke kiʻekiʻe e pili ana i ka laulā kūlike i hoʻonohonoho ʻia e ka pākēneka i hāʻawi ʻia ma luna. No ka laʻana, inā he 50% ka laula o ke kiʻi, e hoʻololi ʻokoʻa ke kiʻekiʻe.
3. ʻO ka hope, no ka hoʻopaʻa pono ʻana i ke kiʻi ma nā ʻaoʻao like ʻole a me nā hoʻonā pale, hiki ke hoʻohana ʻia nā lula hoʻolālā hou. Hiki iā mākou ke hoʻonohonoho i ka laulā kiʻekiʻe me ka hoʻohana ʻana i ka waiwai CSS "max-width", e hōʻoia ʻaʻole e kahe ke kiʻi inā liʻiliʻi ka pale. No ka laʻana, hiki iā mākou ke hoʻohui i ke ʻano "max-width: 100%;" i ka lepili kiʻi.
E hoʻomanaʻo ʻo ka hoʻohana ʻana i nā pākēneka e hōʻemi i ka nui o kahi kiʻi ma HTML he hana i manaʻo ʻia, no ka mea e hōʻoiaʻiʻo ana i kahi hōʻike maʻalahi a hiki ke hoʻololi ʻia ma nā ʻaoʻao like ʻole a me nā hoʻonā pale. Ma ka hahai ʻana i nā ʻanuʻu i ʻōlelo ʻia ma luna nei, hiki iā ʻoe ke hoʻololi maʻalahi i ka nui o kāu mau kiʻi me ka ʻole o ka nalowale ʻana i ka maikaʻi a i ʻole ka hoʻololi ʻana i ko lākou helehelena. E hoʻāʻo a loaʻa i ke kūpono kūpono no kāu mau pono!
5. Hoʻololi hou me CSS ma nā kiʻi HTML
ʻO kekahi o nā paʻakikī maʻamau i ka hoʻolālā ʻana i kahi pūnaewele ka mālama ʻana i nā nui kiʻi. ʻO ka manawa pinepine, hiki i nā kiʻi i hoʻopaʻa ʻole ʻia ke hoʻonui i nā manawa hoʻouka a hoʻopilikia i ka ʻike mea hoʻohana. ʻO ka mea pōmaikaʻi, hāʻawi ʻo CSS i kahi hopena maʻalahi e hōʻemi i ka nui o nā kiʻi ma HTML.
ʻO ka hana mua i ka hōʻemi ʻana i ka nui o ke kiʻi, ʻo ia ka hoʻonohonoho ʻana i kona mau ana me ka CSS. Hoʻokō ʻia kēia me ka hoʻohana ʻana i nā waiwai "ākea" a me "kiʻekiʻe". No ka laʻana, inā makemake mākou e hoʻonohonoho i ka laulā o kahi kiʻi i 300 pixels, ʻo ke code CSS width: 300px;. He mea nui e hoʻomanaʻo i ka wā e hana ai i kēia, nalo paha ke kiʻi i ka maikaʻi a i ʻole ke ʻano ʻino ke hoʻemi nui ʻia.
ʻO ke ʻano hana ʻē aʻe no ka hōʻemi ʻana i ka nui o ke kiʻi, ʻo ia ka hoʻohana ʻana i ka kaomi CSS. Loaʻa kēia ma ka hoʻonohonoho ʻana i ka waiwai "background-size" i kahi waiwai ma lalo o 100%. No ka laʻana, inā makemake mākou e hoʻemi i ka nui o ke kiʻi ma ka hapalua, ʻo ke code CSS background-size: 50%;. Hāʻawi kēia ʻenehana iā ʻoe e hōʻemi i ka nui o ke kiʻi me ka ʻole o ka nalowale ʻana o ka maikaʻi, no ka mea, hoʻoponopono ʻia i ka ʻike maka. Eia naʻe, pono e hoʻomaopopo he hana wale kēia ʻenehana no nā kiʻi hope. Inā makemake mākou e hoʻemi i ka nui o kahi kiʻi i hōʻike pololei ʻia ma ka ʻaoʻao HTML, ʻoi aku ka maikaʻi o ka hoʻohana ʻana i nā waiwai "ākea" a me "kiʻekiʻe" i ʻōlelo ʻia ma luna.
ʻO ka hoʻemi ʻana i ka nui o nā kiʻi ma HTML me ka hoʻohana ʻana i CSS he ʻano hana pono e hoʻomaikaʻi ai i ka hoʻouka ʻana a me ka hana o kahi ʻaoʻao pūnaewele. Ma ka hahai ʻana i nā ʻanuʻu i ʻōlelo ʻia ma luna, hiki iā mākou ke hoʻololi i nā ana o kahi kiʻi a hoʻohana i ka hoʻoemi CSS e hōʻemi i kona nui. E hoʻomanaʻo mau e noʻonoʻo i ka maikaʻi o ke kiʻi i ka wā e hana ai i kēia mau hoʻololi e hōʻoia i ka ʻike mea hoʻohana maikaʻi loa.
6. Nā ʻenehana no ka hoʻouka ʻana i nā kiʻi liʻiliʻi ma HTML
Nui nā ʻenehana e hiki ke kōkua i ka hoʻouka ʻana i nā kiʻi liʻiliʻi ma HTML. Aia ma lalo kekahi mau hoʻolālā kūpono e hoʻokō i kēia pahuhopu:
1. E hoʻohana i ke ʻano kūpono: Pono e koho i ke ʻano kiʻi kūpono no kāu pūnaewele. I ka hoʻohana ʻana i nā kiʻi liʻiliʻi, ʻōlelo ʻia e hoʻohana i nā palapala e like me JPEG a i ʻole WEBP, ʻoiai lākou e hoʻopaʻa i ke kiʻi me ka nalowale ʻole o ka maikaʻi.
2. Hoʻopili i nā kiʻi: Ma mua o ka hoʻohui ʻana i nā kiʻi i kāu pūnaewele, pono e hoʻoemi iā lākou e hōʻemi i ko lākou nui me ka ʻole o ka hoʻopili ʻana i ka maikaʻi ʻike. Nui nā mea hana pūnaewele e hiki ai iā ʻoe ke hoʻopaʻa i nā kiʻi me ka wikiwiki a me ka maʻalahi.
3. E hoʻohana pono i ka huna huna: Ma ka hoʻonohonoho ʻana i ka pau ʻana o ka cache kūpono no nā kiʻi liʻiliʻi, hiki iā ʻoe ke hōʻoia i ka hoʻouka ʻana o nā kiʻi i hoʻokahi manawa wale nō. Hoʻemi kēia i ka manawa hoʻouka a hoʻomaikaʻi i ka ʻike mea hoʻohana.
Ma waho aʻe o kēia mau ʻenehana, he mea nui e hoʻomanaʻo pono e hoʻomaikaʻi ʻia nā kiʻi liʻiliʻi no nā polokalamu kelepona. Hoʻopili kēia i ka hoʻoponopono ʻana i ka nui o ke kiʻi a me ka hoʻohana ʻana i nā ʻenehana hoʻouka palaualelo e hōʻemi i ka hoʻohana ʻana i ka ʻikepili kelepona. Me ka hoʻokō pono ʻana i kēia mau hoʻolālā, hiki ke hoʻokō ʻia ka hoʻouka kiʻi kūpono ma kāu pūnaewele HTML.
7. Hoʻohana i nā hale waihona puke waho e hoʻololi i nā kiʻi ma HTML
ʻO kahi ala maʻamau e hoʻololi i nā kiʻi ma HTML ma ka hoʻohana ʻana i nā hale waihona puke waho. Hāʻawi kēia mau waihona i nā hana i koho mua ʻia i hiki ke hoʻohana ʻia e hoʻololi i nā kiʻi me ka maʻalahi a me ka maikaʻi.
Nui nā hale waihona puke kaulana i hiki ke hoʻohana ʻia no kēia hana, e like me jQuery, Uluna y lazysizes. Hāʻawi kēia mau hale waihona puke i nā ʻano a me nā hana like ʻole e hoʻololi i nā kiʻi ma HTML.
No ka hoʻohana ʻana i kēia mau waihona, pono ʻoe e hoʻokomo i ka loulou i ka waihona ma ke poʻo o kāu ʻaoʻao HTML. No ka laʻana, inā hoʻoholo ʻoe e hoʻohana i ka jQuery, hiki iā ʻoe ke hoʻohui i kēia loulou ma ke poʻo o kāu ʻaoʻao:
"`html
"ʻAʻole maopopo
Ke hoʻokomo ʻoe i ka loulou i ka waihona, hiki iā ʻoe ke hoʻomaka e hoʻohana kāna mau hana i kāu code HTML. No ka laʻana, inā makemake ʻoe e hoʻololi i kahi kiʻi me jQuery, hiki iā ʻoe ke hoʻohana i ka hana `css()` e hoʻololi i ka laulā a me ke kiʻekiʻe o ke kiʻi. Aia ma lalo kahi hiʻohiʻona o ke ʻano o ke code:
"`html
"ʻAʻole maopopo
E hoʻomanaʻo pono ʻoe e hoʻololi i ka "img" me ka ʻike a i ʻole ka papa o ke kiʻi āu e makemake ai e hoʻololi i ka nui. Eia hou, hiki iā ʻoe ke hoʻololi i nā waiwai "300px" a me "200px" i kāu pono ponoʻī.
Inā makemake ʻoe e hoʻohana i kahi waihona ʻē aʻe, hiki iā ʻoe ke ʻimi i nā kumu aʻo kikoʻī a me nā laʻana ma ka pūnaewele e aʻo ai pehea e hoʻololi ai i nā kiʻi me kēlā waihona. E hoʻomanaʻo i kēlā me kēia waihona i kāna syntax a me nā ʻano hana, no laila he mea nui e hahai i nā ʻōlelo aʻoaʻo a me nā palapala o ka waihona āu e koho ai e hōʻoia i ka loaʻa ʻana o nā hopena i makemake ʻia.
8. Nā noʻonoʻo ʻana i ka hiki ke hoʻoemi i ke kiʻi ma HTML
ʻO ka hoʻohana ʻana i nā kiʻi nui ma kahi pūnaewele hiki ke hoʻopōʻino i ka ʻike mea hoʻohana, ʻoi aku hoʻi ma nā polokalamu kelepona me nā pili lohi. No laila, pono pinepine e hoʻemi i ka nui o nā kiʻi e hoʻonui i ka hoʻouka ʻana a hoʻomaikaʻi i ka hiki. A laila, e wehewehe mākou pehea e hana ai ma HTML.
1. E hoʻohana i ka hōʻailona HTML `img` e hoʻokomo i ke kiʻi i kāu ʻaoʻao. E hōʻoia e hoʻokomo i ke ʻano `src` me ka wahi kiʻi. ʻo kahi laʻana:
"`html
"ʻAʻole maopopo
2. E hoʻohui i ke ʻano `width` e kuhikuhi i ka laula makemake o ke kiʻi ma nā pika. No ka laʻana, inā makemake ʻoe i ke kiʻi i 300 pixels ākea, hiki iā ʻoe ke hana penei:
"`html
"ʻAʻole maopopo
3. E hoʻohana i ka ʻano kiʻekiʻe e kuhikuhi i ke kiʻekiʻe i makemake ʻia o ke kiʻi ma nā pika. Ma kēia ala, hiki iā ʻoe ke hoʻomalu i ka laulā a me ke kiʻekiʻe o ke kiʻi. ʻo kahi laʻana:
"`html
"ʻAʻole maopopo
E hoʻomanaʻo i ka hoʻololi ʻana i ke kiʻi, pono ʻoe e mālama i ka ʻāpana kumu i pale ʻole ʻia ke nānā ʻana. E ʻoluʻolu e hoʻomaopopo ʻaʻole e pili pono ka hoʻemi ʻana i ka nui o ke kiʻi i kona ʻano, akā he mea nui e ʻimi i ke kaulike ma waena o ka nui a me ka maikaʻi no ka hoʻouka wikiwiki ʻana a me ka ʻike mea hoʻohana maikaʻi loa. Mai poina e hoʻohui i nā kikokikona alt e wehewehe ana i ke kiʻi e hoʻomaikaʻi ai i kona hiki ʻana!
9. Manaʻo e mālama i ka maikaʻi ke hoʻemi i ka nui o kahi kiʻi ma HTML
Aia nā ʻano hana like ʻole a me nā ʻōlelo aʻoaʻo e pono ai mākou e noʻonoʻo i ka wā e hōʻemi ai i ka nui o kahi kiʻi HTML me ka ʻole o ka hoʻololi ʻana i kona maikaʻi. Aia ma lalo kekahi mau ʻōlelo aʻoaʻo nui:
1. E hoʻohana i ke ʻano "ākea" a me ka "kiʻekiʻe": He mea nui e kuhikuhi i nā ana kikoʻī o ke kiʻi ma nā pika me ka hoʻohana ʻana i nā ʻano "ākea" a me "kiʻekiʻe". Hāʻawi kēia i ka polokalamu kele pūnaewele e hoʻopaʻa i kahi kūpono no ke kiʻi, e pale aku i ka hoʻihoʻi hou ʻole ʻana a pēlā e hoʻonui ai i kāna hana.
2. E kaomi i ke kiʻi: Aia nā mea hana pūnaewele a me nā polokalamu hoʻoponopono kiʻi e hiki ai iā mākou ke hoʻopaʻa i nā kiʻi me ka nalowale ʻole o ka maikaʻi. Ma ka hoʻemi ʻana i ka nui o ka faila, ʻoi aku ka wikiwiki o ka hoʻouka ʻana i ka ʻaoʻao. Eia kekahi, ua ʻōlelo ʻia e hoʻohana nā ʻano kiʻi nā palapala māmā, e like me JPEG a i ʻole PNG i hoʻopaʻa ʻia, ma kahi o nā palapala kaumaha e like me TIFF a i ʻole BMP.
3. Hō'alo i ka ho'ololi 'ana i ka ho'ohana 'ana i ka CSS: 'Oiai hiki ke ho'ololi i ke ki'i me ka ho'ohana 'ana i CSS, hiki i kēia ke ho'opilikia i kona maika'i. ʻOi aku ka maikaʻi o ka hoʻohana ʻana i nā kiʻi me nā ana kūpono mai ka hoʻomaka ʻana a pale i ka hoʻoikaika ʻana i ka nui ma o CSS. E hoʻohana wale i nā ana pono e hōʻike pololei i ke kiʻi, e pale aku i nā waiwai nui a liʻiliʻi paha.
E hoʻomanaʻo he ʻāpana koʻikoʻi ka hoʻonui ʻana i nā kiʻi i ka hoʻomohala pūnaewele, no ka mea, hiki i ka ʻaoʻao lohi ke loaʻa ka hopena maikaʻi ʻole i ka ʻike mea hoʻohana. Ma ka hahai ʻana i kēia mau ʻōlelo aʻoaʻo a me ka hoʻohana ʻana i nā hāmeʻa kūpono, hiki iā ʻoe ke hōʻemi i ka nui o kahi kiʻi HTML me ka ʻole o ka mōhai ʻana i kona maikaʻi, no laila e loaʻa ai kahi ʻaoʻao pūnaewele wikiwiki a maikaʻi.
10. Nā laʻana code e hoʻoemi i ke kiʻi ma HTML
No ka liʻiliʻi ʻana i kahi kiʻi ma HTML, hiki iā ʻoe ke hoʻohana i ka CSS e hoʻololi i ke kiʻi. Eia kekahi mau laʻana code hiki iā ʻoe ke hoʻohana ma ke ʻano he kuhikuhi:
1. E hoʻohana i ka waiwai laula CSS e hoʻonohonoho i ka laulā o ke kiʻi. Eia kekahi laʻana, inā makemakeʻoe e ho'ēmi i ka nui o ke kiʻi i ka hapalua, hiki iāʻoe ke hoʻonohonoho i ka laulā i 50%.
2. ʻO kekahi ala e hoʻololi i ke kiʻi ma ka hoʻohana ʻana i ka waiwai "kiʻekiʻe" CSS e hoʻonohonoho i ke kiʻekiʻe o ke kiʻi. Eia kekahi laʻana, inā makemakeʻoe e ho'ēmi i ka nui o ke kiʻi i ka hapahā, hiki iāʻoe ke hoʻonohonoho i ke kiʻekiʻe i 25%.
3. Hiki iā ʻoe ke hoʻohana i ka waiwai CSS "hoʻololi" e hoʻololi i ke kiʻi. No ka laʻana, inā makemake ʻoe e hoʻemi i ka nui o ke kiʻi i ka hapalua like, hiki iā ʻoe ke hoʻohana i ka hana "scale(0.5)".
E hoʻomanaʻo he mau hiʻohiʻona wale nō kēia a hiki iā ʻoe ke hoʻoponopono i nā waiwai e like me kāu pono. Eia kekahi, e hoʻomanaʻo i ka hoʻololi ʻana i ke kiʻi me ka hoʻohana ʻana i ka HTML a me CSS e pili wale i ka hōʻike ma ka polokalamu kele pūnaewele, ʻaʻole i ka nui maoli o ka faila kiʻi.
11. Hoʻoponopono i nā pilikia maʻamau i ka hoʻololi ʻana i nā kiʻi ma HTML
Ua hōʻike kikoʻī ʻia ke kaʻina hana ma lalo nei. i kēlā me kēia ʻanuʻu No ka hoʻoponopono i nā pilikia maʻamau i ka hoʻololi ʻana i nā kiʻi ma HTML:
1. E hoʻohana i nā waiwai CSS: Hāʻawi ka HTML i nā waiwai CSS he nui e hoʻololi i ka nui o nā kiʻi. ʻO kekahi o ka mea maʻamau ka waiwai "ākea", e hiki ai iā ʻoe ke kuhikuhi i ka laulā i makemake ʻia i nā pika a i ʻole ka pakeneka. ʻo kahi laʻana, hoʻonohonoho i ka laulā kiʻi i 300 pixels. Pēlā nō, hiki ke hoʻohana ʻia ka waiwai "kiʻekiʻe" e kuhikuhi i ke kiʻekiʻe.
2. E mālama i ka lākiō hiʻohiʻona: No ka pale ʻana i nā pilikia distortion, pono e mālama i ka ratio hiʻohiʻona mua i ka wā e hoʻololi ai i nā kiʻi. No ka hoʻokō ʻana i kēia, hiki iā ʻoe ke hoʻohana i ka waiwai "ākea" a waiho ʻole i ka waiwai o ka waiwai "kiʻekiʻe" a i ʻole e hoʻohana i ka "auto". ʻo kahi laʻana, .
3. E hoʻohana i nā mea hana waho: Inā pono ʻoe e hoʻololi i ka nui o nā kiʻi i ka manawa like a i ʻole e koi ʻia ka mana ʻoi aʻe ma luna o ke kaʻina hana hoʻololi, hiki ke hoʻohana ʻia nā mea hana waho. Aia kekahi mau koho kaulana i nā polokalamu hoʻoponopono kiʻi like ʻAdobe Photoshop a i ʻole GIMP, a i ʻole nā lawelawe pūnaewele e like me TinyPNG a i ʻole Kraken.io. Hāʻawi kēia mau mea hana i nā koho ʻoi aku ka holomua, e like me ka hoʻololi ʻana i ka nui, hoʻoemi, a i ʻole ka hoʻoponopono hou ʻana i nā kiʻi.
E hoʻomanaʻo mau e mālama a kākoʻo o nā kiʻi kumu ma mua o ka hana ʻana i kekahi hoʻololi, a e hoʻāʻo i nā mea like ʻole a me ka nui o ka pale e hōʻoia i ka hoʻololi ʻia ʻana o nā kiʻi. E hahai i kēia mau ʻanuʻu a pale i nā pilikia maʻamau i ka hoʻololi ʻana i kāu mau kiʻi ma HTML.
12. Ka hoʻohana ʻana i nā ʻenehana kaomi kiʻi ma HTML
He mea nui ka hoʻohana ʻana i nā ʻenehana hoʻoemi kiʻi ma HTML no ka hoʻonui ʻana i ka hoʻouka ʻana a me ka hōʻike ʻana o nā kiʻi ma kahi pūnaewele. Hoʻemi ka hoʻoemi i ka nui o nā faila kiʻi me ka ʻole o ka hoʻopilikia nui ʻana i kona ʻano hiʻohiʻona, e hoʻomaikaʻi ai i ka hana ʻaoʻao a me ka ʻike mea hoʻohana.
Nui nā ʻano hana hoʻopaʻa i hiki ke hoʻohana ʻia i HTML, e like me ka hoʻohana ʻana i nā papahana a me nā mea pono, e like me Adobe Photoshop a i ʻole GIMP, e ʻae iā ʻoe e hoʻoponopono i ka maikaʻi a me ka nui o nā kiʻi ma mua o ka hoʻouka ʻana iā lākou i ka pūnaewele. Hiki nō hoʻi ke hoʻohana i nā lawelawe pūnaewele e hoʻopaʻa maʻalahi i nā kiʻi me ka nalowale ʻole o ka maikaʻi.
Eia hou, he mea nui e hoʻohana i nā ʻano kiʻi pili pūnaewele, e like me JPEG, PNG, a i ʻole WEBP. Hāʻawi kēia mau ʻano i nā pae like ʻole o ka paʻi a me ke kākoʻo no ka ʻike, no laila he mea nui e koho i ka mea kūpono loa e pili ana i ke ʻano o ke kiʻi a me kāna kumu ma ka pūnaewele. Hiki iā ʻoe ke hoʻohana i ka ʻenehana hoʻoili palaualelo, kahi e hoʻouka ai i ke kiʻi wale nō ke ʻike ʻia ma ka puka aniani, e kōkua i ka wikiwiki o ka manawa hoʻouka ʻaoʻao.
I ka pōkole, pono e hoʻomaikaʻi i ka hoʻouka ʻana a me ka hōʻike ʻana i nā kiʻi ma kahi pūnaewele. ʻO ka hoʻohana ʻana i nā papahana a me nā mea hana kūikawā, ke koho ʻana i ke ʻano kiʻi kūpono a me ka hoʻohana ʻana i nā ʻenehana e like me ka hoʻouka palaualelo kekahi o nā hana i ʻōlelo ʻia e hoʻokō i kahi hana i hoʻomaikaʻi ʻia a me kahi ʻike mea hoʻohana maikaʻi loa. E hoʻomanaʻo mau i ka hoʻāʻo ʻana i ka pūnaewele ma nā mea like ʻole a me nā pilina e hōʻoia i ka hoʻouka wikiwiki ʻana a me ka maikaʻi.
13. Pehea e hoʻololi ai i nā kiʻi i nā mea like ʻole ma HTML
Aia nā ala like ʻole e hoʻololi i nā kiʻi i nā mea like ʻole ma HTML. E wehewehe ʻia ma lalo nei kahi ʻano ʻanuʻu e hoʻoponopono ai i kēia pilikia.
1. E hoʻohana i ke ʻano "srcset": ʻAe kēia hiʻohiʻona iā ʻoe e kuhikuhi i nā kiʻi like ʻole no nā nui pale like ʻole. No ka hana ʻana i kēia, pono e hoʻokomo ʻia nā faila kiʻi like ʻole i ka tag "img" a hoʻokaʻawale ʻia e nā koma. ʻo kahi laʻana:
"`html
"ʻAʻole maopopo
Hōʻike kēia code e hōʻike ʻia ka "small-image.jpg" inā loaʻa ka laulā o ka pale a hiki i 320 pixels, "medium-image.jpg" inā ʻoi aku ka laulā ma mua o 320px akā ʻoi aku ka liʻiliʻi ma mua o 768px, a me " kiʻi nui .jpg» inā ʻoi aku ka laulā ma mua o 768px akā ʻoi aku ka liʻiliʻi a i ʻole like me 1024px.
2. E hoʻohana i nā nīnau nīnau media CSS: ʻO kahi koho ʻē aʻe ka hoʻohana ʻana i nā lula nīnau nīnau media CSS e wehewehe i nā ʻano ʻokoʻa no nā nui pale like ʻole. I kēia hihia, hiki iā ʻoe ke hoʻohana i nā kiʻi e like me ke kāʻei o nā mea a i ʻole e hoʻonohonoho i nā nui kiʻi like ʻole me ka hoʻohana ʻana i ke ʻano "ākea". ʻo kahi laʻana:
"`html
"ʻAʻole maopopo
Hōʻike kēia code i ka "small-image.jpg" ma ke ʻano he kumu o ka mea me ka papa "kiʻi" ma nā pale a hiki i ka 480px ākea, "medium-image.jpg" ma nā pale i ʻoi aku ka nui ma mua o 480px akā ʻoi aku ka liʻiliʻi a i ʻole like me 1024px, a " "image-grande.jpg" ma nā pale ʻoi aku ka nui ma mua o 1024px.
3. E hoʻohana i nā kiʻi a me nā hale waihona puke: Aia kekahi mau papa hana a me nā hale waihona puke e maʻalahi i ke kaʻina hana hoʻololi kiʻi, e like me Responsive Images Community Group (RICG), Picturefill a me Lazy Load. Hoʻomaʻamaʻa kēia mau mea hana i ka hoʻokō ʻana i nā ʻenehana i ʻōlelo ʻia ma luna a hiki i ka hoʻololi ʻana i nā kiʻi i ʻoi aku ka maikaʻi a me ka maʻalahi i nā mea like ʻole.
14. Ka hopena: Nā hana maikaʻi loa e hoʻoemi i ke kiʻi ma HTML
I ka hōʻuluʻulu ʻana, ʻo ka hoʻemi ʻana i ka nui o kahi kiʻi ma HTML he hana maʻalahi ia e hiki ke hoʻokō ʻia ma ka hahai ʻana i kekahi mau hana maikaʻi loa. Aia ma lalo kekahi mau ʻōlelo aʻoaʻo a me nā ʻōlelo aʻoaʻo no ka hana ʻana pēlā:
1. E hoʻohana i nā ʻano nui: ke ʻano "ākea" a me ka "kiʻekiʻe" o ka lepili he ala maʻalahi e wehewehe i nā ana o ke kiʻi ma HTML.
e hoʻonoho i ka laulā a me ke kiʻekiʻe o ke kiʻi i 500 a me 300 mau pika. He mea nui e ʻōlelo e hoʻololi wale kēia i ka nui ʻike o ke kiʻi, ʻaʻole kona nui faila.
2. E kaomi i ke kiʻi: Hoʻemi ka hoʻopiʻi ʻana i ka nui o ka faila kiʻi me ka ʻole e hoʻopilikia nui i kona ʻano ʻike. Nui nā mea hana pūnaewele a me nā lako polokalamu i loaʻa e hoʻopaʻa i nā kiʻi ma JPEG, PNG a i ʻole GIF. E hōʻoia ʻoe e hoʻohana i kahi ʻano hoʻopiʻi kūpono a hoʻoponopono i nā hoʻonohonoho e like me kāu makemake.
3. Optimize no ka pūnaewele: Aia kekahi mau ala ʻē aʻe e hoʻonui ai i kahi kiʻi no ka hoʻohana ʻana ma ka pūnaewele. Hiki iā ʻoe ke hoʻohana i nā ʻano kiʻi ʻoi aku ka maikaʻi e like me WebP a i ʻole SVG, e hāʻawi ana i kahi ratio hoʻopiʻi ʻoi aku ka maikaʻi. Eia hou, pono ʻoe e noʻonoʻo e hoʻololi i ka hoʻonā o ke kiʻi inā e hōʻike ʻia ma nā polokalamu kelepona. **
4. Hoʻemi i ka code HTML: ʻo kekahi ʻano koʻikoʻi e hoʻemi i ka nui o ka code HTML i loaʻa ke kiʻi. No ka hoʻokō ʻana i kēia, hiki iā ʻoe ke wehe i nā wahi keʻokeʻo pono ʻole a me nā ʻōlelo. Hiki iā ʻoe ke hoʻohui i nā kiʻi he nui i hoʻokahi pepa sprite me ka hoʻohana ʻana i ka ʻenehana CSS Sprites. **
** Hoʻemi kēia i ke poʻo o ke kikowaena i ka wā e loaʻa ai nā noi kiʻi he nui. Eia hou, e noʻonoʻo e hoʻohana i nā ʻenehana caching i hiki i ka polokalamu kele pūnaewele ke mālama i nā kiʻi i kona hoʻomanaʻo pōkole a ʻaʻole pono e hoʻoiho hou iā lākou me kēlā me kēia kipa.
E hahai i kēia mau hana maikaʻi loa a hiki iā ʻoe ke hōʻemi pono i ka nui o kāu mau kiʻi HTML, pēlā e hoʻonui ai i ka hana o kāu pūnaewele a hāʻawi i kahi ʻike mea hoʻohana ʻoi aku ka maikaʻi.
I ka hopena, ʻo ka hoʻemi ʻana i ka nui o kahi kiʻi ma HTML he hana koʻikoʻi ia e hoʻonui i ka wikiwiki o ka hoʻouka ʻana o kahi pūnaewele a hoʻomaikaʻi i ka ʻike mea hoʻohana. Ma o nā mea hana a me nā ʻenehana i ʻōlelo ʻia, hiki i nā mea hoʻomohala ke hoʻokō pono i kēia pahuhopu.
Ma ka hoʻohana ʻana i nā hōʻailona HTML e kuhikuhi i ka nui o ke kiʻi, pale ʻoe i ka hoʻouka ʻana i nā pilikia a hōʻoia i ka hōʻike pololei ʻana o ke kiʻi ma nā mea like ʻole a me nā pale. Eia hou, ma ke kaomi ʻana i ke kiʻi me nā ʻano like me JPEG a i ʻole WebP, e hoʻemi ʻia ke kaumaha o ka faila me ka nalowale ʻole o ka maikaʻi ʻike.
Pono e hoʻomanaʻo he ʻokoʻa kēlā me kēia pūnaewele a makemake paha i nā hoʻololi hou e pili ana i kāu mau pono kikoʻī. Manaʻo ʻia e hana i ka hoʻāʻo ʻana i kēlā me kēia manawa a me ka optimization e mālama i ka hana maikaʻi loa.
I ka hōʻuluʻulu ʻana, ma ka hahai ʻana i kēia mau ʻenehana a me ka hoʻonui pono ʻana i ka nui o nā kiʻi HTML, hiki i nā mea hoʻomohala ke hoʻokō i kahi pūnaewele wikiwiki a ʻoi aku ka maikaʻi, e hāʻawi ana i kahi ʻike mea hoʻohana i hoʻomaikaʻi ʻia. Ma o ka hoʻohana pono ʻana i nā mea hana a me nā ʻenehana i loaʻa, ʻaʻole e lilo ka nui o ke kiʻi i palena i ka honua kikohoʻe.
ʻO wau ʻo Sebastián Vidal, he ʻenekinia kamepiula makemake nui i ka ʻenehana a me DIY. Eia kekahi, ʻo wau ka mea nāna i hana tecnobits.com, kahi aʻu e kaʻana like ai i nā kumu aʻo e hoʻomaʻamaʻa a hoʻomaopopo ʻia ka ʻenehana i nā mea a pau.