Isang artikulo kung saan makikilala natin ang mga klase ng Bootstrap 3 at 4 na balangkas para sa disenyo ng imahe.
Anong nangyari tumutugon na imahe?Ang tumutugon na imahe ay isang imahe na umaayon sa lapad ng elemento kung saan ito inilagay.
Yung. natutugunan nito ang mga sumusunod na kondisyon:
- kung ang lapad ng imahe ay mas mababa kaysa sa lapad ng elemento kung saan ito matatagpuan, kung gayon ang mga sukat ng imaheng ito ay hindi nagbabago.
- kung ang lapad ng imahe ay mas malaki kaysa sa lapad ng elemento kung saan ito matatagpuan, kung gayon ang lapad ng imahe ay katumbas ng magagamit na lapad ng parent na elemento. Sa kasong ito, ang taas ng larawang ito ay bumababa sa proporsyon sa lapad nito.
Ginagawa ang imahe na madaling ibagay ay tapos na:
- sa Bootstrap 3 sa pamamagitan ng pagdaragdag ng class na .img-responsive sa img tag
- sa Bootstrap 4 sa pamamagitan ng pagdaragdag ng class na .img-fluid sa img tag.
Inilalapat ang mga klase na ito sa larawan Mga katangian ng CSS max-width:100% at height:auto .
Kung kailangan mong gawing adaptive ang lahat ng mga larawang matatagpuan sa isang page o sa isang partikular na block, pagkatapos ay para magawa ito kailangan mong gumamit ng isa sa mga sumusunod na panuntunan ng CSS:
/* Paraan 1 - Gawing tumutugon ang lahat ng larawan. Sa kasong ito, ang data ng imahe ay ilalagay bilang mga elemento ng inline-block (inline-block) */ img ( display: inline-block; taas: auto; max-width: 100%; ) /* Paraan 2 - Gawin ang lahat ng larawan adaptive. Sa kasong ito, ang data ng imahe ay ilalagay bilang mga elemento ng block (block) */ img ( display: block; height: auto; max-width: 100%; ) /* Paraan 3 - Gawin ang lahat ng mga imahe na matatagpuan sa elemento na may id =" madaling ibagay na pangunahing". Sa kasong ito, ang data ng imahe ay ilalagay bilang mga elemento ng block (block) */ #main img ( display: block; height: auto; max-width: 100%; )
Dapat idagdag ang panuntunang ito sa CSS file, na dapat isama pagkatapos ng bootstrap.css file.
Paano baguhin ang hugis ng isang imaheSa Bootstrap 3 at 4, maaari mong gamitin ang naaangkop na mga klase upang gumawa ng isang imahe na may mga bilugan na sulok (Bootstrap 3 - img-rounded, Bootstrap 4 - rounded), ilakip ito sa isang frame (img-thumbnail) o bigyan ito ng hugis ng bilog ( Bootstrap 3 - img-circle , Bootstrap 4 - rounded-circle).
Maaari mong baguhin ang posisyon ng isang imahe sa Bootstrap 3 gamit ang float helper classes (.pull-left at .pull-right), ang .center-block class, at ang text alignment classes (.text-left , .text-center at .teksto-kanan) .
Ginagamit ng Bootstrap 4 ang mga sumusunod na klase para i-align ang mga elemento: float-left , float-right , mx-auto at text-align na mga klase (.text-left , .text-center at .text-right).
Pansin:
Ang .pull-left , .pull-right , at .center-block na mga klase ay maaaring gamitin upang ihanay ang mga larawang kumikilos bilang block o inline-block na mga elemento. Pagkatapos ilapat ang mga ito, ang mga imahe ay nagiging blocky.
Ang .text-left , .text-center at .text-right na mga klase ay maaari lamang gamitin upang muling ayusin ang mga larawang kumikilos tulad ng mga inline-block na elemento.
Halimbawa, upang maiposisyon ang isang imahe sa kaliwa, kailangan mong idagdag ang .pull-left na klase dito:
Halimbawa, upang maiposisyon ang isang imahe sa kanan, kailangan mong idagdag ang .pull-right na klase dito:
Halimbawa, upang maisentro ang isang imahe, kailangan mong idagdag ang .center-block na klase dito o ilagay ito sa isang div container na may .text-center na klase:
Isaalang-alang natin ang ilang mga opsyon para sa pagdidisenyo ng mga larawan sa site.
Opsyon 1: I-frame ang larawan gamit ang isang frame na kumakatawan sa isang browser window sa Mac OS (na may tatlong mga kontrol sa kaliwa).
/* CSS */ .srcshot ( position: relative; background: #fff; border: 2px solid #9e9e9e; margin-top: 20px; margin-bottom: 20px; ) .srcshot-header ( display: flex; align-item: center; taas: 20px; background: #9e9e9e; border-bottom: 2px solid #9e9e9e; ) .srcshot-header::after ( content: "screenshot"; font-family: SFMono-Regular, Menlo, Monaco, Consolas, " Liberation Mono", "Courier New", monospace; font-size: 12px; color: #fff; margin-left: auto; margin-right: 5px; ) .srcshot-header-btn ( width: 10px; height: 10px; background: #fff; margin-left: 5px; border-radius: 5px; ) .srcshot-wrapper ( margin: 5px; ) @media (min-width: 768px) ( .srcshot-wrapper ( margin: 15px; ) ) . srcshot-wrapper-item ( display: block; max-width: 100%; height: auto; margin: 0 auto; ) 
Opsyon 2. Isang frame ng larawan na mukhang browser window sa Windows (na may tatlong kontrol sa kanan).
/* CSS */ .srcshot ( position: relative; background: #fff; border: 2px solid #9e9e9e; margin-top: 20px; margin-bottom: 20px; ) .srcshot-header ( display: flex; align-item: center; taas: 20px; background: #9e9e9e; border-bottom: 2px solid #9e9e9e; ) .srcshot-header::before ( content: "screenshot"; font-family: SFMono-Regular, Menlo, Monaco, Consolas, " Liberation Mono", "Courier New", monospace; font-size: 12px; color: #fff; margin-left: 5px; margin-right: auto; ) .srcshot-header-btn ( width: 18px; height: 10px; background: #fff; margin-right: 5px; ) .srcshot-wrapper ( margin: 5px; ) @media (min-width: 768px) ( .srcshot-wrapper ( margin: 15px; ) ) .srcshot-wrapper-item ( display: block; max-width: 100%; taas: auto; margin: 0 auto; )
Pagpipilian 3. Isang imahe na may frame at isang paliwanag na inskripsyon na "screenshot".
/* CSS */ .srcshot ( position: relative; text-align: center; margin-top: 20px; margin-bottom: 20px; ) .srcshot::before ( content: "screenshot"; position: absolute; top: 0 ; kaliwa: 50%; transform: translateX(-50%); padding: 6px 6px 4px; kulay: #616161; background: #fff; font-size: 12px; ) .srcshot-dark::before ( color: #fff ; background: #616161; ) .srcshot-item ( display: inline-block; border: 5px solid #fff; box-shadow: 0 0 10px #9e9e9e; border-bottom-left-radius: 4px; border-bottom-right -radius: 4px; max-width: 100%; height: auto; ) .srcshot-item-dark ( border: 5px solid #616161; ) 
Pagpipilian 4. Larawan na may puting frame at anino.
/* CSS */ .img ( display: block; margin-top: 20px; margin-bottom: 20px; text-align: center; ) .img-item ( display: inline-block; border: 5px solid #fff; box -shadow: 0 0 10px #9e9e9e; max-width: 100%; taas: auto; ) 
Sa maikling tutorial na ito, titingnan natin ang mga pinakasimpleng paraan upang lumikha ng mga tumutugon na larawan gamit ang CSS. Mayroong ilang iba't ibang mga solusyon upang gawing tumutugon ang mga imahe, lahat sila ay nag-iiba sa pagiging kumplikado at antas ng suporta sa browser. Ang isang halimbawa ng isang kumplikadong paraan upang ipatupad ang mga tumutugon na larawan ay ang paggamit ng srcset attribute, na nangangailangan ng maraming larawan, mas maraming markup, at depende rin sa suporta ng browser.
Nagbibigay-daan sa amin ang mga modernong pagtutukoy na gawing flexible at maipakita nang tama ang mga larawang ginamit sa mga page ng website sa mga screen ng iba't ibang device ng user; para dito, sapat na ang paggamit lamang ng ilang property mula sa CSS clip.
Magsimula tayo sa pamamagitan ng pagtingin sa isang pangunahing halimbawa kung saan kailangan nating gumawa ng mga solong larawang ginagamit sa mga post, o iba pang indibidwal na mga bloke, na ganap na tumutugon. Halimbawa, mayroon kaming lalagyan na binigyan namin ng base width ng lapad: 96%; at itakda ang maximum na lapad sa max-width: 960px; , sa block na ito kailangan naming magpakita ng adaptive na imahe. Para sa elementong ito sa loob ng lalagyan ay itinakda namin ang lapad sa 100%, upang ang lapad nito ay palaging katumbas ng lapad ng lalagyan, anuman ang laki ng viewport. Ang taas, nang naaayon, ay na-convert sa auto mode, bilang isang resulta, ang imahe ay magbabago nang proporsyonal.
CSS: div.container ( width: 96%; max-width: 960px; margin: 0 auto; /* center the main container */ ) img ( width: 100%; /* image width */ height: auto; /* Mga larawan sa taas */ ) tandaan mo yan ang elemento ay magiging tumutugon kahit na ang mga nakapirming halaga para sa lapad at taas na mga katangian ng HTML ay direktang tinukoy sa markup.
Kamusta kayong lahat! Nalaman namin kung ano ang adaptive na layout, isang grid, at kung paano gawing adaptive ang mga font. Ngayon tingnan natin kung paano iakma ang mga larawan.
Ito ay talagang isang napaka-simpleng paksa at hindi ito magdadala sa amin ng maraming oras.
Upang gawing tumutugon ang iyong mga larawan, kailangan mo lang idagdag ang max-width=100% property sa kanila.
Img (
max-width: 100%;
}
Lahat! Ngayon ang aming larawan ay hindi lalampas sa parent container at iaangkop depende sa resolution ng screen.
Bukod sa mga larawan, maaari mong gamitin ang diskarteng ito para sa mga video at iba pang media file.
Img, embed, object, video (
max-width: 100%;
}
Magiging maayos ang lahat, ngunit gagana lang ito sa IE7+. Kung kailangan mong suportahan ang IE6, gagana ang property na ito doon sa sumusunod na entry:
Img (
lapad: 100%;
}
Yung. Sa halip na max-width, isulat ang lapad .
Ang isa pang problema na maaari mong makaharap ay ang mahinang pag-scale ng imahe sa Windows. Oo, eksakto sa system, hindi sa browser. Kung titingnan mong mabuti, makikita mo ang ilang artifact.
Ang paglutas ng problemang ito para sa IE ay simple.
Logo (
background: wala;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/path/to/logo.png",sizingMethod="scale");
}
Yung. Tinutulungan kami ng property ng filter na ayusin ang problemang ito.
Ang problema ng mga adaptive na imahe ay medyo may kaugnayan, kaya magsisimula ako sa isang maliit na pangangatwiran at mga pamamaraan ng pagpapatupad, at pagkatapos ay i-highlight ko ang opsyon na, sa aking opinyon, ay pinakaangkop.
Kaya, mga isang taon na ang nakalilipas naisip ko na upang maging tumutugon ang isang imahe (iyon ay, gawin itong i-stretch o paliitin upang magkasya sa lapad ng lalagyan), ang kailangan mo lang gawin ay gamitin ang sumusunod na code:
Wrapper img( lapad: 100%; )
At sa katunayan, sa ilang mga kaso ito ay maaaring limitado. Mahusay na gumagana ang trick na ito kapag lumiliit ang window ng browser. Ngunit paano kung ang lapad ng lalagyan kung saan nakalagay ang imahe ay nagiging mas malaki kaysa sa resolution ng imahe? Tama. Ang imahe ay umaabot sa lapad ng lalagyan, ngunit ang kalidad ay nag-iiwan ng maraming nais. Ngunit paano kung kailangan mo ng suporta para sa isang resolusyon na 2048 x1536px?
Kung hindi ka gumagamit ng svg at ito ay isang raster na imahe, kung gayon ang unang bagay na nasa isip ay ang kumuha ng larawan na akma sa pinakamataas na resolution landing page, at kapag nagbago ang laki ng window ng browser, mai-compress ito nang may normal na kalidad.
At pagkatapos ay lumitaw ang problema sa pagganap. Katangahan para sa isang smartphone na mag-load ng mga malalaking larawan na maganda sa resolution ng retina. Pagkatapos ng lahat, ang bilis ng mga mobile network ay hindi kasing taas ng isang PC, at ang ilang mga gumagamit ay maaaring hindi maghintay para sa landing page na mag-load sa kanilang smartphone. Ang resulta ay isang nawawalang kliyente.
Maaari mong subukang tukuyin ang ilang mga div na may mga larawan, at pagkatapos, gamit ang mga query sa media, itago ang mga hindi kailangan at ipakita lamang ang larawan na akma sa kasalukuyang resolution.
Mukhang naayos na ang problema. Ngunit ang katotohanan ay ang mga browser, upang mapabilis ang pagpapakita ng pahina, i-preload ang mga imahe na nakasulat sa html bago magsimulang maproseso ang css. Marahil ay hindi ko naipahayag nang tama ang aking sarili (iwasto mo ako), ngunit kung gagawin mo ang trick na ito, ang lahat ng mga imahe ay mai-load pa rin, anuman ang nakasulat sa css. Nangangahulugan ito na pinalala lang natin ang sitwasyon mga mobile device. Ngayon ay kailangan nilang mag-upload ng hindi isa, ngunit ilang mga larawan.
Maaari mong i-verify ito sa pamamagitan ng pagbubukas ng mga tool ng developer at pagtingin sa tab na "Network".
Sa pangkalahatan, mayroon pa ring maraming mga problema na maaaring lumitaw kapag lumilikha ng mga adaptive na imahe. At medyo ilang mga solusyon ang naipon, masyadong. Ang lahat ay nakasalalay sa tiyak na sitwasyon.
Sa html 5, lumitaw ang tag ng larawan, na nagbibigay-daan sa iyo upang malutas ang karamihan sa mga problema at partikular na nilikha para sa paglikha ng isang adaptive (tumutugon) na disenyo. Ang disenyo nito ay nakapagpapaalaala sa mga video at audio tag. Ang kakanyahan ng trabaho ay ang ilang mga imahe ay tinukoy sa loob ng tag ng larawan para sa mga partikular na resolution ng screen. Mukhang ganito:
Ang kakaiba ay na sa halip na src, srcset ang ginagamit at isang bagay na katulad ng media query ang ginagamit. Ang isang maliit na larawan ay na-load sa isang resolution na mas mababa sa 319px. Average na larawan na may resolution mula 320px hanggang 480px, atbp.
Sa pangkalahatan, kapag gumagamit ng mga bagong tag, inirerekomenda kong tingnan ang site na ito at suriin ang kasalukuyang kalagayan ng mga bagay.
Tulad ng makikita mo ang sitwasyon sa sa sandaling ito nag-iiwan ng maraming naisin. Walang suporta sa mga IOS device, sa (mga) Macbook at sa IE (Bagaman, ang mga gumagamit ng IE ay hindi naaawa sa kanila, dapat silang magdusa). Sa tingin ko lahat tayo ay hindi pa handang mawalan ng napakaraming user. Hindi, mali ang pagkakasabi ko. Huwag mawala ito, dahil ang aming pangunahing imahe ay maglo-load at magpapakita nang tama. Ngunit gayon pa man, gusto kong hindi mawalan ng mga customer na may teknolohiya ng mansanas dahil sa mahabang oras ng paglo-load ng page, dahil malamang na ito ay isang solvent na audience
Upang masulit ang tag na ito ngayon, kailangan mong gumamit ng maliit na script (sa pagitan ng mga head tag) picturefill.js .
Ngayon, dapat suportahan ng lahat ng device ang istrukturang ito para sa layout ng mga adaptive na larawan. Totoo, hindi ko pa ito nasubukan sa isang Mac (wala pa akong nakuha).
Hindi tulad ng pamamaraan na inilarawan sa itaas, ngayon ay isang imahe lamang ang na-load, at hindi tatlo, tulad ng dati. 
Alam ng bawat web designer na ang paglikha ng tumutugon na layout ay marahil ang isa sa pinaka kumplikadong mga gawain na maaaring makaharap niya sa kanyang trabaho. Ang problema ay hindi lamang na ito ay kinakailangan upang isaalang-alang ang mga kakaibang laki ng screen iba't ibang mga aparato at piliin ang pag-aayos ng mga bloke sa site sa paraang maganda ang hitsura ng web project sa screen ng computer at sa mobile phone, ngunit ang katotohanan ay maraming mga modernong device ang may tinatawag na "retina" na monitor na may tumaas na pixel density , na may mga espesyal na kinakailangan para sa layout ng web.
Ang katotohanan ay ang mga screen ng "retina" ay nagbibigay ng mga imahe na may mas mataas na kalinawan dahil sa dobleng densification ng mga pixel point na bumubuo sa mga larawan. Ngunit ang pagpapabuti na ito ay mayroon ding mga downsides nito, at ang pinakamahalaga sa mga ito ay na ngayon ay kinakailangan na dagdagan ang pagpili ng mga high-definition na mga guhit na partikular para sa mga retina monitor. Umiiral iba't ibang solusyon upang makamit ang mataas na kalinawan ng imahe sa parehong mga conventional at retina device. Tingnan natin ang ilang halimbawa.
Tradisyunal na pamamaraan gamit lamang ang mga katangian ng CSSKadalasan sa disenyo ng web, ginagamit ang parehong imahe ng isang tiyak na laki, kung saan nakatakda ang maximum na laki ng display sa screen, na dalawa o higit pang beses na mas maliit kaysa sa orihinal na laki nito.
Isang simpleng halimbawa: sabihin nating gusto mong ipakita nang tama ang iyong 250 x 250 px na logo sa isang screen na may double pixel density. Sa kasong ito, kailangan mong lumikha ng isa pang imahe ng logo na doble ang laki ng gusto mo sa screen, ibig sabihin. 500 x 500 px.
Ngayon kailangan nating lutasin ang pangunahing problema - kung paano matiyak na ang display ng imahe ay palaging nananatiling pareho, ibig sabihin, ang laki nito ay palaging 250 x 250 px?
Marahil ay may nakaisip kaagad ng ideya na magsulat ng simpleng CSS code, tulad nito:
Img (max-width: 250px; )
Kakatwa, ang pamamaraang ito ay hindi gagana. Kailangan mong limitahan ang laki ng lalagyan na naglalaman ng larawan, hindi ang larawan mismo. Dapat itong magmukhang ganito:
Div img (max-width: 250px; )
Ano ang mga disadvantages ng pamamaraang ito?
Kung gagamitin mo ang pamamaraang ito mga layout para sa maliliit na larawan, tulad ng mga logo o icon, malamang na hindi ka makakatagpo ng mga problema. Gayunpaman, ang pamamaraang ito ay hindi angkop para sa malalaking guhit. Hindi ka ba mahilig mag-download ng malalaking larawan partikular para sa mga retina device na hindi man lang maipakita ang lahat ng detalye ng iyong ilustrasyon?!
Isipin ang iyong mga bisita sa website. Ano ang masasabi mo sa isang taong nagmamadaling magbasa? mahalagang impormasyon mula sa iyong mapagkukunan sa web, kumokonekta sa pamamagitan ng USB modem, na hindi masyadong mahusay sa pagkuha ng signal ng komunikasyon? Siyempre, maaari kang mawalan ng isang partikular na bahagi ng iyong audience kung hindi mo iisipin kung paano maayos na gumawa ng tumutugon na disenyo para sa iyong website.
Sa pamamagitan ng paraan, kung gusto mong bahagyang baguhin ang disenyo ng site depende sa bilis ng koneksyon sa panig ng kliyente, maaari kang gumamit ng isang espesyal na utility na Foresight.js mula kay Adam Bradley, na sumusukat sa bilis ng paglo-load ng isang 50K na imahe.
Ang isa pang kawalan ng pamamaraan ay ang aspect ratio ng isang regular na monitor at isang screen ng mobile phone ay magkaiba. Samakatuwid, ang isang larawan sa background na nakaunat nang pahalang ay magiging kakaiba kapag pinaliit upang magkasya ang lapad ng screen sa isang mobile phone, na nag-iiwan ng maraming bakanteng espasyo sa ibaba. Kung sakali cellphone Ito ay magiging mas mahusay kung ang web master ay may pagkakataon na palakihin ang imahe, i-highlight ang isang makabuluhang bahagi nito at ilagay ang piraso ng imahe na ito bilang isang background sa halip na ang buong imahe.
Mayroon bang alternatibo?Pero meron malaking bilang ng mga alternatibong nagbibigay-daan sa iyong ibagay ang mga larawan sa resolution ng screen nang hindi nag-overload sa channel ng komunikasyon at nang hindi nagpapabagal sa pagpapatakbo ng device ng bisita ng site.
Karamihan sa mga pamamaraang ito ay umaasa sa isang kumbinasyon ng mga script na tumatakbo sa parehong panig ng kliyente at server. Ang una sa kanila, nakasulat sa wika ng javascript, alamin ang lahat tungkol sa mga katangian ng device na ginagamit ng bisita sa site at ang bilis ng koneksyon sa Internet; ang huli ay maaaring mag-load ng larawan ng kinakailangang kalidad depende sa impormasyong natanggap.
Ang mga modernong developer ay lumikha ng isang medyo malaking bilang ng mga script na gumaganap ng mga katulad na function. Ang isang halimbawa ay ang espesyal na Jquery script na HiSRC, na binuo nina Marc Grabanski at Christopher Schmitt, na nagbibigay-daan sa iyong mag-download ng isang opsyon sa tatlo para sa bawat larawan, depende sa uri ng device ng user at sa bilis ng koneksyon sa Internet.
SA pangkalahatang pananaw Ang HTML markup para sa script na ito ay ganito ang hitsura:
Sa katangian ng src dapat mong tukuyin ang landas sa file na may larawan na unang na-load, kadalasan ang imahe mismo Mababang Kalidad. Pagkatapos mag-load ng page, susuriin ng script ang bilis ng koneksyon sa Internet at ang uri ng screen ng device kung saan na-access ng bisita ang site. Kung pinapayagan ang bilis ng Internet at sinusuportahan ng device ang mga imaheng "retina", ang larawan na matatagpuan sa address na tinukoy sa data-2x attribute ay mai-load, kung sinusuportahan ng device ang mga regular na imahe, ang larawan ay mai-load sa address sa data- 1x attribute, at kung hindi nito pinapayagan ang bilis ng Internet, walang pagbabagong gagawin. Ang isang espesyal na klase na idinagdag sa isang imahe ay magsasabi sa script na ang ilang partikular na pagbabago ay kailangang gawin sa elemento ng DOM na iyon.
Ang script mismo ay konektado sa pamamagitan ng pagdaragdag ng code:
$(dokumento).ready(function())( $(".hisrc").hisrc(); ));
Ang lahat ay napaka-simple at hindi nangangailangan ng anumang dagdag na abala. Ang kailangan mo lang gawin ay pumili ng tatlong magkakaibang larawan na ilo-load sa iba't ibang sitwasyon, at ang iyong site ay handa nang gamitin. Maaari kang lumikha ng isang hiwalay na bersyon ng larawan na may mga binagong proporsyon partikular para sa mga mobile device.
Ang pamamaraan ay mayroon ding isang bilang ng mga disadvantages. Una, kailangan mong isama ang Jquery library. Pangalawa, ang pamamaraan ay nangangailangan ng partikular na HTML markup, na maaaring hindi angkop para sa lahat ng mga web master, dahil sa ilang mga kaso ang paraan ng pagpapakita ng -tag ay hindi mababago.
Ang isang kawili-wiling paraan upang lumikha ng mga adaptive na imahe ay inaalok ng serbisyo ng Sencha.io Src (sa oras ng pagsulat ng artikulong ito ay gumagana pa rin), na hindi nangangailangan ng anumang mga setting sa server. Ang serbisyo ay gumagana sa isang proxy na batayan.
Ipasok lamang ang prefix na http://src.sencha.io/ bago ang address ng iyong larawan sa src attribute, at si Sencha.io Src na ang bahala sa iba. Ito libreng serbisyo, na nagbibigay-daan sa iyong lutasin ang karamihan sa mga problema ng isang modernong web designer.
Kasama sa mga kawalan ng serbisyo ang katotohanan na sa pamamagitan ng paggamit nito, pinaasa mo ang iyong sarili sa paggana ng isang mapagkukunan ng third-party; ang anumang mga pagkabigo sa pagpapatakbo nito ay makakaapekto sa iyong site, kaya HINDI KO INIREREKOMENDAS ang paggamit nito, at hindi lamang ito, ngunit alinman sa mga third-party sa pangkalahatang Serbisyo.
KonklusyonTulad ng makikita mo, sila ay talagang umiiral mga alternatibong paraan paghahanda ng mga adaptive na larawan para sa mga website. Hindi inilista ng artikulong ito ang lahat ng mga pamamaraan na magagamit sa mga modernong gumagamit. Ang bilang ng mga serbisyo at plugin na nagbibigay-daan sa iyong kontrolin ang resolution ng imahe depende sa mga katangian ng mga device kung saan tinitingnan ang website ay lumalaki araw-araw. Ang mga web master ay walang pagpipilian kundi subukan ang bawat isa sa kanila at pumili ng isa o ibang paraan depende sa mga mahihirap na gawain na kinakaharap nila.