Për të ndryshuar përmasat e një figure duke përdorur etiketën HTML ka atribute gjerësia (gjerësia) dhe lartësia (lartësia). Pikselët përdoren si vlerë dhe argumentet duhet të përputhen me dimensionet fizike të fotos. Për shembull, në Fig. 10.6 tregon një imazh që ka dimensione 100x111 piksel.

Figura: 10.6. Fotografi me madhësi origjinale

Prandaj, kodi HTML për vendosjen e kësaj figure është treguar në shembullin 10.4.

Shembulli 10.4. Përmasat e figurës

Nëse dimensionet e figurës specifikohen në mënyrë të qartë, atëherë shfletuesi i përdor ato në mënyrë që të shfaqë zonën e zbrazët që i përgjigjet figurës gjatë ngarkimit të dokumentit (Fig. 10.7). Përndryshe, shfletuesi pret që imazhi të ngarkohet plotësisht, pas së cilës ai ndryshon gjerësinë dhe lartësinë e figurës (Fig. 10.8). Në këtë rast, teksti mund të riformatohet, pasi fillimisht madhësia e fotos nuk dihet dhe vendoset automatikisht e vogël.

Figura: 10.7. Dimensionet e imazhit nuk janë specifikuar dhe nuk është ngarkuar ende

Figura: 10.8. Imazhi u ngarkua, teksti u riformatua

Gjerësia dhe lartësia e imazhit mund të ndryshohen si lart ashtu edhe poshtë. Sidoqoftë, kjo nuk ndikon në shpejtësinë e ngarkimit të figurës, pasi që madhësia e skedarit mbetet e pandryshuar. Prandaj, kini kujdes kur zvogëloni imazhin, sepse kjo mund të shkaktojë konfuzion midis lexuesve pse ngarkimi i një vizatimi kaq të vogël kërkon kaq shumë kohë. Por rritja e madhësisë çon në efektin e kundërt - madhësia e imazhit është e madhe, por skedari ngarkohet më shpejt në krahasim me imazhin me të njëjtën madhësi.

Në fig. 10.9 tregon të njëjtën pamje siç tregohet në fig. 10.6, por dyfishuar në gjerësi dhe lartësi.

Figura: 10.9. Pamja e fotos së zgjeruar në shfletues

Kodi për një figurë të tillë do të mbetet në thelb i pandryshuar dhe tregohet në Shembullin 10.5.

Shembulli 10.5. Ndrysho madhësinë e një fotoje

Një ndryshim i tillë i madhësisë quhet ri-modelim, dhe algoritmi i shfletuesit është inferior në aftësitë e tij ndaj redaktorëve grafikë. Prandaj, është e nevojshme të zmadhoni imazhin në këtë mënyrë vetëm në raste të veçanta, përndryshe cilësia e figurës përkeqësohet shumë. Më mirë të përdorni një program grafik. Përjashtimet janë fotografitë që përmbajnë zona drejtkëndëshe. Në fig. 10.10 tregon një skedar modeli që është 54 bajt dhe ka një madhësi origjinale prej 8 në 8 pikselë, i rritur në 150 piksel.

Figura: 10.10. Imazh i zmadhuar

Shfletuesit përdorin dy algoritme për ristampimin - bicubik (jep skaje më të buta dhe diapazon të lëmuar tonal të ngjyrave) dhe pikat më të afërta (ruan grupin origjinal të ngjyrave dhe mprehtësinë e skajeve). Versionet e fundit të shfletuesve përdorin algoritmin bicubik, ndërsa shfletuesit e vjetër, përkundrazi, përdorin algoritmin më të afërt të pikave.

Fotoja do të ridimensionohet bazuar në madhësinë e specifikuar në centimetra (milimetra, inç), si dhe duke marrë parasysh madhësinë e specifikuar në DPI, sipas standardeve të shtypjes së letrës. Përmasat në cm, mm dhe inç mund të specifikohen me një saktësi të mijtat, për shembull, në vend të formatit 15x10, mund të vendosni 15.201x10.203 cm.

Tabela me madhësi standarde të fotografive për pozicion vertikal (portret):

Madhësia standarde e fletës së letrës madhësia A4 - 21x29.7 cm ose 2480x3508 piksel në 300 dpi. Madhësitë e formateve të tjera të fletëve mund të shihen në faqen Wikipedia, por mos harroni se dimensionet janë të shënuara atje në milimetra dhe inç, d.m.th. në cilësimet në këtë faqe, zgjidhni vlerën e duhur.

