Sisukord:
- Tutvustame img-märgendit
- Kuidas vähendada pildi suurust html-s
- Piltide kohandamine
- Pildiploki konteiner
Oma disaini tegemisel võtke kasutatavaid pilte tõsiselt. Fotosid ei tohiks segi ajada puht alt meelelahutusliku sisu või nendega kaasnevate kaunistustega. Need kaunistavad ressurssi, kuid suurendavad ka artikli mõju ja meelitavad lugejaid ligi. Kui te ei teadnud, on see suurepärane viis oma saidi reklaamimiseks ja konversioonide suurendamiseks. Seetõttu õpime nüüd, kuidas pilte õigesti valida ja märgistusse lisada. Samuti mõtleme välja, kuidas pilte html-is vähendada, neid töödelda ja efekte lisada.
Tutvustame img-märgendit
Hüperteksti märgistuskeelel on spetsiaalne silt, mis annab brauserile teada, et see hakkab pilti vastu võtma. See on img-silt. Sellel on kaks nõutavat atribuuti:
- src – allika näitamiseks;
- alt – kirjelduseks.
Allikana saate määrata pildi URL-i tee või selle veebiaadressi. Saate manustada ka fotosid, mis on kohalikus arvutis. Sel juhultäpsustatakse täielik või suhteline tee. Näiteks on pilt draivi D kataloogis work_directory kaustas img. Ja märgistusdokument index.html on saidi kaustas samas kataloogis work_directory.
Täielik näeb välja selline:
Suhteline määratakse sõltuv alt pildifailiga lingitava dokumendi asukohast:
Kuidas vähendada pildi suurust html-s
Igal pildil on oma suurus. Tavaliselt mõõdetakse seda pikslites. Kui võtate faili kõrgusega 1200 pikslit, laiusega 3000, kleepige see märgistusse ja avate brauseris, siis näete parimal juhul poolt fotost. Ja kui teha seda tahvelarvutis 500px eraldusvõimega, siis on sellest näha vaid viiendik. Kõik sellepärast, et brauser laadib faili täissuuruses alla. Kuid seda ülesannet on lihtne lahendada, kui teate, kuidas. HTML-is aitab pilti vähendada vaid üks sõna – laius:
Dokument
Laius on valikuline, kuid kasulik atribuut. Laius ütleb brauserile, kui lai alt fotot kuvada. Vaikimisi on mõõtühik piksel. Seetõttu ei ole pildi vähendamiseks vaja täielikult salvestada. HTML, nagu graafikaprogrammid, kasutab protsente, et määrata mõõtmed, samuti rem või em. Kõrguse atribuut määrab kõrguse. Kui seda kirjelduses pole, paneb brauser väärtuse:, mis on väga mugav.
Piltide kohandamine
Reageerimisvõime eesmärk on see, et teie sait näeks hea välja kõigis seadmetes. Alustades kolmetollise BlackBerry ekraaniga, lõpetades laiekraanmonitoridega. Kuid see ei tähenda, et foto suurust tuleb iga seadme jaoks joonlauaga arvutada. Kuidas aga HTML-is pilti kahandada nii, et see näeks hea välja nii mobiil- kui ka sülearvutites?
Lauseatribuut tuleb taas appi, alles nüüd määrate selle väärtuse ainult protsendina:
Brauser tõlgendab seda kirjet juhisena kuvada foto täisekraanlaiuses. Pärast seda määrate metasildis järgmise konstruktsiooni:
Vaateava silt skaleerib lehti, sealhulgas pilte, nii, et need sobiksid ekraanidega, millel neid vaadatakse. Nüüd on meil saidil tundlik foto, mis näeb hea välja kõigis seadmetes.
Pildiploki konteiner
Alati pole vaja täisekraanil fotot, enamasti tuleb suurust teksti või videoga ümbritsevatele plokkidele kohandada. Nii et omandage harjumus mähkida img-märgend div konteinerisse:
Dokument
Nüüd saidil oleva pildi vähendamiseks ja suurendamiseks HTML-vormingus peate määrama ainult 100% laiuse. Pildi suurus sõltub nüüd täielikult konteineriplokist, mida CSS-dokumendis haldate. Näiteks lisage kursoril foto suurendamise efekt:
Document.img-wrapper{ display: block; laius: 80% max-kõrgus: 50vh; marginaal: 0 auto; polsterdus: 0; box-sizing: border-box; ülevool: peidetud; } img{ üleminek: kõik.5s lihtne; } img:hover{ transform: scale(2); läbipaistmatus: 0,7; }
Pilt on kahekordistunud, kuid ei ulatu konteineriplokist kaugemale. Nüüd olete piltidega töötamiseks täiesti valmis. Peaasi on neid mõõduk alt kasutada. Pildid mõjutavad oluliselt allalaadimise kiirust. Võimaluse korral asendage need tausta gradientide või CSS-animatsioonidega.