I le atinaʻeina o le upega tafaʻilagi, e manaʻomia le faʻaogaina lelei o ata e faʻamalieina ai le faʻatinoga ma le poto masani o tagata. E masani ona tatou maua i tatou lava ma le manaʻoga e faʻaititia le tele o se ata i le HTML ina ia mautinoa e uta vave ma lelei i luga oa tatou itulau web. I totonu o lenei tusiga, o le a tatou suʻesuʻeina auala eseese ma metotia faʻapitoa e fai ai se ata i le HTML laʻititi, ma mafai ai ona sili atu le faʻaleleia ma le vaʻaia oa tatou mea. Afai o loʻo e vaʻavaʻai e faʻaleleia lau 'upega tafaʻilagi faʻatinoga ma faʻaititia le tele o au ata, ua e sau i le nofoaga saʻo!
1. Folasaga i le faʻaitiitia o le tele o ata ile HTML
O le suia o ata o se galuega masani i le atinaʻeina o upega tafaʻilagi. A o'o mai i le fa'asilisiliina o la tatou 'upega tafa'ilagi, e taua tele le fa'amautinoa o lo'o mama a tatou ata e aunoa ma le fa'afefeina o latou uiga vaaia. O le mea e lelei ai, o le HTML e ofoina mai ia i matou ni filifiliga e ausia ai lenei mea. aogā.
O se tasi o auala e faʻaitiitia ai le tele o ata o le faʻaaogaina lea o le HTML "lautele" ma le "maualuga" meatotino e faʻafetaui ai le tele o le ata. E maua lenei mea e ala i le faʻaaogaina o uiga i le faʻailoga ata. Mo se faʻataʻitaʻiga, pe a tatou mananaʻo e faʻaititia le tele mai se ata afa, e mafai ona tatou setiina le "lautele" ma le "maualuga" tau i le afa o le tele muamua o le ata. I lenei auala, o le a faʻapipiʻi e le suʻega le ata i laʻititi laʻititi, lea o le a fesoasoani e faʻaleleia le taimi e faʻapipiʻi ai itulau.
O le isi filifiliga e faʻaitiitia ai le tele o ata i le HTML o le faʻaogaina lea o ata faʻapipiʻi. E tele meafaigaluega e maua i luga ole laiga e mafai ai ona matou faʻapipiʻi a matou ata e aunoa ma le leiloa o le lelei. O nei mea faigaluega e galue e ala i le aveeseina o faʻamatalaga faʻasalalau mai le ata, faʻaitiitia le tele o faila e aunoa ma le afaina tele o le vaʻaia. E mafai ona matou faʻaogaina nei meafaigaluega e faʻapipiʻi ai a matou ata aʻo leʻi faʻapipiʻiina i luga o la matou upega tafaʻilagi, lea o le a vave ai le utaina o itulau mo matou tagata faʻaoga.
Manatua o le faʻamalieina o le tele o ata HTML e le gata ina faʻaleleia ai le faʻatinoga o lau 'upega tafaʻilagi, ae faʻaleleia ai foi le poto masani a le tagata. E ala i le faʻaitiitia o le tele o ata, matou te faʻamautinoa e mafai e a matou tagata faʻaoga ona maua mea e sili atu le vave ma sili atu ona lelei. Fa'aoga nei metotia ma mea faigaluega o lo'o ta'ua e fa'alelei ai au ata ma maua ai se upega tafa'ilagi sili atu ona lelei ma faauo mo au tagata asiasi.
2. Tag ma uiga e sui ai ata ile HTML
HTML e maua ai se faasologa o pine ma uiga e mafai ona faʻaogaina e toe faʻafua ai ata i luga o se itulau web. O nei pine ma uiga e mafai ai e oe ona fetuunai le tele ma le faʻatulagaina o ata, faʻamautinoa lelei le faʻaalia o latou i totonu. masini eseese ma laupepa.
Muamua lava, e toe faʻaleleia se ata ile HTML, e te faʻaogaina le 'tag'. O lenei pine e tatau ona aofia ai le tele o uiga taua e ausia ai le suiga talafeagai. O le uiga src e faʻaaogaina e faʻamaonia ai le ala ata, ae o le uiga lautele y maualuga E faʻaaogaina e faʻamaonia ai le lautele ma le maualuga o le ata, i le faasologa. O nei uiga e mafai ona seti i pixel-specific values poʻo se pasene e mafai ona faʻaogaina e faʻatagaina ai le toe faʻaleleia.
E faaopoopo atu i le uiga lautele y maualuga, HTML e maua ai foi isi uiga e mafai ona faʻaogaina e toe faʻaleleia ai ata. Mo se faataitaiga, o le uiga faiga e mafai ona fa'aoga e fa'aoga ai sitaili CSS fa'aopoopo e pei o le lautele maualuga, maualuga maualuga, ma le fua fa'atatau o ata. E mafai foi ona e faaaogaina le uiga vasega e fa'aoga sitaili fa'apitoa e fa'amatala i totonu o se pepa sitaili fafo po'o totonu. O nei uiga e mafai ai ona sili atu le pulea o le faʻatulagaina ma le tele mulimuli o le ata. I se faapuupuuga, e ala i le faʻaogaina o faʻailoga talafeagai ma uiga i totonu o le HTML, e mafai ona faigofie ma lelei le faʻaleleia o ata i luga o se itulau web. Faatasi ai ma se malamalamaaga faavae o nei manatu, e mafai e le au atinaʻe upega tafaʻilagi ona faʻamautinoa lelei le faʻaalia o ata i masini eseese ma laupepa.
3. Faʻafefea ona faʻamaonia le lautele ma le maualuga o se ata ile HTML
O le faʻamalamalamaina o le lautele ma le maualuga o se ata i le HTML e taua tele e pulea ai foliga vaaia ma le faʻatulagaina mai se 'upega tafaʻilagi Upega tafa'ilagi. O le mea e lelei ai, e tele auala e ausia ai lenei sini.
O le auala pito sili ona faigofie e faʻamaonia ai le tele o se ata o le faʻaaogaina lea o uiga "lautele" ma le "maualuga". O nei uiga e mafai ona faʻaopoopo saʻo i le "img" tag ma faʻatagaina oe e seti le lautele ma le maualuga o le ata i pika. Faataitaiga:
"`html
«`
Afai e te manaʻo i le ata e faʻatumauina lona tulaga muamua, e naʻo lou manaʻomia e faʻamaonia se tasi o uiga (lautele poʻo le maualuga) ma tuʻu le isi e otometi ona fetuunai e faʻatatau i le fua. E maua lenei mea e ala i le faʻaaogaina o le uiga "style" ma faʻamaonia naʻo le tasi le tau, pe mo le lautele poʻo le maualuga. Faataitaiga:
"`html
«`
E mafai fo'i ona e fa'aogaina iunite fa'atatau o fua, pei o le pasene, e fa'atele ai le ata e fa'atatau i lona atigipusa. Ina ia faia lenei mea, naʻo le faʻamaonia o le tau e manaʻomia ona sosoo ai ma le faʻailoga pasene (%). Faataitaiga:
"`html
«`
E taua le maitauina afai e te le faʻamaonia le tele o ata i le HTML, o le browser o le a faʻaalia i latou i la latou uluai lapoa. E fautuaina le faʻaogaina o nei lautele ma le maualuga faʻamatalaga faʻapitoa i taimi uma e faʻamautu ai se faʻatulagaga tutusa i lau 'upega tafaʻilagi. Fa'ata'ita'i i nei filifiliga ma su'e le mea e sili ona fetaui ma ou mana'oga!
4. Fa'aaoga pasene e fa'aitiitia ai le tele o se ata ile HTML
O le fa'aaogaina o pasene i le HTML o se auala aoga e fa'aitiitia ai le tele o se ata. O lenei metotia e mafai ai e oe ona fetuunai le ata e tusa ai ma le avanoa avanoa i luga o le lau, e maua ai se fa'aaliga sili atu ona fetu'una'i ma fetu'una'i mo masini eseese ma fa'ai'uga mata.
Ina ia faʻaogaina le pasene e faʻaitiitia ai le tele o se ata i le HTML, matou te mulimuli i laasaga nei:
1. Muamua, matou te maua le tag ata HTML () ma matou tuʻuina atu i ai se uiga tele: lautele ma le maualuga. Nai lo le fa'ailoaina o se tau fa'amaumau i pika, matou te fa'aogaina se pasene. Mo se faʻataʻitaʻiga, afai matou te mananaʻo e nofoia le ata i le 50% o le lautele o le lau, matou te faʻaogaina le lautele = »50%» i le faʻailoga ata.
2. O le isi, e mafai ona tatou fetuunai le maualuga faʻatatau i le faʻaaogaina o le "auto" CSS meatotino mo le uiga maualuga. O le a mafua ai ona otometi ona fetuutuunai le maualuga e fa'atatau i le lautele fa'atatau e fa'atulaga e le pasene ua tu'uina atu i luga. Mo se faʻataʻitaʻiga, afai o le ata o loʻo i ai le lautele o le 50%, o le maualuga o le a otometi lava ona fetuunai faʻatusatusa.
3. Ma le mea mulimuli, ina ia mautinoa o le ata e fetaui lelei i masini eseese ma faʻaiʻuga o lau mata, e mafai ona faʻaogaina tulafono faʻaopoopo faaopoopo. E mafai ona matou setiina le lautele maualuga e faʻaaoga ai le "max-width" CSS meatotino, lea o le a faʻamautinoa ai e le faʻafefe le ata pe a laʻititi le lau. Mo se faʻataʻitaʻiga, e mafai ona tatou faʻaopoopoina le sitaili "max-width: 100%;" i le pine ata.
Manatua o le faʻaaogaina o pasene e faʻaitiitia ai le tele o se ata i le HTML o se faʻataʻitaʻiga fautuaina, aua e faʻamautinoaina se faʻaaliga sili atu ona fetuutuunai ma fetuutuunai i luga o masini eseese ma faʻaiʻuga mata. E ala i le mulimuli i laasaga o loʻo taʻua i luga, e faigofie ona e fetuunai le tele o au ata e aunoa ma le leiloa o le lelei poʻo le faʻaleagaina o latou foliga. Fa'ata'ita'i ma su'e le fetaui lelei mo ou mana'oga!
5. Toe fa'atupuina ile CSS ile HTML Ata
O se tasi o luʻitau masani pe a mamanuina se upega tafaʻilagi o le puleaina o le tele o ata. O le tele o taimi, o ata e le'i fa'aogaina e mafai ona fa'atupuina ai le umi o taimi fa'apipi'i ma fa'aleagaina ai le poto masani a le tagata fa'aoga. O le mea e lelei ai, ua ofoina mai e le CSS se fofo faigofie e faʻaitiitia ai le tele o ata ile HTML.
O le laasaga muamua i le faʻaitiitia o le tele o se ata o le setiina o ona fua e faʻaaoga ai le CSS. E ausia lenei mea i le faʻaaogaina o le "lautele" ma le "maualuga" meatotino. Mo se faʻataʻitaʻiga, afai tatou te mananaʻo e seti le lautele o se ata i le 300 pixels, o le CSS code o le a width: 300px;. E taua le manatua pe a faia lenei mea, o le ata e ono leiloa le lelei pe foliga faʻalavelave pe a faʻaititia tele.
O le isi auala aoga mo le faʻaitiitia o le tele o ata o le faʻaaogaina o le CSS compression. E maua lenei mea e ala i le setiina o le meatotino "background-size" i se tau e itiiti ifo i le 100%. Mo se faʻataʻitaʻiga, afai tatou te mananaʻo e faʻaititia le tele o se ata i le afa, o le CSS code o le a background-size: 50%;. O lenei metotia e mafai ai e oe ona faʻaitiitia le tele o le ata e aunoa ma le leiloa o le lelei, talu ai e naʻo le fetuutuunai vaʻaia. Ae ui i lea, e taua le matauina o lenei metotia e aoga mo na o ata pito i tua. Afai tatou te mananaʻo e faʻaititia le tele o se ata faʻaalia saʻo i luga o le itulau HTML, e sili atu le faʻaogaina o le "lautele" ma le "maualuga" meatotino o loʻo taʻua i luga.
Faʻaitiitia le tele o ata i le HTML e faʻaaoga ai le CSS o se auala aoga e faʻaleleia ai le utaina ma le faʻatinoga o se itulau web. E ala i le mulimuli i laasaga o loʻo taʻua i luga, e mafai ona tatou fetuutuunai le tele o se ata ma faʻaoga le CSS compression e faʻaitiitia ai le lapoʻa. Ia manatua i taimi uma e mafaufau i le lelei o ata pe a faia nei fetuunaiga ina ia mautinoa ai se poto masani a le tagata faʻaoga.
6. Meafaigaluega e faʻamalieina ai le utaina o ata laiti i le HTML
E tele auala e mafai ona fesoasoani e faʻamalieina le utaina o ata laiti ile HTML. O lo'o i lalo nisi o ta'iala aoga e ausia ai lea sini:
1. Fa'aoga le fa'asologa sa'o: E taua tele le filifilia o le ata sa'o mo lau 'upega tafa'ilagi. Pe a faʻaaogaina ata laiti, e fautuaina e faʻaoga faʻasologa e pei o le JPEG poʻo le WEBP, aʻo latou faʻapipiʻiina le ata e aunoa ma le leiloa o le tele o uiga lelei.
2. Compress Images: Aʻo leʻi faʻapipiʻi ata i lau 'upega tafaʻilagi, e taua le faʻapipiʻiina e faʻaitiitia ai lo latou lapoʻa e aunoa ma le aʻafiaina o le uiga vaaia. E tele meafaigaluega i luga ole laiga e mafai ai ona e faʻapipiʻi ata vave ma faigofie.
3. Faʻaaoga lelei le faʻaogaina o le upega tafaʻilagi: E ala i le faʻatulagaina o le faʻamutaina o le cache saʻo mo ata laiti, e mafai ona e faʻamautinoa e naʻo le tasi le taimi e manaʻomia ai e au tagata asiasi i luga o le upega tafaʻilagi le utaina o ata. O lenei mea e faʻaitiitia ai le taimi o le utaina ma faʻaleleia le poto masani o tagata faʻaoga.
I le faaopoopo atu i nei metotia, e taua le manatua o ata laiti e tatau foi ona faʻamalieina mo masini feaveaʻi. E aofia ai le fetu'una'i o le tele o ata ma le fa'aogaina o faiga fa'apalapala e fa'aitiitia ai le fa'aogaina o fa'amatalaga feavea'i. Faatasi ai ma le faʻatinoina lelei o nei taʻiala, e mafai ona ausia lelei le faʻapipiʻiina o ata i luga o lau upega tafaʻilagi HTML.
7. Fa'aaogā faletusi i fafo e fa'afou ai ata ile HTML
O se auala masani e sui ai ata i le HTML o le fa'aogaina lea o faletusi i fafo. O nei faletusi o loʻo tuʻuina atu galuega faʻapitoa e mafai ona faʻaogaina e faʻanofo ai ata faigofie ma lelei.
E tele faletusi ta'uta'ua e mafai ona fa'aoga mo lenei galuega, pei ole jQuery, Aluga y paie tele. O nei faletusi e ofoina atu auala eseese ma galuega e sui ai ata ile HTML.
Mo le fa'aogaina o nei faletusi, e tatau ona e fa'aofi muamua le so'otaga i le faletusi i le ulutala o lau itulau HTML. Mo se faʻataʻitaʻiga, afai e te filifili e faʻaaoga le jQuery, e mafai ona e faʻaopoopo le soʻotaga lea i le ulutala o lau itulau:
"`html
«`
A mae'a ona e fa'aofiina le so'otaga ile faletusi, e mafai ona e amata fa'aoga ana galuega i lau HTML code. Mo se faʻataʻitaʻiga, afai e te manaʻo e sui se ata i le jQuery, e mafai ona e faʻaogaina le `css()` galuega e sui ai le lautele ma le maualuga o le ata. Lalo o se faʻataʻitaʻiga o foliga o le code:
"`html
«`
Manatua e tatau ona e suia le "img" i le faʻamatalaga poʻo le vasega o le ata e te manaʻo e sui. E le gata i lea, e mafai ona e fetuutuunai le "300px" ma le "200px" tau i au lava suiga o manaʻoga.
Afai e te manaʻo e faʻaoga se isi faletusi, e mafai ona e suʻeina aʻoaʻoga maʻoti ma faʻataʻitaʻiga i luga ole laiga e aʻoaʻo ai pe faʻafefea ona toe faʻaleleia ata i lena faletusi faapitoa. Manatua o faletusi ta'itasi e iai a latou fa'asologa ma metotia, o lea e taua ai le mulimuli i fa'atonuga ma fa'amaumauga a le faletusi e te filifilia ina ia mautinoa e te maua i'uga mana'omia.
8. Fa'ataga avanoa pe a fa'aitiitiina se ata ile HTML
O le faʻaaogaina o ata tetele i luga o le upega tafaʻilagi e mafai ona afaina ai le poto masani o tagata, aemaise lava i luga o masini feaveaʻi ma fesoʻotaʻiga lemu. O le mea lea, e masani ona manaʻomia le faʻaitiitia o le tele o ata e faʻamalieina ai le utaina ma faʻaleleia le avanoa. Le isi, matou te faʻamatalaina pe faʻapefea ona fai i le HTML.
1. Fa'aoga le HTML `img` tag e fa'aofi ai le ata i lau itulau. Ia mautinoa e aofia ai le uiga 'src' ma le nofoaga o ata. Faataitaiga:
"`html
«`
2. Fa'aopoopo le uiga 'lautele' e fa'ailoa ai le lautele mana'omia o le ata i pika. Mo se faʻataʻitaʻiga, afai e te manaʻo e 300 pika le lautele o le ata, e mafai ona e faia e pei ona taua i lalo:
"`html
«`
3. Fa'aoga le uiga 'maualuga' e fa'ailoa ai le maualuga mana'omia o le ata i pika. I lenei auala, e mafai ona e pulea uma le lautele ma le maualuga o le ata. Faataitaiga:
"`html
«`
Manatua pe a sui le ata, e tatau ona e tausia le vaega muamua e puipuia ai mai le faʻaseseina. Faamolemole ia matau o le faaitiitia o le tele o se ata o le a le afaina ai lona tulaga lelei, ae e taua le sailia o se paleni i le va o le tele ma le lelei mo le uta vave ma se poto masani a le tagata e sili ona lelei. 'Aua ne'i galo e fa'aopoopo fo'i le alt text e fa'amatala ai le ata e fa'aleleia atili ai lona avanoa!
9. Fautuaga e faatumauina le lelei pe a faʻaititia le tele o se ata ile HTML
E i ai auala eseese ma fautuaga e tatau ona tatou amanaia pe a faʻaititia le tele o se ata HTML e aunoa ma le faʻafefeina o lona uiga lelei. Lalo o nisi o fautuaga autu:
1. Faʻaaoga le uiga "lautele" ma le "maualuga": E taua le faʻamaonia o le saʻo o le ata i pixels e faʻaaoga ai uiga "lautele" ma le "maualuga". O lenei mea e mafai ai e le browser ona faʻaagaga avanoa talafeagai mo le ata, aloese mai le toe faʻaleleia ma faʻapea ona faʻaleleia lona faʻatinoga.
2. Compress the image: O loʻo i ai meafaigaluega i luga ole laiga ma polokalame faʻatonutonu ata e mafai ai ona matou faʻapipiʻi ata e aunoa ma le leiloa o le lelei. E ala i le fa'aitiitia o le tele o le faila, e fa'avavevave le utaina o itulau. E le gata i lea, e fautuaina e faʻaaoga faatulagaga o ata fa'amama mama, pei o le JPEG po'o le PNG fa'apipi'i, nai lo fa'amama mamafa e pei o le TIFF po'o le BMP.
3. Aloese mai le suia o le faʻaaogaina o le CSS: E ui lava e mafai ona toe faʻaleleia se ata e faʻaaoga ai le CSS, e mafai ona afaina ai lona tulaga lelei. E sili atu le fa'aogaina o ata ma fua sa'o mai le amataga ma aloese mai le fa'amalosia o le tele e ala i le CSS. Fa'aaoga na'o fua e mana'omia e fa'aali sa'o ai le ata, 'alo'ese mai fa'atauga tetele pe laiti.
Manatua o le faʻataʻitaʻiina o ata o se vaega taua o le atinaʻeina o upega tafaʻilagi, aua o se itulau lemu e mafai ona i ai se aafiaga le lelei i le tagata faʻaoga. E ala i le mulimuli i nei fautuaga ma le faʻaogaina o meafaigaluega talafeagai, o le a mafai ona e faʻaitiitia le tele o se ata HTML e aunoa ma le ositaulagaina o lona uiga lelei, ma maua ai se itulau vave ma sili atu ona lelei.
10. Fa'ata'ita'iga fa'ailoga e fa'aitiiti ai se ata ile HTML
Ina ia faʻaitiitiina se ata ile HTML, e mafai ona e faʻaogaina le CSS e toe faʻaleleia ai le ata. O nisi nei o faʻataʻitaʻiga code e mafai ona e faʻaogaina e fai ma faʻamatalaga:
1. Faʻaaoga le CSS lautele meatotino e seti ai le lautele o le ata. Mo se faʻataʻitaʻiga, afai e te manaʻo e faʻaititia le tele o se ata i le afa, e mafai ona e setiina le lautele ile 50%.
2. O le isi auala e sui ai le ata o le faʻaaogaina lea o le CSS "maualuga" meatotino e seti ai le maualuga o le ata. Mo se faʻataʻitaʻiga, afai e te manaʻo e faʻaititia le tele o le ata i le kuata, e mafai ona e setiina le maualuga i le 25%.
3. E mafai foʻi ona e faʻaogaina le "transform" CSS meatotino e toe faʻaleleia ai le ata. Mo se faʻataʻitaʻiga, afai e te manaʻo e faʻaititia le tele o le ata i le afa faʻatusatusa, e mafai ona e faʻaogaina le "fua (0.5)" galuega.
Manatua o nei mea ua na o ni faʻataʻitaʻiga ma e mafai ona e faʻafetaui tulaga taua e tusa ai ma ou manaʻoga. E le gata i lea, ia manatua o le toe faʻaleleia o le ata e faʻaaoga ai le HTML ma le CSS e naʻo le faʻaalia i totonu o le suʻega, ae le o le tele moni o le faila ata.
11. Fa'atonu fa'afitauli masani pe a toe fa'afuaina ata ile HTML
O lo'o fa'amatalaina auiliili atu le fa'agasologa i lalo. la'asaga i lea la'asaga Ina ia foia faʻafitauli masani pe a suia ata i le HTML:
1. Fa'aoga meatotino CSS: HTML e ofoina atu le tele o meatotino CSS e fa'afetaui le tele o ata. O se tasi o mea sili ona taatele o le "lautele" meatotino, lea e mafai ai ona e faʻamaonia le lautele manaʻomia i pixels poʻo pasene. Faataitaiga, seti le lautele o ata i le 300 pika. E faʻapea foʻi, o le "maualuga" meatotino e mafai ona faʻaaoga e faʻamaonia ai le maualuga.
2. Fa'atumauina le fua fa'atatau: Ina ia 'alofia fa'afitauli fa'alavelave, e fautuaina le fa'atumauina o le fua fa'atatau muamua pe a toe fa'aopoopo ata. Ina ia ausia lenei mea, e mafai ona e faʻaogaina le "lautele" meatotino ma tuʻu le tau o le "maualuga" meatotino gaogao pe faʻaoga "auto". Faataitaiga, .
3. Fa'aoga meafaigaluega i fafo: Afai e te mana'omia le toe fa'atupuina o ni ata i le taimi e tasi pe afai e mana'omia le fa'atonuga sili atu i luga o le fa'agasologa o suiga, e mafai ona fa'aoga meafaigaluega i fafo. O nisi o filifiliga ta'uta'ua e aofia ai polokalame fa'atonutonu ata pei o Adobe Photoshop po'o le GIMP, po'o auaunaga i luga ole laiga e pei o TinyPNG po'o Kraken.io. O nei meafaigaluega e masani ona ofoina atu filifiliga sili atu, e pei o le suia otometi, faʻamalosi, poʻo le toe faʻatulagaina o ata.
Ia manatua pea e teu a faaleoleo o ata muamua a'o le'i faia so'o se suiga, ma fa'ata'ita'i i masini eseese ma lau lapopo'a e fa'amautinoa ai ua sa'o le fa'avasegaina o ata. Mulimuli i laasaga nei ma aloese mai faʻafitauli masani pe a suia au ata ile HTML.
12. Fa'aogaina o faiga fa'apipi'i ata ile HTML
O le faʻaogaina o metotia faʻapipiʻi ata i le HTML e taua tele e faʻamalieina ai le utaina ma le faʻaalia o ata i luga o le upega tafaʻilagi. O le fa'amalosi e fa'aitiitia ai le tele o faila ata e aunoa ma le afaina tele o lona uiga vaaia, lea e faʻaleleia ai le faʻatinoga o itulau ma le poto masani a le tagata.
E tele auala faʻapipiʻi e mafai ona faʻaoga i le HTML, e pei o le faʻaogaina o polokalame ma mea faigaluega faʻapitoa, e pei o le Adobe Photoshop poʻo le GIMP, lea e mafai ai ona e fetuunai le lelei ma le tele o ata aʻo leʻi tuʻuina atu i luga o le upega tafaʻilagi. E mafai foʻi ona faʻaogaina auaunaga i luga ole laiga e otometi ona faʻapipiʻi ata e aunoa ma le leiloa o le lelei.
E le gata i lea, e taua tele le faʻaogaina o ata faʻafeiloaʻi i luga ole laiga, pei ole JPEG, PNG, poʻo le WEBP. O nei faʻatulagaga e ofoina atu tulaga eseese o le faʻamalosi ma le lagolago mo le manino, o lea e taua ai le filifilia o le mea e sili ona talafeagai e faʻatatau i le ituaiga ata ma lona faʻamoemoe i luga o le upega tafaʻilagi. E mafai foi ona e faʻaogaina le faʻaogaina o le paie, lea e faʻapipiʻi ai le ata pe a faʻaalia i le faamalama o le suʻesuʻega, lea e fesoasoani e faʻavave le taimi o le utaina o itulau.
I se faapuupuuga, e taua tele le faʻaleleia o le utaina ma le faʻaalia o ata i luga o se upega tafaʻilagi. O le fa'aogaina o polokalame ma mea faigaluega fa'apitoa, filifilia o le fa'atulagaina o ata talafeagai ma le fa'aogaina o metotia e pei o le fa'apalapalaina o nisi o faiga fa'atonu e ausia ai se fa'aleleia atili o le fa'atinoga ma se poto masani fa'aoga lelei. Manatua i taimi uma e faʻataʻitaʻi le upega tafaʻilagi i luga o masini eseese ma fesoʻotaʻiga e faʻamautinoa ai le uta vave ma lelei o ata.
13. Faʻafefea ona faʻafetaui ata i masini eseese ile HTML
E eseese auala e fa'afetaui ai ata i masini eseese ile HTML. O se laasaga i lea laasaga auala e foia ai lenei faafitauli o le a auiliili i lalo.
1. Fa'aoga le uiga o le "srcset": O lenei uiga e mafai ai ona e fa'amaonia ata eseese mo le tele o lau mata. Ina ia faia lenei mea, o faila ata eseese e tatau ona aofia i le "img" tag ma vavae ese i koma. Faataitaiga:
"`html
«`
O lenei code o loʻo faʻaalia ai o le "small-image.jpg" o le a faʻaalia pe afai o le lau e iai le lautele e oʻo atu i le 320 pixels, "medium-image.jpg" pe afai o le lautele e sili atu i le 320px ae itiiti ifo pe tutusa ma le 768px, ma " ata tele .jpg» pe afai o le lautele e sili atu i le 768px ae itiiti ifo pe tutusa ma le 1024px.
2. Fa'aaoga fesili fa'asalalauga CSS: O le isi filifiliga o le fa'aogaina lea o tulafono ole fesili ole fa'asalalauga CSS e fa'amalamalama ai sitaili eseese mo le tele ole lau. I lenei tulaga, e mafai ona e faʻaogaina ata e fai ma faʻasologa o elemene poʻo le setiina o le tele o ata e faʻaaoga ai le uiga "lautele". Faataitaiga:
"`html
«`
O lenei faʻailoga o loʻo faʻaalia ai le "small-image.jpg" o le pito i tua o le elemene ma le vasega "ata" i luga o lau e oʻo atu i le 480px lautele, "medium-image.jpg" i luga o lau e sili atu i le 480px ae itiiti ifo pe tutusa ma le 1024px, ma le " “image-grande.jpg” i luga o lau e sili atu i le 1024px.
3. Fa'aoga fa'ava'a ma faletusi: E tele fa'ava'a ma faletusi e fa'afaigofie ai le fa'agasologa o le fetu'una'iga o ata, e pei ole Responsive Images Community Group (RICG), Picturefill ma Lazy Load. O nei meafaigaluega e faʻafaigofie ai le faʻatinoina o metotia o loʻo taʻua i luga ma faʻatagaina se faʻaleleia atili ma le otometi le faʻaogaina o ata i masini eseese.
14. Fa'ai'uga: Fa'ata'ita'iga sili e fa'aititia ai se ata ile HTML
I le aotelega, o le faʻaitiitia o le tele o se ata i le HTML o se faiga faigofie e mafai ona ausia e ala i le mulimuli i nai faiga sili ona lelei. O nisi nei o fautuaga ma fautuaga mo le faia o lea mea:
1. Fa'aoga uiga tetele: o le uiga "lautele" ma le "maualuga" o le igoa o se auala faigofie e faʻamaonia ai le tele o se ata ile HTML.
o le a setiina le lautele ma le maualuga o le ata i le 500 ma le 300 pika. E taua le taʻua o lenei mea o le a naʻo le suia o le vaʻaia o le ata, ae le o lona faila faila.
2. Fa'apipi'i le ata: Fa'amama fa'aitiitia le tele o le faila ata e aunoa ma le a'afia tele o lona uiga va'aia. E tele meafaigaluega i luga ole laiga ma polokalama e avanoa e fa'apipi'i ai ata ile JPEG, PNG po'o le GIF. Ia mautinoa e te faʻaogaina se faʻapipiʻi talafeagai ma fetuunai tulaga e tusa ai ma ou manaʻoga.
3. Optimize mo le upega tafailagi: E iai isi auala e faʻamalieina ai se ata mo le faʻaoga i luga o le upega tafaʻilagi. E mafai ona e fa'aogaina ata e sili atu ona lelei e pei o le WebP po'o le SVG, lea e ofoina atu se fua fa'atatau fa'amalosi. E le gata i lea, e tatau ona e mafaufau e sui le iuga o le ata pe afai o le a faʻaalia i luga o masini feaveaʻi. **
4. Faʻaitiitia le code HTML: o le isi itu taua o le faʻaitiitia o le tele o le code HTML o loʻo i ai le ata. Ina ia ausia lenei mea, e mafai ona e aveese avanoa papaʻe ma faʻamatalaga e le manaʻomia. E mafai fo'i ona e tu'ufa'atasia ni ata se tele i totonu o se laupepa se tasi e fa'aaoga ai le CSS Sprites technique. **
**O lenei mea e fa'aitiitia ai le fa'auluuluga o le server pe a maua ni talosaga se tele. E le gata i lea, mafaufau e faʻaaoga metotia faʻapipiʻi ina ia mafai e le browser ona faʻasaoina ata i lona manatua le tumau ma e le toe manaʻomia ona toe laʻuina i latou i asiasiga taʻitasi.
Mulimuli i nei faiga sili ona lelei ma o le a mautinoa lava e mafai ona e faʻaititia lelei le tele o au ata HTML, faʻapea le faʻaleleia o le faʻatinoga o lau 'upega tafaʻilagi ma maua ai se poto masani faʻaoga.
I le faaiuga, o le faʻaitiitia o le tele o se ata i le HTML o se faiga taua e faʻamalieina ai le saoasaoa o le utaina o se upega tafaʻilagi ma faʻaleleia le poto masani o tagata. E ala i meafaigaluega ma metotia ua taʻua, e mafai e le au atinaʻe ona ausia lelei lenei sini.
I le faʻaogaina o faʻailoga HTML e faʻamaonia ai le tele o ata, e te aloese mai le utaina o faʻafitauli ma faʻamautinoa o loʻo faʻaalia saʻo le ata i masini eseese ma mata. E le gata i lea, e ala i le faʻapipiʻiina o le ata i faʻasologa e pei o le JPEG poʻo le WebP, o le mamafa o le faila e faʻaitiitia e aunoa ma le leiloa o le uiga vaaia taua.
E taua le manatua o 'upega tafaʻilagi taʻitasi e tulaga ese ma e ono manaʻomia ni fetuunaiga faʻaopoopo e faʻatatau i ou manaʻoga patino. E fautuaina le faia o suʻega faʻavaitaimi ma faʻataʻitaʻiga e faʻamautu ai le faʻatinoga sili ona lelei.
I le aotelega, e ala i le mulimuli i nei metotia ma faʻalelei lelei le tele o ata HTML, e mafai e le au atinaʻe ona ausia se upega tafaʻilagi vave ma sili atu ona lelei, ofoina atu se faʻaleleia atili o le faʻaogaina o tagata. E ala i le faʻaogaina tatau o meafaigaluega ma metotia o loʻo maua, o le tele o ata o le a le toe avea ma tapulaa i le lalolagi numera.
O aʻu o Sebastián Vidal, o se inisinia komepiuta e fiafia tele i tekinolosi ma DIY. E le gata i lea, o a'u o le foafoa o tecnobits.com, lea ou te faʻasoa atu ai aʻoaʻoga e faʻafaigofie atili ai tekinolosi ma malamalama mo tagata uma.