Veličina fotografije će biti promijenjena u skladu s navedenom veličinom u centimetrima (milimetrima, inčima), kao i navedenom veličinom u DPI, prema standardima ispisa na papiru. Dimenzije u cm, mm i inčima mogu se odrediti s točnošću tisućinki, npr. umjesto formata 15x10 možete postaviti 15,201x10,203 cm.

Tablica sa standardnim veličinama fotografija u okomitom (portretnom) položaju:

Format fotografije u centimetrima (cm)	Veličina u milimetrima (mm)	Veličina u pikselima (za ispis 300 dpi)	Omjer slike (u pejzažnoj orijentaciji)
3x4 (nakon ručnog rezanja)	30x40	354x472	4:3 (1.33)
3,5x4,5 (nakon ručnog rezanja)	35x45	413x531	4:3 (1.33)
9x13	89x127	1063x1535	10:7 (1.43)
10x15	102x152	1181x1772	3:2 (1.5)
13x18	127x178	1535x2126	7:5 (1.4)
15x20(≈A5)	152x203	1772x2362	4:3 (1.33)
15x21	152x216	1772x2480	4:3 (1.33)
18x24	178x240	2126x2835	19:14 (1.36)
20x25	203x254	2362x2953	5:4 (1.25)
20x30(≈A4)	203x305	2362x3543	3:2 (1.5)
30x40	305x406	3543x4724	4:3 (1.33)
30x45	305x457	3543x5315	3:2 (1.5)

Standardna veličina lista papira A4 format- 21x29,7 cm ili 2480x3508 piksela pri 300 dpi. Dimenzije ostalih formata listova mogu se vidjeti na stranici Wikipedije, ali samo ne zaboravite da su dimenzije tamo navedene u milimetrima i inčima, tj. u postavkama na ovoj stranici trebate odabrati odgovarajuću vrijednost.

Ako trebate promijeniti veličinu fotografije bez uzimanja u obzir DPI (točaka po inču), to jest, poštujući samo proporcije navedenog formata, tada za to morate postaviti parametar "Veličina u DPI" na "0" u postavke.

Izvorna slika se ne mijenja ni na koji način. Dobit ćete još jednu obrađenu sliku.

1) Navedite sliku u formatu BMP, GIF, JPEG, PNG, TIFF:

2) Unesi željeni format fotografija u centimetrima, milimetrima ili inčima
Potreban format: x u milimetrima (mm) centimetrima (cm) inčima (inči)
(Zadani format je 15x10 koji odgovara za pejzaž(horizontalna) fotografija, za portret(vertikalna) fotografija, ove vrijednosti treba zamijeniti, odnosno navesti 10x15, kao što je navedeno u tablici) Veličina u DPI: (0 = "ignoriraj DPI, renderiraj prema omjeru širine i visine na temelju navedenog formata")
(Veličina originalne jpg slike u DPI može se dobiti čitanjem metapodataka) Vrsta promjene veličine točno na navedene dimenzije:
Zadržavanje proporcija i obrezivanje suvišnih rubova
Guma se rasteže ili sužava, bez podrezivanja
Bez obrezivanja, s crvenom ružičastom ljubičastom plavom plavom bojom nebesko limeta zelenom žutom narančastom crnom sivom bijelom pozadinom oko rubova Priključi na: gore lijevo središte dolje desno od slike

Slike su sastavni dijelovi gotovo svake stranice, pa je promjena veličine nezamjenjiva. Postoje 2 načina za promjenu veličine slike: grafički urednik ili programski html kod na css.

Ako u css kod na html ne postavljajte veličinu slike, tada će njezina visina i širina na web mjestu biti iste u pikselima kao u izvorna datoteka. Odnosno, možete promijeniti veličinu slike bez css-a i html-a, koristeći samo grafički uređivač, a ona će se automatski promijeniti na web mjestu ako ne odredite njezinu veličinu. Ali postoje slučajevi kada je potrebno programski promijeniti veličinu slike u css u html.

1. Promjena slike u grafičkom uređivaču

Možete promijeniti veličinu slike u bilo kojem grafičkom uređivaču (photoshop, gimp, xnview) i ona će se automatski promijeniti na web mjestu u skladu s izvornom veličinom.

Prednosti metode:

Slika se učitava brže jer ne morate preuzimati dodatne podatke (piksele) koji će se potom programski komprimirati.

minusi:

Grafički urednici slabo komprimiraju slike manje od 200 piksela u širinu i visinu.

Kad god je moguće i prikladno, pokušajte promijeniti veličinu u grafičkom uređivaču tako da se slike učitavaju brže nego s promjena programa. Razlika u brzini može biti desetke puta.

2. Promjena slike u css kodu na stranici

Prednosti:

Brže i praktičnije za postavljanje veličine. Ova metoda smanjenje slike obično se koristi radi praktičnosti. Na primjer, kada jedna slika može imati mnogo različitih veličina, često je prikladnije promijeniti vrijednosti iste programski nego učitati sve formate jedne slike uređene u grafičkom uređivaču.

Kvalitativno komprimirane male slike, manje od 200 piksela u visinu ili širinu, za razliku od grafičkih urednika. Ako želite da veličina slike na stranici bude manja od 200 px, bolje je da izvorna veličina bude 30-50% (260-300 px) veća za spremanje dobra kvaliteta kada se smanjuje.

Istodobno, razlika u brzini učitavanja stranice neće se osjetiti, jer male slike zauzimaju vrlo malo prostora i ako im povećate veličinu za 30%, nećete primijetiti nikakve promjene. Ali primijetite razliku u kvaliteti.

minusi:

Učitavanje programski komprimiranih slika traje dulje jer se veličina mijenja tek nakon preuzimanja izvorne verzije. Stoga, ako je veličina slike veća od 200 piksela u širinu ili visinu, bolje je komprimirati je u grafičkom uređivaču kako bi stranica radila brže.

kako promijeniti veličinu html slike koristeći css

Za promjenu veličine slike u html-u css koriste se svojstva širina (širina) i visina (visina) unutar stilskog atributa. Možete napisati samo širinu ili visinu, a preostala neodređena vrijednost automatski će se promijeniti uz zadržavanje omjera slike. Na primjer, određivanjem samo širine slike pomoću širine, njezina će se visina automatski promijeniti, zadržavajući omjer slike. I obrnuto, kada odredite samo visinu (visina), njegova širina će se također automatski promijeniti, čuvajući omjer slike.

Primjer koda bez navođenja dimenzija slike

Rezultat u pregledniku

Šifra stranice

Primjer koda s promjenom veličine slike u .css

Rezultat u pregledniku

Šifra stranice

style="width:150px; ">

Oba gornja primjera koriste istu sliku veličine 300x184 px (širina i visina). U 1 primjeru, slika je prikazana u pregledniku bez promjena s izvornom veličinom od 300x184px, budući da širina i visina nisu navedene u css-u. A u drugom primjeru, slika je prikazana u pregledniku smanjena 2 puta, budući da je širina bila 150 px, visina se prema tome automatski promijenila na 92 ​​px. Kao što vidite, svojstvo visine možda uopće nije određeno jer se automatski mijenja proporcionalno širini.

Ako ponudite obje opcije: širina (širina), visina (visina) i neće odgovarati proporcijama, tada će slika imati točno tu veličinu, ali u komprimiranom ili rastegnutom obliku, ovisno o vrijednostima.

Zašto je nepoželjno povećavati slike

Važno: Povećanje veličine slike prati gubitak kvalitete. Kada mijenjate na bilo koji način, važno je postaviti manje vrijednosti nego na izvornoj slici, odnosno samo smanjiti.

Ako postavite veličinu piksela da bude veća od originalne slike, kvaliteta će se pogoršati. A gubitak kvalitete će biti jasno vidljiv, jer računalo ne može dodati nove piksele, može samo povećati veličinu postojećih. Što je povećanje slike veće od izvorne vrijednosti, to je lošija njezina kvaliteta i jasnije vidljivi kvadratni pikseli.

Za promjenu veličine slike pomoću HTML-a za oznaku navedeni su atributi width (širina) i height (visina). Kao vrijednost koriste se pikseli, a argumenti moraju odgovarati fizičkim dimenzijama slike. Na primjer, na sl. 10.6 prikazuje sliku koja ima dimenzije 100x111 piksela.

Riža. 10.6. slika u originalnoj veličini

Sukladno tome, HTML kod za postavljanje ove slike prikazan je u primjeru 10.4.

Primjer 10.4. Crtanje dimenzija

Ako su dimenzije slike izričito navedene, preglednik ih koristi za prikaz praznog područja koje odgovara slici tijekom učitavanja dokumenta (Sl. 10.7). U suprotnom, preglednik čeka da se slika potpuno učita prije promjene širine i visine slike (Slika 10.8). U tom slučaju može doći do preoblikovanja teksta, jer u početku veličina slike nije poznata i automatski je postavljena na malu.

Riža. 10.7. Veličina slike nije navedena i još nije učitana

Riža. 10.8. Slika je učitana, tekst je preoblikovan

Širina i visina slike mogu se mijenjati gore i dolje. Međutim, to ni na koji način ne utječe na brzinu preuzimanja slike, jer veličina datoteke ostaje nepromijenjena. Stoga, smanjite sliku s oprezom, jer. ovo može izazvati zabunu među čitateljima, zašto se tako mali crtež toliko dugo učitava. Ali povećanje veličine dovodi do suprotnog učinka - veličina slike je velika, ali se datoteka učitava brže u odnosu na sliku iste veličine.