Nëse keni nevojë të ndryshoni përmasat e një fotoje pa marrë parasysh DPI (pika për inç), domethënë vetëm duke respektuar proporcionet e formatit të specifikuar, atëherë për këtë duhet të vendosni parametrin "Size in DPI" në "0" në cilësimet.

Imazhi origjinal nuk ndryshon në asnjë mënyrë. Do t'ju paraqitet një fotografi tjetër e përpunuar.

Udhëzimet

Së pari, përpiquni të gjeni foton duke përdorur motorët e kërkimit. Futni pyetjen tuaj dhe pastaj zgjidhni skedën e cilësimeve të kërkimit. Google, për shembull, ka një buton "Mjete Kërkimi", ndërsa Yandex ka një ikonë me rrëshqitës. Pastaj duhet të zgjidhni artikullin "Madhësia" dhe të specifikoni vlerat e sakta. Ose, për shembull, nëse keni nevojë për një foto me një rezolucion të mirë, zgjidhni Large.

Nëse nuk ka fotografi me madhësinë e kërkuar, atëherë mund ta rregulloni vetë në korniza. Ka mënyra. E para është që së pari të krijoni një dokument me madhësinë e dëshiruar dhe më pas të ndryshoni foton. E dyta është e kundërta - ju hapni figurën dhe ndryshoni madhësinë. Në thelb nuk ka asnjë ndryshim: gjithçka varet nga preferencat dhe qëllimet tuaja. Shembujt do të merren parasysh në Adobe Photoshop, por mund të përdorni redaktorë të tjerë grafikë.

Mënyra e parë. Klikoni "File" - "New ..." ose kombinimin e tasteve Ctrl + N. Një dritare me cilësime do të shfaqet para jush. Specifikoni atje parametrat e gjerësisë, lartësisë dhe rezolucionit të kërkuar të ngjyrave. Pastaj hapni imazhin që ju pëlqen në shfletuesin, klikoni me të djathtën dhe zgjidhni "Kopjo foton". Pastaj kthehuni në program dhe shtypni kombinimin Ctrl + V.

Fotografitë do të shfaqen në dritaren e redaktorit grafik. Pastaj kliko "Redakto" - "Transformimi falas" ose kombinimi i Ctrl + T. Do të shfaqen pikat kryesore, me ndihmën e të cilave mund të rregulloni foton në madhësinë e dritares së punës. Sapo të merrni rezultatin e dëshiruar (nga rruga, ju mund të dilni përtej kufijve të zonës së punës), klikoni "Skedar" - "Ruaj si ..." ose kombinimin e tastave Ctrl + S.

Mënyra e dytë. Së pari duhet të shkoni në kompjuterin tuaj, pastaj klikoni "File" - "Open ..." (ose kombinimin e Ctrl + O) dhe zgjidhni imazhin e dëshiruar. Pastaj zgjidhni "Image" - "Image size ..." ose shtypni kombinimin Alt + Ctrl + I. Hiqni kutinë e zgjedhjes "Mirëmbani raportin e aspektit" dhe zgjidhni madhësinë e dëshiruar. Pastaj shtypni butonin OK.

Imazhet janë pjesë e pothuajse çdo faqe në internet, prandaj ndryshimi i madhësisë është thelbësor. Mund të ndryshoni madhësinë e fotos në 2 mënyra: në një redaktues grafik ose në mënyrë programatike në kodin html në css.

Nëse nuk vendosni madhësinë e imazhit në kodin css në html, atëherë lartësia dhe gjerësia e saj në sit do të jenë të njëjta në pixel si skedari origjinal. Kjo është, ju mund të ndryshoni madhësinë e një imazhi pa css dhe html, duke përdorur vetëm një redaktor grafik dhe ai automatikisht do të ndryshojë madhësinë në sit nëse nuk specifikoni madhësinë e tij. Por ka raste kur ju duhet të ndryshoni në mënyrë programatike imazhin në css në html.

1. Ndryshimi i fotos në redaktuesin grafik

Ju mund të ndryshoni përmasat e imazhit në çdo redaktor grafik (photoshop, gimp, xnview) dhe automatikisht do të ndryshojë madhësinë në sit në përputhje me dimensionet origjinale.

Avantazhet e metodës:

Imazhi ngarkohet më shpejt sepse nuk keni nevojë të shkarkoni të dhëna të panevojshme (piksele), të cilat më pas do të kompresohen në mënyrë programore.

Redaktorët grafikë kompresojnë dobët imazhe me më pak se 200 pixel në gjerësi dhe lartësi.

Kurdoherë që është e mundur dhe e përshtatshme, përpiquni ta ndryshoni përmasat e tij në një redaktues grafik, në mënyrë që imazhet të ngarkohen më shpejt sesa me një ndryshim programatik. Dallimi në shpejtësi mund të jetë dhjetëra herë.