Na sl. 10.9 prikazuje istu sliku kao što je prikazano na sl. 10,6, ali udvostručen u širinu i visinu.

Riža. 10.9. Prikaz uvećane slike u pregledniku

Kod za takav crtež ostat će gotovo nepromijenjen i prikazan je u primjeru 10.5.

Primjer 10.5. Promjena veličine slike

Takvo mijenjanje veličine naziva se ponovno uzorkovanje, a algoritam preglednika je inferioran u svojim mogućnostima u odnosu na grafičke uređivače. Stoga je potrebno povećati sliku na ovaj način samo u posebnim slučajevima, inače se kvaliteta slike previše pogoršava. Bolje je koristiti neku vrstu grafičkog programa. Iznimka su crteži koji sadrže pravokutne površine. Na sl. Slika 10.10 prikazuje datoteku uzorka koja zauzima 54 bajta i ima izvornu veličinu od 8 x 8 piksela, skaliranu do 150 piksela.

Riža. 10.10. Uvećana slika

Preglednici koriste dva algoritma za ponovno uzorkovanje - bikubični (daje glatke rubove i glatki tonski raspon boja) i najbliže točke (čuva izvorni skup boja i oštre rubove). Novije verzije preglednika koriste bikubni algoritam, dok stariji preglednici, naprotiv, koriste algoritam najbliže točke.

Prije odgovora na pitanje kako ubaciti sliku u html?”, treba napomenuti da se ne isplati preopterećivati ​​web stranice ogromnom količinom grafičkog materijala, jer to ne samo da će poboljšati vizualnu percepciju resursa od strane korisnika, već i povećati vrijeme učitavanja stranice.

Prilikom izrade web stranica najčešće se koriste grafički formati PNG, GIF i JPEG, a za dizajnerski rad sa slikama - grafički uređivač Adobe Photoshop, koji ima bogate značajke za sažimanje i promjenu veličine slika bez gubitka kvalitete, što je nevjerojatno važno za web razvoj.

Kako umetnuti sliku u HTML?

Za umetanje slike u HTML stranicu koristi se jedna jednostavna oznaka:

,

gdje je xxx adresa slike. U slučaju da je slika u istom direktoriju kao i stranica, oznaka će izgledati ovako:

No, brzi i stabilni internet još nije stigao do svih krajeva svijeta i događa se da se slika na web stranici jednostavno ne učita. Za takve slučajeve postoji koncept alternativnog teksta.

Prikazuje se umjesto slike u trenutku njezine nedostupnosti, učitavanja ili u načinu preglednika "bez slika". Dodaje se pomoću atributa alt oznake. .

Primjer dodavanja alternativnog teksta u grafičku datoteku:

Dodjeljivanje veličina slika u HTML-u

Za promjenu dimenzija prikaza slikovne datoteke koristite oznake visine i širine, gdje je visina visina, a širina širina, mjerena u pikselima.

Prilikom korištenja ovih atributa, preglednik prvo dodjeljuje prostor za grafički sadržaj, priprema opći izgled stranice, prikazuje tekst, a zatim učitava samu sliku.

Slika se postavlja u pravokutnik zadanih dimenzija, a ako su parametri manji ili veći od originalnih, slika se razvlači ili komprimira.

Ako se atributi visine i širine ne koriste, preglednik odmah učitava sliku, odgađajući prikaz teksta i drugih elemenata stranice.

Ovi parametri se mogu odrediti u pikselima (veličina slike je konstantna i ne ovisi o razlučivosti zaslona korisnika) ili u postocima (veličina slike ovisi o razlučivosti zaslona).

Na primjer:

Treba imati na umu da u trenutku kada promijenite izvornu veličinu slike, potrebno je zadržati njezine proporcije.

Da biste to učinili, dovoljno je navesti vrijednost samo jednog od parametara ( širina ili visina), a vrijednost drugog preglednika izračunat će se automatski.

Lokacija slike u HTML-u

Kao i kod mnogih HTML oznaka, primijenite atribut align koji poravnava sliku:

- slika se nalazi iznad teksta;

- slika se nalazi ispod teksta;

- slika se nalazi lijevo od teksta;

- slika se nalazi desno od teksta.

Link slika

To se radi na sljedeći način:

Kao što vidite, grafički umetak može biti poveznica i, kada se klikne, preusmjerava na bilo koju adresu napisanu u punom ili skraćenom obliku.

Kako mogu sliku učiniti pozadinom u HTML-u?

Slika ne samo da se može umetnuti na stranicu kao vidljivi objekt, već se može napraviti i kao pozadinska slika. Da biste definirali sliku kao pozadinu, morate oznaci dodati atribut background=”xxx”, gdje je xxx adresa slike, specificirana na isti način kao u gornjim primjerima.