2. Ndryshimi i fotos në kodin css në sit

Pro:

Fastershtë më e shpejtë dhe më e përshtatshme për të vendosur madhësinë. Kjo metodë e zvogëlimit zakonisht përdoret për lehtësi. Për shembull, kur një imazh mund të ketë madhësi të ndryshme, shpesh është më e përshtatshme të ndryshosh vlerat për të njëjtën programatikisht sesa të ngarkosh të gjitha opsionet e formatit të një imazhi, të redaktuar në një redaktues grafik.

Fotografitë e vogla, me më pak se 200 piksel në lartësi ose gjerësi, janë të kompresuara në mënyrë efikase, ndryshe nga redaktorët grafikë. Nëse dëshironi që faqja juaj në internet të ketë më pak se 200 pixel madhësi, është më mirë të keni madhësinë origjinale më të madhe me 30-50% (260-300 piksel) në mënyrë që të ruani cilësinë e mirë kur zvogëlohet.

Në të njëjtën kohë, ndryshimi në shpejtësinë e ngarkimit të faqes nuk do të ndihet, pasi që imazhet e vogla zënë shumë pak hapësirë \u200b\u200bdhe me një rritje të madhësisë së tyre me 30% nuk \u200b\u200bdo të vëreni ndonjë ndryshim. Por vini re ndryshimin në cilësi.

Imazhet e kompresuara në mënyrë programore ngarkohen më shumë sepse ndryshimi i madhësive ndodh vetëm pas shkarkimit të versionit origjinal. Prandaj, nëse madhësia e fotos është më shumë se 200 piksel në gjerësi ose lartësi, atëherë është më mirë ta kompresoni atë në një redaktues grafik për ta bërë sajtin të funksionojë më shpejt.

Si të ndryshoni madhësinë e imazhit në html duke përdorur css

Për të ndryshuar përmasat e imazheve në html duke përdorur vetitë e css përdoren gjerësia dhe lartësia brenda atributit të stilit. Mund të shkruani vetëm gjerësi ose lartësi, dhe vlera e mbetur e paspecifikuar automatikisht do të ndryshojë duke ruajtur raportin e pamjes. Për shembull, duke specifikuar vetëm gjerësinë e një imazhi duke përdorur gjerësinë, lartësia e saj automatikisht do të ndryshojë, duke mbajtur raportin e pamjes. Dhe anasjelltas, nëse specifikoni vetëm lartësinë, gjerësia e saj gjithashtu do të ndryshojë automatikisht, duke mbajtur raportin e figurës.

Shembull kodi pa specifikuar madhësitë e figurës

Rezultati në shfletuesin

Kodi i faqes

Shembull kodi me madhësi të imazhit në .css

Rezultati në shfletuesin

Kodi i faqes

style \u003d "width: 150px;"\u003e

Në të dy shembujt e treguar më sipër, përdoret i njëjti imazh me një madhësi prej 300x184px (gjerësia dhe lartësia). Në 1 shembull, imazhi u shfaq në shfletuesin pa ndryshime me madhësinë origjinale të 300x184px, meqenëse gjerësia dhe lartësia nuk ishin specifikuar në css. Dhe në shembullin 2, fotografia u shfaq në shfletuesin e zvogëluar me 2 herë, pasi që gjerësia ishte 150px, lartësia automatikisht u ndryshua në 92 px në përputhje me rrethanat. Siç mund ta shihni, vetia lartësi nuk ka nevojë të specifikohet aspak pasi që automatikisht ndryshon në proporcion me gjerësinë.

Nëse furnizoni të dy parametrat: gjerësia (gjerësia), lartësia (lartësia) dhe ato nuk do të korrespondojnë me proporcionet, atëherë fotografia do të ketë saktësisht atë madhësi, por në formë të ngjeshur ose të shtrirë, në varësi të vlerave.

Pse është e padëshirueshme të zmadhohen fotografitë

E rëndësishme: Një rritje në madhësinë e një fotoje shoqërohet me humbje të cilësisë. Kur ndryshoni në ndonjë mënyrë, është e rëndësishme të vendosni vlerat më pak se në imazhin origjinal, dmth vetëm të zvogëloni.

Nëse vendosni madhësinë në pixel më të madh se imazhi origjinal, cilësia do të përkeqësohet. Dhe humbja e cilësisë do të jetë qartë e dukshme, sepse kompjuteri nuk mund të shtojë piksele të reja, ajo vetëm mund të rrisë madhësinë e atyre ekzistuese. Sa më shumë që fotografia zmadhohet nga vlera origjinale, aq më keq cilësia e saj dhe pikselët katrorë më qartë të dukshëm.

Para se të përgjigjeni në pyetjen “ si të futni një fotografi në HTML?», Duhet të theksohet se nuk ia vlen të mbingarkoni faqet e internetit me një sasi të madhe të materialit grafik, pasi kjo jo vetëm që do të përmirësojë perceptimin vizual të burimit nga përdoruesi, por gjithashtu do të rrisë kohën e ngarkimit të faqes.

Kur krijoni faqe në internet, formatet grafike më të përdorura janë PNG, GIF dhe JPEG, dhe për punën e dizajnit me imazhe - redaktori grafik Adobe Photoshop, i cili ka aftësi të pasura për ngjeshjen dhe ndryshimin e madhësive të imazheve pa humbur cilësinë, gjë që është tepër e rëndësishme për zhvillimin e uebit.

Si mund të fus një imazh në HTML?

Për të futur një imazh në një faqe HTML, përdoret një etiketë e thjeshtë:

,

ku xxx është adresa e figurës. Nëse fotografia është në të njëjtin direktori me faqen, etiketimi do të duket kështu:

Sidoqoftë, interneti me shpejtësi të lartë dhe të qëndrueshëm nuk ka arritur ende në të gjitha cepat e globit dhe ndodh që imazhi në faqen e internetit thjesht të mos ngarkohet. Për raste të tilla, ekziston koncepti i një teksti alternativ.

Ajo shfaqet në vend të fotos kur është e padisponueshme, e ngarkuar ose në modalitetin e shfletuesit "pa fotografi". Ajo shtohet duke përdorur tiparin alt të etiketës .

Një shembull i shtimit të tekstit alternativ në një skedar grafik:

Përmasat e imazheve në HTML

Për të ndryshuar dimensionet e ekranit të një skedari grafik, përdorni etiketat e lartësisë dhe gjerësisë, ku lartësia është lartësia, dhe gjerësia është gjerësia, e matur në pixel.

Kur përdorni këto atribute, shfletuesi së pari cakton hapësirë \u200b\u200bpër përmbajtjen grafike, përgatit paraqitjen e përgjithshme të faqes, shfaq tekstin dhe pastaj ngarkon vetë imazhin.

Fotoja vendoset në një drejtkëndësh me dimensionet e specifikuara dhe nëse parametrat janë më pak ose më shumë se origjinali, fotografia shtrihet ose zvogëlohet.

Nëse nuk përdoren atributet e lartësisë dhe gjerësisë, shfletuesi ngarkon menjëherë imazhin, duke vonuar shfaqjen e tekstit dhe elementeve të tjerë të faqes.

Këto parametra mund të specifikohen si në piksel (madhësia e fotos është konstante dhe nuk varet nga rezolucioni i ekranit të përdoruesit), ashtu edhe në përqindje (madhësia e fotos varet nga rezolucioni i ekranit).

Për shembull:

Mos harroni se në momentin që do të ndryshoni përmasat e imazhit, duhet të ruani raportin e saj të pamjes.

Për ta bërë këtë, mjafton të specifikoni vlerën e vetëm njërit prej parametrave ( gjerësia ose lartësia), dhe shfletuesi do të llogarisë automatikisht vlerën e së dytës.

Vendndodhja e imazhit në HTML

Si me shumë etiketa HTML, le të zbatojmë atributin align, i cili përafron imazhin:

- fotografia gjendet sipër tekstit;

- fotografia gjendet poshtë tekstit;

- fotografia gjendet në të majtë të tekstit;

- fotografia gjendet në të djathtë të tekstit.

Foto lidhëse

Kjo bëhet si më poshtë:

Siç mund ta shihni, një insert grafik mund të jetë një lidhje dhe, kur klikohet, të ridrejtojë në çdo adresë të regjistruar në formë të plotë ose të shkurtuar.

Si mund ta bëj një fotografi një sfond në HTML?

Imazhi jo vetëm që mund të futet në faqe si një objekt i dukshëm, por edhe të bëjë sfondin. Për të përcaktuar një imazh si sfond, është e nevojshme të shkruani atributin background \u003d "xxx" në etiketë, ku xxx është adresa e figurës e specifikuar në të njëjtën mënyrë si në shembujt e mësipërm.

Për shembull, le të vendosim imazhin e mëposhtëm të strukturës si një imazh sfond:

Ruani imazhin në një dosje me një faqe të përgatitur dhe shkruani linjat e mëposhtme:

Sfondi me tekst.

Foto e sfondit është vendosur.