Na primjer, postavimo sljedeću sliku teksture kao pozadinsku sliku:

Spremite sliku u mapu s unaprijed pripremljenom stranicom i napišite sljedeće retke:

Pozadina s tekstom.

Pozadinska slika na stranici je postavljena.

Ne znate kako povećati veličinu slike? Ovo je vrlo jednostavan zadatak jer je sve što trebate već instalirano na vašem računalu. Pročitajte ovaj vodič i naučit ćete kako promijeniti veličinu fotografije pomoću 5 jednostavnih alata.

Metoda 1: Kako promijeniti veličinu slike u programu Microsoft Paint

1. Pronađite i pokrenite MS Paint. Predinstaliran je na svim verzijama operativnog sustava Windows. Start > Svi programi > Pribor > Bojanje:

1. Povucite sliku u prozor Paint ili upotrijebite Izbornik > Otvori (Ctrl+O).
2. U glavnom izborniku programa pronađite stavku " Promjena veličine"I odaberite je:

1. Otvorit će se ploča za promjenu veličine i omjera slike. Možete odrediti vrijednost u pikselima. Ne zaboravite označiti okvir " zadržati proporcije". U suprotnom, slika će biti deformirana:

1. Za povećanje veličine slike kliknite na gumb OK i spremite fotografiju.

savjet:

• Ako ne možete odrediti veličinu svoje fotografije, a da je ne razvučete, možete upotrijebiti alat za izrezivanje da uklonite neželjene rubove. Kako to učiniti opisano je u stavku 3;
• Da biste brže otvorili fotografiju, desnom tipkom miša kliknite na nju i odaberite " Otvori pomoću programa Paint»;
• Najbolje je spremiti sliku u istom formatu kao i original.

Metoda 2. Kako promijeniti veličinu slike u MS Photo Gallery

1. Ako Microsoft Photo Gallery nije instaliran na vašem računalu ( Start > Galerija fotografija), trebate ga preuzeti i instalirati kao dio Windows Essentials 2012 ;
2. Pokrenite MS Photo Gallery i pronađite svoju grafičku datoteku;
3. Desnom tipkom miša kliknite na njega i odaberite "Promijeni veličinu...":

1. Odaberite unaprijed postavljeno: " Mali 640 piksela“, „Srednji 1024”, „Veliki 1280” itd.

1. kliknite " Promijenite veličinu i spremite". Nakon što povećate veličinu slike, slika će biti smještena u istu mapu, original će također ostati u njoj.

savjet:

• Ako želite postaviti točnu veličinu slike, u padajućem izborniku odaberite " Prilagođen» i postavite veličinu za veću stranu fotografije;
• Za promjenu veličine više fotografija u isto vrijeme, odaberite ih dok držite pritisnutu tipku Ctrl.

Metoda 3. Kako promijeniti veličinu slike u Photoscapeu

Možete promijeniti veličinu slike u Photoshopu. Ili za ovo upotrijebite Photoscape.

1. Preuzmite Photoscape i instalirajte ga. Pokrenite program;
2. Idite na karticu "Uređivač" i pronađite fotografiju koju želite urediti:

1. Na dnu slike nalazi se gumb "Promijeni veličinu", kliknite na njega.
2. Postavite novu veličinu fotografije. Provjerite opciju " Održavajte omjer slike je omogućen i pritisnite tipku OK:

1. Spremite uređenu sliku.

savjet:

• Ako trebate promijeniti veličinu više slika, upotrijebite " Skupni uređivač". Dodajte mapu i promijenite veličinu svih fotografija u njoj;
• Ako ne znate točnu veličinu, možete postaviti "Postotak" izvorne veličine.

Metoda 4. Kako promijeniti veličinu slike u IrfanViewu

1. Instalirajte IrfanView - odličan alat za pregled i povećanje veličine slike;
2. Dodajte fotografiju povlačenjem u prozor programa ili klikom na prvi gumb na alatnoj traci:

1. Idite na karticu "Slika", odaberite " Promjena veličine/proporcije» ( ctrl+r);
2. Postavite novu veličinu u pikselima, centimetrima, inčima ili postotku izvorne slike:

1. Spremite sliku.

savjet:

• Možete koristiti standardne veličine: 640 x 480 piksela, 800 x 600 piksela, 1024 x 768 piksela itd.;
• Za održavanje visoke kvalitete fotografija, provjerite je li postavka DPI postavljena na najmanje 300.

Metoda 5. Kako promijeniti veličinu slike na mreži

1. Za povećanje veličine slike na mreži idite na web mjesto PicResize.
2. Pritisnite gumb pretraživati” za odabir fotografije. kliknite " Nastaviti»:

1. Odaberite postotak izvorne slike, primjerice 50% manje. Alat će prikazati veličinu izlazne slike. Alternativno, možete unijeti točnu veličinu odabirom " veličina po izboru»: